742 lines
23 KiB
HTML
742 lines
23 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Edit User - QR Code Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="form-page">
|
|
<div class="form-card">
|
|
<div class="form-header">
|
|
<h1>Edit User</h1>
|
|
<p>Update user information and permissions</p>
|
|
</div>
|
|
|
|
<!-- Current User Info Display -->
|
|
<div class="current-user-info">
|
|
<div class="user-avatar-section">
|
|
<div class="user-avatar large">
|
|
<i class="fas fa-user"></i>
|
|
<div class="avatar-status {{ user.role }}">
|
|
<i class="fas {{ 'fa-crown' if user.role == 'admin' else 'fa-user-tie' }}"></i>
|
|
</div>
|
|
</div>
|
|
<div class="user-basic-info">
|
|
<h3>{{ user.full_name }}</h3>
|
|
<p>@{{ user.username }}</p>
|
|
<span class="role-badge {{ user.role }}">
|
|
{{ user.role.title() }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-stats-quick">
|
|
<div class="stat-quick">
|
|
<span class="stat-number">{{ user.created_qr_codes.count() }}</span>
|
|
<span class="stat-label">QR Codes</span>
|
|
</div>
|
|
<div class="stat-quick">
|
|
<span class="stat-number">{{ user.created_date.strftime('%b %Y') }}</span>
|
|
<span class="stat-label">Joined</span>
|
|
</div>
|
|
<div class="stat-quick">
|
|
<span class="stat-number">
|
|
{% if user.last_login_date %}
|
|
{{ user.last_login_date.strftime('%m/%d') }}
|
|
{% else %}
|
|
Never
|
|
{% endif %}
|
|
</span>
|
|
<span class="stat-label">Last Login</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" class="form" id="editUserForm">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="full_name">
|
|
<i class="fas fa-id-card"></i>
|
|
Full Name
|
|
</label>
|
|
<input type="text" id="full_name" name="full_name"
|
|
value="{{ user.full_name }}" required>
|
|
<small class="form-help">User's display name in the system</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">
|
|
<i class="fas fa-envelope"></i>
|
|
Email Address
|
|
</label>
|
|
<input type="email" id="email" name="email"
|
|
value="{{ user.email }}" required>
|
|
<small class="form-help">Primary email for notifications</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="username_display">
|
|
<i class="fas fa-user"></i>
|
|
Username
|
|
</label>
|
|
<input type="text" id="username_display"
|
|
value="{{ user.username }}" disabled>
|
|
<small class="form-help">Username cannot be changed</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="role">
|
|
<i class="fas fa-user-shield"></i>
|
|
User Role
|
|
</label>
|
|
<select id="role" name="role" required>
|
|
<option value="staff" {{ 'selected' if user.role == 'staff' else '' }}>Staff User</option>
|
|
<option value="admin" {{ 'selected' if user.role == 'admin' else '' }}>Administrator</option>
|
|
</select>
|
|
<small class="form-help">Changes role permissions immediately</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Role Change Warning -->
|
|
<div class="role-warning" id="roleWarning" style="display: none;">
|
|
<div class="warning-header">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<span>Role Change Warning</span>
|
|
</div>
|
|
<div class="warning-content" id="warningContent">
|
|
<!-- Dynamic warning content -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Section -->
|
|
<div class="password-section">
|
|
<h3>
|
|
<i class="fas fa-key"></i>
|
|
Password Management
|
|
</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="new_password">
|
|
<i class="fas fa-lock"></i>
|
|
New Password (Optional)
|
|
</label>
|
|
<input type="password" id="new_password" name="new_password"
|
|
minlength="6" placeholder="Leave blank to keep current password">
|
|
<div class="password-strength" id="passwordStrength"></div>
|
|
<small class="form-help">Only enter a password if you want to change it</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirm_password">
|
|
<i class="fas fa-check-circle"></i>
|
|
Confirm New Password
|
|
</label>
|
|
<input type="password" id="confirm_password" name="confirm_password">
|
|
<div class="password-match" id="passwordMatch"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Status Section -->
|
|
<div class="status-section">
|
|
<h3>
|
|
<i class="fas fa-info-circle"></i>
|
|
Account Status
|
|
</h3>
|
|
|
|
<div class="status-display">
|
|
<div class="status-item">
|
|
<strong>Current Status:</strong>
|
|
<span class="status-badge {{ 'active' if user.active_status else 'inactive' }}">
|
|
<i class="fas {{ 'fa-check-circle' if user.active_status else 'fa-times-circle' }}"></i>
|
|
{{ 'Active' if user.active_status else 'Inactive' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="status-item">
|
|
<strong>Account Created:</strong>
|
|
<span>{{ user.created_date.strftime('%B %d, %Y at %H:%M') }}</span>
|
|
</div>
|
|
|
|
{% if user.creator %}
|
|
<div class="status-item">
|
|
<strong>Created By:</strong>
|
|
<span>{{ user.creator.full_name }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<a href="{{ url_for('users') }}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Back to Users
|
|
</a>
|
|
|
|
{% if not user.active_status %}
|
|
<a href="{{ url_for('reactivate_user', user_id=user.id) }}"
|
|
class="btn btn-success"
|
|
onclick="return confirm('Reactivate this user account?')">
|
|
<i class="fas fa-user-check"></i>
|
|
Reactivate User
|
|
</a>
|
|
{% endif %}
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('editUserForm');
|
|
const roleSelect = document.getElementById('role');
|
|
const roleWarning = document.getElementById('roleWarning');
|
|
const warningContent = document.getElementById('warningContent');
|
|
const newPasswordInput = document.getElementById('new_password');
|
|
const confirmPasswordInput = document.getElementById('confirm_password');
|
|
const passwordStrength = document.getElementById('passwordStrength');
|
|
const passwordMatch = document.getElementById('passwordMatch');
|
|
|
|
const originalRole = '{{ user.role }}';
|
|
const isCurrentUser = {{ 'true' if user.id == session.user_id else 'false' }};
|
|
|
|
// Role change detection and warnings
|
|
roleSelect.addEventListener('change', function() {
|
|
const newRole = this.value;
|
|
|
|
if (newRole !== originalRole) {
|
|
let warningMessage = '';
|
|
|
|
if (originalRole === 'admin' && newRole === 'staff') {
|
|
if (isCurrentUser) {
|
|
warningMessage = `
|
|
<strong>⚠️ You are demoting yourself!</strong><br>
|
|
This will remove your admin privileges and you will lose access to:
|
|
<ul>
|
|
<li>User management</li>
|
|
<li>System administration</li>
|
|
<li>Advanced settings</li>
|
|
</ul>
|
|
<strong>You will need another admin to restore your privileges.</strong>
|
|
`;
|
|
} else {
|
|
warningMessage = `
|
|
<strong>Demoting Admin to Staff</strong><br>
|
|
This user will lose admin privileges and access to:
|
|
<ul>
|
|
<li>User management</li>
|
|
<li>System administration</li>
|
|
<li>Advanced settings</li>
|
|
</ul>
|
|
`;
|
|
}
|
|
} else if (originalRole === 'staff' && newRole === 'admin') {
|
|
warningMessage = `
|
|
<strong>Promoting Staff to Admin</strong><br>
|
|
This user will gain full system access including:
|
|
<ul>
|
|
<li>User management</li>
|
|
<li>System administration</li>
|
|
<li>All QR code operations</li>
|
|
</ul>
|
|
`;
|
|
}
|
|
|
|
warningContent.innerHTML = warningMessage;
|
|
roleWarning.style.display = 'block';
|
|
setTimeout(() => roleWarning.classList.add('fade-in'), 10);
|
|
} else {
|
|
roleWarning.style.display = 'none';
|
|
roleWarning.classList.remove('fade-in');
|
|
}
|
|
});
|
|
|
|
// Password strength checker
|
|
newPasswordInput.addEventListener('input', function() {
|
|
const password = this.value;
|
|
|
|
if (!password) {
|
|
passwordStrength.textContent = '';
|
|
passwordStrength.className = 'password-strength';
|
|
return;
|
|
}
|
|
|
|
let strength = 0;
|
|
let feedback = [];
|
|
|
|
if (password.length >= 6) strength++;
|
|
else feedback.push('At least 6 characters');
|
|
|
|
if (password.length >= 8) strength++;
|
|
else if (password.length >= 6) feedback.push('8+ characters recommended');
|
|
|
|
if (/[A-Z]/.test(password)) strength++;
|
|
else feedback.push('One uppercase letter');
|
|
|
|
if (/[a-z]/.test(password)) strength++;
|
|
else feedback.push('One lowercase letter');
|
|
|
|
if (/[0-9]/.test(password)) strength++;
|
|
else feedback.push('One number');
|
|
|
|
if (/[^A-Za-z0-9]/.test(password)) strength++;
|
|
else feedback.push('One special character');
|
|
|
|
let strengthText = '';
|
|
let strengthClass = '';
|
|
|
|
if (strength < 3) {
|
|
strengthText = 'Weak';
|
|
strengthClass = 'weak';
|
|
} else if (strength < 5) {
|
|
strengthText = 'Medium';
|
|
strengthClass = 'medium';
|
|
} else {
|
|
strengthText = 'Strong';
|
|
strengthClass = 'strong';
|
|
}
|
|
|
|
passwordStrength.className = `password-strength ${strengthClass}`;
|
|
passwordStrength.textContent = `Strength: ${strengthText}`;
|
|
|
|
if (feedback.length > 0) {
|
|
passwordStrength.textContent += ` (Missing: ${feedback.join(', ')})`;
|
|
}
|
|
|
|
checkPasswordMatch();
|
|
});
|
|
|
|
// Password match checker
|
|
function checkPasswordMatch() {
|
|
if (confirmPasswordInput.value && newPasswordInput.value) {
|
|
if (newPasswordInput.value === confirmPasswordInput.value) {
|
|
passwordMatch.textContent = '✓ Passwords match';
|
|
passwordMatch.className = 'password-match match';
|
|
} else {
|
|
passwordMatch.textContent = '✗ Passwords do not match';
|
|
passwordMatch.className = 'password-match no-match';
|
|
}
|
|
} else {
|
|
passwordMatch.textContent = '';
|
|
passwordMatch.className = 'password-match';
|
|
}
|
|
}
|
|
|
|
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
|
|
|
|
// Form validation
|
|
form.addEventListener('submit', function(e) {
|
|
const newPassword = newPasswordInput.value;
|
|
const confirmPassword = confirmPasswordInput.value;
|
|
|
|
// Password validation if provided
|
|
if (newPassword) {
|
|
if (newPassword.length < 6) {
|
|
e.preventDefault();
|
|
alert('New password must be at least 6 characters long.');
|
|
newPasswordInput.focus();
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
e.preventDefault();
|
|
alert('New passwords do not match.');
|
|
confirmPasswordInput.focus();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Role change confirmation
|
|
const newRole = roleSelect.value;
|
|
if (newRole !== originalRole) {
|
|
const roleChangeConfirm = isCurrentUser && newRole === 'staff'
|
|
? confirm('⚠️ You are about to demote yourself from admin to staff. You will lose admin privileges. Are you sure?')
|
|
: confirm(`Change user role from ${originalRole} to ${newRole}?`);
|
|
|
|
if (!roleChangeConfirm) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Show loading state
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving Changes...';
|
|
submitBtn.disabled = true;
|
|
});
|
|
|
|
// Auto-capitalize full name
|
|
const fullNameInput = document.getElementById('full_name');
|
|
fullNameInput.addEventListener('input', function() {
|
|
this.value = this.value.replace(/\b\w/g, l => l.toUpperCase());
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Additional styles for edit user form */
|
|
.current-user-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
padding: 1.5rem;
|
|
background: linear-gradient(135deg, var(--gray-50), var(--white));
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.user-avatar-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.user-avatar.large {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--gray-200);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
color: var(--gray-600);
|
|
position: relative;
|
|
}
|
|
|
|
.avatar-status {
|
|
position: absolute;
|
|
bottom: -2px;
|
|
right: -2px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.875rem;
|
|
border: 2px solid var(--white);
|
|
}
|
|
|
|
.avatar-status.admin {
|
|
background: #fbbf24;
|
|
color: #92400e;
|
|
}
|
|
|
|
.avatar-status.staff {
|
|
background: var(--gray-400);
|
|
color: var(--white);
|
|
}
|
|
|
|
.user-basic-info h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.user-basic-info p {
|
|
color: var(--gray-500);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.user-stats-quick {
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.stat-quick {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--gray-500);
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.role-warning {
|
|
margin: 1.5rem 0;
|
|
padding: 1rem;
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border: 1px solid #f59e0b;
|
|
border-radius: var(--radius-lg);
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.role-warning.fade-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.warning-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
color: #d97706;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.warning-content {
|
|
color: #92400e;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.warning-content ul {
|
|
margin: 0.5rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.warning-content li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.password-section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.password-section h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.status-section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.status-section h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.status-display {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
background: var(--white);
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.status-item strong {
|
|
color: var(--gray-700);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-item span {
|
|
color: var(--gray-900);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-badge.active {
|
|
background: rgba(5, 150, 105, 0.1);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.status-badge.inactive {
|
|
background: rgba(220, 38, 38, 0.1);
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.role-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.role-badge.admin {
|
|
background: rgba(251, 191, 36, 0.1);
|
|
color: #d97706;
|
|
}
|
|
|
|
.role-badge.staff {
|
|
background: rgba(100, 116, 139, 0.1);
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.password-strength {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.75rem;
|
|
padding: 0.5rem;
|
|
border-radius: var(--radius);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.password-strength.weak {
|
|
background-color: rgba(220, 38, 38, 0.1);
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.password-strength.medium {
|
|
background-color: rgba(217, 119, 6, 0.1);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.password-strength.strong {
|
|
background-color: rgba(5, 150, 105, 0.1);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.password-match {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.75rem;
|
|
padding: 0.5rem;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.password-match.match {
|
|
background-color: rgba(5, 150, 105, 0.1);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.password-match.no-match {
|
|
background-color: rgba(220, 38, 38, 0.1);
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 2px solid var(--gray-200);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-base);
|
|
transition: var(--transition);
|
|
background-color: var(--white);
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.form-group input:disabled {
|
|
background-color: var(--gray-100);
|
|
color: var(--gray-500);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-help {
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.75rem;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--gray-200);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.current-user-info {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-stats-quick {
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.status-item {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %} |