jamesp/sasa-maillist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jamesp:459e16b26fc27d282fca07f557f2266d7787e38e
Branches Tags
jamesp:main
...
compare: jamesp:ac2363812575c95acc02ba668e7cc7a9aa7dceee
Branches Tags
jamesp:main

2 Commits
459e16b26f ... ac23638125

Author SHA1 Message Date
James Pattinson
ac23638125 Failed login feedback 2025-10-13 14:23:17 +00:00
James Pattinson
4fc1ed96dd Failed login feedback 2025-10-13 14:23:02 +00:00
3 changed files with 339 additions and 29 deletions
Expand all files Collapse all files

56
web/index.html
View File

@@ -9,8 +9,53 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head> </head>
<body> <body>
<!-- Header --> <!-- Login Page -->
<header class="header"> <div class="login-page" id="loginPage">
<div class="login-container">
<div class="login-header">
<div class="login-logo">
<i class="fas fa-envelope"></i>
</div>
<h1>Mailing List Manager</h1>
<p>Sign in to manage your mailing lists</p>
</div>
<form class="login-form" id="loginForm">
<!-- Login Error Message -->
<div class="login-error" id="loginError" style="display: none;">
<i class="fas fa-exclamation-circle"></i>
<span id="loginErrorMessage">Invalid username or password</span>
</div>
<div class="form-group">
<label for="username">
<i class="fas fa-user"></i>
Username
</label>
<input type="text" id="username" placeholder="Enter your username" required autocomplete="username">
</div>
<div class="form-group">
<label for="password">
<i class="fas fa-lock"></i>
Password
</label>
<input type="password" id="password" placeholder="Enter your password" required autocomplete="current-password">
</div>
<button type="submit" class="btn btn-primary btn-block" id="loginBtn">
<span>Sign In</span>
<i class="fas fa-arrow-right"></i>
</button>
</form>
<div class="login-footer">
<p class="text-muted text-sm">
<i class="fas fa-shield-alt"></i>
Secure authentication required
</p>
</div>
</div>
</div>
<!-- Header (shown after login) -->
<header class="header" id="mainHeader" style="display: none;">
<div class="container"> <div class="container">
<div class="header-content"> <div class="header-content">
<h1 class="logo"> <h1 class="logo">
@@ -18,12 +63,7 @@
Mailing List Manager Mailing List Manager
</h1> </h1>
<div class="auth-section"> <div class="auth-section">
<div class="auth-controls" id="authControls"> <div class="user-info" id="userInfo">
<input type="text" id="username" placeholder="Username" class="token-input">
<input type="password" id="password" placeholder="Password" class="token-input">
<button class="btn btn-primary" id="loginBtn">Login</button>
</div>
<div class="user-info" id="userInfo" style="display: none;">
<div class="user-details"> <div class="user-details">
<span class="user-name" id="currentUsername">User</span> <span class="user-name" id="currentUsername">User</span>
<span class="user-role" id="currentUserRole">role</span> <span class="user-role" id="currentUserRole">role</span>

221
web/static/css/style.css
View File

