04/16 Update - Fixed login UI issue
This commit is contained in:
+59
-59
@@ -5,23 +5,24 @@
|
||||
*
|
||||
* HOW IT WORKS
|
||||
* ------------
|
||||
* This file is loaded AFTER style.css when THEME_NAME=gov is set in .env.
|
||||
* It overrides only the CSS custom properties defined in style.css :root,
|
||||
* so every component that uses those variables (sidebar, buttons, login page,
|
||||
* links, badges, focus rings) automatically adopts the new palette.
|
||||
* No existing files are duplicated or heavily modified.
|
||||
* Loaded AFTER style.css but BEFORE page-specific CSS (e.g. auth.css).
|
||||
* Overrides CSS custom properties in :root so every component that uses
|
||||
* those variables (sidebar, buttons, login page, links, focus rings)
|
||||
* adopts the new palette automatically.
|
||||
*
|
||||
* TO CUSTOMISE
|
||||
* ------------
|
||||
* 1. Change --primary-color / --primary-hover to your desired brand colors.
|
||||
* 2. Adjust --brand-text and --brand-icon-class below if needed.
|
||||
* 3. For the original LT Services instance: set THEME_NAME= (empty) in its
|
||||
* .env — this file will not load at all, leaving the default blue intact.
|
||||
* Brand text ("QR Manager" → COMPANY_NAME) is now handled directly in
|
||||
* templates via {{ COMPANY_NAME }} — no CSS tricks needed.
|
||||
*
|
||||
* TO CUSTOMISE COLORS
|
||||
* -------------------
|
||||
* Change --primary-color / --primary-hover below.
|
||||
* All gradients, buttons, focus rings, sidebar, and login page pick
|
||||
* up the new values automatically via CSS variable inheritance.
|
||||
*
|
||||
* ADDING A THIRD THEME (future)
|
||||
* -----------------------------
|
||||
* Create static/css/theme-{name}.css and set THEME_NAME={name} in that
|
||||
* instance's .env. No code changes required.
|
||||
* Create static/css/theme-{name}.css and set THEME_NAME={name} in
|
||||
* that instance's .env. No code changes required.
|
||||
*/
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
@@ -33,52 +34,12 @@
|
||||
--primary-hover: #15803d;
|
||||
|
||||
/* Accent used for links, focus rings, active states */
|
||||
--info-color: #16a34a;
|
||||
--info-color: #16a34a;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 2. SIDEBAR BRAND TEXT & ICON */
|
||||
/* Replaces the hardcoded "QR Manager" text in base_authenticated */
|
||||
/* ------------------------------------------------------------------ */
|
||||
.brand-text::before {
|
||||
content: "GOV QR";
|
||||
}
|
||||
.sidebar-brand .brand-content > span.brand-text {
|
||||
/* Hide the original text node rendered by the template,
|
||||
show our pseudo-element instead. */
|
||||
font-size: 0;
|
||||
}
|
||||
.sidebar-brand .brand-content > span.brand-text::before {
|
||||
font-size: 1.125rem; /* matches original brand-text size */
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 3. LOGIN PAGE HEADER ("QR Manager" h1) */
|
||||
/* Replaces the hardcoded h1 in login.html without editing the file */
|
||||
/* ------------------------------------------------------------------ */
|
||||
.auth-header h1 {
|
||||
font-size: 0 !important; /* hide original text */
|
||||
}
|
||||
.auth-header h1::before {
|
||||
content: "GOV Services";
|
||||
font-size: 2.25rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--gray-900) !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 4. FOOTER COPYRIGHT LINE */
|
||||
/* Now handled dynamically in base.html / base_authenticated.html */
|
||||
/* via {{ CURRENT_YEAR }} and {{ COMPANY_NAME }} — no CSS needed. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 5. SIDEBAR GRADIENT — re-declare to pick up new variables */
|
||||
/* (Browsers resolve var() at paint time so this block is only */
|
||||
/* needed if the gradient was hard-coded; here it is variable- */
|
||||
/* driven, so this section is a safety net.) */
|
||||
/* 2. SIDEBAR GRADIENT */
|
||||
/* Re-declared to consume the new variables above. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
.sidebar {
|
||||
background: linear-gradient(
|
||||
@@ -89,8 +50,12 @@
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 6. AUTH CONTAINER GRADIENT (login background) */
|
||||
/* 3. LOGIN PAGE — auth.css loads after this file (via extra_head) so */
|
||||
/* we must use !important to win the cascade on rules that auth.css */
|
||||
/* also declares with !important. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/* Login background gradient */
|
||||
.auth-container {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
@@ -99,6 +64,7 @@
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Logo circle gradient */
|
||||
.auth-logo {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
@@ -107,6 +73,7 @@
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Card top accent stripe */
|
||||
.auth-card::before {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
@@ -115,7 +82,40 @@
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Sign In button gradient */
|
||||
.auth-form .btn-primary {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Input focus border colour */
|
||||
.auth-form .form-group input:focus {
|
||||
border-color: var(--primary-color) !important;
|
||||
/* Override the hardcoded blue rgba(37,99,235) in auth.css */
|
||||
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15) !important;
|
||||
}
|
||||
|
||||
/* Focused label colour */
|
||||
.auth-form .form-group.focused label {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Label icon colour */
|
||||
.auth-form .form-group label i {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Focus accessibility outline */
|
||||
.auth-form .btn:focus,
|
||||
.auth-form .form-group input:focus {
|
||||
outline-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 7. PAGE TITLE / BROWSER TAB — handled via COMPANY_NAME in .env */
|
||||
/* (no CSS needed; Flask injects it from COMPANY_NAME=GOV. Serv...) */
|
||||
/* 4. FOOTER COPYRIGHT */
|
||||
/* Handled dynamically in templates via {{ CURRENT_YEAR }} and */
|
||||
/* {{ COMPANY_NAME }} — no CSS override needed here. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="sidebar-brand">
|
||||
<div class="brand-content">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
<span class="brand-text">QR Manager</span>
|
||||
<span class="brand-text">{{ COMPANY_NAME }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+144
-144
@@ -1,145 +1,145 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Login - QR Code Management{% endblock %}
|
||||
|
||||
{% block extra_styles %}
|
||||
<!-- Include the new authentication styles -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<div class="auth-logo">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
</div>
|
||||
<h1>QR Manager</h1>
|
||||
<p>Sign in to your account</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="auth-form" id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">
|
||||
<i class="fas fa-user"></i>
|
||||
Username
|
||||
</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">
|
||||
<i class="fas fa-lock"></i>
|
||||
Password
|
||||
</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
</div>
|
||||
|
||||
<!-- Remember Me Checkbox -->
|
||||
<div class="form-group" style="margin-top: 1rem; margin-bottom: 1.5rem;">
|
||||
<label style="display: flex; align-items: center; cursor: pointer; font-weight: normal;">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="remember_me"
|
||||
name="remember_me"
|
||||
style="margin-right: 0.5rem; width: auto; cursor: pointer;"
|
||||
/>
|
||||
<span>Remember me for 30 days</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Turnstile Integration -->
|
||||
{% if turnstile_enabled %}
|
||||
<div class="form-group turnstile-container">
|
||||
<div class="cf-turnstile"
|
||||
data-sitekey="{{ turnstile_site_key }}"
|
||||
data-callback="onTurnstileSuccess"
|
||||
data-expired-callback="onTurnstileExpired"
|
||||
data-theme="light"
|
||||
data-language="en">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-full">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.querySelector(".auth-form");
|
||||
const inputs = form.querySelectorAll("input");
|
||||
|
||||
// Add focus effects with improved visual feedback
|
||||
inputs.forEach((input) => {
|
||||
input.addEventListener("focus", function () {
|
||||
this.parentElement.classList.add("focused");
|
||||
});
|
||||
|
||||
input.addEventListener("blur", function () {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove("focused");
|
||||
}
|
||||
});
|
||||
|
||||
// Keep focus state if input has value
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add("focused");
|
||||
}
|
||||
});
|
||||
|
||||
// Enhanced form validation with Turnstile
|
||||
form.addEventListener("submit", function(e) {
|
||||
{% if turnstile_enabled %}
|
||||
// Check if Turnstile is completed
|
||||
const turnstileResponse = document.querySelector('[name="cf-turnstile-response"]');
|
||||
if (!turnstileResponse || !turnstileResponse.value) {
|
||||
e.preventDefault();
|
||||
|
||||
// Highlight Turnstile container
|
||||
const turnstileContainer = document.querySelector('.turnstile-container');
|
||||
if (turnstileContainer) {
|
||||
turnstileContainer.classList.add('turnstile-error');
|
||||
setTimeout(() => {
|
||||
turnstileContainer.classList.remove('turnstile-error');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Show error message
|
||||
alert('Please complete the security verification.');
|
||||
return false;
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
// Show loading state
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Turnstile callback functions
|
||||
{% if turnstile_enabled %}
|
||||
function onTurnstileSuccess(token) {
|
||||
// Remove any error styling
|
||||
const turnstileContainer = document.querySelector('.turnstile-container');
|
||||
if (turnstileContainer) {
|
||||
turnstileContainer.classList.remove('turnstile-error');
|
||||
}
|
||||
console.log('Turnstile verification successful');
|
||||
}
|
||||
|
||||
function onTurnstileExpired() {
|
||||
// Reset form if Turnstile expires
|
||||
console.log('Turnstile expired, please verify again');
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Login - QR Code Management{% endblock %}
|
||||
|
||||
{% block extra_styles %}
|
||||
<!-- Include the new authentication styles -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<div class="auth-logo">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
</div>
|
||||
<h1>{{ COMPANY_NAME }}</h1>
|
||||
<p>Sign in to your account</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="auth-form" id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">
|
||||
<i class="fas fa-user"></i>
|
||||
Username
|
||||
</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">
|
||||
<i class="fas fa-lock"></i>
|
||||
Password
|
||||
</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
</div>
|
||||
|
||||
<!-- Remember Me Checkbox -->
|
||||
<div class="form-group" style="margin-top: 1rem; margin-bottom: 1.5rem;">
|
||||
<label style="display: flex; align-items: center; cursor: pointer; font-weight: normal;">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="remember_me"
|
||||
name="remember_me"
|
||||
style="margin-right: 0.5rem; width: auto; cursor: pointer;"
|
||||
/>
|
||||
<span>Remember me for 30 days</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Turnstile Integration -->
|
||||
{% if turnstile_enabled %}
|
||||
<div class="form-group turnstile-container">
|
||||
<div class="cf-turnstile"
|
||||
data-sitekey="{{ turnstile_site_key }}"
|
||||
data-callback="onTurnstileSuccess"
|
||||
data-expired-callback="onTurnstileExpired"
|
||||
data-theme="light"
|
||||
data-language="en">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-full">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.querySelector(".auth-form");
|
||||
const inputs = form.querySelectorAll("input");
|
||||
|
||||
// Add focus effects with improved visual feedback
|
||||
inputs.forEach((input) => {
|
||||
input.addEventListener("focus", function () {
|
||||
this.parentElement.classList.add("focused");
|
||||
});
|
||||
|
||||
input.addEventListener("blur", function () {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove("focused");
|
||||
}
|
||||
});
|
||||
|
||||
// Keep focus state if input has value
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add("focused");
|
||||
}
|
||||
});
|
||||
|
||||
// Enhanced form validation with Turnstile
|
||||
form.addEventListener("submit", function(e) {
|
||||
{% if turnstile_enabled %}
|
||||
// Check if Turnstile is completed
|
||||
const turnstileResponse = document.querySelector('[name="cf-turnstile-response"]');
|
||||
if (!turnstileResponse || !turnstileResponse.value) {
|
||||
e.preventDefault();
|
||||
|
||||
// Highlight Turnstile container
|
||||
const turnstileContainer = document.querySelector('.turnstile-container');
|
||||
if (turnstileContainer) {
|
||||
turnstileContainer.classList.add('turnstile-error');
|
||||
setTimeout(() => {
|
||||
turnstileContainer.classList.remove('turnstile-error');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Show error message
|
||||
alert('Please complete the security verification.');
|
||||
return false;
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
// Show loading state
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Turnstile callback functions
|
||||
{% if turnstile_enabled %}
|
||||
function onTurnstileSuccess(token) {
|
||||
// Remove any error styling
|
||||
const turnstileContainer = document.querySelector('.turnstile-container');
|
||||
if (turnstileContainer) {
|
||||
turnstileContainer.classList.remove('turnstile-error');
|
||||
}
|
||||
console.log('Turnstile verification successful');
|
||||
}
|
||||
|
||||
function onTurnstileExpired() {
|
||||
// Reset form if Turnstile expires
|
||||
console.log('Turnstile expired, please verify again');
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user