use dynamic translations

src/app/auth/pages/SignupPage.tsx

@@ -3,12 +3,12 @@ import { useEffect, useRef, useState, FormEvent, useCallback, Ref } from 'react'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.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 LinkButton from '../../../components/buttons/LinkButton.tsx'
 import NavBar from '../../../components/NavBar.tsx'
 import NavButton from '../../../components/buttons/NavButton.tsx'
+import { useTranslations } from '../../i18n/useTranslations.ts'
 
 const SignupCodeKey = 'signupCode'
 
@@ -17,6 +17,7 @@ interface SignupPageProps {
 }
 
 export default function SignupPage({ authService }: SignupPageProps) {
+  const { t } = useTranslations()
   const { code } = useParams()
   const [signupCode, setSignupCode] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -31,8 +32,6 @@ export default function SignupPage({ authService }: SignupPageProps) {
   const userNameInputRef = useRef<HTMLInputElement | null>(null)
   const passwordInputRef = useRef<HTMLInputElement | null>(null)
 
-  const dialogRef = useRef<HTMLDialogElement | null>(null)
-
   const navigate = useNavigate()
 
   useEffect(() => {
@@ -47,10 +46,6 @@ export default function SignupPage({ authService }: SignupPageProps) {
       theSignupCode = localStorage.getItem(SignupCodeKey)
       setSignupCode(theSignupCode)
     }
-
-    if (!theSignupCode) {
-      dialogRef.current?.showModal()
-    }
   }, [code, signupCode])
 
   useEffect(() => {}, [signupCode])
@@ -94,7 +89,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
     <SingleColumnLayout
       navbar={
         <NavBar>
-          <NavButton to={'/'}>home</NavButton>
+          <NavButton to={'/'}>{t('nav.home')}</NavButton>
         </NavBar>
       }
     >
@@ -103,6 +98,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
             <FormInput
               id="username"
+              label={t('auth.username.label')}
               value={username}
               onInput={setUsername}
               error={usernameError}
@@ -111,13 +107,14 @@ export default function SignupPage({ authService }: SignupPageProps) {
 
             <FormInput
               id="password"
+              label={t('auth.password.label')}
               value={password}
               onInput={setPassword}
               error={passwordError}
               type="password"
               ref={passwordInputRef}
             />
-            <div className="flex items-center gap-2 mt-2">
+            <div className="flex items-center hidden gap-2 mt-2">
               <input
                 type="checkbox"
                 id="rememberMe"
@@ -126,7 +123,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
                 className="h-4 w-4"
               />
               <label htmlFor="rememberMe" className="text-sm text-gray-600">
-                DONT log me out &gt;:(
+                {t('auth.remember_me.label')}
               </label>
             </div>
             <Button
@@ -134,44 +131,23 @@ export default function SignupPage({ authService }: SignupPageProps) {
               disabled={isSubmitting || !!usernameError || !!passwordError}
               type="submit"
             >
-              {isSubmitting ? 'wait...' : 'give me an account pls'}
+              {isSubmitting ? t('misc.loading') : t('auth.register.cta')}
             </Button>
             <LinkButton secondary to={'/login'}>
-              login instead?
+              {t('auth.register.login_instead')}
             </LinkButton>
 
             <span className="text-xs h-3 text-red-500">{error}</span>
           </form>
         </div>
       </main>
-
-      <dialog
-        id="go-away-dialog"
-        ref={dialogRef}
-        className="p-6 rounded-lg shadow-lg m-auto outline-none"
-      >
-        <div className="text-gray-600 flex flex-col gap-2">
-          <h1 className={`font-bold text-lg`}>STOP !!!</h1>
-          <p>You need an invitation to sign up</p>
-          <p>
-            I'm surprised you even found your way here without one and honestly I'd prefer it if you
-            would leave
-          </p>
-          <p>
-            If you <span className="italic">do</span> want to create an account, you should know who
-            to contact
-          </p>
-          <AnchorButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
-            I'm sorry I'll go somewhere else :(
-          </AnchorButton>
-        </div>
-      </dialog>
     </SingleColumnLayout>
   )
 }
 
 interface FormInputProps {
   id: string
+  label: string
   value: string
   onInput: (value: string) => void
   error: string | null
@@ -179,11 +155,11 @@ interface FormInputProps {
   ref: Ref<HTMLInputElement>
 }
 
-function FormInput({ id, value, onInput, error, type = 'text', ref }: FormInputProps) {
+function FormInput({ id, label, value, onInput, error, type = 'text', ref }: FormInputProps) {
   return (
     <div className="flex flex-col gap-1">
       <label htmlFor={id} className="text-sm text-gray-600">
-        {id}
+        {label}
       </label>
       <TextInput ref={ref} type={type} id={id} value={value} onInput={onInput} />
       <div className="text-xs h-3 text-red-500">{error}</div>