feat: enhance login form with sign-up input-fields and autocomplete attributes

This commit is contained in:
micha 2025-06-08 00:53:27 +02:00 committed by Dominik
parent abae5c74d5
commit 6c479e80d6
2 changed files with 74 additions and 17 deletions

View file

@ -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>
);

View file

@ -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>