eric / rustwarden

{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-base-200 px-4">
    <div class="max-w-lg w-full space-y-6">
        <div class="text-center">
            <h1 class="text-3xl font-bold text-base-content mb-2">{{ title }}</h1>
            <p class="text-base-content/70">{{ subtitle }}</p>
        </div>

        <div id="alert-error" class="hidden alert alert-error">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            <span id="alert-error-text"></span>
        </div>

        <div id="alert-success" class="hidden alert alert-success">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            <span id="alert-success-text"></span>
        </div>

        <div class="card bg-base-100 shadow-xl p-8">
            <form id="forgot-form" class="space-y-4"
                data-error-default="{{ error_default }}"
                data-success-default="{{ success_default }}"
                data-error-missing-email="{{ error_missing_email }}"
                data-error-cannot-send="{{ error_cannot_send }}">
                <div class="form-control">
                    <label for="email" class="label">
                        <span class="label-text">{{ email_label }}</span>
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        autocomplete="email"
                        class="input input-bordered w-full"
                        placeholder="{{ email_placeholder }}">
                </div>

                <div class="form-control mt-6">
                    <button type="submit" class="btn btn-primary w-full">
                        {{ submit }}
                    </button>
                </div>
            </form>

            <div class="mt-4 text-sm text-center">
                <a href="/login" class="text-primary hover:underline">{{ back_to_login }}</a>
            </div>
        </div>
    </div>
</div>

<script>
    const form = document.getElementById('forgot-form');
    const MSG_ERROR_DEFAULT = form?.dataset.errorDefault || "";
    const MSG_SUCCESS_DEFAULT = form?.dataset.successDefault || "";
    const MSG_ERROR_MISSING_EMAIL = form?.dataset.errorMissingEmail || "";
    const MSG_ERROR_CANNOT_SEND = form?.dataset.errorCannotSend || "";
    const alertError = document.getElementById('alert-error');
    const alertErrorText = document.getElementById('alert-error-text');
    const alertSuccess = document.getElementById('alert-success');
    const alertSuccessText = document.getElementById('alert-success-text');

    function showError(msg) {
        if (alertError && alertErrorText) {
            alertErrorText.textContent = msg || MSG_ERROR_DEFAULT;
            alertError.classList.remove('hidden');
        }
        if (alertSuccess) alertSuccess.classList.add('hidden');
    }

    function showSuccess(msg) {
        if (alertSuccess && alertSuccessText) {
            alertSuccessText.textContent = msg || MSG_SUCCESS_DEFAULT;
            alertSuccess.classList.remove('hidden');
        }
        if (alertError) alertError.classList.add('hidden');
        if (form) form.classList.add('hidden');
    }

    form?.addEventListener('submit', (e) => {
        e.preventDefault();
        const email = document.getElementById('email')?.value;
        if (!email) {
            showError(MSG_ERROR_MISSING_EMAIL);
            return;
        }
        fetch('/api/v1/auth/forgot-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email }),
            credentials: 'include'
        })
        .then(async (resp) => {
            if (resp.ok) {
                showSuccess(MSG_SUCCESS_DEFAULT);
            } else {
                showError(MSG_ERROR_CANNOT_SEND);
            }
        })
        .catch(() => showError(MSG_ERROR_CANNOT_SEND));
    });
</script>
{% endblock %}