GH-3652 Add forgot password on sign-in page (#3789)

* Remove auth guard from password reset email endpoint

* Add arg for GQL mutation and update its usage

* Add forgot password button on sign-in page

* Generate automated graphql queries

* Move utils to dedicated hook

* Remove useless hook function

* Split simple hook methods

* Split workspace hook

* Split signInWithGoogle hook

* Split useSignInUpForm

* Fix error in logs

* Add Link Button UI Component

* Add storybook doc

---------

Co-authored-by: martmull <martmull@hotmail.fr>
This commit is contained in:
Deepak Kumar
2024-02-09 22:07:44 +05:30
committed by GitHub
parent 917fc5bd4d
commit 3cbf958a1c
16 changed files with 399 additions and 116 deletions

View File

@ -1,22 +1,17 @@
import { useCallback, useEffect, useState } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { useCallback, useState } from 'react';
import { SubmitHandler, UseFormReturn } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRecoilState, useRecoilValue } from 'recoil';
import { z } from 'zod';
import { useRecoilValue } from 'recoil';
import { authProvidersState } from '@/client-config/states/authProvidersState';
import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
import { billingState } from '@/client-config/states/billingState';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
import { AppPath } from '@/types/AppPath';
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
import { useAuth } from '../../hooks/useAuth';
import { PASSWORD_REGEX } from '../../utils/passwordRegex';
export enum SignInUpMode {
SignIn = 'sign-in',
@ -30,27 +25,11 @@ export enum SignInUpStep {
Password = 'password',
}
const validationSchema = z
.object({
exist: z.boolean(),
email: z.string().trim().email('Email must be a valid email'),
password: z
.string()
.regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
})
.required();
type Form = z.infer<typeof validationSchema>;
export const useSignInUp = () => {
export const useSignInUp = (form: UseFormReturn<Form>) => {
const navigate = useNavigate();
const { enqueueSnackBar } = useSnackBar();
const isMatchingLocation = useIsMatchingLocation();
const [authProviders] = useRecoilState(authProvidersState);
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
const billing = useRecoilValue(billingState);
const workspaceInviteHash = useParams().workspaceInviteHash;
const [signInUpStep, setSignInUpStep] = useState<SignInUpStep>(
SignInUpStep.Init,
@ -64,31 +43,9 @@ export const useSignInUp = () => {
? SignInUpMode.SignIn
: SignInUpMode.SignUp;
});
const [showErrors, setShowErrors] = useState(false);
const { data: workspaceFromInviteHash } = useGetWorkspaceFromInviteHashQuery({
variables: { inviteHash: workspaceInviteHash || '' },
});
const form = useForm<Form>({
mode: 'onChange',
defaultValues: {
exist: false,
},
resolver: zodResolver(validationSchema),
});
useEffect(() => {
if (isSignInPrefilled) {
form.setValue('email', 'tim@apple.dev');
form.setValue('password', 'Applecar2025');
}
}, [form, isSignInPrefilled]);
const {
signInWithCredentials,
signUpWithCredentials,
signInWithGoogle,
checkUserExists: { checkUserExistsQuery },
} = useAuth();
@ -169,10 +126,6 @@ export const useSignInUp = () => {
],
);
const goBackToEmailStep = useCallback(() => {
setSignInUpStep(SignInUpStep.Email);
}, [setSignInUpStep]);
useScopedHotkeys(
'enter',
() => {
@ -193,17 +146,10 @@ export const useSignInUp = () => {
);
return {
authProviders,
signInWithGoogle: () => signInWithGoogle(workspaceInviteHash),
signInUpStep,
signInUpMode,
showErrors,
setShowErrors,
continueWithCredentials,
continueWithEmail,
goBackToEmailStep,
submitCredentials,
form,
workspace: workspaceFromInviteHash?.findWorkspaceFromInviteHash,
};
};