huntingclubroster/js/login.js

// ========================
// Sign In / Create Account
// ========================

$(document).ready(function () {

    const $login = $("#login");
    const $signUp = $("form[data-create-account], #signUp");
    const $resetPassword = $("#reset-password");

    // Use our Bootstrap validation messages.
    $login.add($signUp).add($resetPassword).attr("novalidate", "novalidate");

    $(".btnSignUp").on("click", function (e) {
        e.preventDefault();
        window.location.href = "./?Xaction=signup";
    });

    // ------------------
    // Validate Sign In
    // ------------------

    $login.on("submit", function (e) {

        const $form = $(this);
        const $email = $form.find("[name='user_email']");
        const $password = $form.find("[name='user_password']");

        clearInputErrors($form);
        trimInput($email);

        if (isBlank($email)) {
            return rejectSubmit(e, $email, "Email address is required.");
        }

        if (isBlank($password)) {
            return rejectSubmit(e, $password, "Password is required.");
        }

    });

    // ------------------------
    // Open Password Reset Form
    // ------------------------

    $(".btnForgot").on("click", function (e) {

        e.preventDefault();

        if ($resetPassword.length) {
            $resetPassword.trigger("submit");
        }

    });

    // -----------------------
    // Validate Password Reset
    // -----------------------

    $resetPassword.on("submit", function (e) {

        const $email = $login.find("[name='user_email']");

        clearInputErrors($login);
        trimInput($email);

        if (isBlank($email)) {
            return rejectSubmit(e, $email, "Enter your email address to reset your password.");
        }

        $(this).find("#reset_user_email").val($email.val());

    });

    // -----------------------
    // Validate Create Account
    // -----------------------

    $signUp.on("submit", function (e) {

        const $form = $(this);

        const $firstName = $form.find("[name='user_first_name']");
        const $lastName = $form.find("[name='user_last_name']");
        const $email = $form.find("[name='user_email']");
        const $username = $form.find("[name='user_name']");
        const $password = $form.find("[name='user_password']");
        const $confirmation = $form.find("[name='user_password_confirm']");

        clearInputErrors($form);

        [$firstName, $lastName, $email, $username].forEach(trimInput);

        const requiredFields = [
            [$firstName, "First name is required."],
            [$lastName, "Last name is required."],
            [$email, "Email address is required."],
            [$username, "Username is required."],
            [$password, "Password is required."],
            [$confirmation, "Please confirm your password."]
        ];

        for (const [$input, message] of requiredFields) {
            if (isBlank($input)) {
                return rejectSubmit(e, $input, message);
            }
        }

        if ($email[0].validity.typeMismatch) {
            return rejectSubmit(e, $email, "Enter a valid email address.");
        }

        if ($password.val() !== $confirmation.val()) {
            return rejectSubmit(e, $confirmation, "Passwords must match.");
        }

    });

    // ---------------------------------
    // Clear Feedback When Input Changes
    // ---------------------------------

    $login.add($signUp).on("input", "input", function () {
        clearFieldError($(this));
    });

});

// --------------------
// Trim Text Inputs
// --------------------

function trimInput($input) {
    $input.val(String($input.val() || "").trim());
}

// --------------------
// Test for Blank Value
// --------------------

function isBlank($input) {
    return String($input.val() || "").trim().length === 0;
}

// ----------------------
// Stop Invalid Submission
// ----------------------

function rejectSubmit(event, $input, message) {

    event.preventDefault();
    createInputError($input, message);

    return false;

}

// ------------------------
// Clear Form Input Errors
// ------------------------

function clearInputErrors($form) {

    $form.find("input").each(function () {
        clearFieldError($(this));
    });

}

// ------------------------
// Clear One Input's Error
// ------------------------

function clearFieldError($input) {

    const feedbackId = $input.attr("data-auth-feedback");

    if (feedbackId) {

        const feedback = document.getElementById(feedbackId);

        if (feedback) {
            feedback.remove();
        }

        const describedBy = ($input.attr("aria-describedby") || "").split(/\s+/).filter(id => id && id !== feedbackId);
        if (describedBy.length) {
            $input.attr("aria-describedby", describedBy.join(" "));
        } else {
            $input.removeAttr("aria-describedby");
        }

    }

    $input.removeClass("is-invalid").removeAttr("aria-invalid data-auth-feedback");
}

// ---------------------
// Show Input Feedback
// ---------------------

function createInputError($input, message) {

    clearFieldError($input);

    const feedbackId = $input.attr("id") + "-auth-error";

    const $feedback = $("<div>", {id: feedbackId, class: "invalid-feedback", text: message});

    // Support both plain inputs and Bootstrap input groups.
    const $group = $input.closest(".input-group, .password-wrap");

    if ($group.length) {

        $group.addClass("has-validation");
        $group.after($feedback);
        $feedback.addClass("d-block");

    } else {
        $input.after($feedback);

    }

    const describedBy = ($input.attr("aria-describedby") || "").split(/\s+/).filter(Boolean);

    describedBy.push(feedbackId);

    $input.addClass("is-invalid").attr({"aria-invalid": "true", "aria-describedby": describedBy.join(" "), "data-auth-feedback": feedbackId}).trigger("focus");

}