login
unknown
plain_text
2 years ago
11 kB
3
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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="css/styles.css"> <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.8); 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.8); 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 { background: transparent; width: 100%; padding: 10px; /*hiển thị ảnh nền tron suốt*/ 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; } .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; } .error { color: #fff; font-size: 16px; display: block; margin-top: 5px; } </style> </head> <body> <div id="wrapper"> <form action="AccountController" id="form-login" method="post"> <h1 class="form-heading">LOGIN</h1> <div class="form-group"> <i class="far fa-user"></i> <input type="text" class="form-input" name="email" id="email" placeholder="email"> </div> <span class="error" id="email-error"></span> <div class="form-group"> <i class="fas fa-key"></i> <input type="password" class="form-input" name="password" id="password" placeholder="password "> <div id="eye"> <i class="far fa-eye"></i> </div> </div> <span class="error" id="password-error"></span> <input type="submit" name="btnlogin" value="Login" class="form-submit"> <button id="signup-button" class="form-submit">Register</button> </form> <form action="AccountController" method="post" id="form-signup" style="display: none;"> <h1 class="form-heading">Sign Up</h1> <div class="form-group"> <input type="text" class="form-input" name="fullname" id="name" placeholder="Username"> </div> <span class="error" id="name-error"></span> <div class="form-group"> <input type="text" class="form-input" name="address" id="address" placeholder="Address"> </div> <span class="error" id="address-error"></span> <div class="form-group"> <input type="text" class="form-input" name="phone" id="phone" placeholder="Phone"> </div> <span class="error" id="phone-error"></span> <div class="form-group"> <input type="text" class="form-input" name="emails" id="emails" placeholder="Email"> </div> <span class="error" id="emails-error"></span> <div class="form-group"> <input type="password" class="form-input" name="passwords" id="passwords" placeholder="Password "> <div id="eye"> <i class="far fa-eye"></i> </div> </div> <span class="error" id="passwords-error"></span> <input type="submit" name="btnsignup" value="Sign Up" class="form-submit"> </form> </div> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> const loginForm = document.getElementById("form-login"); const signupForm = document.getElementById("form-signup"); // Xử lý sự kiện khi nút "Sign Up" được nhấn document.getElementById("signup-button").addEventListener("click", function () { // Ẩn form đăng nhập loginForm.style.display = "none"; // Hiển thị form đăng ký signupForm.style.display = "block"; }); //kiểm tra thông tin đăng nhập có đầy đủ không document.getElementById("form-login").addEventListener("submit", function (event) { var emailValue = document.getElementById("email").value; var passwordValue = document.getElementById("password").value; if (emailValue.trim() === "") { document.getElementById("email-error").innerText = "Please enter email"; event.preventDefault(); // ngăn chặn việc submit form; } 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 = ""; } }); // 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]{8}$/; if (!phoneNumberPattern.test(phoneValue)) { document.getElementById("phone-error").innerText = "phone numbers start with 0 and have a length of 9"; event.preventDefault(); } else { document.getElementById("phone-error").innerText = ""; } } if (emailsValue.trim() === "") { document.getElementById("emails-error").innerText = "Please enter Email"; event.preventDefault(); } else { var emailPatterns = /@gmail\.com$/; 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 = ""; } }); </script> </body> </html>
Editor is loading...