OTSSigns/OTSSignsTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pre-img swap

Browse Source
This commit is contained in:
Matt Batchelder
2026-03-23 21:09:27 -04:00
parent 87474b05a9
commit bbe8c1860c
395 changed files with 29643 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
ots-signs/views/login.twig
View File

@@ -21,23 +21,6 @@
<link href="{{ theme.uri("css/override-dark.css") }}?{{ version }}" rel="stylesheet" media="screen">
</head>
<body class="login-page">
<!-- Fallback animated background element (inline styles ensure it appears even if external CSS is cached) -->
<div class="ots-login-bg" aria-hidden="true"></div>
<!-- Animated blurred color blobs -->
<div class="ots-login-blob ots-login-blob--1" aria-hidden="true"></div>
<div class="ots-login-blob ots-login-blob--2" aria-hidden="true"></div>
<div class="ots-login-blob ots-login-blob--3" aria-hidden="true"></div>
<style>
.ots-login-bg{position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(20px);opacity:0.95;
background: linear-gradient(120deg, rgba(14,28,45,0.6), rgba(6,16,30,0.55)),
radial-gradient(circle at 10% 20%, rgba(79,140,255,0.06), transparent 10%),
radial-gradient(circle at 85% 80%, rgba(255,138,0,0.04), transparent 12%);
background-size:200% 200%,100% 100%,100% 100%;
animation: ots-login-bg-shift-inline 14s linear infinite;}
@keyframes ots-login-bg-shift-inline{0%{background-position:0% 50%,0 0,0 0}50%{background-position:100% 50%,0 0,0 0}100%{background-position:0% 50%,0 0,0 0}}
/* Ensure login card sits above fallback background */
.login-card{position:relative;z-index:2}
</style>
<div class="container">
{% if authCASEnabled %}
<form id="cas-login-form" class="login-card text-center" action="{{ url_for("cas.login") }}" method="post">
@@ -48,9 +31,11 @@
<p>{% trans %}Connect with the Central Authentication Server{% endtrans %}</p>
<div aria-live="polite">
{% for loginMessage in flash('cas_login_message') %}
<div class="alert alert-danger">{{ loginMessage }}</div>
<div class="alert alert-danger" role="alert">{{ loginMessage }}</div>
{% endfor %}
</div>
<p><button class="btn btn-signin" type="submit" name="logincas">{% trans %} CAS Login{% endtrans %}</button></p>
</form>
@@ -64,16 +49,20 @@
<p class="lead">{% trans "Please provide your credentials" %}</p>
<label for="username" class="sr-only">{% trans "User" %}</label>
<input id="username" class="form-control input-block-level" name="username" type="text" placeholder="{% trans "User" %}" autofocus autocomplete="username">
<label for="password" class="sr-only">{% trans "Password" %}</label>
<input id="password" class="form-control input-block-level" name="password" type="password" placeholder="{% trans "Password" %}" autocomplete="current-password">
<div aria-live="polite">
{% for loginMessage in flash('login_message') %}
<div class="alert alert-danger">{{ loginMessage }}</div>
<div class="alert alert-danger" role="alert">{{ loginMessage }}</div>
{% endfor %}
</div>
<p><button class="btn btn-signin" type="submit">{% trans "Login" %}</button></p>
{% if passwordReminderEnabled %}<p><a href="#" id="reminder-form-toggle">{% trans "Forgotten your password?" %}</a></p>{% endif %}
{% if passwordReminderEnabled %}<p><a href="#" id="reminder-form-toggle" role="button">{% trans "Forgotten your password?" %}</a></p>{% endif %}
</form>
{% endif %}
@@ -83,15 +72,18 @@
<p class="login-brand"><a href="{{ theme.getThemeConfig("theme_url") }}"><img class="login-logo" src="{{ theme.uri("img/xibologo.png") }}"></a><span class="login-brand-text">OTS Signs</span></p>
<p>{% trans "Please provide your user name" %}</p>
<input id="username" class="form-control input-block-level" name="username" type="text" placeholder="{% trans "User" %}">
<label for="reminder-username" class="sr-only">{% trans "User" %}</label>
<input id="reminder-username" class="form-control input-block-level" name="username" type="text" placeholder="{% trans "User" %}">
<div aria-live="polite">
{% for loginMessage in flash('login_message') %}
<div class="alert alert-danger">{{ loginMessage }}</div>
<div class="alert alert-danger" role="alert">{{ loginMessage }}</div>
{% endfor %}
</div>
<p><button class="btn btn-signin" type="submit">{% trans "Send Reset" %}</button></p>
<p><a href="#" id="login-form-toggle">{% trans "Login instead?" %}</a></p>
<p><a href="#" id="login-form-toggle" role="button">{% trans "Login instead?" %}</a></p>
</form>
{% endif %}
@@ -101,18 +93,22 @@
<script src="{{ theme.rootUri() }}dist/vendor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
<script type="text/javascript" nonce="{{ cspNonce }}">
$(function() {
$("#reminder-form-toggle").on("click", function (e) {
$("#reminder-form-toggle").on("click keydown", function (e) {
if (e.type === "keydown" && e.key !== "Enter" && e.key !== " ") return;
e.preventDefault();
$("#login-form").addClass("d-none");
$("#reminder-form").removeClass("d-none");
$("#reminder-form").find("input:first").focus();
});
$("#login-form-toggle").on("click", function (e) {
$("#login-form-toggle").on("click keydown", function (e) {
if (e.type === "keydown" && e.key !== "Enter" && e.key !== " ") return;
e.preventDefault();
$("#login-form").removeClass("d-none");
$("#reminder-form").addClass("d-none");
$("#login-form").find("input:first").focus();
});
});
</script>