use dynamic translations

src/app/auth/pages/LoginPage.tsx

@@ -8,12 +8,15 @@ 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/useTranslations.ts'
 
 interface LoginPageProps {
   authService: AuthService
 }
 
 export default function LoginPage({ authService }: LoginPageProps) {
+  const { t } = useTranslations()
+
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -62,7 +65,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
     <SingleColumnLayout
       navbar={
         <NavBar>
-          <NavButton to={'/'}>home</NavButton>
+          <NavButton to={'/'}>{t('nav.home')}</NavButton>
         </NavBar>
       }
     >
@@ -71,7 +74,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
             <div className="flex flex-col gap-1">
               <label htmlFor="username" className="text-sm text-gray-600">
-                username
+                {t('auth.username.label')}
               </label>
               <TextInput
                 ref={usernameInputRef}
@@ -84,7 +87,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
 
             <div className="flex flex-col gap-1">
               <label htmlFor="password" className="text-sm text-gray-600">
-                password
+                {t('auth.password.label')}
               </label>
               <TextInput
                 ref={passwordInputRef}
@@ -105,16 +108,16 @@ export default function LoginPage({ authService }: LoginPageProps) {
                 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 className="mt-4" disabled={isSubmitting} type="submit">
-              {isSubmitting ? 'wait...' : 'make login pls'}
+              {isSubmitting ? t('misc.loading') : t('auth.login.cta')}
             </Button>
 
             <LinkButton secondary to={{ pathname: '/signup', search: window.location.search }}>
-              register instead?
+              {t('auth.login.register_instead')}
             </LinkButton>
 
             <span className="text-xs h-3 text-red-500">{error}</span>