chore: auth i18n

undb-io · Nov 26, 2024 · df9fc41 · df9fc41
1 parent 604d71f
commit df9fc41
Show file tree

Hide file tree

Showing 17 changed files with 1,223 additions and 48 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/auth/login.svelte b/apps/frontend/src/lib/components/blocks/auth/login.svelte
@@ -16,6 +16,7 @@
   import autoAnimate from "@formkit/auto-animate"
   import { LoaderCircleIcon } from "lucide-svelte"
   import ResetPassword from "$lib/components/blocks/auth/reset-password.svelte"
+  import { LL } from "@undb/i18n/client"
   import { page } from "$app/stores"
 
   export let registrationEnabled: boolean
@@ -38,7 +39,7 @@
       try {
         const { ok } = await fetch("/api/login", { method: "POST", body: JSON.stringify(input) })
         if (!ok) {
-          throw new Error("Failed to login")
+          throw new Error(LL.auth.loginFailed())
         }
         return
       } catch (error) {
@@ -93,12 +94,12 @@
       <div class="grid gap-2">
         <Form.Field {form} name="email">
           <Form.Control let:attrs>
-            <Form.Label for="email">Email</Form.Label>
+            <Form.Label for="email">{$LL.common.email()}</Form.Label>
             <Input
               {...attrs}
               id="email"
               type="email"
-              placeholder="Enter your email to login"
+              placeholder={$LL.auth.emailPlaceholder()}
               bind:value={$formData.email}
             />
           </Form.Control>
@@ -110,14 +111,14 @@
         <Form.Field {form} name="password">
           <Form.Control let:attrs>
             <div class="flex justify-between">
-              <Label for="password">Password</Label>
+              <Label for="password">{$LL.auth.password()}</Label>
               <Button
                 tabindex={-1}
                 variant="link"
                 class="ml-auto h-auto p-0 text-sm"
                 on:click={() => {
                   resetPassword = true
-                }}>Forgot your password?</Button
+                }}>{$LL.auth.forgotPassword()}</Button
               >
             </div>
             <PasswordInput {...attrs} id="password" placeholder="*****" bind:value={$formData.password} />
