init
This commit is contained in:
phaichayon
219
src/features/auth/components/sign-up-view.tsx
Normal file
219
src/features/auth/components/sign-up-view.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client';
|
||||
|
||||
import { Button, buttonVariants } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useAppForm } from '@/components/ui/tanstack-form';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useTransition } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import * as z from 'zod';
|
||||
import { InteractiveGridPattern } from './interactive-grid';
|
||||
|
||||
const signUpSchema = z.object({
|
||||
name: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
email: z.string().email('Enter a valid email address'),
|
||||
password: z.string().min(8, 'Password must be at least 8 characters'),
|
||||
workspaceName: z.string().min(2, 'Workspace name must be at least 2 characters')
|
||||
});
|
||||
|
||||
export default function SignUpViewPage() {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
workspaceName: ''
|
||||
},
|
||||
validators: {
|
||||
onSubmit: signUpSchema
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
startTransition(async () => {
|
||||
const response = await fetch('/api/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(value)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = (await response.json().catch(() => null)) as { message?: string } | null;
|
||||
toast.error(data?.message ?? 'Unable to create account');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await signIn('credentials', {
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
redirect: false
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
toast.error('Account created, but sign-in failed. Please sign in manually.');
|
||||
router.push('/auth/sign-in');
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Account created successfully');
|
||||
router.push('/dashboard');
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className='relative min-h-screen items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0'>
|
||||
<Link
|
||||
href='/auth/sign-in'
|
||||
className={cn(
|
||||
buttonVariants({ variant: 'ghost' }),
|
||||
'absolute top-4 right-4 hidden md:top-8 md:right-8'
|
||||
)}
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
<div className='relative hidden h-full flex-col p-10 lg:flex dark:border-r'>
|
||||
<div className='absolute inset-0 bg-sidebar' />
|
||||
<div className='text-sidebar-foreground relative z-20 flex items-center text-lg font-medium'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='mr-2 h-6 w-6'
|
||||
>
|
||||
<path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
|
||||
</svg>
|
||||
Create your first workspace
|
||||
</div>
|
||||
<InteractiveGridPattern
|
||||
className={cn(
|
||||
'mask-[radial-gradient(400px_circle_at_center,white,transparent)]',
|
||||
'inset-x-0 inset-y-[0%] h-full skew-y-12'
|
||||
)}
|
||||
/>
|
||||
<div className='text-sidebar-foreground relative z-20 mt-auto'>
|
||||
<blockquote className='space-y-2'>
|
||||
<p className='text-lg'>
|
||||
“Own the auth boundary, own the org model, and keep your feature modules
|
||||
stable.”
|
||||
</p>
|
||||
<footer className='text-sidebar-foreground/70 text-sm'>Training System</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex h-full items-center justify-center p-4 lg:p-8'>
|
||||
<div className='flex w-full max-w-md flex-col items-center justify-center space-y-6'>
|
||||
<div className='w-full space-y-2 text-center'>
|
||||
<h1 className='text-2xl font-semibold tracking-tight'>Create an account</h1>
|
||||
<p className='text-muted-foreground text-sm'>
|
||||
We'll create your user, your first workspace, and sign you in.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form.AppForm>
|
||||
<form.Form className='w-full space-y-4'>
|
||||
<form.AppField
|
||||
name='name'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Full name</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='Jane Doe'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name='workspaceName'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Workspace name</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='Acme Studio'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name='email'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Email</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type='email'
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='you@example.com'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name='password'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Password</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type='password'
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='Minimum 8 characters'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button className='w-full' type='submit' isLoading={isPending}>
|
||||
Create account
|
||||
</Button>
|
||||
</form.Form>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user