{% extends "base.html" %}
{% block title %}Change password{% endblock %}
{% block content %}

<div class="panel">
    <div class="panel-head">
        <div class="panel-eyebrow">Cullis · First sign-in</div>
        <h1 class="panel-title">Set a <em>new password</em></h1>
        <p class="panel-sub">
            You're using a temporary password. Pick a new one to
            continue. Minimum 8 characters; longer is better.
        </p>
    </div>

    {% if error %}
    <div class="alert alert-error" id="cp-error">{{ error }}</div>
    {% endif %}

    <form id="cp-form" class="form" novalidate>
        <div class="field">
            <label class="field-label" for="old_password">Current password</label>
            <input
                id="old_password"
                name="old_password"
                type="password"
                autocomplete="current-password"
                required>
        </div>

        <div class="field">
            <label class="field-label" for="new_password">New password</label>
            <input
                id="new_password"
                name="new_password"
                type="password"
                autocomplete="new-password"
                minlength="8"
                required>
        </div>

        <div class="field">
            <label class="field-label" for="confirm_password">Confirm new password</label>
            <input
                id="confirm_password"
                name="confirm_password"
                type="password"
                autocomplete="new-password"
                minlength="8"
                required>
        </div>

        <div class="form-actions">
            <button class="btn btn-primary" type="submit" id="cp-submit">
                Save new password
            </button>
        </div>
    </form>
</div>

<script>
(function() {
    var form = document.getElementById('cp-form');
    if (!form) { return; }
    form.addEventListener('submit', function(ev) {
        ev.preventDefault();
        var btn = document.getElementById('cp-submit');
        var box = document.getElementById('cp-error');
        function showError(msg) {
            if (!box) {
                box = document.createElement('div');
                box.className = 'alert alert-error';
                box.id = 'cp-error';
                form.parentNode.insertBefore(box, form);
            }
            box.textContent = msg;
        }
        var old_password = document.getElementById('old_password').value;
        var new_password = document.getElementById('new_password').value;
        var confirm_password = document.getElementById('confirm_password').value;
        if (new_password !== confirm_password) {
            showError('New passwords do not match.');
            return;
        }
        if (new_password.length < 8) {
            showError('New password must be at least 8 characters.');
            return;
        }
        if (btn) { btn.disabled = true; }
        fetch('/api/auth/change-password', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                old_password: old_password,
                new_password: new_password,
            }),
        }).then(function(r) {
            if (!r.ok) {
                return r.json().then(function(j) {
                    throw new Error(j.detail || 'Could not change password');
                });
            }
            return r.json();
        }).then(function() {
            window.location.href = '/';
        }).catch(function(err) {
            showError(err.message || 'Could not change password');
            if (btn) { btn.disabled = false; }
        });
    });
})();
</script>

{% endblock %}