66 lines
2.7 KiB
HTML
66 lines
2.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Login — {{ slug }} — Ontoref{% endblock title %}
|
|
{% block content %}
|
|
<div class="flex justify-center pt-16">
|
|
<div class="card bg-base-200 shadow-xl w-full max-w-sm">
|
|
<div class="card-body gap-4">
|
|
<div class="text-center">
|
|
{% if logo or logo_dark %}
|
|
<div class="flex justify-center mb-2">
|
|
{% if logo %}<img id="login-logo-light" src="{{ logo }}" alt="{{ slug }}" class="h-14 max-w-[12rem] object-contain">{% endif %}
|
|
{% if logo_dark %}<img id="login-logo-dark" src="{{ logo_dark }}" alt="{{ slug }}" class="h-14 max-w-[12rem] object-contain hidden">{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<h1 class="text-2xl font-bold"><span style="color:#C0CCD8;">onto</span><span style="color:#E8A838;">ref</span></h1>
|
|
{% endif %}
|
|
<p class="text-base-content/60 text-sm mt-1 font-mono">{{ slug }}</p>
|
|
</div>
|
|
{% if error %}
|
|
<div class="alert alert-error text-sm py-2">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Invalid key.
|
|
</div>
|
|
{% endif %}
|
|
<form method="POST" action="/ui/{{ slug }}/login" class="flex flex-col gap-3">
|
|
<div class="form-control">
|
|
<label class="label pb-1">
|
|
<span class="label-text text-xs uppercase tracking-wider text-base-content/50">Access key</span>
|
|
</label>
|
|
<input type="password" name="key" autofocus
|
|
class="input input-bordered input-sm font-mono"
|
|
placeholder="••••••••••••">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-sm mt-1">Enter</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
{% block scripts %}
|
|
{% if logo or logo_dark %}
|
|
<script>
|
|
(function () {
|
|
var light = document.getElementById("login-logo-light");
|
|
var dark = document.getElementById("login-logo-dark");
|
|
function apply(theme) {
|
|
if (!light && !dark) return;
|
|
if (light && !dark) { light.classList.remove("hidden"); return; }
|
|
var isDark = theme === "dark";
|
|
if (light) light.classList.toggle("hidden", isDark);
|
|
if (dark) dark.classList.toggle("hidden", !isDark);
|
|
}
|
|
apply(document.documentElement.getAttribute("data-theme") || "dark");
|
|
new MutationObserver(function(ms) {
|
|
ms.forEach(function(m) {
|
|
if (m.attributeName === "data-theme")
|
|
apply(document.documentElement.getAttribute("data-theme"));
|
|
});
|
|
}).observe(document.documentElement, { attributes: true });
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
{% endblock scripts %}
|