login
unknown
plain_text
a year ago
20 kB
7
Indexable
<%-- Document : login Created on : Oct 2, 2023, 10:32:52 PM Author : MSI GTX --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <!-- Add this in the head section of your HTML file --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10"></link> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10"> <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" /> <style> body { background-color: brown; background: -webkit-linear-gradient(to left, #8E0E00, #581414); background: linear-gradient(to left, #8E0E00, #581414); background-size: cover; background-position-y: -80px; font-size: 20px; /* display: flex; */ flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } #wrapper { min-height: 100vh; /*chiều cao tối thiểu như này là 100%*/ display: flex; justify-content: center; align-items: center; } #form-login { max-width: 400px; background: rgba(0, 0, 0, 0.45); flex-grow: 1; padding: 30px 30px 60px; box-shadow: 0px 0px 17px 2px rgba(82, 46, 46, 0.8); } #form-forgot { max-width: 400px; background: rgba(0, 0, 0, 0.45); flex-grow: 1; padding: 30px 30px 60px; box-shadow: 0px 0px 17px 2px rgba(82, 46, 46, 0.8); } #form-signup { max-width: 400px; background: rgba(0, 0, 0, 0.45); flex-grow: 1; padding: 30px 30px 60px; box-shadow: 0px 0px 17px 2px rgba(82, 46, 46, 0.8); } .form-heading { font-size: 50px; color: #ffffff; text-align: center; margin-bottom: 30px; } .form-group { border-bottom: 1px solid #fcfdff; margin-top: 15px; margin-bottom: 20px; display: flex; } .form-group i { color: #fff; font-size: 16px; padding-top: 5px; padding-right: 10px; } .form-input { /*hiển thị ảnh nền tron suốt*/ background: transparent; width: 100%; padding: 10px; border: 0; outline: 0; color: #ffffff; flex-grow: 1; /*mở rộng phần tử bằng khoảng trắng*/ } .form-input::placeholder { color: #ffffff; } #eye i { padding-right: 0; cursor: pointer; } .material-symbols-rounded{ color: white; } .form-submit { background: transparent; border: 1px solid #ffffff; color: #fff; width: 100%; text-transform: uppercase; padding: 6px 10px; transition: 0.25s ease-in-out; margin-top: 30px; } .form-submit:hover { border: 1px solid #54a0ff; } .form-button { background: transparent; text-align: center; border: 1px solid #ffffff; color: #fff; width: 95%; text-transform: uppercase; padding: 6px 10px; transition: 0.25s ease-in-out; /*giup chuyển đổi hiệu ứng mượt mà hơn*/ margin-top: 30px; text-decoration: none; /* Loại bỏ gạch chân mặc định của thẻ a */ display: inline-block; /* Để thẻ a có kích thước và padding như một nút */ } .form-button:hover { border: 1px solid #54a0ff; } .error { color: #fff; font-size: 16px; display: block; margin-top: 5px; } </style> </head> <body> <!--form đăng nhập có login forgot email register--> <div id="wrapper"> <form action="AccountController" id="form-login" method="post"> <h1 class="form-heading">LOGIN</h1> <div class="form-group"> <span class="material-symbols-rounded">mail</span> <input type="text" class="form-input" name="email" id="email" placeholder="Email"> </div> <span class="error" id="email-error"></span> <div class="form-group"> <span class="material-symbols-rounded">lock</span> <input type="password" class="form-input" name="password" id="password" placeholder="Password"> </div> <span class="error" id="password-error"></span> <input type="submit" name="btnlogin" id="btnlogin" value="Login" class="form-submit"> <button id="forgot-button" class="form-submit">Forgot</button> <button id="signup-button" class="form-submit">Register</button> <a class="form-button" href="/AccountController/index">Back</a> </form> <!--form quên mật khẩu khi bấm vào forgot thì cho nhập email và kiêm tra--> <form action="AccountController" id="form-forgot" method="post" style="display: none;"> <h1 class="form-heading">FORGOT PASSWORD</h1> <div class="form-group"> <span class="material-symbols-rounded">mail</span> <input type="text" class="form-input" name="emailse" id="emailse" placeholder="Email"> </div> <span class="error" id="email-error-forgot"></span> <input type="submit" name="btnforgot" value="Kiểm tra" class="form-submit"> <button id="back-to-forgot" class="form-submit">Back</button> </form> <!--form tạo tài khoản mới--> <form action="AccountController" method="post" id="form-signup" style="display: none;">\ <h1 class="form-heading">SIGN UP</h1> <div class="form-group"> <span class="material-symbols-rounded">account_circle</span> <input type="text" class="form-input" name="fullname" id="name" placeholder="Username"> </div> <span class="error" id="name-error"></span> <div class="form-group"> <span class="material-symbols-rounded">home</span> <input type="text" class="form-input" name="address" id="address" placeholder="Address"> </div> <span class="error" id="address-error"></span> <div class="form-group"> <span class="material-symbols-rounded">phone_in_talk</span> <input type="text" class="form-input" name="phone" id="phone" placeholder="Phone"> </div> <span class="error" id="phone-error"></span> <div class="form-group"> <span class="material-symbols-rounded">mail</span> <input type="text" class="form-input" name="emails" id="emails" placeholder="Email"> </div> <span class="error" id="emails-error"></span> <div class="form-group"> <span class="material-symbols-rounded">lock</span> <input type="password" class="form-input" name="passwords" id="passwords" placeholder="Password"> </div> <span class="error" id="passwords-error"></span> <input type="submit" name="btnsignup" id="btnsignup" value="Sign Up" class="form-submit"> <button id="back-to-login" class="form-submit">Back</button> </form> </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> const loginForm = document.getElementById("form-login"); const signupForm = document.getElementById("form-signup"); const forgotForm = document.getElementById("form-forgot"); const backToLoginButton = document.getElementById("back-to-login"); const backToForgotButton = document.getElementById("back-to-forgot"); //hiển thị trang signup document.getElementById("signup-button").addEventListener("click", function () { loginForm.style.display = "none"; forgotForm.style.display = "none"; //pinForm.style.display = "none"; signupForm.style.display = "block"; }); //hiển thị trang forgot document.getElementById("forgot-button").addEventListener("click", function () { loginForm.style.display = "none"; signupForm.style.display = "none"; forgotForm.style.display = "block"; }); //nút quay về của form signup document.getElementById("back-to-login").addEventListener("click", function (event) { event.preventDefault(); //ngăn chặn việc gửi form signupForm.style.display = "none"; forgotForm.style.display = "none"; loginForm.style.display = "block"; }); //nút quay về của form forgot document.getElementById("back-to-forgot").addEventListener("click", function (event) { event.preventDefault(); signupForm.style.display = "none"; forgotForm.style.display = "none"; loginForm.style.display = "block"; }); //kiểm tra đăng nhập email và mật khẩu document.getElementById("form-login").addEventListener("submit", function (event) { // var emailValue = document.getElementById("email").value; // var passwordValue = document.getElementById("password").value; // kiểm tra xem người dùng có bấm nút submit chưa nếu rồi thì check có nhập dữ liệu không // if (event.submitter.id === "btnlogin") { // if (emailValue.trim() === "") { // document.getElementById("email-error").innerText = "Please enter email"; // event.preventDefault(); // Prevent form submission; // } else { // var emailPattern = /@gmail\.com$/; // if (!emailPattern.test(emailValue)) { // document.getElementById("email-error").innerText = "ex: abc@gmail.com"; // event.preventDefault(); // } else { // document.getElementById("email-error").innerText = ""; // } // } // if (passwordValue.trim() === "") { // document.getElementById("password-error").innerText = "Please enter password"; // event.preventDefault(); // } else { // document.getElementById("password-error").innerText = ""; // } // //còn ngược lại nếu bấm nút forgot thì hiện trang // } else if (event.submitter.id === "forgot-button") { // Handle the "Forgot" button click, e.g., switch to the "Forgot Password" form. loginForm.style.display = "none"; signupForm.style.display = "none"; forgotForm.style.display = "block"; event.preventDefault(); // Prevent form submission //ngược lại nếu bấm nút signup thì hiện form signup } else { loginForm.style.display = "none"; signupForm.style.display = "block"; forgotForm.style.display = "none"; event.preventDefault(); // Prevent form submission } }); // kiểm tra thông tin đăng ký có đầy đủ không document.getElementById("form-signup").addEventListener("submit", function (event) { var namevalue = document.getElementById("name").value; var addressValue = document.getElementById("address").value; var phoneValue = document.getElementById("phone").value; var emailsValue = document.getElementById("emails").value; var passwordValue = document.getElementById("passwords").value; if (namevalue.trim() === "" || namevalue.trim().length <= 2) { document.getElementById("name-error").innerText = "The name cannot be empty or contain more than 2 characters"; event.preventDefault(); } else { document.getElementById("name-error").innerText = ""; } if (addressValue.trim() === "") { document.getElementById("address-error").innerText = "Please enter Address"; event.preventDefault(); } else { document.getElementById("address-error").innerText = ""; } if (phoneValue.trim() === "") { document.getElementById("phone-error").innerText = "Please enter Phone"; event.preventDefault(); } else { var phoneNumberPattern = /^0[0-9]{9}$/; if (!phoneNumberPattern.test(phoneValue)) { document.getElementById("phone-error").innerText = "phone numbers start with 0 and have a length of 10"; event.preventDefault(); } else { document.getElementById("phone-error").innerText = ""; } } if (emailsValue.trim() === "") { document.getElementById("emails-error").innerText = "Please enter Email"; event.preventDefault(); } else { var emailPatterns = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailPatterns.test(emailsValue)) { document.getElementById("emails-error").innerText = "ex: abc@gmail.com"; event.preventDefault(); } else { document.getElementById("emails-error").innerText = ""; } } if (passwordValue.trim() === "") { document.getElementById("passwords-error").innerText = "Please enter Password"; event.preventDefault(); } else { document.getElementById("passwords-error").innerText = ""; } }); //kiểm tra xem người dùng có nhập email không của form forgot document.getElementById("form-forgot").addEventListener("submit", function () { var emailseValue = document.getElementById("emailse").value; if (emailseValue.trim() === "") { document.getElementById("email-error-forgot").innerText = "Please enter Email"; event.preventDefault(); } else { var emailPatterns = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailPatterns.test(emailseValue)) { document.getElementById("email-error-forgot").innerText = "ex: abc@gmail.com"; event.preventDefault(); } else { document.getElementById("email-error-forgot").innerText = "Email does not exist"; } } }); // khung hiển thị thong báo function performAjaxRequest() { var email = $("#email").val(); var password = $("#password").val(); $.ajax({ type: "POST", url: "AccountController", data: {btnlogin: "Login", email: email, password: password}, success: function (response) { if (response === "SUCCESS") { // Display SweetAlert for success Swal.fire({ title: 'Login Successful', text: 'You are logged in!', icon: 'success', confirmButtonText: 'OK' }).then(() => { // Redirect to another page after clicking OK window.location.href = '/AccountController/index'; // 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' }).then(() => { // Redirect to another page after clicking OK window.location.href = '/AccountController/index'; // Change this to the desired URL }); } }, error: function () { // Display SweetAlert for error Swal.fire({ title: 'Login Failed', text: 'Please check your email and password.', icon: 'error', confirmButtonText: 'OK' }); } }); } // Call the function when the loginButton is clicked $(document).ready(function () { $("#btnlogin").click(function (event) { event.preventDefault(); // Prevent default button click behavior performAjaxRequest(); }); }); </script> </body> </html>
Editor is loading...
Leave a Comment