password resetting (frontend)
parent
74febc4891
commit
0abedfc12a
|
@ -168,6 +168,12 @@ const hideElements = (elements: string[]) =>
|
|||
(document.querySelector(elementName)! as HTMLElement).style.display = "none";
|
||||
});
|
||||
|
||||
const toggleElements = (elements: string[]) =>
|
||||
elements.forEach((elementName) => {
|
||||
const element = document.querySelector(elementName)! as HTMLElement;
|
||||
element.style.display = element.style.display === "block" ? "none" : "block";
|
||||
});
|
||||
|
||||
const openError = (content: string) => {
|
||||
const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
|
||||
const txt = <HTMLParagraphElement>errorBox.querySelector(".error-box-text")!;
|
||||
|
@ -199,12 +205,24 @@ const request = (resource: string, data: any) =>
|
|||
case -2:
|
||||
// mail unverified
|
||||
showElements([".mail-box"]);
|
||||
hideElements([".login-box", ".register-box", ".sms-box", ".package-list", ".logout-button"]);
|
||||
hideElements([
|
||||
".login-box",
|
||||
".register-box",
|
||||
".sms-box",
|
||||
".package-list",
|
||||
".logout-button",
|
||||
]);
|
||||
break;
|
||||
case -3:
|
||||
// phone unverified
|
||||
showElements([".sms-box"]);
|
||||
hideElements([".login-box", ".register-box", ".mail-box", ".package-list", ".logout-button"]);
|
||||
hideElements([
|
||||
".login-box",
|
||||
".register-box",
|
||||
".mail-box",
|
||||
".package-list",
|
||||
".logout-button",
|
||||
]);
|
||||
break;
|
||||
default:
|
||||
openError(res.description || res.msg || `Session error: ${res.status}`);
|
||||
|
@ -383,13 +401,12 @@ ${d.pickupPointPostCode} ${d.pickupPointCity}`,
|
|||
};
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
const login = document.querySelector(".login-form")!;
|
||||
const login = document.querySelector(".login-form")! as HTMLFormElement;
|
||||
login.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
request("login", {
|
||||
login: form.login.value,
|
||||
password: form.password.value,
|
||||
login: (login.querySelector('input[name="login"]')! as HTMLInputElement).value,
|
||||
password: (login.querySelector('input[name="password"]')! as HTMLInputElement).value,
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
refreshPackages().then(() => {
|
||||
|
@ -409,6 +426,45 @@ window.addEventListener("load", () => {
|
|||
});
|
||||
});
|
||||
|
||||
const pwdResetOpen = document.querySelector(".password-reset-open-box button")!;
|
||||
pwdResetOpen.addEventListener("click", () => {
|
||||
toggleElements([".password-reset-box"]);
|
||||
});
|
||||
|
||||
const pwdReset = document.querySelector(".password-reset-form")! as HTMLFormElement;
|
||||
pwdReset.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
request("reset_request", {
|
||||
login: (pwdReset.querySelector('input[name="login"]')! as HTMLInputElement).value,
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
hideElements([".login-box", ".register-box", ".description", ".password-reset-box"]);
|
||||
showElements([".password-reset-verify-box"]);
|
||||
} else {
|
||||
openError(res.msg || "Error during password reset. Try again in a while?");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const pwdResetVerify = document.querySelector(".password-reset-verify-form")! as HTMLFormElement;
|
||||
pwdResetVerify.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
request("reset_confirm", {
|
||||
login: (pwdReset.querySelector('input[name="login"]')! as HTMLInputElement).value,
|
||||
hash: (pwdResetVerify.querySelector('input[name="hash"]')! as HTMLInputElement).value,
|
||||
password: (pwdResetVerify.querySelector('input[name="password"]')! as HTMLInputElement).value,
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
// yes, error, I'm too lazy to implement a separate information modal 🤷♀️
|
||||
openError("Your password has been reset successfully.");
|
||||
hideElements([".password-reset-verify-box"]);
|
||||
showElements([".login-box", ".register-box", ".description"]);
|
||||
} else {
|
||||
openError(res.msg || "Error during password reset. Try again in a while?");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const register = document.querySelector(".register-form")!;
|
||||
register.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
|
@ -419,7 +475,8 @@ window.addEventListener("load", () => {
|
|||
login: (form.querySelector('input[name="login"]')! as HTMLInputElement).value,
|
||||
password: (form.querySelector('input[name="password"]')! as HTMLInputElement).value,
|
||||
mail: (form.querySelector('input[name="email"]')! as HTMLInputElement).value,
|
||||
hcaptcha: (form.querySelector('textarea[name="h-captcha-response"]')! as HTMLInputElement).value,
|
||||
hcaptcha: (form.querySelector('textarea[name="h-captcha-response"]')! as HTMLTextAreaElement)
|
||||
.value,
|
||||
});
|
||||
if (res.status == 200) {
|
||||
hideElements([".register-box", ".login-box"]);
|
||||
|
|
|
@ -19,6 +19,8 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
|||
@import "../node_modules/bulma/sass/components/navbar.sass";
|
||||
|
||||
.login-box,
|
||||
.password-reset-box,
|
||||
.password-reset-verify-box,
|
||||
.register-box,
|
||||
.mail-box,
|
||||
.sms-box,
|
||||
|
@ -51,12 +53,14 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 25px;
|
||||
.description,
|
||||
.password-reset-open-box {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.paragraph {
|
||||
margin-top: 10px;
|
||||
.paragraph,
|
||||
.password-reset-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.navbar-item > img {
|
||||
max-height: 2rem;
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
|
|
@ -52,6 +52,43 @@
|
|||
<input type="submit" class="button" value="Login">
|
||||
</div>
|
||||
</form>
|
||||
<div class="password-reset-open-box">
|
||||
<span>Forgot your password?</span>
|
||||
<button class="button is-light is-small">Reset it here.</button>
|
||||
</div>
|
||||
<div class="password-reset-box">
|
||||
<form class="password-reset-form">
|
||||
<div class="field">
|
||||
<label for="login" class="label">Username</label>
|
||||
<div class="control">
|
||||
<input type="login" name="login" class="input" placeholder="filip.grzywok" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input type="submit" class="button" value="Reset password">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="password-reset-verify-box column">
|
||||
<form class="password-reset-verify-form">
|
||||
<div class="field">
|
||||
<label for="hash" class="label">Verification code</label>
|
||||
<div class="control">
|
||||
<input type="text" name="hash" class="input" placeholder="aoeu" required>
|
||||
</div>
|
||||
<p class="help">We've sent you that in an e-mail</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password" class="label">Password</label>
|
||||
<div class="control">
|
||||
<input type="password" name="password" class="input" placeholder="***** ***" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input type="submit" class="button" value="Set password">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="register-box column">
|
||||
<label class="label is-large">Register</label>
|
||||
|
|
Loading…
Reference in New Issue