57 lines
2.1 KiB
Svelte
57 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition'
|
|
import i18n from '$lib/i18n'
|
|
$i18n.loadNamespaces('login')
|
|
|
|
const urlParams = new URLSearchParams(window.location.search)
|
|
const isReauth = urlParams.has('reauth')
|
|
const isLogout = urlParams.has('logout')
|
|
|
|
let showToast = $state(true)
|
|
if (isReauth || isLogout) {
|
|
setTimeout(() => {
|
|
showToast = false
|
|
}, 6000)
|
|
}
|
|
</script>
|
|
|
|
<div class="w-full h-full flex flex-col justify-center items-center bg-base-200">
|
|
<div class="basis-0 grow flex justify-center items-center">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<i class="bi bi-ev-front-fill text-8xl text-primary"></i>
|
|
<p class="text-2xl font-bold">LibreCharge</p>
|
|
</div>
|
|
</div>
|
|
<div class="basis-0 flex justify-center items-center">
|
|
<div class="card bg-base-100 w-full max-w-sm h-fit shrink-0 shadow-2xl">
|
|
<div class="card-body">
|
|
<h1 class="text-2xl font-bold">{$i18n.t('login:title')}</h1>
|
|
<p class="py-2 text-base">{$i18n.t('login:text')}</p>
|
|
<fieldset class="fieldset">
|
|
<label class="fieldset-label input text-base-content">
|
|
<i class="bi bi-envelope-at"></i>
|
|
<input type="email" placeholder="me@example.com" required />
|
|
</label>
|
|
<label class="fieldset-label input text-base-content">
|
|
<i class="bi bi-key"></i>
|
|
<input type="password" placeholder={$i18n.t('login:passwordPlaceholder')} required />
|
|
</label>
|
|
<button class="btn btn-primary mt-4">{$i18n.t('login:button')}</button>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="basis-0 grow"></span>
|
|
{#if (isReauth || isLogout) && showToast}
|
|
<div class="toast toast-top" out:fly={{ x: 200 }}>
|
|
<div class="alert text-base {isReauth ? 'alert-warning' : 'alert-success'}">
|
|
{#if isReauth}
|
|
<i class="bi bi-exclamation-diamond text-xl"></i>
|
|
{:else}
|
|
<i class="bi bi-check-circle text-xl"></i>
|
|
{/if}
|
|
<span>{$i18n.t(isReauth ? 'login:toast.reauth' : 'login:toast.logoutSuccess')}</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|