40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { dialog } from "./dialog.js";
|
|
import { requestAPI, setAppearance } from "./utils.js";
|
|
|
|
window.addEventListener("DOMContentLoaded", init);
|
|
|
|
async function init () {
|
|
setAppearance();
|
|
|
|
document.querySelector("#change-password").addEventListener("click", handlePasswordChangeForm);
|
|
}
|
|
|
|
function handlePasswordChangeForm () {
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="new-password">New Password</label>
|
|
<input class="w3-input w3-border" id="new-password" name="new-password" type="password"required>
|
|
<label for="confirm-password">Confirm Password</label>
|
|
<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" required>
|
|
</form>
|
|
`;
|
|
const d = dialog("Change Password", body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to change password but got: ${result.error}`);
|
|
}
|
|
}
|
|
});
|
|
|
|
const password = d.querySelector("#new-password");
|
|
const confirmPassword = d.querySelector("#confirm-password");
|
|
|
|
function validatePassword () {
|
|
confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
|
|
}
|
|
|
|
password.addEventListener("change", validatePassword);
|
|
confirmPassword.addEventListener("keyup", validatePassword);
|
|
}
|