feat: add verify process in change email progress (#4306)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

packages/component/src/components/auth-components/change-email-page.tsx

@@ -1,23 +1,17 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
-import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
 import { AuthInput } from './auth-input';
 import { AuthPageContainer } from './auth-page-container';
 import { emailRegex } from './utils';
-type User = {
-  id: string;
-  name: string;
-  email: string;
-  image: string;
-};
 
-export const ChangeEmailPage: FC<{
-  user: User;
+export const ChangeEmailPage = ({
+  onChangeEmail: propsOnChangeEmail,
+}: {
   onChangeEmail: (email: string) => Promise<boolean>;
   onOpenAffine: () => void;
-}> = ({ onChangeEmail: propsOnChangeEmail, onOpenAffine }) => {
+}) => {
   const t = useAFFiNEI18N();
   const [hasSetUp, setHasSetUp] = useState(false);
   const [email, setEmail] = useState('');
@@ -45,45 +39,33 @@ export const ChangeEmailPage: FC<{
   }, []);
   return (
     <AuthPageContainer
-      title={
-        hasSetUp
-          ? t['com.affine.auth.change.email.page.success.title']()
-          : t['com.affine.auth.change.email.page.title']()
-      }
-      subtitle={
-        hasSetUp
-          ? t['com.affine.auth.change.email.page.success.subtitle']()
-          : t['com.affine.auth.change.email.page.subtitle']()
-      }
+      title={t['com.affine.auth.change.email.page.title']()}
+      subtitle={t['com.affine.auth.change.email.page.subtitle']()}
     >
-      {hasSetUp ? (
-        <Button type="primary" size="large" onClick={onOpenAffine}>
-          {t['com.affine.auth.open.affine']()}
+      <>
+        <AuthInput
+          width={320}
+          label={t['com.affine.settings.email']()}
+          placeholder={t['com.affine.auth.sign.email.placeholder']()}
+          value={email}
+          onChange={onEmailChange}
+          error={!isValidEmail}
+          errorHint={
+            isValidEmail ? '' : t['com.affine.auth.sign.email.error']()
+          }
+          onEnter={onContinue}
+          disabled={hasSetUp}
+        />
+        <Button
+          type="primary"
+          size="large"
+          onClick={onContinue}
+          loading={loading}
+          disabled={hasSetUp}
+        >
+          {t['com.affine.auth.set.email.save']()}
         </Button>
-      ) : (
-        <>
-          <AuthInput
-            width={320}
-            label={t['com.affine.settings.email']()}
-            placeholder={t['com.affine.auth.sign.email.placeholder']()}
-            value={email}
-            onChange={onEmailChange}
-            error={!isValidEmail}
-            errorHint={
-              isValidEmail ? '' : t['com.affine.auth.sign.email.error']()
-            }
-            onEnter={onContinue}
-          />
-          <Button
-            type="primary"
-            size="large"
-            onClick={onContinue}
-            loading={loading}
-          >
-            {t['com.affine.auth.set.email.save']()}
-          </Button>
-        </>
-      )}
+      </>
     </AuthPageContainer>
   );
 };

packages/component/src/components/auth-components/confirm-change-email.tsx

@@ -0,0 +1,22 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import type { FC } from 'react';
+
+import { AuthPageContainer } from './auth-page-container';
+
+export const ConfirmChangeEmail: FC<{
+  onOpenAffine: () => void;
+}> = ({ onOpenAffine }) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <AuthPageContainer
+      title={t['com.affine.auth.change.email.page.success.title']()}
+      subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
+    >
+      <Button type="primary" size="large" onClick={onOpenAffine}>
+        {t['com.affine.auth.open.affine']()}
+      </Button>
+    </AuthPageContainer>
+  );
+};

packages/component/src/components/auth-components/index.tsx

@@ -4,6 +4,7 @@ export * from './auth-page-container';
 export * from './back-button';
 export * from './change-email-page';
 export * from './change-password-page';
+export * from './confirm-change-email';
 export * from './count-down-render';
 export * from './modal';
 export * from './modal-header';