<!DOCTYPE html>
<html lang="en">
<head>
    <title>RenewCMS | Password reset</title>
    {{.Head}}

    <style>
        .form-container {
            max-width: 24rem;
        }
    </style>
</head>
<body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center text-dark">
<div class="container">
    <div class="d-flex flex-column m-auto form-container">
        <div>
            <h1>RenewCMS</h1>
            <h2>Admin account password reset</h2>
        </div>
        <form action="validate" method="POST" class="mt-5" id="registerForm">
            <div class="d-flex flex-column gap-4">
                <div class="form-floating">
                    <input class="form-control"
                           id="code"
                           name="code"
                           placeholder="Code"
                           type="text"
                           value="{{.Code}}"
                           readonly>
                    <label for="code">Code</label>
                </div>
                <div class="form-floating">
                    <input class="form-control"
                           id="email"
                           name="email"
                           placeholder="E-mail"
                           type="email"
                           value="{{.Email}}"
                           readonly>
                    <label for="email">E-mail</label>
                </div>
                <div class="form-floating">
                    <input class="form-control {{ if .PageError.Password }} is-invalid {{ end }}"
                           id="password"
                           name="password"
                           placeholder="Password"
                           required
                           type="password">
                    <label for="password">Password</label>
                    <div class="invalid-feedback">The password must contain at least 8 characters.</div>
                </div>
                <div class="form-floating">
                    <input class="form-control {{ if .PageError.Password }} is-invalid {{ end }}"
                           id="confirmPassword"
                           name="confirmPassword"
                           placeholder="Password confirmation"
                           required
                           type="password"
                           onblur="validatePasswordMatch()"
                           oninput="validatePasswordMatch()">
                    <label for="confirmPassword">Password confirmation</label>
                    <div class="invalid-feedback">The passwords do not match.</div>
                </div>
                <button id="registerFormButton" class="btn btn-primary" disabled type="submit">
                    <span class="registerFormButtonLoading visually-hidden spinner-border spinner-border-sm"
                          role="status"></span>
                    <span class="registerFormButtonDefault">Confirm changes</span>
                </button>
            </div>
        </form>
        {{ if .Error.Message }}
        <div class="alert alert-danger my-4" role="alert">
            {{ .Error.Message }}
        </div>
        {{ end }}
    </div>
</div>

<script>
    const docElems = {
        form: document.querySelector("#registerForm"),
        button: document.querySelector("#registerFormButton"),
        inputs: document.querySelectorAll("input"),
        email: document.querySelector("#email"),
        password: document.querySelector("#password"),
        confirmPassword: document.querySelector("#confirmPassword"),
    }

    function formSomeFieldsEmpty() {
        return Array.from(docElems.inputs).some((input) => input.value === "")
    }

    function setButtonLoading() {
        docElems.button.classList.add("disabled")
        docElems.button.querySelector(".registerFormButtonDefault").classList.add("visually-hidden")
        docElems.button.querySelector(".registerFormButtonLoading").classList.remove("visually-hidden")
    }

    function onRegisterFormSubmit(event) {
        event.preventDefault()
        setButtonLoading()
        if (formSomeFieldsEmpty()) return
        event.target.submit()
    }

    function validateEmail() {
        const email = docElems.email.value.trim()
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

        if (!emailRegex.test(email)) {
            docElems.email.classList.add("is-invalid")
            return false
        } else {
            docElems.email.classList.remove("is-invalid")
            return true
        }
    }

    function onInput(event) {
        if (event.target.tagName === "INPUT") {
            docElems.button.disabled = !validateEmail() || formSomeFieldsEmpty()
        }
    }

    function validatePasswordMatch() {
        if (docElems.password.value !== docElems.confirmPassword.value) {
            docElems.confirmPassword.classList.add("is-invalid")
            return false
        } else {
            docElems.confirmPassword.classList.remove("is-invalid")
            return true
        }
    }

    docElems.form.addEventListener('submit', onRegisterFormSubmit)
    window.addEventListener('input', onInput)
</script>

</body>
</html>
