refactor: custom hook for sign in redirection (#2969)

web/components/account/sign-in-forms/email-form.tsx

@@ -84,7 +84,7 @@ export const EmailForm: React.FC<Props> = (props) => {
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
-        Get on your flight deck!
+        Get on your flight deck
       </h1>
       <p className="text-center text-sm text-onboarding-text-200 mt-3">
         Sign in with the email you used to sign up for Plane

web/components/account/sign-in-forms/password.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
@@ -36,6 +36,8 @@ const authService = new AuthService();
 
 export const PasswordForm: React.FC<Props> = (props) => {
   const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
+  // states
+  const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -113,6 +115,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
       return;
     }
 
+    setIsSendingResetPasswordLink(true);
+
     authService
       .sendResetPasswordLink({ email: emailFormValue })
       .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
@@ -122,7 +126,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
-      );
+      )
+      .finally(() => setIsSendingResetPasswordLink(false));
   };
 
   return (
@@ -189,9 +194,12 @@ export const PasswordForm: React.FC<Props> = (props) => {
             <button
               type="button"
               onClick={handleForgotPassword}
-              className="text-xs font-medium text-custom-primary-100"
+              className={`text-xs font-medium ${
+                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
+              }`}
+              disabled={isSendingResetPasswordLink}
             >
-              Forgot your password?
+              {isSendingResetPasswordLink ? "Sending link..." : "Forgot your password?"}
             </button>
           </div>
         </div>

web/components/account/sign-in-forms/root.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+// hooks
+import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import {
   EmailForm,
@@ -19,33 +21,27 @@ export enum ESignInSteps {
   CREATE_PASSWORD = "CREATE_PASSWORD",
 }
 
-type Props = {
-  handleSignInRedirection: () => Promise<void>;
-};
-
 const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
 
-export const SignInRoot: React.FC<Props> = (props) => {
-  const { handleSignInRedirection } = props;
+export const SignInRoot = () => {
   // states
   const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
   const [email, setEmail] = useState("");
+  // sign in redirection hook
+  const { handleRedirection } = useSignInRedirection();
 
   return (
     <>
       <div className="mx-auto flex flex-col">
         {signInStep === ESignInSteps.EMAIL && (
-          <EmailForm
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            updateEmail={(newEmail) => setEmail(newEmail)}
-          />
+          <EmailForm handleStepChange={(step) => setSignInStep(step)} updateEmail={(newEmail) => setEmail(newEmail)} />
         )}
         {signInStep === ESignInSteps.PASSWORD && (
           <PasswordForm
             email={email}
             updateEmail={(newEmail) => setEmail(newEmail)}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleStepChange={(step) => setSignInStep(step)}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.SET_PASSWORD_LINK && (
@@ -55,30 +51,30 @@ export const SignInRoot: React.FC<Props> = (props) => {
           <UniqueCodeForm
             email={email}
             updateEmail={(newEmail) => setEmail(newEmail)}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleStepChange={(step) => setSignInStep(step)}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
           <OptionalSetPasswordForm
             email={email}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleStepChange={(step) => setSignInStep(step)}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.CREATE_PASSWORD && (
           <CreatePasswordForm
             email={email}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleStepChange={(step) => setSignInStep(step)}
+            handleSignInRedirection={handleRedirection}
           />
         )}
       </div>
       {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
         <OAuthOptions
           updateEmail={(newEmail) => setEmail(newEmail)}
-          handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-          handleSignInRedirection={handleSignInRedirection}
+          handleStepChange={(step) => setSignInStep(step)}
+          handleSignInRedirection={handleRedirection}
         />
       )}
     </>

web/components/account/sign-in-forms/set-password-link.tsx

@@ -30,7 +30,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
   const {
     control,
     formState: { errors, isValid },
-    watch,
+    handleSubmit,
   } = useForm({
     defaultValues: {
       email,
@@ -39,11 +39,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
     reValidateMode: "onChange",
   });
 
-  const handleSendNewLink = async () => {
+  const handleSendNewLink = async (formData: { email: string }) => {
     setIsSendingNewLink(true);
 
+    updateEmail(formData.email);
+
     const payload: IEmailCheckData = {
-      email: watch("email"),
+      email: formData.email,
       type: "password",
     };
 
@@ -76,7 +78,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
         password
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto space-y-4">
+      <form onSubmit={handleSubmit(handleSendNewLink)} className="mt-5 sm:w-96 mx-auto space-y-4">
         <div className="space-y-1">
           <Controller
             control={control}
@@ -92,10 +94,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
                   name="email"
                   type="email"
                   value={value}
-                  onChange={(e) => {
-                    updateEmail(e.target.value);
-                    onChange(e.target.value);
-                  }}
+                  onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.email)}
                   placeholder="[email protected]"
@@ -112,11 +111,10 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
           />
         </div>
         <Button
-          type="button"
+          type="submit"
           variant="primary"
           className="w-full"
           size="xl"
-          onClick={handleSendNewLink}
           disabled={!isValid}
           loading={isSendingNewLink}
         >