buttons

src/app/auth/components/AuthNavButtons.tsx

@@ -0,0 +1,30 @@
+import { useUser } from '../../user/userStore.ts'
+import NavButton from '../../../components/buttons/NavButton.tsx'
+import { useLocation } from 'react-router-dom'
+
+export default function AuthNavButtons() {
+  const { user } = useUser()
+
+  const { pathname } = useLocation()
+
+  const redirectQuery = new URLSearchParams()
+  redirectQuery.set('t', pathname)
+
+  const loggedIn = user != null
+
+  if (loggedIn) {
+    return (
+      <>
+        <NavButton to="/logout">logout</NavButton>
+      </>
+    )
+  } else {
+    const search = redirectQuery.toString()
+    return (
+      <>
+        <NavButton to={{ pathname: '/login', search }}>login</NavButton>
+        <NavButton to={{ pathname: '/signup', search }}>register</NavButton>
+      </>
+    )
+  }
+}

src/app/auth/pages/LoginPage.tsx

@@ -1,11 +1,13 @@
 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 TextInput from '../../../components/inputs/TextInput.tsx'
+import Button from '../../../components/buttons/Button.tsx'
 import { AuthService } from '../authService.ts'
 import { useNavigate } from 'react-router-dom'
-import SecondaryNavButton from '../../../components/SecondaryNavButton.tsx'
 import { useUser } from '../../user/userStore.ts'
+import NavBar from '../../../components/NavBar.tsx'
+import NavButton from '../../../components/buttons/NavButton.tsx'
+import LinkButton from '../../../components/buttons/LinkButton.tsx'
 
 interface LoginPageProps {
   authService: AuthService
@@ -24,7 +26,8 @@ export default function LoginPage({ authService }: LoginPageProps) {
 
   useEffect(() => {
     if (user) {
-      navigate('/')
+      const search = new URLSearchParams(window.location.search)
+      navigate(search.get('t') || '/')
     }
   }, [user, navigate])
 
@@ -55,7 +58,13 @@ export default function LoginPage({ authService }: LoginPageProps) {
   }
 
   return (
-    <SingleColumnLayout>
+    <SingleColumnLayout
+      navbar={
+        <NavBar>
+          <NavButton to={'/'}>home</NavButton>
+        </NavBar>
+      }
+    >
       <main className="w-full mx-auto p-4">
         <div className="mt-12">
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
@@ -86,11 +95,13 @@ export default function LoginPage({ authService }: LoginPageProps) {
               />
             </div>
 
-            <PrimaryButton className="mt-4" disabled={isSubmitting} type="submit">
+            <Button className="mt-4" disabled={isSubmitting} type="submit">
               {isSubmitting ? 'wait...' : 'make login pls'}
-            </PrimaryButton>
+            </Button>
 
-            <SecondaryNavButton to={'/signup'}>register instead?</SecondaryNavButton>
+            <LinkButton secondary to={{ pathname: '/signup', search: window.location.search }}>
+              register instead?
+            </LinkButton>
 
             <span className="text-xs h-3 text-red-500">{error}</span>
           </form>

src/app/auth/pages/SignupPage.tsx

@@ -1,12 +1,14 @@
 import { useNavigate, useParams } from 'react-router-dom'
 import { useEffect, useRef, useState, FormEvent, useCallback, Ref } from 'react'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
-import TextInput from '../../../components/TextInput.tsx'
-import PrimaryButton from '../../../components/PrimaryButton.tsx'
-import PrimaryLinkButton from '../../../components/PrimaryLinkButton.tsx'
+import TextInput from '../../../components/inputs/TextInput.tsx'
+import Button from '../../../components/buttons/Button.tsx'
+import AnchorButton from '../../../components/buttons/AnchorButton.tsx'
 import { invalid, valid, Validation } from '../../../utils/validation.ts'
 import { AuthService } from '../authService.ts'
-import SecondaryNavButton from '../../../components/SecondaryNavButton.tsx'
+import LinkButton from '../../../components/buttons/LinkButton.tsx'
+import NavBar from '../../../components/NavBar.tsx'
+import NavButton from '../../../components/buttons/NavButton.tsx'
 
 const SignupCodeKey = 'signupCode'
 
@@ -82,7 +84,13 @@ export default function SignupPage({ authService }: SignupPageProps) {
   }
 
   return (
-    <SingleColumnLayout>
+    <SingleColumnLayout
+      navbar={
+        <NavBar>
+          <NavButton to={'/'}>home</NavButton>
+        </NavBar>
+      }
+    >
       <main className="w-full mx-auto p-4">
         <div className="mt-12">
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
@@ -102,14 +110,16 @@ export default function SignupPage({ authService }: SignupPageProps) {
               type="password"
               ref={passwordInputRef}
             />
-            <PrimaryButton
+            <Button
               className="mt-4"
               disabled={isSubmitting || !!usernameError || !!passwordError}
               type="submit"
             >
               {isSubmitting ? 'wait...' : 'give me an account pls'}
-            </PrimaryButton>
-            <SecondaryNavButton to={'/login'}>login instead?</SecondaryNavButton>
+            </Button>
+            <LinkButton secondary to={'/login'}>
+              login instead?
+            </LinkButton>
           </form>
         </div>
       </main>
@@ -130,9 +140,9 @@ export default function SignupPage({ authService }: SignupPageProps) {
             If you <span className="italic">do</span> want to create an account, you should know who
             to contact
           </p>
-          <PrimaryLinkButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
+          <AnchorButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
             I'm sorry I'll go somewhere else :(
-          </PrimaryLinkButton>
+          </AnchorButton>
         </div>
       </dialog>
     </SingleColumnLayout>