widget: input name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.7.15",
+  "version": "0.7.18",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",

public/locales/en/setting.json

@@ -248,7 +248,7 @@
     "remark": "Remarks",
     "custom_style_tip": "if you want customize the widget position more precisely, use the widget element ID in your HTML or CSS file, like this",
     "param_host": "Assign the user chatting with visitor(User ID)",
-    "param_auto_reg": "true: Auto register a new user if not exist, false: need visitor to input email to register",
+    "param_auto_reg": "true: Auto register a new user if not exist, false: need visitor to input email and name to register",
     "param_login_token": "If you are using your own platform's existing user info to generate VoceChat new account, this is the login token generated by your platform, for more details, please refer to: https://doc.voce.chat/zh-cn/login-with-other-account. Don't fill this out for default scenarios (no 3-rd party user system)!",
     "param_theme_color": "The theme color of widget",
     "param_close_width": "The width while widget closed",

public/locales/zh/setting.json

@@ -241,8 +241,8 @@
     "remark": "备注",
     "custom_style_tip": "如果你想更精确控制挂件的样式，可以借助 widget 元素的 ID，自行写 CSS 样式，加到自己的 html 或者 css 文件中，如下所示：",
     "param_host": "指定和谁聊天 (用户 ID)",
-    "param_auto_reg": "true:访客无需输入邮箱，直接注册;false:访客需要输入邮箱注册",
-    "param_login_token": "仅在用您的自有平台账号生成voce账号时需要，普通场景请不要填写，详见:https://doc.voce.chat/zh-cn/login-with-other-account",
+    "param_auto_reg": "true:访客无需输入邮箱，直接注册;false:访客需要输入邮箱和用户名注册",
+    "param_login_token": "仅在用您的自有平台账号生成 voce 账号时需要，普通场景请不要填写，详见:https://doc.voce.chat/zh-cn/login-with-other-account",
     "param_theme_color": "挂件的主题色",
     "param_close_width": "挂件关闭态的宽度",
     "param_close_height": "挂件关闭态的高度",

src/widget/Popup/Login/index.tsx

@@ -30,14 +30,14 @@ const Login = () => {
   const [loginByToken, { isLoading: isLogging, isError: tokenLoginError }] = useLoginMutation();
   //  const [login]= useLoginMutation();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
-  const registerUser = (name: string, auto?: boolean) => {
+  const registerUser = ({ name, email, auto }: { name: string; email: string; auto?: boolean }) => {
     const rand = randomText();
-    const nameFromEmail = auto ? name : `${name}-${rand}`;
-    const randomEmail = auto ? `${name}@${from}` : `${name}-${rand}-${from}`;
+    const _name = auto ? name : `${name}-${rand}`;
+    const _email = auto ? `${name}@${from}` : email;
     register({
-      name: nameFromEmail,
-      email: randomEmail,
-      password: nameFromEmail
+      name: _name,
+      email: _email,
+      password: `${_name}${_email}${rand}`
     });
   };
   const handleSubmit = (evt: FormEvent<HTMLFormElement>) => {
@@ -50,14 +50,15 @@ const Login = () => {
     }
     const data = new FormData(form);
     const name = data.get("username") as string;
+    const email = data.get("email") as string;
     // const email = data.get("email") as string;
     console.log("name", name);
-    registerUser(name, false);
+    registerUser({ name, email, auto: false });
     // const content = new FormData(form).get("prompt") as string;
   };
   useEffect(() => {
     if (autoReg && !token) {
-      registerUser(`w-${randomText()}`, true);
+      registerUser({ name: `w-${randomText()}`, email: "", auto: true });
     } else if (token) {
       loginByToken({ key: token, type: "thirdparty" });
     }
@@ -101,7 +102,8 @@ const Login = () => {
       <div className="bg-white dark:bg-gray-700 border dark:border-gray-500 rounded-lg">
         <form className="px-4 py-3 flex flex-col gap-2" onSubmit={handleSubmit}>
           {/* input email as username */}
-          <Input required placeholder="Email" type="email" name="username" />
+          <Input required placeholder="Name" type="text" name="username" />
+          <Input required placeholder="Email" type="email" name="email" />
           <StyledButton
             style={{ backgroundColor: color, color: fgColor }}
             disabled={isLoading}