156 lines
6.3 KiB
HTML
156 lines
6.3 KiB
HTML
<!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> |