admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
View File

@ -1,13 +1,20 @@
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import { Controller } from 'react-hook-form';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRecoilState } from 'recoil';
import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword.ts';
import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle.ts';
import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts';
import { authProvidersState } from '@/client-config/states/authProvidersState.ts';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Loader } from '@/ui/feedback/loader/components/Loader';
import { MainButton } from '@/ui/input/button/components/MainButton';
import { TextInput } from '@/ui/input/components/TextInput';
import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
import { Logo } from '../../components/Logo';
@ -43,24 +50,20 @@ const StyledInputContainer = styled.div`
`;
export const SignInUpForm = () => {
const [authProviders] = useRecoilState(authProvidersState);
const [showErrors, setShowErrors] = useState(false);
const { handleResetPassword } = useHandleResetPassword();
const workspace = useWorkspaceFromInviteHash();
const { signInWithGoogle } = useSignInWithGoogle();
const { form } = useSignInUpForm();
const {
authProviders,
signInWithGoogle,
signInUpStep,
signInUpMode,
showErrors,
setShowErrors,
continueWithCredentials,
continueWithEmail,
submitCredentials,
form: {
control,
watch,
handleSubmit,
formState: { isSubmitting },
},
workspace,
} = useSignInUp();
} = useSignInUp(form);
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
@ -72,7 +75,7 @@ export const SignInUpForm = () => {
continueWithCredentials();
} else if (signInUpStep === SignInUpStep.Password) {
setShowErrors(true);
handleSubmit(submitCredentials)();
form.handleSubmit(submitCredentials)();
}
}
};
@ -88,10 +91,10 @@ export const SignInUpForm = () => {
return signInUpMode === SignInUpMode.SignIn
? 'Sign in'
: isSubmitting
: form.formState.isSubmitting
? 'Creating workspace'
: 'Sign up';
}, [signInUpMode, signInUpStep, isSubmitting]);
}, [signInUpMode, signInUpStep, form.formState.isSubmitting]);
const title = useMemo(() => {
if (signInUpMode === SignInUpMode.Invite) {
@ -141,7 +144,7 @@ export const SignInUpForm = () => {
>
<Controller
name="email"
control={control}
control={form.control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
@ -180,7 +183,7 @@ export const SignInUpForm = () => {
>
<Controller
name="password"
control={control}
control={form.control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
@ -218,24 +221,32 @@ export const SignInUpForm = () => {
return;
}
setShowErrors(true);
handleSubmit(submitCredentials)();
form.handleSubmit(submitCredentials)();
}}
Icon={() => isSubmitting && <Loader />}
Icon={() => form.formState.isSubmitting && <Loader />}
disabled={
SignInUpStep.Init
? false
: signInUpStep === SignInUpStep.Email
? !watch('email')
: !watch('email') || !watch('password') || isSubmitting
? !form.watch('email')
: !form.watch('email') ||
!form.watch('password') ||
form.formState.isSubmitting
}
fullWidth
/>
</StyledForm>
</StyledContentContainer>
<StyledFooterNote>
By using Twenty, you agree to the Terms of Service and Data Processing
Agreement.
</StyledFooterNote>
{signInUpStep === SignInUpStep.Password ? (
<ActionLink onClick={handleResetPassword(form.getValues('email'))}>
Forgot your password?
</ActionLink>
) : (
<StyledFooterNote>
By using Twenty, you agree to the Terms of Service and Data Processing
Agreement.
</StyledFooterNote>
)}
</>
);
};