<!DOCTYPE html>
<html lang="en">
<head>
	<title>GohCMS | Setup</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 gap-5 m-auto form-container">
		<div>
			<h1>GohCMS</h1>
			<h2>Admin account creation</h2>
		</div>
		<form action="register" class="" method="POST">
			<div class="d-flex flex-column gap-4">
				<div class="form-floating">
					<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
						   id="email"
						   name="email"
						   placeholder="E-mail"
						   required
						   type="email"
						   value="{{.Email}}"
						   onblur="validateEmail()">
					<label for="email">E-mail</label>
					<div class="invalid-feedback">The e-mail must be a valid e-mail.</div>
				</div>
				<div class="form-floating">
					<input class="form-control {{ if .PageError.IsError }} is-invalid {{ end }}"
						   id="username"
						   name="username"
						   placeholder="Username"
						   required
						   type="text"
						   value="{{.Username}}">
					<label for="username">Username</label>
					<div class="invalid-feedback">The username must be between 3 and 20 characters long.</div>
				</div>
				<div class="form-floating">
					<input class="form-control {{ if .PageError.IsError }} 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.IsError }} 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">Next</span>
				</button>
			</div>
		</form>
	</div>
</div>

<script>
    const docElems = {
        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 isFormValid() {
		return !formSomeFieldsEmpty() && validateEmail() && validatePasswordMatch()
	}

    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 (!isFormValid()) return
        event.target.submit()
    }

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

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

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

</body>
</html>
