refactor(flat-pages): remember phone to bind

packages/flat-components/src/components/LoginPage/BindingPhonePanel/index.tsx

@@ -19,7 +19,7 @@ export interface BindingPhonePanelProps {
         countryCode: string,
         phone: string,
     ) => Promise<BindingPhoneSendCodeResult>;
-    needRebindingPhone: () => void;
+    needRebindingPhone: (phone: string) => void;
 }
 
 interface BindingFormValues {
@@ -81,9 +81,10 @@ export const BindingPhonePanel: React.FC<BindingPhonePanelProps> = ({
         }
     }, [form]);
 
-    const handleSendVerificationCode = async (): Promise<void> => {
+    const onRebinding = async (): Promise<void> => {
+        const { phone } = form.getFieldsValue();
         if (await requestRebinding({ t })) {
-            needRebindingPhone();
+            needRebindingPhone(phone);
         }
     };
 
@@ -109,10 +110,10 @@ export const BindingPhonePanel: React.FC<BindingPhonePanelProps> = ({
 
                     <Form.Item name="code" rules={[codeValidator]}>
                         <LoginSendCode
-                            handleSendVerificationCode={handleSendVerificationCode}
                             isAccountValidated={isAccountValidated}
                             sendVerificationCode={sendVerificationCode}
                             type={type}
+                            onRebinding={onRebinding}
                         />
                     </Form.Item>
                 </Form>

packages/flat-components/src/components/LoginPage/LoginSendCode/index.tsx

@@ -15,16 +15,15 @@ export interface LoginSendCodeProps {
     type: PasswordLoginType;
     // BindingPhoneSendCodeResult for binding phone page
     sendVerificationCode: () => Promise<boolean | BindingPhoneSendCodeResult>;
-
     // for rebinding phone
-    handleSendVerificationCode?: () => void;
+    onRebinding?: () => void;
 }
 
 export const LoginSendCode: React.FC<LoginSendCodeProps> = ({
     type,
     isAccountValidated,
     sendVerificationCode,
-    handleSendVerificationCode,
+    onRebinding,
     ...restProps
 }) => {
     const isUnMountRef = useIsUnMounted();
@@ -71,26 +70,15 @@ export const LoginSendCode: React.FC<LoginSendCodeProps> = ({
 
                 // we say the phone is already binding when error message contains `RequestErrorCode.SMSAlreadyBinding`
                 // and then we can enter rebinding page to rebind.
-                if (
-                    error.message.indexOf(RequestErrorCode.SMSAlreadyBinding) > -1 &&
-                    handleSendVerificationCode
-                ) {
-                    handleSendVerificationCode();
+                if (error.message.indexOf(RequestErrorCode.SMSAlreadyBinding) > -1 && onRebinding) {
+                    onRebinding();
                     return;
                 }
 
                 errorTips(error);
             }
         }
-    }, [
-        isAccountValidated,
-        sp,
-        sendVerificationCode,
-        t,
-        type,
-        isUnMountRef,
-        handleSendVerificationCode,
-    ]);
+    }, [isAccountValidated, sp, sendVerificationCode, t, type, isUnMountRef, onRebinding]);
 
     // Workaround to prevent browser auto complete this field
     // however, it still cannot prevent auto complete panel from showing up

packages/flat-components/src/components/LoginPage/RebindingPhonePanel/index.tsx

@@ -12,6 +12,7 @@ import { codeValidator } from "../LoginWithCode/validators";
 import { phoneValidator } from "../LoginWithPassword/validators";
 
 export interface RebindingPhonePanelProps {
+    defaultPhone: string;
     cancelRebindingPhone: () => void;
     rebindingPhone: (countryCode: string, phone: string, code: string) => Promise<boolean>;
     sendRebindingPhoneCode: (countryCode: string, phone: string) => Promise<any>;
@@ -23,6 +24,7 @@ interface RebindingFormValues {
 }
 
 export const RebindingPhonePanel: React.FC<RebindingPhonePanelProps> = ({
+    defaultPhone,
     sendRebindingPhoneCode,
     rebindingPhone,
     cancelRebindingPhone,
@@ -32,11 +34,11 @@ export const RebindingPhonePanel: React.FC<RebindingPhonePanelProps> = ({
 
     const [form] = Form.useForm<RebindingFormValues>();
     const [isFormValidated, setIsFormValidated] = useState(false);
-    const [isAccountValidated, setIsAccountValidated] = useState(false);
+    const [isAccountValidated, setIsAccountValidated] = useState(defaultPhone.length > 0);
     const type = PasswordLoginType.Phone;
 
     const defaultValues = {
-        phone: "",
+        phone: defaultPhone,
         code: "",
     };
 

packages/flat-pages/src/LoginPage/index.tsx

@@ -1,6 +1,6 @@
 import "./style.less";
 
-import React, { useCallback } from "react";
+import React, { useMemo, useState } from "react";
 import { useLanguage } from "@netless/flat-i18n";
 import { observer } from "mobx-react-lite";
 import { wrap } from "./utils/disposer";
@@ -45,11 +45,12 @@ import { globalStore } from "@netless/flat-stores";
 export const LoginPage = observer(function LoginPage() {
     const language = useLanguage();
     const sp = useSafePromise();
+    const [phone, setBindingPhone] = useState("");
 
     const { currentState, setCurrentState, handleLogin, onLoginResult, onBoundPhone } =
         useLoginState();
 
-    const getPanel = useCallback(() => {
+    const panel = useMemo(() => {
         const privacyURL = language.startsWith("zh") ? PRIVACY_URL_CN : PRIVACY_URL;
         const serviceURL = language.startsWith("zh") ? SERVICE_URL_CN : SERVICE_URL;
         const emailLanguage = language.startsWith("zh") ? "zh" : "en";
@@ -133,7 +134,10 @@ export const LoginPage = observer(function LoginPage() {
                             onLoginResult(null);
                             setCurrentState("SWITCH_TO_PASSWORD");
                         }}
-                        needRebindingPhone={() => setCurrentState("SWITCH_TO_REBINDING_PHONE")}
+                        needRebindingPhone={phone => {
+                            setBindingPhone(phone);
+                            setCurrentState("SWITCH_TO_REBINDING_PHONE");
+                        }}
                         sendBindingPhoneCode={async (countryCode, phone) =>
                             bindingPhoneSendCode(countryCode + phone)
                         }
@@ -146,6 +150,7 @@ export const LoginPage = observer(function LoginPage() {
                         cancelRebindingPhone={() => {
                             setCurrentState("SWITCH_TO_BINDING_PHONE");
                         }}
+                        defaultPhone={phone}
                         rebindingPhone={async (countryCode, phone, code) =>
                             wrap(
                                 rebindingPhone(countryCode + phone, Number(code)).then(
@@ -220,11 +225,20 @@ export const LoginPage = observer(function LoginPage() {
                 );
             }
         }
-    }, [currentState, handleLogin, language, onBoundPhone, onLoginResult, sp, setCurrentState]);
+    }, [
+        language,
+        handleLogin,
+        currentState.value,
+        onLoginResult,
+        setCurrentState,
+        sp,
+        onBoundPhone,
+        phone,
+    ]);
 
     return (
         <div className="login-page-container">
-            <LoginPanel>{getPanel()}</LoginPanel>
+            <LoginPanel>{panel}</LoginPanel>
             <AppUpgradeModal />
         </div>
     );