Login.jsp kiashop

 avatar
unknown
plain_text
a year ago
19 kB
6
Indexable
<%-- 
    Document   : Login
    Created on : October 24, 2023, PM
    Author     : Admin
--%>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <!--        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>JSP Page</title>-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link href="css/login.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

        <title>KiA Shop - Be good, Be bad, Be yourself | Login</title>
        <style>
            .error {
                color: #fff;
                font-size: 16px;
                display: block;
                margin-top: 5px;
            }
        </style>
        <!-- Favicon  -->
        <link rel="icon" href="img/core-img/favicon2.ico">
    </head>
    <body>
        <div class="wel">
            <h1>Welcome to KiA Shop</h1>
            <p>Be good, Be bad, Be yourself</p>
        </div>
        <div id="logreg-forms">
            <form class="form-signin" action="login" method="post" id="formlogin"  style="display: block;">
                <h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> Sign in</h1>
                <input name="email" type="text" id="email" class="form-control" placeholder="Email">
                <span class="error" id="email-error"></span>
                <input name="password" type="password" id="password" class="form-control" placeholder="Password">
                <span class="error" id="password-error"></span>

                <div class="form-group form-check">
                    <input name="remember" value="1" type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Remember me</label>
                </div>

                <button class="btn btn-warning btn-block" id="btnsignin" name="btnsignin" value="Signin" type="submit"><i class="fas fa-sign-in-alt"></i> Sign in</button>
                <hr>
                <button class="btn btn-dark btn-block" type="button" id="btn-signup"><i class="fas fa-user-plus"></i> Sign up New Account</button>
                <button class="btn btn-dark btn-block" type="button" id="btn-forgot">Forgot Password</button>
            </form>



            <form action="signup" method="post" class="form-signup" id="formregister" style="display: none;">
                <h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> Sign up</h1>
                <input name="emails" type="text" id="emails" class="form-control" placeholder="Email">
                <span class="error" id="emails-error"></span>
                <input name="passwords" type="password" id="passwords" class="form-control" placeholder="Password">
                <span class="error" id="passwords-error"></span>
                <input name="repassword" type="password" id="repassword" class="form-control" placeholder="Repeat Password">
                <span class="error" id="repassword-error"></span>
                <span class="error" id="confirmpass-error"></span>
                <button class="btn btn-warning btn-block" name="submitsignup" id="submitsignup" value="Signup" type="submit"><i class="fas fa-user-plus"></i> Sign Up</button>
                <a id="cancelsignup" href="javascript:void(0);" onclick="goBack()"><i class="fas fa-angle-left"></i> Back</a>

            </form>


            <form action="forgotpass" method="post" class="form-signup" id="formforgot" style="display: none;">
                <h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> Forgot Password</h1>
                <input name="emailse" type="text" id="emailse" class="form-control" placeholder="Email">
                <span class="error" id="emailse-error"></span>
                <button class="btn btn-warning btn-block" name="btnforgot" id="btnforgot" value="Forgot" type="submit"> Check Email</button>
                <a id="cancelforgot" href="javascript:void(0);" onclick="goBackforgot()"><i class="fas fa-angle-left"></i> Back</a>
            </form>
            <br>

        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
                    const loginForm = document.getElementById("formlogin");
                    const signupForm = document.getElementById("formregister");
                    const forgotForm = document.getElementById("formforgot");
                    //nút quay về của form signup
                    function goBack() {
                        signupForm.style.display = "none";
                        forgotForm.style.display = "none";
                        loginForm.style.display = "block";
                    }
                    function goBackforgot() {
                        signupForm.style.display = "none";
                        forgotForm.style.display = "none";
                        loginForm.style.display = "block";
                    }
                    // kiểm tra dữ liệu signin có đúng format chưa
                    $(document).ready(function () {
                        $("#btnsignin").click(function (event) {
                            event.preventDefault(); // Prevent form submission
                            performAjaxRequest();
                        });
                        // hiển thị trang forgot
                        $("#btn-forgot").click(function (event) {
                            loginForm.style.display = "none";
                            signupForm.style.display = "none";
                            forgotForm.style.display = "block";
                            $("#login-error").text(""); // Reset the login error message
                            event.preventDefault(); // Prevent form submission
                        });
                        // hiển thị form signup
                        $("#btn-signup").click(function (event) {
                            loginForm.style.display = "none";
                            signupForm.style.display = "block";
                            forgotForm.style.display = "none";
                            $("#login-error").text(""); // Reset the login error message
                            event.preventDefault(); // Prevent form submission
                        });
                    });
                    // hiển thị form thông báo thành công hay thất bại
                    function performAjaxRequest() {
                        var email = $("#email").val().trim();
                        var password = $("#password").val().trim();
                        var hasError = false;
                        // Check if email is empty or missing '@'
                        $("#email-error, #password-error").text("");

                        if (email === "" || email.indexOf('@') === -1) {
                            $("#email-error").text("Please enter a valid email address ex: abc@gmail.com.").css("color", "red");
                            hasError = true;
                        } else {
                            $("#email-error").text("");
                        }

                        // Check if password is empty
                        if (password === "") {
                            $("#password-error").text("Please enter password.").css("color", "red");
                            hasError = true;
                        } else {
                            $("#password-error").text("");
                        }

                        // If there is an error, stop further processing
                        if (hasError) {
                            return;
                        }

                        $.ajax({
                            type: "POST",
                            url: "login",
                            data: {btnsignin: "Signin", email: email, password: password},
                            success: function (response) {
                                if (response === "SUCCESS") {
                                    window.location.href = 'Shop.jsp'; // Change this to the desired URL
                                } else {
                                    // Display SweetAlert for failure
                                    Swal.fire({
                                        title: 'Login Failed',
                                        text: 'Please check your email and password.',
                                        icon: 'error',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            },
                            error: function () {
                                // Display SweetAlert for error
                                Swal.fire({
                                    title: 'System Error',
                                    text: 'The system is failing',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        });
                    }




                    // check nhập dư liệu email vào
                    $(document).ready(function () {
                        $("#passwords, #repassword").on("input", function () {
                            checkPasswordMatch();
                        });

                        $("#submitsignup").click(function (event) {
                            event.preventDefault(); // Prevent form submission
                            performAjaxRequestRegister();
                        });
                    });

                    function checkPasswordMatch() {
                        var passwords = $("#passwords").val().trim();
                        var repassword = $("#repassword").val().trim();

                        if (passwords !== repassword) {
                            $("#confirmpass-error").text("Passwords do not match.").css("color", "red");
                        } else {
                            $("#confirmpass-error").text("");
                        }
                    }

                    function performAjaxRequestRegister() {
                        var emails = $("#emails").val().trim();
                        var passwords = $("#passwords").val().trim();
                        var repassword = $("#repassword").val().trim();
                        var hasErrors = false;
                        $("#emails-error, #passwords-error, #repassword-error").text("");

                        // Check if email is empty or missing '@'
                        if (emails === "" || emails.indexOf('@') === -1) {
                            $("#emails-error").text("Please enter a valid email address ex: abc@gmail.com.").css("color", "red");
                            hasErrors = true;
                        } else {
                            $("#emails-error").text("");
                        }
                        // Check if password is empty
                        if (passwords === "") {
                            $("#passwords-error").text("Please enter password.").css("color", "red");
                            hasErrors = true;
                        } else {
                            $("#passwords-error").text("");
                        }
                        if (repassword === "") {
                            $("#repassword-error").text("Please enter password.").css("color", "red");
                            hasErrors = true;
                        } else {
                            $("#repassword-error").text("");
                        }
                        // If there is an error, stop further processing
                        if (hasErrors) {
                            return;
                        }

                        $.ajax({
                            type: "POST",
                            url: "signup",
                            data: {submitsignup: "Signup", emails: emails, passwords: passwords, repassword: repassword},
                            success: function (response) {
                                if (response === "SUCCESS") {
                                    // Redirect to another page after successful login
                                    Swal.fire({
                                        title: 'Register Success',
                                        text: 'Click OK to switch to the Sign in page ',
                                        icon: 'success',
                                        confirmButtonText: 'OK'
                                    }).then(() => {
                                        // Redirect to another page after clicking OK
                                        window.location.href = 'pin.jsp'; // Change this to the desired URL
                                    });
                                } else {
                                    // Display SweetAlert for failure
                                    Swal.fire({
                                        title: 'Email Exit',
                                        text: 'Email already exists, please choose another email.',
                                        icon: 'error',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            },
                            error: function () {
                                // Display SweetAlert for error
                                Swal.fire({
                                    title: 'System Error',
                                    text: 'The system is failing',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        });
                    }







                    $(document).ready(function () {
                        $("#btnforgot").click(function (event) {
                            event.preventDefault(); // Prevent form submission
                            performAjaxRequestForgot();
                        });
                    });


                    function performAjaxRequestForgot() {
                        var emailse = $("#emailse").val().trim();
                        var hasErrorse = false;
                        $("#emailse-error").text("");

                        // Check if email is empty or missing '@'
                        if (emailse === "" || emailse.indexOf('@') === -1) {
                            $("#emailse-error").text("Please enter a valid email address ex: abc@gmail.com.").css("color", "red");
                            hasErrorse = true;
                        } else {
                            $("#emailse-error").text("");
                        }

                        // If there is an error, stop further processing
                        if (hasErrorse) {
                            return;
                        }

                        $.ajax({
                            type: "POST",
                            url: "forgotpass",
                            data: {btnforgot: "Forgot", emailse: emailse},
                            success: function (response) {
                                if (response === "SUCCESS") {
                                    window.location.href = 'confirmpass.jsp'; // Change this to the desired URL
                                } else {
                                    // Display SweetAlert for failure
                                    Swal.fire({
                                        title: 'Email Do Not Exit',
                                        text: 'Email does not exist, please check your email again.',
                                        icon: 'error',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            },
                            error: function () {
                                // Display SweetAlert for error
                                Swal.fire({
                                    title: 'System Error',
                                    text: 'The system is failing',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        });
                    }
        </script>
    </body>
</html>
Editor is loading...
Leave a Comment