Code_of_Conquest/public_web/templates/auth/reset_password.html

{% 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 %}