rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed reset password section and added in eye button to toggle between shown and hidden password.

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-09-14 13:35:58 +01:00
parent d8e16e8de1
commit d963904174
14 changed files with 191 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/css/login.css
+1 -5
View File
@@ -18,7 +18,7 @@ main {
}
div.container {
display: flex;
/*display: flex;*/
flex-direction: column;
justify-content: center;
align-items: center;
@@ -129,7 +129,3 @@ div.btnContainer {
div.btnContainer a:not(.btn) {
color: #000000;
}
div.btnContainer a.btn {
align-self: flex-end;
}
src/editor/index.html
+6 -3
View File
@@ -5,7 +5,7 @@
<title>Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
@@ -21,6 +21,7 @@
<div class="formControl">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<i class="fa-solid fa-eye"></i>
</div>
@@ -67,7 +68,7 @@
<input type="text" id="code" name="code">
</div>
<div class="error hidden" id="codeError">
<div class="error hidden" id="resetCodeError">
<button class="close" type="button">&times;</button>
<div></div>
</div>
@@ -85,15 +86,17 @@
<div class="formControl">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass">
<i class="fa-solid fa-eye"></i>
</div>
<div class="formControl">
<label for="rePass">Password</label>
<input type="password" name="rePass" id="rePass">
<i class="fa-solid fa-eye"></i>
</div>
<div class="error hidden" id="changeError">
<button class="close">&times;</button>
<button class="close" type="button">&times;</button>
<div></div>
</div>
src/editor/js/index.js
+56 -1
View File
@@ -61,6 +61,30 @@ document.querySelector("#login form").addEventListener("submit", e =>
document.querySelector("#loginError .close").addEventListener("click", () =>
document.querySelector("#loginError").classList.toggle("hidden"));
document.querySelector("#resetError .close").addEventListener("click", () =>
document.querySelector("#resetError").classList.toggle("hidden"));
document.querySelector("#changeError .close").addEventListener("click", () =>
document.querySelector("#changeError").classList.toggle("hidden"));
document.querySelectorAll("form i.fa-eye").forEach(i =>
{
i.addEventListener("click", e =>
{
if (e.target.previousElementSibling.type === "password")
{
e.target.previousElementSibling.type = "text";
e.target.classList.remove("fa-eye");
e.target.classList.add("fa-eye-slash");
return;
}
e.target.previousElementSibling.type = "password";
e.target.classList.remove("fa-eye-slash");
e.target.classList.add("fa-eye");
});
});
// showing and hiding different forms
document.querySelector("#resetPwd").addEventListener("click", () =>
@@ -105,7 +129,7 @@ document.querySelector("#checkResetCode form").addEventListener("submit", e =>
return;
}
resetCode.append("code", e.target.code.value);
fetch(`/api/user/checkResetCode//${e.target.code.value}`).then(res =>
fetch(`/api/user/checkResetCode/${e.target.code.value}`).then(res =>
{
if (res.ok)
{
@@ -114,5 +138,36 @@ document.querySelector("#checkResetCode form").addEventListener("submit", e =>
}
showErrorMessage("Invalid code.", "resetCode");
});
});
document.querySelector("#changePassword form").addEventListener("submit", e =>
{
e.preventDefault();
let resetPassword = new FormData();
if (e.target.pass.value === "" && e.target.rePass.value === "")
{
showErrorMessage("Please type in a new password.", "change");
return;
}
if (e.target.pass.value !== e.target.rePass.value)
{
showErrorMessage("Passwords do not match.", "change");
return;
}
resetPassword.append("password", e.target.pass.value);
fetch(`/api/user/changePassword`,
{
method: "POST",
body: resetPassword
}).then(res =>
{
if (res.ok)
{
// show login form
switchView("#changePassword", "#login");
}
showErrorMessage("Something went wrong.", "change");
});
});