refactor(console): use button loading in experience flow if possible

logto-io · Jul 16, 2024 · 7039a3e · 7039a3e
1 parent 6bf3beb
commit 7039a3e
Show file tree

Hide file tree

Showing 25 changed files with 198 additions and 81 deletions.
diff --git a/packages/experience/src/Providers/LoadingLayerProvider/index.tsx b/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
@@ -1,18 +1,16 @@
 import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
-import { useDebouncedLoader } from 'use-debounced-loader';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-import LoadingLayer from '@/components/LoadingLayer';
+import LoadingMask from '@/components/LoadingMask';
 
 const LoadingLayerProvider = () => {
   const { loading } = useContext(PageContext);
-  const debouncedLoading = useDebouncedLoader(loading, 500);
 
   return (
     <>
       <Outlet />
-      {debouncedLoading && <LoadingLayer />}
+      {loading && <LoadingMask />}
     </>
   );
 };

diff --git a/packages/experience/src/components/LoadingLayer/index.module.scss b/packages/experience/src/components/LoadingLayer/index.module.scss
@@ -1,12 +1,5 @@
 @use '@/scss/underscore' as _;
 
-.overlay {
-  position: fixed;
-  inset: 0;
-  @include _.flex-column;
-  z-index: 300;
-}
-
 .loadingIcon {
   color: var(--color-type-primary);
   animation: rotating 1s steps(12, end) infinite;

diff --git a/packages/experience/src/components/LoadingLayer/index.tsx b/packages/experience/src/components/LoadingLayer/index.tsx
@@ -1,14 +1,16 @@
+import LoadingMask from '../LoadingMask';
+
 import LoadingIcon from './LoadingIcon';
 import * as styles from './index.module.scss';
 
 export { default as LoadingIcon } from './LoadingIcon';
 
 const LoadingLayer = () => (
-  <div className={styles.overlay}>
+  <LoadingMask>
     <div className={styles.container}>
       <LoadingIcon />
     </div>
-  </div>
+  </LoadingMask>
 );
 
 export default LoadingLayer;
diff --git a/packages/experience/src/components/LoadingMask/index.module.scss b/packages/experience/src/components/LoadingMask/index.module.scss
@@ -0,0 +1,8 @@
+@use '@/scss/underscore' as _;
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  @include _.flex-column;
+  z-index: 300;
+}
diff --git a/packages/experience/src/components/LoadingMask/index.tsx b/packages/experience/src/components/LoadingMask/index.tsx
@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly children?: ReactNode;
+};
+
+const LoadingMask = ({ children }: Props) => {
+  return <div className={styles.overlay}>{children}</div>;
+};
+
+export default LoadingMask;
diff --git a/packages/experience/src/containers/SetPassword/Lite.tsx b/packages/experience/src/containers/SetPassword/Lite.tsx
@@ -14,7 +14,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
 };
