wip

src/app/auth/components/Protected.tsx

@@ -1,13 +1,17 @@
 import { useUser } from '../../user/userStore.ts'
 import { useNavigate, Outlet } from 'react-router-dom'
+import { useEffect } from 'react'
 
 export default function Protected() {
-  const [user] = useUser()
+  const { user } = useUser()
 
   const navigate = useNavigate()
-  if (!user) {
-    navigate('/login')
-  }
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login')
+    }
+  }, [user, navigate])
 
   return <Outlet />
 }

src/app/auth/components/UnauthorizedHandler.tsx

@@ -9,7 +9,6 @@ export default function UnauthorizedHandler({
 }: PropsWithChildren<UnauthorizedHandlerProps>) {
   const navigate = useNavigate()
   useMessageListener('auth:unauthorized', async () => {
-    console.debug('unauth triggered')
     navigate('/logout')
   })
 

src/app/auth/pages/LoginPage.tsx

@@ -1,10 +1,11 @@
-import { useRef, useState, FormEvent } from 'react'
+import { useRef, useState, FormEvent, useEffect } from 'react'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
 import TextInput from '../../../components/TextInput.tsx'
 import PrimaryButton from '../../../components/PrimaryButton.tsx'
 import { AuthService } from '../authService.ts'
 import { useNavigate } from 'react-router-dom'
 import SecondaryNavButton from '../../../components/SecondaryNavButton.tsx'
+import { useUser } from '../../user/userStore.ts'
 
 interface LoginPageProps {
   authService: AuthService
@@ -19,16 +20,24 @@ export default function LoginPage({ authService }: LoginPageProps) {
   const passwordInputRef = useRef<HTMLInputElement | null>(null)
   const navigate = useNavigate()
 
+  const { user } = useUser()
+
+  useEffect(() => {
+    if (user) {
+      navigate('/')
+    }
+  }, [user, navigate])
+
   const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     if (!username) {
-      setError("you didn't username D:<")
+      setError("it's not username :(")
       return
     }
 
     if (!password) {
-      setError("you didn't password D:<")
+      setError("it's not password :(")
       return
     }
 
@@ -38,7 +47,6 @@ export default function LoginPage({ authService }: LoginPageProps) {
 
     try {
       await authService.login(username, password)
-      navigate('/')
     } catch (error: unknown) {
       setError(error instanceof Error ? error.message : 'something went terribly wrong')
     } finally {
@@ -60,6 +68,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
                 id="username"
                 value={username}
                 onInput={setUsername}
+                className={'mb-4'}
               />
             </div>
 
@@ -73,6 +82,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
                 id="password"
                 value={password}
                 onInput={setPassword}
+                className={'mb-3'}
               />
             </div>
 

src/app/auth/pages/LogoutPage.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import { AuthService } from '../authService.ts'
 import { useEffect } from 'react'
+import { useUser } from '../../user/userStore.ts'
 
 interface LogoutPageProps {
   authService: AuthService
@@ -8,15 +9,18 @@ interface LogoutPageProps {
 
 export default function LogoutPage({ authService }: LogoutPageProps) {
   const navigate = useNavigate()
+  const { user } = useUser()
 
   useEffect(() => {
-    const timeout = setTimeout(async () => {
+    if (!user) {
       navigate('/login')
-      await authService.logout()
-    })
+    }
+  }, [user, navigate])
 
+  useEffect(() => {
+    const timeout = setTimeout(() => authService.logout())
     return () => clearTimeout(timeout)
-  }, [authService, navigate])
+  }, [authService])
 
   return <></>
 }

src/app/auth/pages/SignupPage.tsx

@@ -155,7 +155,7 @@ function FormInput({ id, value, onInput, error, type = 'text', ref }: FormInputP
         {id}
       </label>
       <TextInput ref={ref} type={type} id={id} value={value} onInput={onInput} />
-      <span className="text-xs h-3 text-red-500">{error}</span>
+      <div className="text-xs h-3 text-red-500">{error}</div>
     </div>
   )
 }