feat: enhance login form with sign-up input-fields and autocomplete attributes
This commit is contained in:
parent
abae5c74d5
commit
6c479e80d6
2 changed files with 74 additions and 17 deletions
|
@ -7,12 +7,14 @@ export default function LabeledInput({
|
|||
placeholder,
|
||||
value,
|
||||
name,
|
||||
autocomplete,
|
||||
}: {
|
||||
type: 'text' | 'email' | 'password';
|
||||
label: string;
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
name?: string;
|
||||
autocomplete?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className='grid grid-cols-1 gap-1'>
|
||||
|
@ -24,6 +26,7 @@ export default function LabeledInput({
|
|||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
autoComplete={autocomplete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,19 +1,27 @@
|
|||
'use client';
|
||||
import { signIn } from '@/auth';
|
||||
import LabeledInput from '@/components/labeled-input';
|
||||
import { Button } from '@/components/custom-ui/button';
|
||||
import { AuthError } from 'next-auth';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
const SIGNIN_ERROR_URL = '/error';
|
||||
|
||||
export default function LoginForm() {
|
||||
const [isSignUp, setIsSignUp] = useState(false);
|
||||
|
||||
return (
|
||||
<form
|
||||
className='flex flex-col gap-5 w-full'
|
||||
action={async (formData) => {
|
||||
'use server';
|
||||
'use client';
|
||||
try {
|
||||
if (isSignUp) {
|
||||
// handle sign up logic here
|
||||
} else {
|
||||
await signIn('credentials', formData);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof AuthError) {
|
||||
return redirect(`${SIGNIN_ERROR_URL}?error=${error.type}`);
|
||||
|
@ -22,6 +30,46 @@ export default function LoginForm() {
|
|||
}
|
||||
}}
|
||||
>
|
||||
{isSignUp ? (
|
||||
<>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='First Name'
|
||||
placeholder='Your first name'
|
||||
name='firstName'
|
||||
autocomplete='given-name'
|
||||
/>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Last Name'
|
||||
placeholder='Your last name'
|
||||
name='lastName'
|
||||
autocomplete='family-name'
|
||||
/>
|
||||
<LabeledInput
|
||||
type='email'
|
||||
label='E-Mail'
|
||||
placeholder='Your email address'
|
||||
name='email'
|
||||
autocomplete='email'
|
||||
/>
|
||||
<LabeledInput
|
||||
type='password'
|
||||
label='Password'
|
||||
placeholder='Create a password'
|
||||
name='password'
|
||||
autocomplete='new-password'
|
||||
/>
|
||||
<LabeledInput
|
||||
type='password'
|
||||
label='Confirm Password'
|
||||
placeholder='Repeat your password'
|
||||
name='confirmPassword'
|
||||
autocomplete='new-password'
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LabeledInput
|
||||
type='email'
|
||||
label='E-Mail or Username'
|
||||
|
@ -34,12 +82,18 @@ export default function LoginForm() {
|
|||
placeholder="Let's hope you remember it"
|
||||
name='password'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className='grid grid-rows-2 gap-2'>
|
||||
<Button type='submit' variant='primary'>
|
||||
Login
|
||||
{isSignUp ? 'Sign Up' : 'Login'}
|
||||
</Button>
|
||||
<Button type='submit' variant='outline_primary'>
|
||||
Sign Up
|
||||
<Button
|
||||
type='button'
|
||||
variant='outline_primary'
|
||||
onClick={() => setIsSignUp((v) => !v)}
|
||||
>
|
||||
{isSignUp ? 'Back to Login' : 'Sign Up'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue