added new bootstrap css and js for login and create account

js/login.js

@@ -0,0 +1,230 @@
+// ========================
+// 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");
+
+}