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

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

packages/cli/src/bin/dev-core.ts

@@ -30,6 +30,8 @@ if (process.argv.includes('--static')) {
         'serve',
         '--mode',
         'development',
+        '--no-client-overlay',
+        '--no-live-reload',
         '--env',
         'flags=' + Buffer.from(JSON.stringify(flags), 'utf-8').toString('hex'),
       ].filter((v): v is string => !!v),

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';

packages/graphql/src/graphql/change-email.gql

@@ -1,5 +1,5 @@
-mutation changeEmail($token: String!, $newEmail: String!) {
-  changeEmail(token: $token, email: $newEmail) {
+mutation changeEmail($token: String!) {
+  changeEmail(token: $token) {
     id
     name
     avatarUrl

packages/graphql/src/graphql/index.ts

@@ -85,8 +85,8 @@ export const changeEmailMutation = {
   definitionName: 'changeEmail',
   containsFile: false,
   query: `
-mutation changeEmail($token: String!, $newEmail: String!) {
-  changeEmail(token: $token, email: $newEmail) {
+mutation changeEmail($token: String!) {
+  changeEmail(token: $token) {
     id
     name
     avatarUrl
@@ -391,6 +391,17 @@ mutation sendSetPasswordEmail($email: String!, $callbackUrl: String!) {
 }`,
 };
 
+export const sendVerifyChangeEmailMutation = {
+  id: 'sendVerifyChangeEmailMutation' as const,
+  operationName: 'sendVerifyChangeEmail',
+  definitionName: 'sendVerifyChangeEmail',
+  containsFile: false,
+  query: `
+mutation sendVerifyChangeEmail($token: String!, $email: String!, $callbackUrl: String!) {
+  sendVerifyChangeEmail(token: $token, email: $email, callbackUrl: $callbackUrl)
+}`,
+};
+
 export const setRevokePageMutation = {
   id: 'setRevokePageMutation' as const,
   operationName: 'setRevokePage',

packages/graphql/src/graphql/send-verify-change-email.gql

@@ -0,0 +1,7 @@
+mutation sendVerifyChangeEmail(
+  $token: String!
+  $email: String!
+  $callbackUrl: String!
+) {
+  sendVerifyChangeEmail(token: $token, email: $email, callbackUrl: $callbackUrl)
+}

packages/graphql/src/schema.ts

@@ -101,7 +101,6 @@ export type AllBlobSizesQuery = {
 
 export type ChangeEmailMutationVariables = Exact<{
   token: Scalars['String']['input'];
-  newEmail: Scalars['String']['input'];
 }>;
 
 export type ChangeEmailMutation = {
@@ -359,6 +358,17 @@ export type SendSetPasswordEmailMutation = {
   sendSetPasswordEmail: boolean;
 };
 
+export type SendVerifyChangeEmailMutationVariables = Exact<{
+  token: Scalars['String']['input'];
+  email: Scalars['String']['input'];
+  callbackUrl: Scalars['String']['input'];
+}>;
+
+export type SendVerifyChangeEmailMutation = {
+  __typename?: 'Mutation';
+  sendVerifyChangeEmail: boolean;
+};
+
 export type SetRevokePageMutationVariables = Exact<{
   workspaceId: Scalars['String']['input'];
   pageId: Scalars['String']['input'];
@@ -611,6 +621,11 @@ export type Mutations =
       variables: SendSetPasswordEmailMutationVariables;
       response: SendSetPasswordEmailMutation;
     }
+  | {
+      name: 'sendVerifyChangeEmailMutation';
+      variables: SendVerifyChangeEmailMutationVariables;
+      response: SendVerifyChangeEmailMutation;
+    }
   | {
       name: 'setRevokePageMutation';
       variables: SetRevokePageMutationVariables;