login/signup
The login and signup for our group's project
<!-- <head></head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.page-content {
background-image: url('/BinaryWizards/images/logo.png');
background-repeat: no-repeat;
background-color: #B5C689;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.card {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 350px;
margin-right: 10px; /* Adjusted margin between cards */
}
.card2 {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 350px;
margin-left: 0px; /* Adjusted margin between cards */
}
h3 {
margin-bottom: 20px;
color: #333;
}
.input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.Buttons {
text-align: center;
}
.LoginB, .signUpButton {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 3px;
}
.LoginB:hover, .signUpButton:hover {
background-color: #0056b3;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.login-container {
flex-direction: column;
}
.card, .card2 {
width: 80%;
margin: 0 auto 20px; /* Center cards vertically and add margin */
}
}
</style>
<body>
<div class="login-container">
<div class="card">
<h3></h3>
<div class="Email">
<input id="Emaillogin" class="input" placeholder="Email">
</div>
<div class="Password">
<input id="PasswordLogin" class="input" placeholder="Password">
</div>
<div class="Buttons">
<button class="LoginB" onclick="person_login()">Login</button>
</div>
</div>
</div>
<div class="login-container">
<div class="card2">
<h3>Sign-Up</h3>
<div class="Name">
<input id="signUpNameInput" class="input" placeholder="Name">
</div>
<div class="Email">
<input id="signUpEmailInput" class="input" placeholder="Email">
</div>
<div class="Password">
<input id="signUpPasswordInput" type="password" class="input" placeholder="Password">
</div>
<div class="Dob">
<input id="signUpDobInput" class="input" placeholder="Date of birth (MM-DD-YYYY)">
</div>
<div class="Buttons">
<button class="signUpButton" onclick="person_signup()">Sign Up</button>
</div>
</div>
</div>
<!-- <div>
<button class="SignupButton" onclick="go_signup()">Don't have an account? Sign up.</button>
</div> -->
<!-- <script>
function person_login() {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"email": document.getElementById("Emaillogin").value,
"password": document.getElementById("PasswordLogin").value
});
console.log(raw);
var requestOptions = {
method: 'POST',
headers: myHeaders,
credentials: 'include', //
body: raw,
redirect: 'follow'
};
fetch("http://localhost:8098/authenticate", requestOptions)
.then(response => {
if (!response.ok) {
const errorMsg = 'Login error: ' + response.status;
console.log(errorMsg);
switch (response.status) {
case 401:
alert(" 401 error you have typed in wrong user or pass");
break;
case 403:
alert("Sorry you cant do that ");
break;
case 404:
alert("We cant Seem To Locate that in our system try again?");
break;
default:
alert("Login failed. Please try again later.");
}
return Promise.reject('Login failed');
}
return response.text()
})
.then(result => {
console.log(result);
sessionStorage.setItem("username", document.getElementById("Emaillogin").value);
sessionStorage.setItem("binaryScore", 0);
window.location.replace("/BinaryWizards/games/")
})
.catch(error => console.error('Error during login:', error));
}
function person_signup() {
var requestOptions = {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'include',
};
let fetchName = document.getElementById("signUpNameInput").value;
let fetchEmail = document.getElementById("signUpEmailInput").value;
let fetchPassword = document.getElementById("signUpPasswordInput").value;
let fetchDob = document.getElementById("signUpDobInput").value;
let requestURL = `http://localhost:8098/api/person/post?email=${fetchEmail}&password=${fetchPassword}&name=${fetchName}&dob=${fetchDob}`;
console.log(requestURL)
fetch(requestURL, requestOptions)
.then(response => {
if (!response.ok) {
return response.text().then(errorMsg => {
alert('Error: ' + errorMsg);
});
}
alert("Signed up");
location.reload();
})
.catch(error => {
alert('An unexpected error occurred: ' + error.message);
});
}
function go_signup() {
window.location.replace("/BinaryWizards/signup/");
}
</script>
</body> -->