Login.jsp kiashop
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