fix(web): fix only display either phone or email login (#1888)

* fix(web): fix only display either phone or email login * delete comment
labring · Mar 4, 2024 · 896386d · 896386d
1 parent a9bc541
commit 896386d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 21 deletions.
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -400,7 +400,7 @@
     "ToRegister": "去注册",
     "ToLogin": "去登录",
     "PasswordLogin": "密码登录",
-    "PhoneLogin": "验证码登录",
+    "PhoneLogin": "手机号登录",
     "Account": "用户名",
     "AccountPlaceholder": "请输入用户名",
     "Password": "密码",
@@ -422,7 +422,7 @@
     "PleaseBindUser": "请绑定对应用户",
     "Email": "邮箱",
     "EmailPlaceholder": "请输入你的邮箱",
-    "EmailLogin": "验证码登录"
+    "EmailLogin": "邮箱登录"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -758,4 +758,4 @@
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
   }
-}
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -400,7 +400,7 @@
     "ToRegister": "去注册",
     "ToLogin": "去登录",
     "PasswordLogin": "密码登录",
-    "PhoneLogin": "验证码登录",
+    "PhoneLogin": "手机号登录",
     "Account": "用户名",
     "AccountPlaceholder": "请输入用户名",
     "Password": "密码",
@@ -422,7 +422,7 @@
     "PleaseBindUser": "请绑定对应用户",
     "Email": "邮箱",
     "EmailPlaceholder": "请输入你的邮箱",
-    "EmailLogin": "验证码登录"
+    "EmailLogin": "邮箱登录"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -758,4 +758,4 @@
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
   }
-}
+}
diff --git a/web/src/pages/auth/signin/index.tsx b/web/src/pages/auth/signin/index.tsx
@@ -14,7 +14,7 @@ import LoginByPhonePanel from "./mods/LoginByPhonePanel";
 import useAuthStore from "@/pages/auth/store";
 import useGlobalStore from "@/pages/globalStore";
 
-type providersTypes =
+export type providersTypes =
   | PROVIDER_NAME.EMAIL
   | PROVIDER_NAME.GITHUB
   | PROVIDER_NAME.PHONE
@@ -78,13 +78,9 @@ export default function SignIn() {
           ) : currentProvider === PROVIDER_NAME.PASSWORD ? (
             <LoginByPasswordPanel
               showSignupBtn={!!passwordProvider?.register}
-              showPhoneSigninBtn={defaultProvider.name === PROVIDER_NAME.PHONE}
-              showEmailSigninBtn={defaultProvider.name === PROVIDER_NAME.EMAIL}
-              switchLoginType={() =>
-                defaultProvider.name === PROVIDER_NAME.PHONE
-                  ? setCurrentProvider(PROVIDER_NAME.PHONE)
-                  : setCurrentProvider(PROVIDER_NAME.EMAIL)
-              }
+              showPhoneSigninBtn={!!phoneProvider}
+              showEmailSigninBtn={!!emailProvider}
+              setCurrentProvider={setCurrentProvider}
               isDarkMode={darkMode}
             />
           ) : null}

diff --git a/web/src/pages/auth/signin/mods/LoginByPasswordPanel/index.tsx b/web/src/pages/auth/signin/mods/LoginByPasswordPanel/index.tsx
@@ -12,7 +12,9 @@ import {
 import { t } from "i18next";
 
 import { OutlineViewOffIcon, OutlineViewOnIcon } from "@/components/CommonIcon";
-import { Routes } from "@/constants";
+import { PROVIDER_NAME, Routes } from "@/constants";
+
+import { providersTypes } from "../..";
 
 import { useGroupMemberAddMutation } from "@/pages/app/collaboration/service";
 import {
@@ -27,13 +29,13 @@ type FormData = {
 };
 
 export default function LoginByPasswordPanel({
-  switchLoginType,
+  setCurrentProvider,
   showSignupBtn,
   showPhoneSigninBtn,
   showEmailSigninBtn,
   isDarkMode,
 }: {
-  switchLoginType: () => void;
+  setCurrentProvider: (provider: providersTypes) => void;
   showSignupBtn: boolean;
   showPhoneSigninBtn: boolean;
   showEmailSigninBtn: boolean;
@@ -159,12 +161,34 @@ export default function LoginByPasswordPanel({
             <div></div>
           )}
           <div className="flex">
-            {(showPhoneSigninBtn || showEmailSigninBtn) && (
-              <Button className="!px-2 text-lg" variant={"text"} onClick={switchLoginType}>
-                {showPhoneSigninBtn ? t("AuthPanel.PhoneLogin") : t("AuthPanel.EmailLogin")}
+            {showPhoneSigninBtn && (
+              <Button
+                className="!px-2 text-lg"
+                variant={"text"}
+                onClick={() => {
+                  setCurrentProvider(PROVIDER_NAME.PHONE);
+                }}
+              >
+                {t("AuthPanel.PhoneLogin")}
+              </Button>
+            )}
+            {showSignupBtn && showPhoneSigninBtn && (
+              <div className="mx-3 flex items-center">
+                <span className="h-3 w-[1px] bg-primary-500 text-primary-500"></span>
+              </div>
+            )}
+            {showEmailSigninBtn && (
+              <Button
+                className="!px-2 text-lg"
+                variant={"text"}
+                onClick={() => {
+                  setCurrentProvider(PROVIDER_NAME.EMAIL);
+                }}
+              >
+                {t("AuthPanel.EmailLogin")}
               </Button>
             )}
-            {showSignupBtn && (showPhoneSigninBtn || showEmailSigninBtn) && (
+            {showSignupBtn && showEmailSigninBtn && (
               <div className="mx-3 flex items-center">
                 <span className="h-3 w-[1px] bg-primary-500 text-primary-500"></span>
               </div>