@@ -29,7 +29,7 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FieldState>({
     reValidateMode: 'onBlur',
     defaultValues: { newPassword: '' },
@@ -42,11 +42,11 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      await handleSubmit(async (data) => {
+        await onSubmit(data.newPassword);
       })(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
@@ -70,7 +70,12 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button name="submit" title="action.save_password" htmlType="submit" />
+      <Button
+        name="submit"
+        title="action.save_password"
+        htmlType="submit"
+        isLoading={isSubmitting}
+      />
 
       <input hidden type="submit" />
     </form>

diff --git a/packages/experience/src/containers/SetPassword/SetPassword.tsx b/packages/experience/src/containers/SetPassword/SetPassword.tsx
@@ -17,7 +17,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
 };
@@ -43,7 +43,7 @@ const SetPassword = ({
     watch,
     resetField,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FieldState>({
     reValidateMode: 'onBlur',
     defaultValues: { newPassword: '', confirmPassword: '' },
@@ -56,11 +56,11 @@ const SetPassword = ({
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      await handleSubmit(async (data) => {
+        await onSubmit(data.newPassword);
       })(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
@@ -119,7 +119,12 @@ const SetPassword = ({
 
       <TogglePassword isChecked={showPassword} onChange={setShowPassword} />
 
-      <Button name="submit" title="action.save_password" htmlType="submit" />
+      <Button
+        name="submit"
+        title="action.save_password"
+        htmlType="submit"
+        isLoading={isSubmitting}
+      />
 
       <input hidden type="submit" />
     </form>

diff --git a/packages/experience/src/containers/SetPassword/index.tsx b/packages/experience/src/containers/SetPassword/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
   readonly maxLength?: number;

diff --git a/packages/experience/src/containers/TotpCodeVerification/index.module.scss b/packages/experience/src/containers/TotpCodeVerification/index.module.scss
@@ -3,3 +3,7 @@
 .totpCodeInput {
   margin-top: _.unit(4);
 }
+
+.continueButton {
+  margin-top: _.unit(6);
+}
diff --git a/packages/experience/src/containers/TotpCodeVerification/index.tsx b/packages/experience/src/containers/TotpCodeVerification/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 
+import Button from '@/components/Button';
 import VerificationCodeInput from '@/components/VerificationCode';
 import { type UserMfaFlow } from '@/types';
 
@@ -8,32 +9,58 @@ import useTotpCodeVerification from './use-totp-code-verification';
 
 const totpCodeLength = 6;
 
+const isCodeReady = (code: string[]) => {
+  return code.length === totpCodeLength && code.every(Boolean);
+};
+
 type Props = {
   readonly flow: UserMfaFlow;
 };
 
 const TotpCodeVerification = ({ flow }: Props) => {
-  const [code, setCode] = useState<string[]>([]);
+  const [codeInput, setCodeInput] = useState<string[]>([]);
   const errorCallback = useCallback(() => {
-    setCode([]);
+    setCodeInput([]);
   }, []);
 
   const { errorMessage, onSubmit } = useTotpCodeVerification(flow, errorCallback);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (code: string[]) => {
+      setIsSubmitting(true);
+      await onSubmit(code.join(''));
+      setIsSubmitting(false);
+    },
+    [onSubmit]
+  );
+
   return (
-    <VerificationCodeInput
-      name="totpCode"
-      value={code}
-      className={styles.totpCodeInput}
-      error={errorMessage}
-      onChange={(code) => {
-        setCode(code);
-
-        if (code.length === totpCodeLength && code.every(Boolean)) {
-          onSubmit(code.join(''));
-        }
-      }}
-    />
+    <>
+      <VerificationCodeInput
+        name="totpCode"
+        value={codeInput}
+        className={styles.totpCodeInput}
+        error={errorMessage}
+        onChange={(code) => {
+          setCodeInput(code);
+          if (isCodeReady(code)) {
+            void handleSubmit(code);
+          }
+        }}
+      />
+      <Button
+        title="action.continue"
+        type="primary"
+        className={styles.continueButton}
+        isLoading={isSubmitting}
+        isDisabled={!isCodeReady(codeInput)}
+        onClick={() => {
+          void handleSubmit(codeInput);
+        }}
+      />
+    </>
   );
 };
 

diff --git a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
@@ -19,8 +19,8 @@ const useTotpCodeVerification = (flow: UserMfaFlow, errorCallback?: () => void)
   );
 
   const onSubmit = useCallback(
-    (code: string) => {
-      void sendMfaPayload(
+    async (code: string) => {
+      await sendMfaPayload(
         { flow, payload: { type: MfaFactor.TOTP, code } },
         invalidCodeErrorHandlers,
         errorCallback

diff --git a/packages/experience/src/containers/VerificationCode/index.module.scss b/packages/experience/src/containers/VerificationCode/index.module.scss
@@ -27,7 +27,8 @@
     align-self: start;
   }
 
-  .switch {
+  .switch,
+  .continueButton {
     margin-top: _.unit(6);
   }
 }
diff --git a/packages/experience/src/containers/VerificationCode/index.tsx b/packages/experience/src/containers/VerificationCode/index.tsx
@@ -1,8 +1,9 @@
 import { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
+import Button from '@/components/Button';
 import TextLink from '@/components/TextLink';
 import VerificationCodeInput, { defaultLength } from '@/components/VerificationCode';
 import { UserFlow } from '@/types';
@@ -21,13 +22,18 @@ type Props = {
 };
 
 const VerificationCode = ({ flow, identifier, className, hasPasswordButton, target }: Props) => {
-  const [code, setCode] = useState<string[]>([]);
+  const [codeInput, setCodeInput] = useState<string[]>([]);
   const { t } = useTranslation();
 
+  const isCodeInputReady = useMemo(
+    () => codeInput.length === defaultLength && codeInput.every(Boolean),
+    [codeInput]
+  );
+
   const useVerificationCode = getCodeVerificationHookByFlow(flow);
 
   const errorCallback = useCallback(() => {
-    setCode([]);
+    setCodeInput([]);
   }, []);
 
   const { errorMessage, clearErrorMessage, onSubmit } = useVerificationCode(
@@ -42,24 +48,37 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
     target
   );
 
-  useEffect(() => {
-    if (code.length === defaultLength && code.every(Boolean)) {
-      const payload =
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (code: string[]) => {
+      setIsSubmitting(true);
+
+      await onSubmit(
         identifier === SignInIdentifier.Email
           ? { email: target, verificationCode: code.join('') }
-          : { phone: target, verificationCode: code.join('') };
-      void onSubmit(payload);
+          : { phone: target, verificationCode: code.join('') }
+      );
+
+      setIsSubmitting(false);
+    },
+    [identifier, onSubmit, target]
+  );
+
+  useEffect(() => {
+    if (isCodeInputReady) {
+      void handleSubmit(codeInput);
     }
-  }, [code, identifier, onSubmit, target]);
+  }, [codeInput, handleSubmit, isCodeInputReady]);
 
   return (
     <form className={classNames(styles.form, className)}>
       <VerificationCodeInput
         name="passcode"
         className={classNames(styles.inputField, errorMessage && styles.withError)}
-        value={code}
+        value={codeInput}
         error={errorMessage}
-        onChange={setCode}
+        onChange={setCodeInput}
       />
       <div className={styles.message}>
         {isRunning ? (
@@ -75,7 +94,7 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
                   onClick={async () => {
                     clearErrorMessage();
                     await onResendVerificationCode();
-                    setCode([]);
+                    setCodeInput([]);
                   }}
                 />
               ),
@@ -88,6 +107,16 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
       {flow === UserFlow.SignIn && hasPasswordButton && (
         <PasswordSignInLink className={styles.switch} />
       )}
+      <Button
+        title="action.continue"
+        type="primary"
+        isDisabled={!isCodeInputReady}
+        isLoading={isSubmitting}
+        className={styles.continueButton}
+        onClick={() => {
+          void handleSubmit(codeInput);
+        }}
+      />
     </form>
   );
 };