@@ -75,6 +75,209 @@ body {
min-height: 100vh; min-height: 100vh;
} }
/* Login Page */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: var(--space-4);
}
.login-container {
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: var(--space-10);
width: 100%;
max-width: 450px;
animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.login-header {
text-align: center;
margin-bottom: var(--space-8);
}
.login-logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.login-logo i {
font-size: var(--font-size-3xl);
color: var(--white);
}
.login-header h1 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-2);
}
.login-header p {
color: var(--gray-600);
font-size: var(--font-size-base);
}
.login-form {
margin-bottom: var(--space-6);
}
.login-error {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: #fef2f2;
border: 2px solid #fecaca;
border-radius: var(--radius-lg);
color: #991b1b;
margin-bottom: var(--space-5);
animation: shake 0.5s ease-in-out;
}
.login-error i {
font-size: var(--font-size-lg);
color: #ef4444;
}
.login-error span {
font-weight: 500;
font-size: var(--font-size-sm);
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.login-form .form-group {
margin-bottom: var(--space-5);
}
.login-form label {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
font-weight: 600;
color: var(--gray-700);
font-size: var(--font-size-sm);
}
.login-form label i {
color: #667eea;
font-size: var(--font-size-base);
}
.login-form input {
width: 100%;
padding: var(--space-4);
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
transition: var(--transition);
background: var(--white);
}
.login-form input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.login-form input.error {
border-color: #ef4444;
background: #fef2f2;
}
.login-form input.error:focus {
border-color: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}
.login-form input::placeholder {
color: var(--gray-400);
}
.btn-block {
width: 100%;
justify-content: center;
padding: var(--space-4);
font-size: var(--font-size-base);
font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
margin-top: var(--space-6);
position: relative;
overflow: hidden;
}
.btn-block::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: left 0.5s ease;
}
.btn-block:hover::before {
left: 100%;
}
.btn-block:hover:not(:disabled) {
background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.btn-block:active:not(:disabled) {
transform: translateY(0);
}
.login-footer {
text-align: center;
padding-top: var(--space-4);
border-top: 1px solid var(--gray-200);
}
.login-footer p {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin: 0;
}
.login-footer i {
color: var(--success-color);
}
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
@@ -694,6 +897,24 @@ body {
/* Responsive Design */ /* Responsive Design */
@media (max-width: 768px) { @media (max-width: 768px) {
.login-container {
padding: var(--space-6);
max-width: 100%;
}
.login-logo {
width: 60px;
height: 60px;
}
.login-logo i {
font-size: var(--font-size-2xl);
}
.login-header h1 {
font-size: var(--font-size-xl);
}
.container { .container {
padding: 0 var(--space-3); padding: 0 var(--space-3);
} }

91
web/static/js/app.js
View File

@@ -33,28 +33,25 @@ class MailingListApp {
* Setup event listeners * Setup event listeners
*/ */
setupEventListeners() { setupEventListeners() {
// Login/logout // Login form submission
document.getElementById('loginBtn').addEventListener('click', () => { document.getElementById('loginForm').addEventListener('submit', (e) => {
e.preventDefault();
this.handleLogin(); this.handleLogin();
}); });
// Clear error when user starts typing
document.getElementById('username').addEventListener('input', () => {
this.clearLoginError();
});
document.getElementById('password').addEventListener('input', () => {
this.clearLoginError();
});
document.getElementById('logoutBtn').addEventListener('click', () => { document.getElementById('logoutBtn').addEventListener('click', () => {
this.logout(); this.logout();
}); });
// Enter key in login inputs
document.getElementById('username').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.handleLogin();
}
});
document.getElementById('password').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.handleLogin();
}
});
// Bulk import button // Bulk import button
document.getElementById('showBulkImportBtn').addEventListener('click', () => { document.getElementById('showBulkImportBtn').addEventListener('click', () => {
uiManager.showBulkImportModal(); uiManager.showBulkImportModal();
@@ -91,14 +88,53 @@ class MailingListApp {
const username = usernameInput.value.trim(); const username = usernameInput.value.trim();
const password = passwordInput.value.trim(); const password = passwordInput.value.trim();
// Clear previous error states
this.clearLoginError();
if (!username || !password) { if (!username || !password) {
uiManager.showNotification('Please enter both username and password', 'error'); this.showLoginError('Please enter both username and password');
return; return;
} }
await this.login(username, password); await this.login(username, password);
} }
/**
* Show login error message
*/
showLoginError(message) {
const errorDiv = document.getElementById('loginError');
const errorMessage = document.getElementById('loginErrorMessage');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
errorMessage.textContent = message;
errorDiv.style.display = 'flex';
// Add error class to inputs
usernameInput.classList.add('error');
passwordInput.classList.add('error');
// Remove animation class and re-add to trigger animation
errorDiv.style.animation = 'none';
setTimeout(() => {
errorDiv.style.animation = '';
}, 10);
}
/**
* Clear login error message
*/
clearLoginError() {
const errorDiv = document.getElementById('loginError');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
errorDiv.style.display = 'none';
usernameInput.classList.remove('error');
passwordInput.classList.remove('error');
}
/** /**
* Authenticate with API * Authenticate with API
*/ */
@@ -124,7 +160,20 @@ class MailingListApp {
apiClient.clearToken(); apiClient.clearToken();
localStorage.removeItem('authToken'); localStorage.removeItem('authToken');
uiManager.handleError(error, 'Login failed'); // Show error on login form
let errorMessage = 'Login failed';
if (error.message) {
if (error.message.includes('401') || error.message.includes('Unauthorized') ||
error.message.includes('Invalid') || error.message.includes('credentials')) {
errorMessage = 'Invalid username or password';
} else if (error.message.includes('network') || error.message.includes('fetch')) {
errorMessage = 'Unable to connect to server';
} else {
errorMessage = error.message;
}
}
this.showLoginError(errorMessage);
} finally { } finally {
uiManager.setLoading(false); uiManager.setLoading(false);
} }
@@ -153,8 +202,8 @@ class MailingListApp {
* Show authenticated UI * Show authenticated UI
*/ */
showAuthenticatedUI() { showAuthenticatedUI() {
document.getElementById('authControls').style.display = 'none'; document.getElementById('loginPage').style.display = 'none';
document.getElementById('userInfo').style.display = 'flex'; document.getElementById('mainHeader').style.display = 'block';
document.getElementById('mainContent').style.display = 'block'; document.getElementById('mainContent').style.display = 'block';
// Clear login inputs // Clear login inputs
@@ -180,8 +229,8 @@ class MailingListApp {
* Show unauthenticated UI * Show unauthenticated UI
*/ */
showUnauthenticatedUI() { showUnauthenticatedUI() {
document.getElementById('authControls').style.display = 'flex'; document.getElementById('loginPage').style.display = 'flex';
document.getElementById('userInfo').style.display = 'none'; document.getElementById('mainHeader').style.display = 'none';
document.getElementById('mainContent').style.display = 'none'; document.getElementById('mainContent').style.display = 'none';
} }