Translate /signin and /register

web/messages/fr.json

@@ -120,5 +120,31 @@
   "vote.form.submit": "Soumettre",
   "vote.toast.create_failed": "Échec de la création de la proposition — réessayez ou contactez-nous...",
   "vote.toast.created": "Proposition créée",
-  "vote.creator.placeholder": "Veuillez décrire votre proposition ici"
+  "vote.creator.placeholder": "Veuillez décrire votre proposition ici",
+  "signin.seo.title": "Se connecter",
+  "signin.seo.description": "Connectez-vous à votre compte",
+  "signin.title": "Se connecter",
+  "signin.email": "Courriel",
+  "signin.password": "Mot de passe",
+  "signin.password_placeholder": "Votre mot de passe",
+  "signin.submit": "Se connecter",
+  "signin.no_account": "Vous n'avez pas de compte ?",
+  "signin.link_sign_up": "S'inscrire",
+  "signin.forgot_password": "Mot de passe oublié ?",
+  "signup.seo.title": "S'inscrire",
+  "signup.seo.description": "Créez un nouveau compte",
+  "signup.title": "Créer un compte",
+  "signup.name": "Nom",
+  "signup.name_placeholder": "Votre nom",
+  "signup.email": "Courriel",
+  "signup.email_placeholder": "vous@exemple.com",
+  "signup.password": "Mot de passe",
+  "signup.password_placeholder": "Créez un mot de passe",
+  "signup.password_confirm": "Confirmez le mot de passe",
+  "signup.password_confirm_placeholder": "Confirmez votre mot de passe",
+  "signup.submit": "Créer le compte",
+  "signup.have_account": "Vous avez déjà un compte ?",
+  "signup.link_sign_in": "Se connecter",
+  "signup.error_password_mismatch": "Les mots de passe ne correspondent pas",
+  "signup.toast.created": "Compte créé"
 }

web/pages/signin.tsx

@@ -16,6 +16,7 @@ import {GoogleButton} from "web/components/buttons/sign-up-button"
 import {SEO} from "web/components/SEO"
 import {logger} from "common/logging";
 import FavIcon from "web/components/FavIcon";
+import {useT} from 'web/lib/locale'
 
 export default function LoginPage() {
   return (
@@ -26,6 +27,7 @@ export default function LoginPage() {
 }
 
 function RegisterComponent() {
+  const t = useT()
   const searchParams = useSearchParams()
   const [error, setError] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -123,8 +125,8 @@ function RegisterComponent() {
   return (
     <PageBase trackPageView={'signin'}>
       <SEO
-        title={'Sign In'}
-        description={'Sign in to your account'}
+        title={t('signin.seo.title','Sign in')}
+        description={t('signin.seo.description','Sign in to your account')}
         url={`/signin`}
       />
       <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -133,36 +135,30 @@ function RegisterComponent() {
             <div className="flex justify-center mb-6">
               <FavIcon className="dark:invert"/>
             </div>
-            <h2 className="mt-6 text-center text-3xl font-extrabold ">
-              Sign in to your account
-            </h2>
+            <h1 className="text-2xl font-bold">{t('signin.title','Sign in')}</h1>
           </div>
           <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
             <div className="rounded-md shadow-sm -space-y-px">
               <div>
-                <label htmlFor="email" className="sr-only">
-                  Email
-                </label>
+                <label className="block text-sm font-medium text-gray-700">{t('signin.email','Email')}</label>
                 <input
                   id="email"
                   name="email"
                   type="email"
                   required
                   className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                  placeholder="Email"
+                  placeholder={'you@example.com'}
                 />
               </div>
               <div>
-                <label htmlFor="password" className="sr-only">
-                  Password
-                </label>
+                <label className="mt-4 block text-sm font-medium text-gray-700">{t('signin.password','Password')}</label>
                 <input
                   id="password"
                   name="password"
                   type="password"
                   required
                   className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                  placeholder="Password"
+                  placeholder={t('signin.password_placeholder','Your password')}
                 />
                 <div className="text-right mt-1 custom-link">
                   <button
@@ -182,7 +178,7 @@ function RegisterComponent() {
                     }}
                     className="text-sm focus:outline-none"
                   >
-                    Forgot password?
+                    {t('signin.forgot_password','Forgot password?')}
                   </button>
                 </div>
               </div>
@@ -198,7 +194,7 @@ function RegisterComponent() {
                 disabled={isLoading}
                 className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
               >
-                {isLoading ? 'Signing in...' : 'Sign in with Email'}
+                {isLoading ? 'Signing in...' : t('signin.submit','Sign in')}
               </button>
 
               <div className="relative">
@@ -213,10 +209,10 @@ function RegisterComponent() {
             </div>
           </form>
           <div className="text-center custom-link">
-            <p className="">
-              No account?{' '}
+            <p className="mt-4 text-sm">
+              {t('signin.no_account',"Don't have an account?")}{' '}
               <Link href="/register">
-                Register
+                {t('signin.link_sign_up','Register')}
               </Link>
             </p>
           </div>

web/pages/signup.tsx

@@ -15,8 +15,10 @@ import {useProfileByUserId} from 'web/hooks/use-profile'
 import {ProfileWithoutUser} from 'common/profiles/profile'
 import {PageBase} from "web/components/page-base";
 import {SEO} from "web/components/SEO";
+import {useT} from 'web/lib/locale'
 
 export default function SignupPage() {
+  const t = useT()
   const [step, setStep] = useState(0)
   const user = useUser()
   // console.debug('user:', user)
@@ -74,8 +76,8 @@ export default function SignupPage() {
   if (step === 1 && user) {
     return <PageBase trackPageView={'register'}>
       <SEO
-        title={'Sign Up'}
-        description={'Sign Up to Compass'}
+        title={t('signup.seo.title','Sign up')}
+        description={t('signup.seo.description','Create a new account')}
         url={`/signup`}
       />
       <Col className={'w-full px-6 py-4'}>