src/app/admin/pages/subpages/SignupCodesManagementPage.tsx

@@ -1,5 +1,5 @@
 import { AuthService } from '../../../auth/authService.ts'
-import { useEffect, useState, useRef, MouseEvent, useCallback } from 'react'
+import { useEffect, useState, useRef, MouseEvent } from 'react'
 import { SignupCode } from '../../../auth/signupCode.ts'
 import { Temporal } from '@js-temporal/polyfill'
 import Button from '../../../../components/buttons/Button.tsx'
@@ -12,24 +12,25 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
   const [codes, setCodes] = useState<SignupCode[]>([])
   const [code, setCode] = useState('')
   const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const dialogRef = useRef<HTMLDialogElement>(null)
   const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null)
   const [activeCode, setActiveCode] = useState<string | null>(null)
 
-  const fetchCodes = useCallback(async () => {
+  const fetchCodes = async () => {
     try {
       setCodes(await authService.listSignupCodes())
     } catch (err) {
       console.error('Failed to fetch signup codes:', err)
     }
-  }, [authService])
+  }
 
   useEffect(() => {
     const timeoutId = setTimeout(fetchCodes)
     return () => clearTimeout(timeoutId)
-  }, [authService, fetchCodes])
+  }, [authService])
 
   const handleCreateCode = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -37,11 +38,12 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
     setError(null)
 
     try {
-      await authService.createSignupCode(code, name)
+      await authService.createSignupCode(code, email, name)
       setCode('')
       setName('')
+      setEmail('')
       dialogRef.current?.close()
-      fetchCodes()
+      fetchCodes() // Refresh the table
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create signup code')
     } finally {
@@ -114,6 +116,7 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
           <thead>
             <tr>
               <th className="text-left">Code</th>
+              <th className="text-left">Email</th>
               <th className="text-left">Redeemed By</th>
               <th className="text-left">Expires On</th>
             </tr>
@@ -131,6 +134,7 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
                     {code.code}
                   </button>
                 </td>
+                <td>{code.email}</td>
                 <td>{code.redeemedBy || 'Not redeemed'}</td>
                 <td>{formatDate(code.expiresOn)}</td>
               </tr>
@@ -187,6 +191,19 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
             />
           </div>
 
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+            />
+          </div>
+
           <div className="flex justify-end space-x-2">
             <Button type="button" onClick={closeDialog} secondary>
               Cancel

src/app/auth/authService.ts

@@ -19,12 +19,7 @@ export class AuthService {
     dispatchMessage('auth:logged-in', null)
   }
 
-  async signup(
+  async signup(username: string, password: string, signupCode: string, rememberMe: boolean = false) {
-    username: string,
-    password: string,
-    signupCode: string,
-    rememberMe: boolean = false,
-  ) {
     const res = await this.client.POST('/auth/register', {
       body: { username, password, signupCode, email: null, rememberMe },
       credentials: 'include',
@@ -44,9 +39,9 @@ export class AuthService {
     dispatchMessage('auth:logged-out', null)
   }
 
-  async createSignupCode(code: string, name: string) {
+  async createSignupCode(code: string, email: string, name: string) {
     const res = await this.client.POST('/auth/signup-codes', {
-      body: { code, name },
+      body: { code, email, name },
       credentials: 'include',
     })
 

src/app/auth/components/AuthNavButtons.tsx

@@ -1,7 +1,7 @@
 import { useUser } from '../../user/user.ts'
 import NavButton from '../../../components/buttons/NavButton.tsx'
 import { useLocation } from 'react-router-dom'
-import { useTranslations } from '../../i18n/translations.ts'
+import { useTranslations } from '../../i18n/useTranslations.ts'
 
 export default function AuthNavButtons() {
   const { t } = useTranslations()

src/app/auth/pages/LoginPage.tsx

@@ -8,7 +8,7 @@ import { useUser } from '../../user/user.ts'
 import NavBar from '../../../components/NavBar.tsx'
 import NavButton from '../../../components/buttons/NavButton.tsx'
 import LinkButton from '../../../components/buttons/LinkButton.tsx'
-import { useTranslations } from '../../i18n/translations.ts'
+import { useTranslations } from '../../i18n/useTranslations.ts'
 
 interface LoginPageProps {
   authService: AuthService

src/app/auth/pages/SignupPage.tsx

@@ -8,7 +8,7 @@ import { AuthService } from '../authService.ts'
 import LinkButton from '../../../components/buttons/LinkButton.tsx'
 import NavBar from '../../../components/NavBar.tsx'
 import NavButton from '../../../components/buttons/NavButton.tsx'
-import { useTranslations } from '../../i18n/translations.ts'
+import { useTranslations } from '../../i18n/useTranslations.ts'
 
 const SignupCodeKey = 'signupCode'
 

src/app/i18n/translationKeys.ts

@@ -0,0 +1,24 @@
+export interface Translations {
+  'auth.login.cta': string
+  'auth.login.register_instead': string
+  'auth.password.label': string
+  'auth.register.cta': string
+  'auth.register.login_instead': string
+  'auth.remember_me.label': string
+  'auth.username.label': string
+
+  'misc.loading': string
+
+  'nav.admin': string
+  'nav.home': string
+  'nav.login': string
+  'nav.logout': string
+  'nav.register': string
+
+  'post.add_media.cta': string
+  'post.editor.placeholder': string
+  'post.public.label': string
+  'post.submit.cta': string
+}
+
+export type TranslationKey = keyof Translations

src/app/i18n/translations.ts

@@ -1,41 +0,0 @@
-import en from './translations/en.json' assert { type: 'json' }
-
-interface Translation {
-  'auth.login.cta': string
-  'auth.login.register_instead': string
-  'auth.password.label': string
-  'auth.register.cta': string
-  'auth.register.login_instead': string
-  'auth.remember_me.label': string
-  'auth.username.label': string
-
-  'misc.loading': string
-
-  'nav.admin': string
-  'nav.home': string
-  'nav.login': string
-  'nav.logout': string
-  'nav.register': string
-
-  'post.add_media.cta': string
-  'post.editor.placeholder': string
-  'post.public.label': string
-  'post.submit.cta': string
-}
-
-export type TranslationKey = keyof Translation
-
-export interface UseTranslations {
-  t: <K extends TranslationKey>(key: K) => Translation[K]
-}
-
-export function useTranslations(): UseTranslations {
-  // TODO somehow handle other languages (reactively)
-  const texts = en as Translation
-
-  function getText<K extends TranslationKey>(key: K): Translation[K] {
-    return texts[key] ?? key
-  }
-
-  return { t: getText }
-}

src/app/i18n/useTranslations.ts

@@ -0,0 +1,13 @@
+import { TranslationKey, Translations } from './translationKeys.ts'
+import en from './en.json' assert { type: 'json' }
+
+export function useTranslations() {
+  // TODO somehow handle other languages (reactively)
+  const texts = en as Translations
+
+  function getText<K extends TranslationKey>(key: K): Translations[K] {
+    return texts[key] ?? key
+  }
+
+  return { t: getText }
+}

src/components/NewPostWidget.tsx

@@ -3,7 +3,7 @@ import FancyTextEditor, { TextInputKeyDownEvent } from './inputs/FancyTextEditor
 import Button from './buttons/Button.tsx'
 import { openFileDialog } from '../utils/openFileDialog.ts'
 import makePica from 'pica'
-import { useTranslations } from '../app/i18n/translations.ts'
+import { useTranslations } from '../app/i18n/useTranslations.ts'
 
 interface NewPostWidgetProps {
   onSubmit: (