diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/kit/src/routes/(main)/(public)/login/+page.svelte | 111 |
1 files changed, 41 insertions, 70 deletions
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> |