88 lines
3.1 KiB
Svelte
88 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition'
|
|
import i18n from '$lib/i18n'
|
|
import axios from '$lib/axios.svelte'
|
|
import { persistentSettings } from '$lib/persistent-store'
|
|
import { goto } from '$app/navigation'
|
|
$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)
|
|
}
|
|
|
|
let email: string = $state('')
|
|
let password: string = $state('')
|
|
|
|
function login() {
|
|
axios
|
|
.post('/auth/login', {
|
|
email,
|
|
password,
|
|
})
|
|
.then((response) => {
|
|
$persistentSettings.loggedIn = true
|
|
$persistentSettings.refreshToken = response.data.refresh_token
|
|
axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.access_token
|
|
axios.get('/me').then((response) => {
|
|
$persistentSettings.email = response.data.email
|
|
$persistentSettings.friendlyName = response.data.friendly_name
|
|
$persistentSettings.role = response.data.role
|
|
})
|
|
goto('/')
|
|
})
|
|
.catch((error) => {})
|
|
}
|
|
</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" bind:value={email} placeholder="me@example.com" required />
|
|
</label>
|
|
<label class="fieldset-label input text-base-content">
|
|
<i class="bi bi-key"></i>
|
|
<input
|
|
type="password"
|
|
bind:value={password}
|
|
placeholder={$i18n.t('login:passwordPlaceholder')}
|
|
required
|
|
/>
|
|
</label>
|
|
<button class="btn btn-primary mt-4" onclick={login}>{$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>
|