-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5e6e30d
commit c3dfb70
Showing
2 changed files
with
77 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,104 +1,89 @@ | ||
'use client'; | ||
|
||
import { useUser } from '@/app/hooks/useUser'; | ||
import { useRouter } from 'next/navigation'; | ||
import React, { useEffect, useState } from 'react'; | ||
import { getClientCookie } from '@/app/utils/stores/cookieStore'; | ||
import { useAuth } from '@/app/user/auth/context/AuthContext'; | ||
import Input from '@/components/layout/input'; | ||
import { Label } from '@/components/ui/label'; | ||
import { Button } from '@/components/ui/button'; | ||
import Loading from '@/app/components/loading'; | ||
|
||
export default function Login() { | ||
const [username, setUsername] = useState(''); | ||
const [password, setPassword] = useState(''); | ||
const [error, setError] = useState(''); | ||
const { login } = useUser(); | ||
const router = useRouter(); | ||
const [authChecked, setAuthChecked] = useState(false); | ||
const [loading, setLoading] = useState(true); | ||
const { isLoggedIn } = useAuth(); | ||
import Logo from '@/components/logo'; | ||
import { Button } from '@/components/ui/button'; | ||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; | ||
import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form'; | ||
import { Input } from '@/components/ui/input'; | ||
import { zodResolver } from '@hookform/resolvers/zod'; | ||
import { useForm } from 'react-hook-form'; | ||
import { z } from 'zod'; | ||
|
||
useEffect(() => { | ||
setAuthChecked(true); | ||
}, [isLoggedIn]); | ||
|
||
useEffect(() => { | ||
if (authChecked && isLoggedIn) { | ||
router.push('/'); | ||
} | ||
}, [authChecked, isLoggedIn, router]); | ||
const formSchema = z.object({ | ||
user_id: z.string(), | ||
password: z.string() | ||
}) | ||
|
||
const handleChange = (fieldType: 'username' | 'password') => (e: any) => { | ||
const setField = fieldType === 'username' ? setUsername : setPassword; | ||
setField(e.target.value); | ||
setError(''); | ||
}; | ||
const Login = () => { | ||
const form = useForm<z.infer<typeof formSchema>>({ | ||
resolver: zodResolver(formSchema), | ||
defaultValues: { | ||
user_id: '', | ||
password: '' | ||
}, | ||
}) | ||
|
||
const handleSubmit: React.FormEventHandler = async (e) => { | ||
e.preventDefault(); | ||
const onSubmit = async (values: z.infer<typeof formSchema>) => { | ||
try { | ||
const r = await login(username, password); | ||
console.log(r); | ||
const success = getClientCookie('tokenDrinking'); | ||
if (success) { | ||
console.log('Logged in'); | ||
router.push('/user/template/home'); | ||
} | ||
} catch (e) { | ||
setError('En feil oppsto under innloggingen.'); | ||
} | ||
}; | ||
|
||
} catch (error) { | ||
|
||
if (!authChecked) { | ||
return <Loading />; | ||
} | ||
} | ||
|
||
return ( | ||
<div className="flex justify-center items-center my-52 w-full"> | ||
<div className="w-full max-w-sm p-4 border rounded-md shadow-lg"> | ||
<h2 className={'text-center text-2xl font-bold mb-6'}> | ||
Logg inn til Blitzed | ||
</h2> | ||
<form className="w-full flex flex-col" onSubmit={handleSubmit}> | ||
<Label htmlFor="username">Brukernavn</Label> | ||
<Input | ||
type="name" | ||
id="username" | ||
onChange={handleChange('username')} | ||
value={username} | ||
/> | ||
<div className={'font-light text-xs mt-1 mb-3'}> | ||
Samme som Tihlde bruker | ||
</div> | ||
<Label htmlFor="password">Passord</Label> | ||
<Input | ||
type="password" | ||
id="password" | ||
onChange={handleChange('password')} | ||
value={password} | ||
/> | ||
<Button className={'mt-4'} type={'submit'}> | ||
Logg inn | ||
</Button> | ||
<a | ||
className="inline-block font-medium text-sm underline text-end mt-3" | ||
href="#" | ||
> | ||
Glemt passord? | ||
</a> | ||
{error && ( | ||
<Label | ||
className={ | ||
'mt-3 text-center text-sm font-normal text-destructive' | ||
} | ||
> | ||
{error} | ||
</Label> | ||
)} | ||
</form> | ||
</div> | ||
<div className='mx-auto mt-20'> | ||
<Card className='max-w-md w-full mx-auto'> | ||
<CardHeader> | ||
<CardTitle> | ||
<Logo className='w-44 mx-auto' /> | ||
</CardTitle> | ||
</CardHeader> | ||
<CardContent> | ||
<Form {...form}> | ||
<form className='space-y-6' onSubmit={form.handleSubmit(onSubmit)}> | ||
<FormField | ||
control={form.control} | ||
name='user_id' | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel> | ||
Brukernavn | ||
</FormLabel> | ||
<FormControl> | ||
<Input {...field} /> | ||
</FormControl> | ||
</FormItem> | ||
)} | ||
/> | ||
|
||
<FormField | ||
control={form.control} | ||
name='password' | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel> | ||
Passord | ||
</FormLabel> | ||
<FormControl> | ||
<Input type='password' {...field} /> | ||
</FormControl> | ||
</FormItem> | ||
)} | ||
/> | ||
|
||
<Button className='w-full' type='submit'> | ||
Logg inn | ||
</Button> | ||
</form> | ||
</Form> | ||
</CardContent> | ||
</Card> | ||
</div> | ||
); | ||
} | ||
}; | ||
|
||
|
||
export default Login; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters