refactor(flat-components): refactor LoginAccount to specify input type (

#2003)
netless-io · Aug 17, 2023 · df08bba · df08bba
1 parent ee82b55
commit df08bba
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/packages/flat-components/src/components/LoginPage/BindingPhonePanel/index.tsx b/packages/flat-components/src/components/LoginPage/BindingPhonePanel/index.tsx
@@ -102,6 +102,7 @@ export const BindingPhonePanel: React.FC<BindingPhonePanelProps> = ({
                         <LoginAccount
                             countryCode={countryCode}
                             handleCountryCode={code => setCountryCode(code)}
+                            onlyPhone={true}
                             placeholder={t("enter-phone")}
                         />
                     </Form.Item>

diff --git a/packages/flat-components/src/components/LoginPage/LoginAccount/index.tsx b/packages/flat-components/src/components/LoginPage/LoginAccount/index.tsx
@@ -30,6 +30,10 @@ export interface LoginAccountProps {
     value?: string;
     handleCountryCode?: (code: string) => void;
 
+    // to specify the input method
+    onlyPhone?: boolean;
+    onlyEmail?: boolean;
+
     // If you pass `handleType` from parent component, it says you want to get 'both' account input.
     // The 'both' account input means that it has the functions of phone input and email input at the same time.
     handleType?: (type: PasswordLoginType) => void;
@@ -46,13 +50,14 @@ export const LoginAccount: React.FC<LoginAccountProps> = ({
     placeholder,
     password,
     value,
+    onlyPhone,
+    onlyEmail,
     accountHistory,
     handleType,
     handleCountryCode,
     onHistoryChange,
     ...restProps
 }) => {
-    const onlyPhone = !handleType;
     const defaultEmail = accountType === PasswordLoginType.Email;
     const defaultPhone = accountType === PasswordLoginType.Phone;
 
@@ -64,6 +69,11 @@ export const LoginAccount: React.FC<LoginAccountProps> = ({
             return;
         }
 
+        if (onlyEmail) {
+            setType(PasswordLoginType.Email);
+            return;
+        }
+
         if (defaultEmail) {
             if (!value || !validateIsPhone(value)) {
                 setType(PasswordLoginType.Email);
@@ -84,7 +94,7 @@ export const LoginAccount: React.FC<LoginAccountProps> = ({
         if (type && handleType) {
             handleType(type);
         }
-    }, [value, type, defaultEmail, defaultPhone, onlyPhone, handleType]);
+    }, [value, type, defaultEmail, defaultPhone, onlyPhone, handleType, onlyEmail]);
 
     return (
         <Input

diff --git a/packages/flat-components/src/components/LoginPage/LoginWithCode/index.tsx b/packages/flat-components/src/components/LoginPage/LoginWithCode/index.tsx
@@ -173,6 +173,7 @@ export const LoginWithCode: React.FC<LoginWithCodeProps> = ({
                             <LoginAccount
                                 countryCode={countryCode}
                                 handleCountryCode={code => setCountryCode(code)}
+                                onlyPhone={true}
                                 placeholder={t("enter-phone")}
                             />
                         </Form.Item>

diff --git a/packages/flat-components/src/components/LoginPage/RebindingPhonePanel/index.tsx b/packages/flat-components/src/components/LoginPage/RebindingPhonePanel/index.tsx
@@ -90,6 +90,7 @@ export const RebindingPhonePanel: React.FC<RebindingPhonePanelProps> = ({
                         <LoginAccount
                             countryCode={countryCode}
                             handleCountryCode={code => setCountryCode(code)}
+                            onlyPhone={true}
                             placeholder={t("enter-phone")}
                         />
                     </Form.Item>