From 2a73dab601fe0f6c18c5ba11c3fe1dab86d001b3 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 28 Sep 2022 23:19:51 +0800
Subject: refactor: Use new form components

---
 .../src/routes/(main)/(public)/login/+page.svelte  | 111 ++++++++-------------
 1 file changed, 41 insertions(+), 70 deletions(-)

(limited to 'apps')

diff --git a/apps/kit/src/routes/(main)/(public)/login/+page.svelte b/apps/kit/src/routes/(main)/(public)/login/+page.svelte
index 9e2f6e7..46b9f7f 100644
--- a/apps/kit/src/routes/(main)/(public)/login/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/login/+page.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import { login } from "$lib/api/user";
+    import Button from "$lib/components/button.svelte";
+    import Checkbox from "$lib/components/checkbox.svelte";
+    import Input from "$lib/components/input.svelte";
     import LL from "$lib/i18n/i18n-svelte";
     import type { ErrorResult } from "$lib/models/ErrorResult";
     import type { LoginPayload } from "$lib/models/LoginPayload";
 
+    let loading = false;
+
     const data = {
         username: "",
         password: "",
@@ -17,6 +22,7 @@
 
     async function submitFormAsync() {
         error = { text: "", title: "" };
+        loading = true;
         const loginResponse = await login(data);
         if (loginResponse.ok) {
             await goto("/home");
@@ -24,6 +30,7 @@
             error.title = loginResponse.data.title;
             error.text = loginResponse.data.text;
         }
+        loading = false;
     }
 </script>
 
@@ -36,11 +43,7 @@
         </h2>
         <p class="mt-2 text-center text-sm text-gray-600">
             {$LL.common.or()}
-            <a
-                href="/signup"
-                class="font-medium text-indigo-600 hover:text-indigo-500"
-                >{$LL.login.createANewAccount()}</a
-            >
+            <a href="/signup" class="link">{$LL.login.createANewAccount()}</a>
         </p>
     </div>
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
@@ -48,88 +51,56 @@
             {#if error.text || error.title}
                 <div class="rounded-md bg-red-50 p-3 mb-3">
                     {#if error.title}
-                        <h3 class="text-sm font-medium text-red-800">
+                        <h3 class="text-sm font-medium text-red-600">
                             {error.title}
                         </h3>
                     {/if}
                     {#if error.text}
-                        <div class="mt-2 text-sm text-red-700">
+                        <div class="mt-2 text-sm text-red-500">
                             {error.text}
                         </div>
                     {/if}
                 </div>
             {/if}
             <form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
-                <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
-                            value={data.username}
-                            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>
+                <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    label={$LL.common.emailAddress()}
+                    required
+                    value={data.username}
+                />
 
-                <div>
-                    <label
-                        for="password"
-                        class="block text-sm font-medium text-gray-700"
-                        >{$LL.login.password()}</label
-                    >
-                    <div class="mt-1">
-                        <input
-                            id="password"
-                            name="password"
-                            type="password"
-                            autocomplete="current-password"
-                            required
-                            value={data.password}
-                            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>
+                <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    label={$LL.login.password()}
+                    autocomplete="current-password"
+                    required
+                    value={data.password}
+                />
 
                 <div class="flex items-center justify-between">
-                    <div class="flex items-center">
-                        <input
-                            id="remember-me"
-                            name="remember-me"
-                            type="checkbox"
-                            class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
-                        />
-                        <label
-                            for="remember-me"
-                            class="ml-2 block text-sm text-gray-900"
-                            >{$LL.login.notMyComputer()}</label
-                        >
-                    </div>
-
+                    <Checkbox
+                        id="remember-me"
+                        name="remember-me"
+                        label={$LL.login.notMyComputer()}
+                    />
                     <div class="text-sm">
-                        <a
-                            href="/reset"
-                            class="font-medium text-indigo-600 hover:text-indigo-500"
-                            >{$LL.login.forgotPassword()}</a
-                        >
+                        <a href="/reset" class="link">
+                            {$LL.login.forgotPassword()}
+                        </a>
                     </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.logIn()}
-                    </button>
-                </div>
+                <Button
+                    text={$LL.common.logIn()}
+                    fullWidth
+                    type="submit"
+                    {loading}
+                />
             </form>
         </div>
     </div>
-- 
cgit v1.3