first commit
This commit is contained in:
203
public_web/templates/auth/reset_password.html
Normal file
203
public_web/templates/auth/reset_password.html
Normal file
@@ -0,0 +1,203 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Reset Password - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="auth-container">
|
||||
<h1 class="page-title">Reset Password</h1>
|
||||
<p class="page-subtitle">Create a new password for your account</p>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Message display area -->
|
||||
<div id="reset-password-messages"></div>
|
||||
|
||||
<form
|
||||
id="reset-password-form"
|
||||
hx-post="{{ api_base_url }}/api/v1/auth/reset-password"
|
||||
hx-ext="json-enc"
|
||||
hx-target="#reset-password-messages"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<!-- Hidden fields for user_id and secret from URL -->
|
||||
<input type="hidden" name="user_id" value="{{ user_id }}">
|
||||
<input type="hidden" name="secret" value="{{ secret }}">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="form-input"
|
||||
placeholder="Create a strong passphrase"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<div class="password-strength">
|
||||
<div class="strength-bar">
|
||||
<div id="strength-fill" class="strength-fill"></div>
|
||||
</div>
|
||||
<span id="strength-text" class="strength-text">Enter a password to see strength</span>
|
||||
</div>
|
||||
<span id="password-error" class="field-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="confirm-password">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
name="confirm_password"
|
||||
class="form-input"
|
||||
placeholder="Re-enter your passphrase"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<span id="confirm-password-error" class="field-error"></span>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Reset Password
|
||||
<span class="htmx-indicator loading-spinner"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" onclick="window.location.href='{{ url_for('auth_views.login') }}'">
|
||||
Back to Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Password strength indicator
|
||||
function updatePasswordStrength(password) {
|
||||
const fill = document.getElementById('strength-fill');
|
||||
const text = document.getElementById('strength-text');
|
||||
|
||||
if (!password) {
|
||||
fill.className = 'strength-fill';
|
||||
text.textContent = 'Enter a password to see strength';
|
||||
text.style.color = 'var(--text-muted)';
|
||||
return;
|
||||
}
|
||||
|
||||
let strength = 0;
|
||||
|
||||
// Check length
|
||||
if (password.length >= 8) strength++;
|
||||
if (password.length >= 12) strength++;
|
||||
|
||||
// Check for uppercase
|
||||
if (/[A-Z]/.test(password)) strength++;
|
||||
|
||||
// Check for lowercase
|
||||
if (/[a-z]/.test(password)) strength++;
|
||||
|
||||
// Check for numbers
|
||||
if (/[0-9]/.test(password)) strength++;
|
||||
|
||||
// Check for special characters
|
||||
if (/[^A-Za-z0-9]/.test(password)) strength++;
|
||||
|
||||
if (strength <= 2) {
|
||||
fill.className = 'strength-fill strength-weak';
|
||||
text.textContent = 'Weak - Add more complexity';
|
||||
text.style.color = 'var(--accent-red)';
|
||||
} else if (strength <= 4) {
|
||||
fill.className = 'strength-fill strength-medium';
|
||||
text.textContent = 'Medium - Almost there';
|
||||
text.style.color = 'var(--accent-gold)';
|
||||
} else {
|
||||
fill.className = 'strength-fill strength-strong';
|
||||
text.textContent = 'Strong - Excellent password';
|
||||
text.style.color = 'var(--accent-green)';
|
||||
}
|
||||
}
|
||||
|
||||
// Attach password strength checker
|
||||
document.getElementById('password').addEventListener('input', function() {
|
||||
updatePasswordStrength(this.value);
|
||||
});
|
||||
|
||||
// Validate password confirmation
|
||||
document.getElementById('confirm-password').addEventListener('input', function() {
|
||||
const password = document.getElementById('password').value;
|
||||
const confirmPassword = this.value;
|
||||
const errorSpan = document.getElementById('confirm-password-error');
|
||||
|
||||
if (confirmPassword && password !== confirmPassword) {
|
||||
errorSpan.textContent = 'Passwords do not match';
|
||||
} else {
|
||||
errorSpan.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Validate before submit
|
||||
document.getElementById('reset-password-form').addEventListener('submit', function(e) {
|
||||
const password = document.getElementById('password').value;
|
||||
const confirmPassword = document.getElementById('confirm-password').value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
e.preventDefault();
|
||||
document.getElementById('confirm-password-error').textContent = 'Passwords do not match';
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Handle form submission response
|
||||
document.getElementById('reset-password-form').addEventListener('htmx:afterSwap', function(event) {
|
||||
const response = event.detail.xhr.responseText;
|
||||
|
||||
try {
|
||||
const data = JSON.parse(response);
|
||||
|
||||
// Check if reset was successful
|
||||
if (data.status === 200) {
|
||||
// Show success message
|
||||
document.getElementById('reset-password-messages').innerHTML =
|
||||
'<div class="success-message">' +
|
||||
'Password reset successful! Redirecting to login...' +
|
||||
'</div>';
|
||||
|
||||
// Redirect to login after delay
|
||||
setTimeout(function() {
|
||||
window.location.href = '{{ url_for("auth_views.login") }}';
|
||||
}, 2000);
|
||||
} else {
|
||||
// Display error message
|
||||
if (data.error && data.error.details) {
|
||||
let errorHtml = '<div class="error-message">';
|
||||
for (const [field, message] of Object.entries(data.error.details)) {
|
||||
errorHtml += `<strong>${field}:</strong> ${message}<br>`;
|
||||
const errorSpan = document.getElementById(field + '-error');
|
||||
if (errorSpan) {
|
||||
errorSpan.textContent = message;
|
||||
}
|
||||
}
|
||||
errorHtml += '</div>';
|
||||
document.getElementById('reset-password-messages').innerHTML = errorHtml;
|
||||
} else if (data.error && data.error.message) {
|
||||
document.getElementById('reset-password-messages').innerHTML =
|
||||
'<div class="error-message">' + data.error.message + '</div>';
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing response:', e);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear errors when user starts typing
|
||||
document.querySelectorAll('.form-input').forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
const fieldName = this.name;
|
||||
const errorSpan = document.getElementById(fieldName + '-error');
|
||||
if (errorSpan) {
|
||||
errorSpan.textContent = '';
|
||||
}
|
||||
document.getElementById('reset-password-messages').innerHTML = '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user