started on login logic

app/user/auth/login/page.tsx

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

components/layout/navbar.tsx

@@ -31,12 +31,12 @@ export default function Navbar() {
 */}
         <a href="/user/template/home">
           <Logo
-            className="fill-primary hidden sm:block"
+            className="fill-black hidden sm:block"
             width={200}
             height={'auto'}
           />
           <LogoSmall
-            className="fill-primary sm:hidden block"
+            className="fill-black sm:hidden block"
             width={200}
             height={'auto'}
           />