Files
musenalm/views/routes/login/body.gohtml
2025-05-29 14:15:02 +02:00

105 lines
3.2 KiB
Plaintext

{{ $model := . }}
<div class="flex max-w-md mx-auto !pt-44">
<div class="flex-col w-full">
{{- if not $model.redirect_url -}}
<a href="/" class="text-gray-700 hover:text-slate-950">
<i class="ri-arrow-left-s-line"></i> Startseite
</a>
{{- else -}}
<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950">
<i class="ri-arrow-left-s-line"></i> Zurück
</a>
{{- end -}}
<div class="flex justify-center mt-8 items-baseline">
<div>
<img class="h-18 w-18 border" src="/assets/favicon.png" />
</div>
</div>
<h1 class="text-2xl self-baseline text-center w-full my-6 text-slate-900">Musenalm | Login</h1>
<form
class="w-full grid grid-cols-3 gap-4"
method="POST"
hx-boost="false"
x-target.4xx="ajax-replace"
x-target.away="_top"
x-target="body"
aria-label="Login-Formular">
<div id="ajax-replace" class="col-span-3">
{{ template "_usermessage" $model }}
<input
type="hidden"
name="csrf_nonce"
id="csrf_nonce"
required
value="{{ $model.csrf_nonce }}" />
<input
type="hidden"
name="csrf_token"
id="csrf_token"
required
value="{{ $model.csrf_token }}" />
</div>
<div
class="col-span-3 border-2 border-transparent focus-within:border-slate-600 px-2 py-1 pb-1.5
bg-slate-200 focus-within:bg-slate-50 rounded-md transition-all duration-100">
<label for="username" class="text-sm text-gray-700 font-bold">
E-Mail <i class="ri-at-line"></i>
</label>
<input
type="email"
name="username"
id="username"
class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
placeholder=""
required
autocomplete="username"
value=""
autofocus />
</div>
<div
class="col-span-3 border-2 border-transparent focus-within:border-slate-600 px-2 py-1 pb-1.5
bg-slate-200 focus-within:bg-slate-50 rounded-md transition-all duration-100">
<label for="password" class="text-sm text-gray-700 font-bold">
Passwort <i class="ri-key-2-line"></i>
</label>
<input
type="password"
name="password"
id="password"
class="mt-1 block w-full rounded-md focus:border-none focus:outline-none"
placeholder=""
required
autocomplete="current-password" />
</div>
<div class="col-start-2 col-span-2">
<div class="flex justify-end items-center">
<input
type="checkbox"
name="persist"
id="persist"
class="h-4 w-4 text-slate-600 focus:ring-slate-500 border-gray-300 rounded" />
<label for="persist" class="ml-2 block text-sm text-gray-900"> Angemeldet bleiben </label>
</div>
</div>
<div class="col-span-3">
<button
type="submit"
class="w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md
shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none
focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
Einloggen
</button>
</div>
<!--
<div class="col-span-3">
<a href="/forgot-password" class="text-sm text-slate-600 hover:text-slate-900">
Passwort vergessen?
</a>
</div>
-->
</form>
</div>
</div>