the beginning of the idiots
This commit is contained in:
156
qwen/go/templates/login.html
Normal file
156
qwen/go/templates/login.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - MerchantsOfHope.org</title>
|
||||
<meta name="description" content="Login to your MerchantsOfHope.org account">
|
||||
|
||||
<link rel="stylesheet" href="/static/css/accessibility.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main" class="skip-link">Skip to main content</a>
|
||||
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1>MerchantsOfHope.org</h1>
|
||||
<p>Login to Your Account</p>
|
||||
|
||||
<nav aria-label="Main navigation">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/positions">Browse Positions</a></li>
|
||||
<li><a href="/apply">Apply</a></li>
|
||||
<li><a href="/login">Login</a></li>
|
||||
<li><a href="/register">Register</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<div class="container">
|
||||
<h1>Login</h1>
|
||||
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" name="email" required aria-describedby="email-help">
|
||||
<div id="email-help" class="form-hint">Enter your registered email address</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required aria-describedby="password-help">
|
||||
<div id="password-help" class="form-hint">Enter your password</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
</form>
|
||||
|
||||
<div class="divider">
|
||||
<span>Or continue with</span>
|
||||
</div>
|
||||
|
||||
<div class="social-login">
|
||||
<button class="social-btn" onclick="socialLogin('oidc')" aria-label="Login with enterprise SSO">
|
||||
<span>🏢</span> <span>Enterprise SSO (OIDC)</span>
|
||||
</button>
|
||||
<button class="social-btn" onclick="socialLogin('google')" aria-label="Login with Google">
|
||||
<span>🔍</span> <span>Continue with Google</span>
|
||||
</button>
|
||||
<button class="social-btn" onclick="socialLogin('github')" aria-label="Login with GitHub">
|
||||
<span>🐱</span> <span>Continue with GitHub</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top: var(--spacing-large);">
|
||||
<p>Don't have an account? <a href="/register">Register here</a></p>
|
||||
<p><a href="/forgot-password">Forgot your password?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2025 MerchantsOfHope.org - A TSYS Group Initiative</p>
|
||||
<p>Committed to accessibility, security, and excellence</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Set proper focus management
|
||||
const mainContent = document.getElementById('main');
|
||||
mainContent.setAttribute('tabindex', '-1');
|
||||
mainContent.focus();
|
||||
|
||||
// Login form submission
|
||||
const loginForm = document.getElementById('login-form');
|
||||
loginForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
// Basic validation
|
||||
if (!email || !password) {
|
||||
showError('Please enter both email and password');
|
||||
return;
|
||||
}
|
||||
|
||||
// In a real app, this would make an API call to authenticate the user
|
||||
alert(`Attempting to login with email: ${email}\n\nIn a real application, this would call the authentication API.`);
|
||||
|
||||
// Simulate login success
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
localStorage.setItem('userEmail', email);
|
||||
|
||||
// Redirect to dashboard or previous page
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
// Ensure all interactive elements have proper focus management
|
||||
const interactiveElements = document.querySelectorAll('a, button, input, select, textarea');
|
||||
interactiveElements.forEach(el => {
|
||||
el.addEventListener('focus', function() {
|
||||
this.style.outline = '2px solid var(--secondary-color)';
|
||||
this.style.outlineOffset = '2px';
|
||||
});
|
||||
|
||||
el.addEventListener('blur', function() {
|
||||
this.style.outline = '';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function socialLogin(provider) {
|
||||
// In a real app, this would redirect to the appropriate OAuth provider
|
||||
alert(`Redirecting to ${provider} authentication. In a real application, this would redirect to the OAuth provider.`);
|
||||
|
||||
// Store return URL to redirect after authentication
|
||||
localStorage.setItem('returnUrl', window.location.href);
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
// Create error message element
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'alert alert-error';
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.setAttribute('role', 'alert');
|
||||
|
||||
// Add to beginning of form
|
||||
const form = document.getElementById('login-form');
|
||||
form.insertBefore(errorDiv, form.firstChild);
|
||||
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (errorDiv.parentNode) {
|
||||
errorDiv.parentNode.removeChild(errorDiv);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user