57 lines
2.7 KiB
HTML
57 lines
2.7 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}{{ t.login_heading }} | {{ t.site_name }}{% endblock title %}
|
||
|
|
|
||
|
|
{% block head_extra %}
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
|
||
|
|
.login-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 2rem 2.5rem; width: 100%; max-width: 400px; }
|
||
|
|
.login-card h1 { margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; }
|
||
|
|
.login-card label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .9rem; }
|
||
|
|
.login-card input[type="text"],
|
||
|
|
.login-card input[type="password"] { width: 100%; padding: .5rem .7rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: .95rem; }
|
||
|
|
.login-card button,
|
||
|
|
.login-card .sso-btn { display: block; width: 100%; padding: .6rem; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; text-align: center; text-decoration: none; }
|
||
|
|
.login-card button { background: #1a1a2e; color: #fff; }
|
||
|
|
.login-card button:hover { background: #16213e; }
|
||
|
|
.login-card .sso-btn { background: #4a90d9; color: #fff; margin-top: .75rem; }
|
||
|
|
.login-card .sso-btn:hover { background: #357abd; }
|
||
|
|
.login-card .divider { text-align: center; margin: 1rem 0; color: #999; font-size: .85rem; }
|
||
|
|
.login-card .message { text-align: center; color: #666; margin-bottom: 1rem; }
|
||
|
|
.login-card .flash { color: #856404; background: #fff3cd; padding: .5rem .75rem; border-radius: 4px; margin-bottom: 1rem; text-align: center; font-size: .9rem; }
|
||
|
|
</style>
|
||
|
|
{% endblock head_extra %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div class="login-card">
|
||
|
|
<h1>{{ t.login_heading }}</h1>
|
||
|
|
|
||
|
|
{% if !message.is_empty() %}
|
||
|
|
<div class="flash">{{ message }}</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if !auth_password_enabled && !auth_sso_enabled %}
|
||
|
|
<p class="message">{{ t.login_disabled }}</p>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if auth_password_enabled %}
|
||
|
|
<form method="post" action="/login">
|
||
|
|
<label for="username">{{ t.login_username }}</label>
|
||
|
|
<input type="text" name="username" id="username" required>
|
||
|
|
<label for="password">{{ t.login_password }}</label>
|
||
|
|
<input type="password" name="password" id="password" required>
|
||
|
|
<button type="submit">{{ t.login_submit }}</button>
|
||
|
|
</form>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if auth_password_enabled && auth_sso_enabled %}
|
||
|
|
<div class="divider">— or —</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if auth_sso_enabled %}
|
||
|
|
<a class="sso-btn" href="/auth/oidc/start">{{ oidc_button_text }}</a>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endblock body %}
|