From fa990ed444f2a535258cf96efdf9242fbc240765 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:04:04 +0530 Subject: [PATCH] refactor: custom hook for sign in redirection (#2969) --- .../account/sign-in-forms/email-form.tsx | 2 +- .../account/sign-in-forms/password.tsx | 16 +- web/components/account/sign-in-forms/root.tsx | 36 ++-- .../sign-in-forms/set-password-link.tsx | 18 +- web/components/page-views/signin.tsx | 163 +++++++----------- web/hooks/use-sign-in-redirection.ts | 74 ++++++++ web/pages/accounts/password.tsx | 39 +---- web/public/onboarding/onboarding-pages.svg | 38 ++-- 8 files changed, 198 insertions(+), 188 deletions(-) create mode 100644 web/hooks/use-sign-in-redirection.ts diff --git a/web/components/account/sign-in-forms/email-form.tsx b/web/components/account/sign-in-forms/email-form.tsx index f704d4134..d9dc1c396 100644 --- a/web/components/account/sign-in-forms/email-form.tsx +++ b/web/components/account/sign-in-forms/email-form.tsx @@ -84,7 +84,7 @@ export const EmailForm: React.FC = (props) => { return ( <>

- Get on your flight deck! + Get on your flight deck

Sign in with the email you used to sign up for Plane diff --git a/web/components/account/sign-in-forms/password.tsx b/web/components/account/sign-in-forms/password.tsx index 547f59e9d..44c91a51f 100644 --- a/web/components/account/sign-in-forms/password.tsx +++ b/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) => { 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) => { return; } + setIsSendingResetPasswordLink(true); + authService .sendResetPasswordLink({ email: emailFormValue }) .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK)) @@ -122,7 +126,8 @@ export const PasswordForm: React.FC = (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) => { diff --git a/web/components/account/sign-in-forms/root.tsx b/web/components/account/sign-in-forms/root.tsx index 9797c8573..90e60e2b1 100644 --- a/web/components/account/sign-in-forms/root.tsx +++ b/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; -}; - const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD]; -export const SignInRoot: React.FC = (props) => { - const { handleSignInRedirection } = props; +export const SignInRoot = () => { // states const [signInStep, setSignInStep] = useState(ESignInSteps.EMAIL); const [email, setEmail] = useState(""); + // sign in redirection hook + const { handleRedirection } = useSignInRedirection(); return ( <>

{signInStep === ESignInSteps.EMAIL && ( - setSignInStep(step)} - updateEmail={(newEmail) => setEmail(newEmail)} - /> + setSignInStep(step)} updateEmail={(newEmail) => setEmail(newEmail)} /> )} {signInStep === ESignInSteps.PASSWORD && ( 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) => { setEmail(newEmail)} - handleStepChange={(step: ESignInSteps) => setSignInStep(step)} - handleSignInRedirection={handleSignInRedirection} + handleStepChange={(step) => setSignInStep(step)} + handleSignInRedirection={handleRedirection} /> )} {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && ( setSignInStep(step)} - handleSignInRedirection={handleSignInRedirection} + handleStepChange={(step) => setSignInStep(step)} + handleSignInRedirection={handleRedirection} /> )} {signInStep === ESignInSteps.CREATE_PASSWORD && ( setSignInStep(step)} - handleSignInRedirection={handleSignInRedirection} + handleStepChange={(step) => setSignInStep(step)} + handleSignInRedirection={handleRedirection} /> )}
{!OAUTH_HIDDEN_STEPS.includes(signInStep) && ( setEmail(newEmail)} - handleStepChange={(step: ESignInSteps) => setSignInStep(step)} - handleSignInRedirection={handleSignInRedirection} + handleStepChange={(step) => setSignInStep(step)} + handleSignInRedirection={handleRedirection} /> )} diff --git a/web/components/account/sign-in-forms/set-password-link.tsx b/web/components/account/sign-in-forms/set-password-link.tsx index f683a26fc..21cc8db17 100644 --- a/web/components/account/sign-in-forms/set-password-link.tsx +++ b/web/components/account/sign-in-forms/set-password-link.tsx @@ -30,7 +30,7 @@ export const SetPasswordLink: React.FC = (props) => { const { control, formState: { errors, isValid }, - watch, + handleSubmit, } = useForm({ defaultValues: { email, @@ -39,11 +39,13 @@ export const SetPasswordLink: React.FC = (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) => { password

-
+
= (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="orville.wright@firstflight.com" @@ -112,11 +111,10 @@ export const SetPasswordLink: React.FC = (props) => { />