295 lines
8.9 KiB
HTML
295 lines
8.9 KiB
HTML
{% extends 'portal_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Portal Login" %} - ATS{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* KAAT-S UI Variables */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
--kaauh-success: #28a745;
|
|
--kaauh-info: #17a2b8;
|
|
--kaauh-danger: #dc3545;
|
|
--kaauh-warning: #ffc107;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.login-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.login-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
border: none;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.login-header {
|
|
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
|
color: white;
|
|
padding: 2rem;
|
|
border-radius: 1rem 1rem 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-body {
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--kaauh-teal);
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
|
}
|
|
|
|
.btn-login {
|
|
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 600;
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-login:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 99, 110, 0.3);
|
|
}
|
|
|
|
.input-group-text {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
}
|
|
|
|
.user-type-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.user-type-card {
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.user-type-card:hover {
|
|
border-color: var(--kaauh-teal);
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.user-type-card.selected {
|
|
border-color: var(--kaauh-teal);
|
|
background-color: rgba(0, 99, 110, 0.1);
|
|
}
|
|
|
|
.user-type-icon {
|
|
font-size: 2rem;
|
|
color: var(--kaauh-teal);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<!-- Login Header -->
|
|
<div class="login-header">
|
|
<div class="mb-3">
|
|
<i class="fas fa-users fa-3x"></i>
|
|
</div>
|
|
<h3 class="mb-2">{% trans "Portal Login" %}</h3>
|
|
<p class="mb-0 opacity-75">
|
|
{% trans "Access your personalized dashboard" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Login Body -->
|
|
<div class="login-body">
|
|
<!-- Login Form -->
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
|
|
|
|
<!-- Email Field -->
|
|
<div class="mb-3">
|
|
<label for="{{ form.email.id_for_label }}" class="form-label fw-bold">
|
|
<i class="fas fa-envelope me-2"></i>
|
|
{% trans "Email Address" %}
|
|
</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<i class="fas fa-envelope"></i>
|
|
</span>
|
|
{{ form.email }}
|
|
</div>
|
|
{% if form.email.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{% for error in form.email.errors %}{{ error }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div class="mb-4">
|
|
<label for="{{ form.password.id_for_label }}" class="form-label fw-bold">
|
|
<i class="fas fa-lock me-2"></i>
|
|
{% trans "Password" %}
|
|
</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<i class="fas fa-key"></i>
|
|
</span>
|
|
{{ form.password }}
|
|
</div>
|
|
{% if form.password.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{% for error in form.password.errors %}{{ error }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- User Type Selection -->
|
|
<div class="mb-4">
|
|
<label for="{{ form.user_type.id_for_label }}" class="form-label fw-bold">
|
|
<i class="fas fa-user-tag me-2"></i>
|
|
{% trans "Select User Type" %}
|
|
</label>
|
|
{{ form.user_type }}
|
|
{% if form.user_type.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{% for error in form.user_type.errors %}{{ error }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
<!-- Submit Button -->
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-login btn-lg">
|
|
<i class="fas fa-sign-in-alt me-2"></i>
|
|
{% trans "Login" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Help Links -->
|
|
<div class="text-center mt-4">
|
|
<small class="text-muted">
|
|
{% trans "Need help?" %}
|
|
<a href="#" class="text-decoration-none">
|
|
{% trans "Contact Support" %}
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Focus on user type field
|
|
const userTypeField = document.getElementById('{{ form.user_type.id_for_label }}');
|
|
if (userTypeField) {
|
|
userTypeField.focus();
|
|
}
|
|
|
|
// Form validation
|
|
const form = document.querySelector('form');
|
|
const emailField = document.getElementById('{{ form.email.id_for_label }}');
|
|
const passwordField = document.getElementById('{{ form.password.id_for_label }}');
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const userType = userTypeField.value;
|
|
const email = emailField.value.trim();
|
|
const password = passwordField.value.trim();
|
|
|
|
if (!userType) {
|
|
e.preventDefault();
|
|
showError('{% trans "Please select a user type." %}');
|
|
userTypeField.focus();
|
|
return;
|
|
}
|
|
|
|
if (!email) {
|
|
e.preventDefault();
|
|
showError('{% trans "Please enter your email address." %}');
|
|
emailField.focus();
|
|
return;
|
|
}
|
|
|
|
if (!password) {
|
|
e.preventDefault();
|
|
showError('{% trans "Please enter your password." %}');
|
|
passwordField.focus();
|
|
return;
|
|
}
|
|
|
|
// Basic email validation
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(email)) {
|
|
e.preventDefault();
|
|
showError('{% trans "Please enter a valid email address." %}');
|
|
emailField.focus();
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
function showError(message) {
|
|
// Remove existing alerts
|
|
const existingAlerts = document.querySelectorAll('.alert-danger');
|
|
existingAlerts.forEach(alert => alert.remove());
|
|
|
|
// Create new alert
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = 'alert alert-danger alert-dismissible fade show';
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
// Insert at the top of login body
|
|
const loginBody = document.querySelector('.login-body');
|
|
loginBody.insertBefore(alertDiv, loginBody.firstChild);
|
|
|
|
// Auto-dismiss after 5 seconds
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.remove();
|
|
}
|
|
}, 5000);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |