update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,61 @@
|
||||
#account-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#personal-page-form {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* @media (min-width: 1200px) {
|
||||
.form-container {
|
||||
padding: 0px 400px !important;
|
||||
|
||||
}
|
||||
} */
|
||||
|
||||
.form-container {
|
||||
padding: 0px 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.name_container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.first_name_container {
|
||||
padding: 0px 20px 0px 0px;
|
||||
}
|
||||
|
||||
.update {
|
||||
border-radius: 20px;
|
||||
color: black;
|
||||
background-color: #f29559;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
border-radius: 20px;
|
||||
color: black;
|
||||
background-color: #9bafd0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 120px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#account-info {
|
||||
padding: 50px 0px;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
|
||||
<link rel="stylesheet" href="./personalPage.css" />
|
||||
<title>Personal Page</title>
|
||||
</head>
|
||||
|
||||
<body style="display: none">
|
||||
<div class="navbar-container container">
|
||||
<!-- NAVBAR: to be loaded with js -->
|
||||
</div>
|
||||
<header id="account-info">Account Info</header>
|
||||
<div class="form-container">
|
||||
<form action="/personalPage" method="PUT" id="personal-page-form">
|
||||
<div class="mb-3 name_container">
|
||||
<span class="first_name_container">
|
||||
<label for="first_name" class="form-label">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="first_name"
|
||||
id="first_name"
|
||||
placeholder="Input Your First Name"
|
||||
value=""
|
||||
required
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<label for="last_name" class="form-label">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="last_name"
|
||||
id="last_name"
|
||||
placeholder="Input Your Last Name"
|
||||
required
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email" id="email" readonly />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="phone" class="form-label">Phone</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="phone"
|
||||
id="phone"
|
||||
placeholder="Input Phone"
|
||||
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
|
||||
required
|
||||
/>
|
||||
<div class="form-text">Phone number must be in the following format: e.g. 647-111-1111</div>
|
||||
</div>
|
||||
<div class="mb-3 google-user">
|
||||
<label for="current_password" class="form-label">Current Password</label>
|
||||
<input type="password" class="form-control" name="current_password" id="current_password" />
|
||||
<div class="form-text">Enter your current password if you wish to update a new password</div>
|
||||
</div>
|
||||
<div class="mb-3 google-user">
|
||||
<label for="new_password" class="form-label">New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
name="new_password"
|
||||
id="new_password"
|
||||
placeholder="Input your new password here"
|
||||
minlength="8"
|
||||
/>
|
||||
<div class="form-text">Password must be 8 characters long</div>
|
||||
</div>
|
||||
<div class="mb-3 google-user">
|
||||
<label for="new_confirmed_password" class="form-label">Confirm Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
name="new_confirmed_password"
|
||||
id="new_confirmed_password"
|
||||
placeholder="Type the new password again"
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
<div class="button-container mb-3">
|
||||
<button type="submit" value="submit" class="btn btn-primary update">Update</button>
|
||||
<button type="reset" value="cancel" class="btn btn-primary cancel">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script type="module" src="./personalPage.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
import { addNavbar } from '/functions/addNavbar.js';
|
||||
import { loadName } from '/functions/loadName.js';
|
||||
|
||||
window.addEventListener('load', async () => {
|
||||
await loadInfo();
|
||||
await hideInfo();
|
||||
addNavbar();
|
||||
loadName();
|
||||
|
||||
document.body.style.display = 'block';
|
||||
});
|
||||
|
||||
async function isGoogleUser(password) {
|
||||
if (password.substring(0, 11) === 'google_user') {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function hideInfo() {
|
||||
const res = await fetch(`/personalPage`);
|
||||
const result = await res.json();
|
||||
const divCluster = document.querySelectorAll('.google-user');
|
||||
|
||||
if (await isGoogleUser(result.password)) {
|
||||
divCluster.forEach((div) => {
|
||||
div.style.display = 'none';
|
||||
});
|
||||
} else {
|
||||
divCluster.forEach((div) => {
|
||||
div.style.display = 'block';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInfo() {
|
||||
const res = await fetch(`/personalPage`);
|
||||
const result = await res.json();
|
||||
|
||||
const firstName = document.querySelector('#first_name');
|
||||
const lastName = document.querySelector('#last_name');
|
||||
const email = document.querySelector('#email');
|
||||
const phone = document.querySelector('#phone');
|
||||
const currentPassword = document.querySelector('#current_password');
|
||||
const newPassword = document.querySelector('#new_password');
|
||||
const newConfirmedPassword = document.querySelector('#new_confirmed_password');
|
||||
|
||||
firstName.value = result.first_name;
|
||||
lastName.value = result.last_name;
|
||||
email.value = result.email;
|
||||
phone.value = result.phone;
|
||||
currentPassword.value = '';
|
||||
newPassword.value = '';
|
||||
newConfirmedPassword.value = '';
|
||||
}
|
||||
|
||||
document.querySelector('#personal-page-form').addEventListener('submit', async function updateInfo(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.target;
|
||||
|
||||
const lastName = form.last_name.value;
|
||||
const firstName = form.first_name.value;
|
||||
const phone = form.phone.value;
|
||||
const email = form.email.value;
|
||||
const currentPassword = form.current_password.value;
|
||||
const newPassword = form.new_password.value;
|
||||
const newConfirmedPassword = form.new_confirmed_password.value;
|
||||
|
||||
let dataPass = true;
|
||||
|
||||
if (newPassword || newConfirmedPassword) {
|
||||
if (!(newPassword === newConfirmedPassword)) {
|
||||
dataPass = false;
|
||||
alert('Password and confirm password do not match!');
|
||||
} else if (newPassword === currentPassword) {
|
||||
dataPass = false;
|
||||
alert('Your current password and the new password are the same!');
|
||||
} else if (!currentPassword) {
|
||||
dataPass = false;
|
||||
alert('Please input your current password if you wish to update your password');
|
||||
}
|
||||
}
|
||||
|
||||
if (dataPass) {
|
||||
const formObject = {};
|
||||
formObject['first_name'] = firstName;
|
||||
formObject['last_name'] = lastName;
|
||||
formObject['email'] = email;
|
||||
formObject['phone'] = phone;
|
||||
formObject['current_password'] = currentPassword;
|
||||
formObject['new_password'] = newPassword;
|
||||
if (newPassword) {
|
||||
formObject['password'] = newPassword;
|
||||
} else {
|
||||
formObject['password'] = currentPassword;
|
||||
}
|
||||
|
||||
const res = await fetch(`/personalPage`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formObject)
|
||||
});
|
||||
const result = await res.json();
|
||||
console.log(result);
|
||||
|
||||
if (res.status === 400) {
|
||||
alert('Something wrong, please check if you have the correct password');
|
||||
} else {
|
||||
alert('Update successful!');
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user