MeetUp/src/components/user/login-form.tsx

50 lines
1.3 KiB
TypeScript

import { signIn } from '@/auth';
import LabeledInput from '@/components/labeled-input';
import { Button } from '@/components/ui/button';
import { AuthError } from 'next-auth';
import { redirect } from 'next/navigation';
const SIGNIN_ERROR_URL = '/error';
export default function LoginForm() {
return (
<form
className='flex flex-col gap-5 w-full'
data-cy='login-form'
action={async (formData) => {
'use server';
try {
await signIn('credentials', formData);
} catch (error) {
if (error instanceof AuthError) {
return redirect(`${SIGNIN_ERROR_URL}?error=${error.type}`);
}
throw error;
}
}}
>
<LabeledInput
type='email'
label='E-Mail or Username'
placeholder='What you are known as.'
name='email'
data-cy='email-input'
/>
<LabeledInput
type='password'
label='Password'
placeholder="Let's hope you remember it."
name='password'
data-cy='password-input'
/>
<Button
className='hover:bg-blue-600 hover:text-white'
type='submit'
variant='secondary'
data-cy='login-button'
>
Login
</Button>
</form>
);
}