Alex/GoMembership
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

frontend formatting login page

Browse Source
This commit is contained in:
Alex
2025-02-18 11:35:27 +01:00
parent 89841ade55
commit e11a05a85f
1 changed files with 64 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
frontend/src/routes/auth/login/+page.svelte
View File

@@ -1,94 +1,78 @@
<script>
import { applyAction, enhance } from "$app/forms";
import { page } from "$app/stores";
import { receive, send } from "$lib/utils/helpers";
import { t } from "svelte-i18n";
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').ActionData} */
export let form;
/** @type {import('./$types').SubmitFunction} */
const handleLogin = async () => {
return async ({ result }) => {
await applyAction(result);
};
};
/** @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", " ");
}
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}
<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}
{#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>
<input type="hidden" name="next" value={$page.url.searchParams.get('next')} />
<div class="input-box">
<span class="label">{$t('user.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;
}
.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;
}
.forgot-password {
margin-top: 0.5rem;
font-size: 0.9em;
}
</style>