Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-12 15:53:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: update signup form to handle password managers better

Browse Source
This commit is contained in:
Lucas Smith
2024-03-14 12:39:09 +00:00
parent 564f0dd945
commit d5c4885c67
3 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(unauthenticated)/layout.tsx
View File

@ -10,7 +10,7 @@ type UnauthenticatedLayoutProps = {
export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) { export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
return ( return (
<main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24"> <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
<div> <div>
<div className="absolute -inset-[min(600px,max(400px,60vw))] -z-[1] flex items-center justify-center opacity-70"> <div className="absolute -inset-[min(600px,max(400px,60vw))] -z-[1] flex items-center justify-center opacity-70">
<Image <Image

2
apps/web/src/app/(unauthenticated)/signup/page.tsx
View File

@ -34,7 +34,7 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {
return ( return (
<SignUpFormV2 <SignUpFormV2
className="w-screen max-w-screen-2xl px-4 md:px-16" className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
initialEmail={email || undefined} initialEmail={email || undefined}
isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
/> />

32
apps/web/src/components/forms/v2/signup.tsx
View File

@ -108,17 +108,6 @@ export const SignUpFormV2 = ({
const name = form.watch('name'); const name = form.watch('name');
const url = form.watch('url'); const url = form.watch('url');
// To continue we need to make sure name, email, password and signature are valid
const canContinue =
form.formState.dirtyFields.name &&
form.formState.errors.name === undefined &&
form.formState.dirtyFields.email &&
form.formState.errors.email === undefined &&
form.formState.dirtyFields.password &&
form.formState.errors.password === undefined &&
form.formState.dirtyFields.signature &&
form.formState.errors.signature === undefined;
const { mutateAsync: signup } = trpc.auth.signup.useMutation(); const { mutateAsync: signup } = trpc.auth.signup.useMutation();
const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormV2Schema) => { const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormV2Schema) => {
@ -169,6 +158,14 @@ export const SignUpFormV2 = ({
} }
}; };
const onNextClick = async () => {
const valid = await form.trigger(['name', 'email', 'password', 'signature']);
if (valid) {
setStep('CLAIM_USERNAME');
}
};
const onSignUpWithGoogleClick = async () => { const onSignUpWithGoogleClick = async () => {
try { try {
await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH }); await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
@ -224,7 +221,7 @@ export const SignUpFormV2 = ({
</div> </div>
</div> </div>
<div className="border-border dark:bg-background relative z-10 flex min-h-[min(800px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6"> <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
{step === 'BASIC_DETAILS' && ( {step === 'BASIC_DETAILS' && (
<div className="h-20"> <div className="h-20">
<h1 className="text-xl font-semibold md:text-2xl">Create a new account</h1> <h1 className="text-xl font-semibold md:text-2xl">Create a new account</h1>
@ -257,8 +254,8 @@ export const SignUpFormV2 = ({
{step === 'BASIC_DETAILS' && ( {step === 'BASIC_DETAILS' && (
<fieldset <fieldset
className={cn( className={cn(
'flex h-[500px] w-full flex-col gap-y-4', 'flex h-[550px] w-full flex-col gap-y-4',
isGoogleSSOEnabled && 'h-[600px]', isGoogleSSOEnabled && 'h-[650px]',
)} )}
disabled={isSubmitting} disabled={isSubmitting}
> >
@ -360,8 +357,8 @@ export const SignUpFormV2 = ({
{step === 'CLAIM_USERNAME' && ( {step === 'CLAIM_USERNAME' && (
<fieldset <fieldset
className={cn( className={cn(
'flex h-[500px] w-full flex-col gap-y-4', 'flex h-[550px] w-full flex-col gap-y-4',
isGoogleSSOEnabled && 'h-[600px]', isGoogleSSOEnabled && 'h-[650px]',
)} )}
disabled={isSubmitting} disabled={isSubmitting}
> >
@ -431,9 +428,8 @@ export const SignUpFormV2 = ({
type="button" type="button"
size="lg" size="lg"
className="flex-1 disabled:cursor-not-allowed" className="flex-1 disabled:cursor-not-allowed"
disabled={!canContinue}
loading={form.formState.isSubmitting} loading={form.formState.isSubmitting}
onClick={() => setStep('CLAIM_USERNAME')} onClick={onNextClick}
> >
Next Next
</Button> </Button>