95 lines
2.1 KiB
Svelte
95 lines
2.1 KiB
Svelte
<script>
|
|
import { applyAction, enhance } from "$app/forms";
|
|
import { page } from "$app/stores";
|
|
import { receive, send } from "$lib/utils/helpers";
|
|
import { t } from "svelte-i18n";
|
|
|
|
/** @type {import('./$types').ActionData} */
|
|
export let form;
|
|
|
|
/** @type {import('./$types').SubmitFunction} */
|
|
const handleLogin = async () => {
|
|
return async ({ result }) => {
|
|
await applyAction(result);
|
|
};
|
|
};
|
|
|
|
let message = "";
|
|
if ($page.url.searchParams.get("message")) {
|
|
message = $page.url.search.split("=")[1].replaceAll("%20", " ");
|
|
}
|
|
</script>
|
|
|
|
<div class="container">
|
|
<form
|
|
class="content"
|
|
method="POST"
|
|
action="?/login"
|
|
use:enhance={handleLogin}
|
|
>
|
|
<h1 class="step-title">{$t("user.login")}</h1>
|
|
{#if form?.errors}
|
|
{#each form?.errors as error (error.id)}
|
|
<h4
|
|
class="step-subtitle warning"
|
|
in:receive|global={{ key: error.id }}
|
|
out:send|global={{ key: error.id }}
|
|
>
|
|
{$t(error.key)}
|
|
</h4>
|
|
{/each}
|
|
{/if}
|
|
|
|
{#if message}
|
|
<h4 class="step-subtitle">{message}</h4>
|
|
{/if}
|
|
|
|
<input
|
|
type="hidden"
|
|
name="next"
|
|
value={$page.url.searchParams.get("next")}
|
|
/>
|
|
<div class="input-box">
|
|
<span class="label">{$t("email")}:</span>
|
|
<input
|
|
class="input"
|
|
type="email"
|
|
name="email"
|
|
placeholder="{$t('placeholder.email')} "
|
|
/>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="label">{$t("password")}:</span>
|
|
<div class="input-wrapper">
|
|
<input
|
|
class="input"
|
|
type="password"
|
|
name="password"
|
|
placeholder={$t("placeholder.password")}
|
|
/>
|
|
<a href="/auth/password/request-change" class="forgot-password"
|
|
>{$t("forgot_password")}?</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="btn-container">
|
|
<button class="button-dark">{$t("login")} </button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<style>
|
|
.input-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
max-width: 444px;
|
|
}
|
|
|
|
.forgot-password {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.9em;
|
|
}
|
|
</style>
|