Files
family_home_lab/portal/templates/login.html

43 lines
1.9 KiB
HTML

{% extends "base.html" %}
{% block title %}Sign in — {{ settings.APP_NAME }}{% endblock %}
{% block content %}
<div class="login-screen">
<div class="login-wrap">
<h1 class="login-greeting">{{ greeting }}, stranger</h1>
<div class="auth-card">
<h2 class="auth-title">Sign in to Home Lab</h2>
{% if error %}<div class="form-error">{{ error }}</div>{% endif %}
<form method="post" action="/login" autocomplete="on">
<input type="hidden" name="next" value="{{ next }}">
<div class="form-field">
<label for="username">Username</label>
<input class="text-input" type="text" id="username" name="username"
required autofocus autocomplete="username">
</div>
<div class="form-field">
<label for="password">Password</label>
<div style="position:relative">
<input class="text-input" type="password" id="password" name="password"
required autocomplete="current-password" style="padding-right:44px">
<button type="button" id="togglePw" tabindex="-1" aria-label="Show password"
title="Show/hide password"
style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:#888;padding:4px">👁</button>
</div>
</div>
<button class="button button-primary width-full" type="submit">Sign in</button>
</form>
<script>
(function () {
var b = document.getElementById('togglePw');
var p = document.getElementById('password');
if (!b || !p) return;
b.addEventListener('click', function () {
if (p.type === 'password') { p.type = 'text'; b.textContent = '🙈'; }
else { p.type = 'password'; b.textContent = '👁'; }
});
})();
</script>
</div>
</div>
</div>
{% endblock %}