@@ -130,29 +131,32 @@
         {#if $loginMutation.isPending}
           <LoaderCircleIcon class="mr-2 h-5 w-5 animate-spin" />
         {/if}
-        Login
+        {$LL.auth.login()}
       </Form.Button>
     </div>
     <div class="mt-4" use:autoAnimate>
       {#if loginError}
         <Alert.Root variant="destructive">
-          <Alert.Title>Error</Alert.Title>
-          <Alert.Description>Invalid email or password.</Alert.Description>
+          <Alert.Title>{$LL.common.error()}</Alert.Title>
+          <Alert.Description>{$LL.auth.invalidEmailOrPassword()}</Alert.Description>
         </Alert.Root>
       {/if}
     </div>
     {#if registrationEnabled}
       <div class="mt-4 text-center text-sm">
-        Don&apos;t have an account?
+        {$LL.auth.noAccount()}
         {#if redirect}
-          <a href="/signup?redirect={encodeURIComponent(redirect)}" class="underline"> Sign up </a>
+          <a href="/signup?redirect={encodeURIComponent(redirect)}" class="underline"> {$LL.auth.register()}</a>
         {:else}
-          <a href="/signup" class="underline"> Sign up </a>
+          <a href="/signup" class="underline"> {$LL.auth.register()}</a>
         {/if}
       </div>
     {:else}
       <p class="text-muted-foreground mt-4 text-center text-xs">
-        Registration is disabled. <br /> Contact your administrator to request access.
+        {$LL.auth.registerDisabled()}
+
+        <br />
+        {$LL.auth.registerDisabledDescription()}
       </p>
     {/if}
     {#if githubEnabled || googleEnabled}
@@ -161,13 +165,13 @@
         {#if githubEnabled}
           <Button href="/login/github" variant="secondary" class="w-full">
             <img class="mr-2 h-4 w-4" src={Github} alt="github" />
-            Login with Github
+            {$LL.auth.loginWith({ provider: "GitHub" })}
           </Button>
         {/if}
         {#if googleEnabled}
           <Button href="/login/google" variant="secondary" class="w-full">
             <img class="mr-2 h-4 w-4" src={Google} alt="google" />
-            Login with Google
+            {$LL.auth.loginWith({ provider: "Google" })}
           </Button>
         {/if}
       </div>

diff --git a/apps/frontend/src/lib/components/blocks/auth/reset-password.svelte b/apps/frontend/src/lib/components/blocks/auth/reset-password.svelte
@@ -9,6 +9,7 @@
   import * as Form from "$lib/components/ui/form"
   import { LoaderCircleIcon } from "lucide-svelte"
   import * as Alert from "$lib/components/ui/alert"
+  import { LL } from "@undb/i18n/client"
 
   const schema = z.object({
     email: z.string().email(),
@@ -57,27 +58,27 @@
 
 {#if $resetPasswordMutation.isSuccess}
   <Alert.Root>
-    <Alert.Title>Email sent!</Alert.Title>
-    <Alert.Description>You can check your email address and follow the steps to reset your password.</Alert.Description>
+    <Alert.Title>{$LL.auth.emailSent()}</Alert.Title>
+    <Alert.Description>{$LL.auth.youCanCheckYourEmailAddressAndFollowTheStepsToResetYourPassword()}</Alert.Description>
   </Alert.Root>
 {:else}
   <form method="POST" use:enhance>
     <Card.Root class="mx-auto">
       <Card.Header>
-        <Card.Title class="text-2xl">Reset password</Card.Title>
-        <Card.Description>Enter your email below to reset your password.</Card.Description>
+        <Card.Title class="text-2xl">{$LL.auth.resetPassword()}</Card.Title>
+        <Card.Description>{$LL.auth.enterYourEmailBelowToResetYourPassword()}</Card.Description>
       </Card.Header>
       <Card.Content>
         <div class="grid gap-4">
           <div class="grid gap-2">
             <Form.Field {form} name="email">
               <Form.Control let:attrs>
-                <Form.Label for="email">Email</Form.Label>
+                <Form.Label for="email">{$LL.common.email()}</Form.Label>
                 <Input
                   {...attrs}
                   id="email"
                   type="email"
-                  placeholder="Enter your email to reset password."
+                  placeholder={$LL.auth.enterYourEmailBelowToResetYourPassword()}
                   bind:value={$formData.email}
                 />
               </Form.Control>
@@ -89,7 +90,7 @@
             {#if $resetPasswordMutation.isPending}
               <LoaderCircleIcon class="mr-2 h-5 w-5 animate-spin" />
             {/if}
-            Reset
+            {$LL.auth.resetPassword()}
           </Form.Button>
         </div>
       </Card.Content>

diff --git a/apps/frontend/src/lib/components/blocks/auth/signup.svelte b/apps/frontend/src/lib/components/blocks/auth/signup.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { goto } from "$app/navigation"
   import { Button } from "$lib/components/ui/button/index.js"
   import { Input } from "$lib/components/ui/input/index.js"
   import { Label } from "$lib/components/ui/label/index.js"
-  import Logo from "$lib/images/logo.svg"
   import Github from "$lib/images/github.svg"
   import Google from "$lib/images/Google.svg"
   import { createMutation } from "@tanstack/svelte-query"
@@ -15,6 +13,7 @@
   import PasswordInput from "$lib/components/ui/input/password-input.svelte"
   import { LoaderCircleIcon } from "lucide-svelte"
   import { cn } from "$lib/utils"
+  import { LL } from "@undb/i18n/client"
 
   export let redirect: string | null
   export let invitationId: string | null
@@ -36,7 +35,7 @@
       }),
     )
     .refine((data) => data.password === data.confirmPassword, {
-      message: "Passwords do not match",
+      message: $LL.auth.passwordDoesNotMatch(),
     })
 
   type SignupSchema = z.infer<typeof schema>
@@ -51,7 +50,7 @@
           body: JSON.stringify({ ...input, invitationId }),
         })
         if (!ok) {
-          throw new Error("Failed to signup")
+          throw new Error($LL.auth.registerFailed())
         }
       } catch (error) {
         signupError = true
@@ -104,8 +103,13 @@
     <div class="grid gap-2">
       <Form.Field {form} name="username">
         <Form.Control let:attrs>
-          <Form.Label for="username">Username</Form.Label>
-          <Input {...attrs} placeholder="Enter your display username" id="username" bind:value={$formData.username} />
+          <Form.Label for="username">{$LL.auth.username()}</Form.Label>
+          <Input
+            {...attrs}
+            placeholder={$LL.auth.enterYourDisplayUsername()}
+            id="username"
+            bind:value={$formData.username}
+          />
         </Form.Control>
         <Form.Description />
         <Form.FieldErrors />
@@ -114,10 +118,10 @@
     <div class="grid gap-2">
       <Form.Field {form} name="email">
         <Form.Control let:attrs>
-          <Form.Label for="email"
-            >Email
+          <Form.Label for="email">
+            {$LL.common.email()}
             {#if invitationId}
-              <span class="text-green-500"> (Invited)</span>
+              <span class="text-green-500"> ({$LL.auth.invited()})</span>
             {/if}
           </Form.Label>
           <Input
@@ -126,7 +130,7 @@
             id="email"
             type="email"
             class={cn(!!invitationId && "border-2 border-green-500")}
-            placeholder="Enter your work email"
+            placeholder={$LL.auth.enterYourWorkEmail()}
             bind:value={$formData.email}
           />
         </Form.Control>
@@ -138,7 +142,7 @@
       <Form.Field {form} name="password">
         <Form.Control let:attrs>
           <div class="flex justify-between">
-            <Label for="password">Password</Label>
+            <Form.Label for="password">{$LL.auth.password()}</Form.Label>
           </div>
           <PasswordInput
             {...attrs}
@@ -156,7 +160,7 @@
       <Form.Field {form} name="confirmPassword">
         <Form.Control let:attrs>
           <div class="flex justify-between">
-            <Label for="confirmPassword">Confirm Password</Label>
+            <Form.Label for="confirmPassword">{$LL.auth.confirmPassword()}</Form.Label>
           </div>
           <PasswordInput
             {...attrs}
@@ -174,17 +178,17 @@
       {#if $signupMutation.isPending}
         <LoaderCircleIcon class="mr-2 h-5 w-5 animate-spin" />
       {/if}
-      Create an account
+      {$LL.auth.createAnAccount()}
     </Button>
   </div>
   <div class="mt-4 text-center text-sm">
-    Already have an account?
+    {$LL.auth.alreadyHaveAnAccount()}
     {#if invitationId}
-      <a href={`/login?invitationId=${invitationId}`} class="underline"> Sign in </a>
+      <a href={`/login?invitationId=${invitationId}`} class="underline"> {$LL.auth.signIn()}</a>
     {:else if redirect}
-      <a href={`/login?redirect=${encodeURIComponent(redirect)}`} class="underline"> Sign in </a>
+      <a href={`/login?redirect=${encodeURIComponent(redirect)}`} class="underline"> {$LL.auth.signIn()}</a>
     {:else}
-      <a href="/login" class="underline"> Sign in </a>
+      <a href="/login" class="underline"> {$LL.auth.signIn()}</a>
     {/if}
   </div>
   {#if !invitationId && (githubEnabled || googleEnabled)}
@@ -193,13 +197,13 @@
       {#if githubEnabled}
         <Button href="/login/github" variant="secondary" class="w-full">
           <img class="mr-2 h-4 w-4" src={Github} alt="github" />
-          Login with Github
+          {$LL.auth.loginWith({ provider: "Github" })}
         </Button>
       {/if}
       {#if googleEnabled}
         <Button href="/login/google" variant="secondary" class="w-full">
           <img class="mr-2 h-4 w-4" src={Google} alt="google" />
-          Login with Google
+          {$LL.auth.loginWith({ provider: "Google" })}
         </Button>
       {/if}
     </div>

diff --git a/apps/frontend/src/lib/components/blocks/language/language-picker.svelte b/apps/frontend/src/lib/components/blocks/language/language-picker.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
+  import { loadLocaleAsync, type Locales, setLocale } from "@undb/i18n/client"
+  import { EarthIcon } from "lucide-svelte"
+
+  const changeLanguage = async (lang: Locales) => {
+    await loadLocaleAsync(lang)
+    setLocale(lang)
+    localStorage.setItem("lang", lang)
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    <EarthIcon class="size-6 text-gray-600" />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content>
+    <DropdownMenu.Group>
+      <DropdownMenu.Item on:click={() => changeLanguage("en")}>English</DropdownMenu.Item>
+      <DropdownMenu.Item on:click={() => changeLanguage("zh")}>中文</DropdownMenu.Item>
+      <DropdownMenu.Item on:click={() => changeLanguage("ja")}>日本語</DropdownMenu.Item>
+      <DropdownMenu.Item on:click={() => changeLanguage("ko")}>한국어</DropdownMenu.Item>
+      <DropdownMenu.Item on:click={() => changeLanguage("es")}>Español</DropdownMenu.Item>
+    </DropdownMenu.Group>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/apps/frontend/src/lib/components/blocks/member/member-menu.svelte b/apps/frontend/src/lib/components/blocks/member/member-menu.svelte
@@ -84,6 +84,7 @@
           <DropdownMenu.Item on:click={() => changeLanguage("zh")}>中文</DropdownMenu.Item>
           <DropdownMenu.Item on:click={() => changeLanguage("ja")}>日本語</DropdownMenu.Item>
           <DropdownMenu.Item on:click={() => changeLanguage("ko")}>한국어</DropdownMenu.Item>
+          <DropdownMenu.Item on:click={() => changeLanguage("es")}>Español</DropdownMenu.Item>
         </DropdownMenu.SubContent>
       </DropdownMenu.Sub>
     </DropdownMenu.Group>

diff --git a/apps/frontend/src/routes/(auth)/+layout.svelte b/apps/frontend/src/routes/(auth)/+layout.svelte
@@ -1,3 +1,10 @@
+<script lang="ts">
+  import LanguagePicker from "$lib/components/blocks/language/language-picker.svelte"
+</script>
+
 <main class="flex h-screen w-screen items-center justify-center">
   <slot />
+  <div class="fixed right-5 top-5">
+    <LanguagePicker />
+  </div>
 </main>
diff --git a/apps/frontend/src/routes/(auth)/login/+page.svelte b/apps/frontend/src/routes/(auth)/login/+page.svelte
@@ -4,6 +4,7 @@
   import type { PageData } from "./$types"
   import Logo from "$lib/images/logo.svg"
   import { goto } from "$app/navigation"
+  import { LL } from "@undb/i18n/client"
 
   export let data: PageData
 
@@ -39,7 +40,7 @@
           </svg>
           <span class="sr-only">Light bulb</span>
         </span>
-        <span>Login to your account and accept the invitation</span>
+        <span>{$LL.auth.loginToYourAccountAndAcceptTheInvitation()}</span>
       </p>
     </div>
     <div class="flex items-center">
@@ -70,8 +71,8 @@
   </div>
 
   <div class="rounded-md border p-6 shadow-sm">
-    <h3 class="text-xl font-semibold tracking-tight">Undb Login</h3>
-    <p class="text-muted-foreground mb-4 mt-2 text-sm">Enter your email below to login to your account.</p>
+    <h3 class="text-xl font-semibold tracking-tight">Undb {$LL.auth.login()}</h3>
+    <p class="text-muted-foreground mb-4 mt-2 text-sm">{$LL.auth.loginWithEmailDescription()}</p>
     <Login
       {registrationEnabled}
       githubEnabled={!!data.oauth?.github?.enabled}

diff --git a/apps/frontend/src/routes/(auth)/signup/+page.svelte b/apps/frontend/src/routes/(auth)/signup/+page.svelte
@@ -4,6 +4,7 @@
   import Signup from "$lib/components/blocks/auth/signup.svelte"
   import Logo from "$lib/images/logo.svg"
   import { goto } from "$app/navigation"
+  import { LL } from "@undb/i18n/client"
 
   export let data: PageData
 
@@ -37,7 +38,7 @@
           </svg>
           <span class="sr-only">Light bulb</span>
         </span>
-        <span>Create account and accept invitation</span>
+        <span>{$LL.auth.createAccountAndAcceptInvitation()}</span>
       </p>
     </div>
     <div class="flex items-center">
@@ -68,8 +69,8 @@
   </div>
 
   <div class="rounded-md border p-6 shadow-sm">
-    <h3 class="text-xl font-semibold tracking-tight">Undb Sign Up</h3>
-    <p class="text-muted-foreground mb-4 mt-2 text-sm">Enter your information to create an account.</p>
+    <h3 class="text-xl font-semibold tracking-tight">Undb {$LL.auth.register()}</h3>
+    <p class="text-muted-foreground mb-4 mt-2 text-sm">{$LL.auth.enterYourInformationToCreateAnAccount()}</p>
     <Signup
       {redirect}
       {invitationId}