68 lines
4.3 KiB
HTML
68 lines
4.3 KiB
HTML
{% extends "base.html" %}
|
|
{% import "macros/ui.html" as ui %}
|
|
|
|
{% block title %}{{ t(key="login-title", lang=lang | default(value='sk')) }}{% endblock title %}
|
|
|
|
{% block content %}
|
|
<div class="mx-auto mt-8 max-w-sm">
|
|
<div
|
|
class="rounded-radius border border-outline bg-surface-alt shadow-sm dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<div
|
|
class="flex items-center justify-between border-b border-outline px-5 py-3 dark:border-outline-dark">
|
|
<span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
|
|
{{ t(key="brand", lang=lang | default(value='sk')) }}
|
|
</span>
|
|
{{ ui::badge(label=t(key="auth", lang=lang | default(value='sk')), variant="primary") }}
|
|
</div>
|
|
|
|
<div class="p-5">
|
|
<h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
|
|
{{ t(key="login-title", lang=lang | default(value='sk')) }}
|
|
</h1>
|
|
|
|
{% if error == "unverified" %}
|
|
{{ ui::alert_danger(message=t(key="login-error-unverified", lang=lang | default(value='sk')), extra="mt-3") }}
|
|
<p class="mt-2 text-sm text-on-surface dark:text-on-surface-dark">
|
|
<a href="/resend-verification" class="font-medium text-primary underline-offset-2 hover:underline dark:text-primary-dark">{{ t(key="login-resend", lang=lang | default(value='sk')) }}</a>
|
|
</p>
|
|
{% elif error %}
|
|
{{ ui::alert_danger(message=t(key="login-error", lang=lang | default(value='sk')), extra="mt-3") }}
|
|
{% endif %}
|
|
|
|
<form method="post" action="/login" hx-boost="false" class="mt-4 flex flex-col gap-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label for="email"
|
|
class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
|
|
{{ t(key="login-email", lang=lang | default(value='sk')) }}
|
|
</label>
|
|
{{ ui::input(name="email", id="email", type="email", required=true, autocomplete="email", attrs="autofocus") }}
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label for="password"
|
|
class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
|
|
{{ t(key="login-password", lang=lang | default(value='sk')) }}
|
|
</label>
|
|
{{ ui::input(name="password", id="password", type="password", required=true, autocomplete="current-password") }}
|
|
</div>
|
|
|
|
{{ ui::button(label=t(key="login-auth", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}
|
|
</form>
|
|
|
|
<div class="mt-5 flex items-center gap-3 text-xs text-on-surface/50 dark:text-on-surface-dark/50">
|
|
<span class="h-px flex-1 bg-outline dark:bg-outline-dark"></span>
|
|
{{ t(key="auth-or", lang=lang | default(value='sk')) }}
|
|
<span class="h-px flex-1 bg-outline dark:bg-outline-dark"></span>
|
|
</div>
|
|
{{ ui::button(label=t(key="auth-google", lang=lang | default(value='sk')), href="/api/oauth2/google", variant="outline-secondary", attrs='hx-boost="false"', extra="mt-4 w-full", icon='<svg class="size-4" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/><path fill="#FF3D00" d="m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/><path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/><path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/></svg>') }}
|
|
|
|
<p class="mt-4 text-sm text-on-surface dark:text-on-surface-dark">
|
|
{{ t(key="login-no-account", lang=lang | default(value='sk')) }}
|
|
<a href="/register"
|
|
class="font-medium text-primary underline-offset-2 hover:underline dark:text-primary-dark">{{ t(key="nav-register", lang=lang | default(value='sk')) }}</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|