xfarrow/blink
0
0
Fork 0
mirror of https://github.com/xfarrow/blink synced 2025-02-21 08:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

forgot-password.html working

Browse Source
This commit is contained in:
Alessandro Ferro 2024-03-26 09:35:44 +01:00
parent 97783ab96a
commit 175ca90ba5
2 changed files with 79 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/vanilla/html/forgot-password.html
View File

@ -9,12 +9,13 @@
</head> </head>
<body> <body>
<div class="alert alert-success" role="alert" style="display: none;">
An e-mail has been sent to reset your password <div class="alert alert-success" role="alert" id="successAlert" style="display: none;">
</div> </div>
<div class="alert alert-danger" role="alert" style="display: none;">
This is a danger alert—check it out! <div class="alert alert-danger" role="alert" id="errorAlert" style="display: none;">
</div> </div>
<div class="container d-flex flex-column"> <div class="container d-flex flex-column">
<div class="row align-items-center justify-content-center <div class="row align-items-center justify-content-center
min-vh-100 g-0"> min-vh-100 g-0">
@ -26,24 +27,84 @@
<p class="mb-2">Enter your registered email to reset the password <p class="mb-2">Enter your registered email to reset the password
</p> </p>
</div> </div>
<form> <div class="mb-3">
<div class="mb-3"> <input type="email" id="email" class="form-control" name="email"
<input type="email" id="email" class="form-control" name="email" placeholder="Enter Your Email" onblur="emailFieldLosesFocus();">
placeholder="Enter Your Email" required=""> <div class="invalid-feedback">
Please enter an email address
</div> </div>
<div class="mb-3 d-grid"> </div>
<button type="submit" class="btn btn-primary"> <div class="mb-3 d-grid">
Continue <button type="button" class="btn btn-primary" onclick="proceed();">
</button> Continue
</div> </button>
<span>Don't have an account? <a href="login.html">sign in</a></span> </div>
</form> <span>Don't have an account? <a href="login.html">sign in</a></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="../js/constants.js"></script>
<script src="../js/utils.js"></script>
<script>
async function proceed() {
if (!validateFields()) {
return;
}
const email = document.getElementById("email").value;
const response = await fetch(`${API_URL}/resetpassword/request`, {
method: "POST",
body: JSON.stringify({
email
}),
headers: createHeaders(null)
});
if(response.ok){
showSuccessAlert('An email has been sent to reset your password');
}
else{
showErrorAlert('Something went wrong. Try again later')
}
}
/*
* This function gets called when the e-mail field loses focus. This is
* done to inform the user whether the entered e-mail is in a valid format
*/
function emailFieldLosesFocus() {
const emailField = document.getElementById("email");
if (!emailField.value || !validateEmail(emailField.value)) {
emailField.classList.add("is-invalid");
} else {
emailField.classList.remove("is-invalid");
}
}
function validateFields() {
const emailField = document.getElementById("email");
var isFormValid = true;
if (!emailField.value || !validateEmail(emailField.value)) {
emailField.classList.add("is-invalid");
isFormValid = false;
}
return isFormValid;
}
function showSuccessAlert(message) {
const successAlert = document.getElementById('successAlert');
successAlert.innerHTML = message;
successAlert.style.display = 'block';
}
function showErrorAlert(message) {
const errorAlert = document.getElementById('errorAlert');
errorAlert.innerHTML = message;
errorAlert.style.display = 'block';
}
</script>
</body> </body>
</html> </html>

6
frontend/vanilla/html/login.html
View File

@ -102,12 +102,12 @@
* This function is responsible for the log-in process * This function is responsible for the log-in process
*/ */
async function login() { async function login() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
if (!validateFields()) { if (!validateFields()) {
return; return;
} }
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const response = await fetch(`${API_URL}/persons/me/token`, { const response = await fetch(`${API_URL}/persons/me/token`, {
method: "POST", method: "POST",