From f9337bbe280878c2a2d9d713873c4c06b54325cd Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Thu, 29 Sep 2022 00:28:33 +0800
Subject: refactor: !WIP Use i18n namespaces

---
 .../(main)/(public)/reset-password/+page.svelte    | 69 ++++++++--------------
 .../routes/(main)/(public)/sign-in/+page.svelte    | 18 +++---
 apps/kit/src/routes/(main)/+layout.ts              | 20 +++++--
 3 files changed, 48 insertions(+), 59 deletions(-)

(limited to 'apps/kit/src/routes/(main)')

diff --git a/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte b/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte
index b951153..865be10 100644
--- a/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { create_forgot_password_request } from "$lib/api/user";
-    import Alert from "$lib/components/alert.svelte";
+    import { Alert, Input, Button } from "$lib/components";
     import LL from "$lib/i18n/i18n-svelte";
     import type { ErrorResult } from "$lib/models/ErrorResult";
-    import { get } from "svelte/store";
 
     const formData = {
         email: "",
@@ -20,14 +19,14 @@
 
     let showSuccessAlert = false;
 
-    async function submit() {
+    async function submitFormAsync() {
         errorData.text = "";
         errorData.title = "";
         showSuccessAlert = false;
         const request = await create_forgot_password_request(formData.email);
         if (!request.ok) {
-            errorData.text = request.data.text ?? $LL.common.tryAgainSoon();
-            errorData.title = request.data.title ?? $LL.common.unexpectedError();
+            errorData.text = request.data.text ?? $LL.tryAgainSoon();
+            errorData.title = request.data.title ?? $LL.unexpectedError();
             return;
         }
         showSuccessAlert = true;
@@ -39,25 +38,19 @@
         <h2
             class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900"
         >
-            {$LL.reset.resetPassword()}
+            {$LL["reset-password"].requestAPasswordReset()}
         </h2>
         <p class="mt-2 text-center text-sm text-gray-600">
-            {$LL.common.or()}
-            <a
-                href="/sign-in"
-                class="font-medium text-indigo-600 hover:text-indigo-500"
-                >{$LL.reset.gotoLoginPage().toLowerCase()}</a
-            >
+            {$LL.or()}
+            <a href="/sign-in" class="link">
+                {$LL["reset-password"].signIntoYourAccount()}
+            </a>
         </p>
     </div>
 
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-            <form
-                class="space-y-6"
-                on:submit|preventDefault={submit}
-                method="POST"
-            >
+            <form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
                 <Alert
                     title={errorData.title}
                     message={errorData.text}
@@ -67,37 +60,21 @@
 
                 <Alert
                     type="success"
-                    title={$LL.common.success()}
-                    message={$LL.reset.requestSentMessage()}
+                    title={$LL.success()}
+                    message={$LL["reset-password"].requestSentMessage()}
                     visible={showSuccessAlert}
                 />
-                <div>
-                    <label
-                        for="email"
-                        class="block text-sm font-medium text-gray-700"
-                    >
-                        {$LL.common.emailAddress()}</label
-                    >
-                    <div class="mt-1">
-                        <input
-                            id="email"
-                            name="email"
-                            type="email"
-                            autocomplete="email"
-                            required
-                            bind:value={formData.email}
-                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                        />
-                    </div>
-                </div>
-                <div>
-                    <button
-                        type="submit"
-                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                    >
-                        {$LL.common.send($LL.common.request().toLowerCase())}
-                    </button>
-                </div>
+
+                <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autocomplete="email"
+                    required
+                    bind:value={formData.email}
+                    label={$LL.emailAddress()}
+                />
+                <Button text={$LL.submit()} type="submit" fullWidth />
             </form>
         </div>
     </div>
diff --git a/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte b/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte
index 3802722..d47f924 100644
--- a/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte
@@ -39,11 +39,13 @@
         <h2
             class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900"
         >
-            {$LL.login.loginToYourAccount()}
+            {$LL["sign-in"].signIn()}
         </h2>
         <p class="mt-2 text-center text-sm text-gray-600">
-            {$LL.common.or()}
-            <a href="/sign-up" class="link">{$LL.login.createANewAccount()}</a>
+            {$LL.or().toLowerCase()}
+            <a href="/sign-up" class="link"
+                >{$LL["sign-in"].createANewAccount()}</a
+            >
         </p>
     </div>
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
@@ -67,7 +69,7 @@
                     id="email"
                     name="email"
                     type="email"
-                    label={$LL.common.emailAddress()}
+                    label={$LL.emailAddress()}
                     required
                     value={data.username}
                 />
@@ -76,7 +78,7 @@
                     id="password"
                     name="password"
                     type="password"
-                    label={$LL.login.password()}
+                    label={$LL.password()}
                     autocomplete="current-password"
                     required
                     value={data.password}
@@ -86,17 +88,17 @@
                     <Checkbox
                         id="remember-me"
                         name="remember-me"
-                        label={$LL.login.notMyComputer()}
+                        label={$LL["sign-in"].notMyComputer()}
                     />
                     <div class="text-sm">
                         <a href="/reset-password" class="link">
-                            {$LL.login.forgotPassword()}
+                            {$LL["sign-in"].resetPassword()}
                         </a>
                     </div>
                 </div>
 
                 <Button
-                    text={$LL.common.logIn()}
+                    text={$LL["sign-in"].signIn()}
                     fullWidth
                     type="submit"
                     {loading}
diff --git a/apps/kit/src/routes/(main)/+layout.ts b/apps/kit/src/routes/(main)/+layout.ts
index de8a5c0..f673067 100644
--- a/apps/kit/src/routes/(main)/+layout.ts
+++ b/apps/kit/src/routes/(main)/+layout.ts
@@ -1,9 +1,19 @@
-import type {Locales} from "$lib/i18n/i18n-types";
-import {loadLocaleAsync} from "$lib/i18n/i18n-util.async";
-import type {LayoutLoad} from "./$types";
+import type { Locales } from "$lib/i18n/i18n-types";
+import { loadLocaleAsync, loadNamespaceAsync } from "$lib/i18n/i18n-util.async";
+import type { LayoutLoad } from "./$types";
 
-export const load: LayoutLoad<{ locale: Locales }> = async ({url, params}) => {
+export const load: LayoutLoad<{ locale: Locales }> = async ({ url, params }) => {
     let lang = "en" as Locales;
     await loadLocaleAsync(lang);
-    return {locale: lang};
+
+    if (url.pathname.startsWith("/sign-in")) {
+        await loadNamespaceAsync(lang, "sign-in");
+    }
+    if (url.pathname.startsWith("/sign-up")) {
+        await loadNamespaceAsync(lang, "sign-up");
+    }
+    if (url.pathname.startsWith("/reset-password")) {
+        await loadNamespaceAsync(lang, "reset-password");
+    }
+    return { locale: lang };
 };
\ No newline at end of file
-- 
cgit v1.3