implemented session

app/client/pages/login.tsx

@@ -3,12 +3,15 @@ import { Heading, Input, Stack } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
 import { valibotResolver } from '@hookform/resolvers/valibot';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Session } from 'inspector';
+import { useContext } from 'react';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
+import { PasswordInput } from '../components/ui/password-input';
 import { sessionFragment } from '../fragments';
 import { useToastMutation } from '../hooks/useToastMutation';
+import { AuthContext } from '../main';
 
 export const Route = createFileRoute('/login')({
   component: LoginComponent
@@ -29,7 +32,8 @@ interface FormValues {
 }
 
 function LoginForm() {
-  const { update: login } = useToastMutation<Session>({
+  const navigate = useNavigate();
+  const { update: login } = useToastMutation<{ login: Session }>({
     mutation,
     successMsg: 'Logged in successfully.'
   });
@@ -47,6 +51,9 @@ function LoginForm() {
     formState: { errors }
   } = useForm<FormValues>({ resolver: valibotResolver(schema) });
 
+  const { header, setHeaders } = useContext(AuthContext);
+  if (header != null) navigate({ to: '/' });
+
   return (
     <form
       onSubmit={handleSubmit(async values => {
@@ -58,7 +65,10 @@ function LoginForm() {
             }
           }
         });
-        alert(JSON.stringify(data));
+        if (data != null) {
+          setHeaders(data.login);
+          navigate({ to: '/' });
+        }
       })}
     >
       <Stack>
@@ -70,7 +80,7 @@ function LoginForm() {
           invalid={errors.password != null}
           errorText={errors.password?.message}
         >
-          <Input {...register('password')} />
+          <PasswordInput {...register('password')} />
         </Field>
         <Button type="submit">Sign in</Button>
       </Stack>

app/client/pages/register.tsx

@@ -2,9 +2,10 @@ import { gql } from '@apollo/client';
 import { Heading, Input, Stack } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
+import { PasswordInput } from '@client/components/ui/password-input';
 import { Session } from '@generated/types';
 import { valibotResolver } from '@hookform/resolvers/valibot';
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import * as v from 'valibot';
 import { useToastMutation } from '../hooks/useToastMutation';
@@ -30,7 +31,11 @@ interface FormValues {
 }
 
 function SignUpForm() {
-  const { update: signUp } = useToastMutation<Session>({ mutation });
+  const navigate = useNavigate();
+  const { update: signUp } = useToastMutation<Session>({
+    mutation,
+    successMsg: 'Account created successfully'
+  });
 
   const schema = v.pipe(
     v.object({
@@ -65,7 +70,7 @@ function SignUpForm() {
         }
       }
     });
-    redirect({
+    navigate({
       to: '/login'
     });
   });
@@ -88,14 +93,14 @@ function SignUpForm() {
           invalid={errors.password != null}
           errorText={errors.password?.message}
         >
-          <Input {...register('password')} />
+          <PasswordInput {...register('password')} />
         </Field>
         <Field
           label="Confirm password"
           invalid={errors.confirm_password != null}
           errorText={errors.confirm_password?.message}
         >
-          <Input {...register('confirm_password')} />
+          <PasswordInput {...register('confirm_password')} />
         </Field>
         <Button type="submit">Submit</Button>
       </Stack>