feat: add nickname edit in register view

client/shared/i18n/langs/en-US/translation.json

@@ -381,6 +381,7 @@
   "kfaddd61d": "Chat Service",
   "kfbecf2a7": "Are you sure you want to delete the panel group [{{name}}] and all subordinate panels",
   "kfc07c0a4": "Here is the beginning of all messages, please feel free to speak up.",
+  "kfc0ccc0e": "It can be modified at any time in the user settings later",
   "kfd340bbc": "Manage members",
   "kfe731dfc": "Action"
 }

client/shared/i18n/langs/zh-CN/translation.json

@@ -381,6 +381,7 @@
   "kfaddd61d": "聊天服务",
   "kfbecf2a7": "确定要删除面板组 【{{name}}】 以及下级的所有面板么",
   "kfc07c0a4": "这里是所有消息的开始，请畅所欲言。",
+  "kfc0ccc0e": "后续在用户设置中可以随时修改",
   "kfd340bbc": "管理成员",
   "kfe731dfc": "操作"
 }

client/shared/model/user.ts

@@ -142,13 +142,20 @@ export async function verifyEmailWithOTP(
  * @param email 邮箱
  * @param password 密码
  */
-export async function registerWithEmail(
-  email: string,
-  password: string,
-  emailOTP?: string
-): Promise<UserLoginInfo> {
+export async function registerWithEmail({
+  email,
+  password,
+  nickname,
+  emailOTP,
+}: {
+  email: string;
+  password: string;
+  nickname?: string;
+  emailOTP?: string;
+}): Promise<UserLoginInfo> {
   const { data } = await request.post('/api/user/register', {
     email,
+    nickname,
     password,
     emailOTP,
   });

client/web/src/components/TipIcon.tsx

@@ -7,7 +7,7 @@ export const TipIcon: React.FC<{
 }> = React.memo(({ content }) => {
   return (
     <DelayTip overlay={content}>
-      <Icon icon="mdi:alert-circle-outline" />
+      <Icon icon="mdi:alert-circle-outline" className="cursor-help" />
     </DelayTip>
   );
 });

client/web/src/routes/Entry/RegisterView.tsx

@@ -7,6 +7,7 @@ import {
   useAsyncFn,
   useAsyncRequest,
   getGlobalConfig,
+  useWatch,
 } from 'tailchat-shared';
 import React, { useState } from 'react';
 import { string } from 'yup';
@@ -19,15 +20,18 @@ import { useNavToView } from './utils';
 import { EntryInput } from './components/Input';
 import { SecondaryBtn } from './components/SecondaryBtn';
 import { PrimaryBtn } from './components/PrimaryBtn';
+import { TipIcon } from '@/components/TipIcon';
 
 /**
  * 注册视图
  */
 export const RegisterView: React.FC = React.memo(() => {
   const [email, setEmail] = useState('');
+  const [nickname, setNickname] = useState('');
   const [password, setPassword] = useState('');
   const [emailOTP, setEmailOTP] = useState('');
   const [sendedEmail, setSendedEmail] = useState(false);
+  const [customNickname, setCustomNickname] = useState(false);
   const navigate = useNavigate();
   const navRedirect = useSearchParam('redirect');
 
@@ -44,7 +48,12 @@ export const RegisterView: React.FC = React.memo(() => {
       .max(40, t('密码最长限制40个字符'))
       .validate(password);
 
-    const data = await registerWithEmail(email, password, emailOTP);
+    const data = await registerWithEmail({
+      email,
+      password,
+      nickname,
+      emailOTP,
+    });
 
     setGlobalUserLoginInfo(data);
     await setUserJWT(data.token);
@@ -54,7 +63,7 @@ export const RegisterView: React.FC = React.memo(() => {
     } else {
       navigate('/main');
     }
-  }, [email, password, emailOTP, navRedirect]);
+  }, [email, nickname, password, emailOTP, navRedirect]);
 
   const [{ loading: sendEmailLoading }, handleSendEmail] =
     useAsyncRequest(async () => {
@@ -63,6 +72,12 @@ export const RegisterView: React.FC = React.memo(() => {
       setSendedEmail(true);
     }, [email]);
 
+  useWatch([email, customNickname], () => {
+    if (!customNickname) {
+      setNickname(getEmailAddress(email));
+    }
+  });
+
   const navToView = useNavToView();
 
   return (
@@ -102,6 +117,28 @@ export const RegisterView: React.FC = React.memo(() => {
           </>
         )}
 
+        <div className="mb-4 relative">
+          <div className="mb-2 flex items-center">
+            <span className="mr-1">{t('昵称')}</span>
+            <TipIcon content={t('后续在用户设置中可以随时修改')} />
+          </div>
+          <EntryInput
+            name="reg-nickname"
+            type="text"
+            disabled={!customNickname}
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+          />
+
+          <Icon
+            className="absolute bottom-1 right-1 w-8 h-8 p-2 rounded cursor-pointer bg-opacity-20 bg-black z-10"
+            icon={customNickname ? 'mdi:pencil-off' : 'mdi:pencil'}
+            onClick={() =>
+              setCustomNickname((customNickname) => !customNickname)
+            }
+          />
+        </div>
+
         <div className="mb-4">
           <div className="mb-2">{t('密码')}</div>
           <EntryInput
@@ -132,3 +169,7 @@ export const RegisterView: React.FC = React.memo(() => {
   );
 });
 RegisterView.displayName = 'RegisterView';
+
+function getEmailAddress(email: string) {
+  return email.split('@')[0];
+}

server/services/core/user/user.service.ts

@@ -84,6 +84,7 @@ class UserService extends TcService {
       params: {
         username: { type: 'string', optional: true, max: 40 },
         email: { type: 'email', optional: true, max: 40 },
+        nickname: { type: 'string', optional: true, max: 40 },
         password: { type: 'string', max: 40 },
         emailOTP: { type: 'string', optional: true },
       },
@@ -395,6 +396,7 @@ class UserService extends TcService {
       {
         username?: string;
         email?: string;
+        nickname?: string;
         password: string;
         emailOTP?: string;
       },
@@ -411,7 +413,8 @@ class UserService extends TcService {
       throw new Error(t('服务器不允许新用户注册'));
     }
 
-    const nickname = params.username ?? getEmailAddress(params.email);
+    const nickname =
+      params.nickname || (params.username ?? getEmailAddress(params.email));
     const discriminator = await this.adapter.model.generateDiscriminator(
       nickname
     );