You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jfa-go/ts/form.ts

154 lines
5.6 KiB

import { serializeForm, _post, _get, _delete, addAttr, rmAttr } from "./modules/common.js";
import { BS5 } from "./modules/bs5.js";
import { BS4 } from "./modules/bs4.js";
interface formWindow extends Window {
usernameEnabled: boolean;
validationStrings: pwValStrings;
checkPassword(): void;
invalidPassword: string;
}
declare var window: formWindow;
interface pwValString {
singular: string;
plural: string;
}
interface pwValStrings {
length, uppercase, lowercase, number, special: pwValString;
}
var defaultPwValStrings: pwValStrings = {
length: {
singular: "Must have at least {n} character",
plural: "Must have a least {n} characters"
},
uppercase: {
singular: "Must have at least {n} uppercase character",
plural: "Must have at least {n} uppercase characters"
},
lowercase: {
singular: "Must have at least {n} lowercase character",
plural: "Must have at least {n} lowercase characters"
},
number: {
singular: "Must have at least {n} number",
plural: "Must have at least {n} numbers"
},
special: {
singular: "Must have at least {n} special character",
plural: "Must have at least {n} special characters"
}
}
const toggleSpinner = (ogText?: string): string => {
const submitButton = document.getElementById('submitButton') as HTMLButtonElement;
if (document.getElementById('createAccountSpinner')) {
submitButton.innerHTML = ogText ? ogText : `<span>Create Account</span>`;
submitButton.disabled = false;
return "";
} else {
let ogText = submitButton.innerHTML;
submitButton.innerHTML = `
<span id="createAccountSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Creating...
`;
return ogText;
}
};
for (let key in window.validationStrings) {
if (window.validationStrings[key].singular == "" || !(window.validationStrings[key].plural.includes("{n}"))) {
window.validationStrings[key].singular = defaultPwValStrings[key].singular;
}
if (window.validationStrings[key].plural == "" || !(window.validationStrings[key].plural.includes("{n}"))) {
window.validationStrings[key].plural = defaultPwValStrings[key].plural;
}
let el = document.getElementById(key) as HTMLUListElement;
if (el) {
const min: number = +el.getAttribute("min");
let text = "";
if (min == 1) {
text = window.validationStrings[key].singular.replace("{n}", "1");
} else {
text = window.validationStrings[key].plural.replace("{n}", min.toString());
}
(document.getElementById(key).children[0] as HTMLDivElement).textContent = text;
}
}
window.BS = window.bs5 ? new BS5 : new BS4;
var successBox: BSModal = window.BS.newModal('successBox');;
var code = window.location.href.split('/').pop();
(document.getElementById('accountForm') as HTMLFormElement).addEventListener('submit', (event: any): boolean => {
event.preventDefault();
const el = document.getElementById('errorMessage');
if (el) {
el.remove();
}
const ogText = toggleSpinner();
let send: Object = serializeForm('accountForm');
send["code"] = code;
if (!window.usernameEnabled) {
send["email"] = send["username"];
}
_post("/newUser", send, function (): void {
if (this.readyState == 4) {
toggleSpinner(ogText);
let data: Object = this.response;
const errorGiven = ("error" in data)
if (errorGiven || data["success"] === false) {
let errorMessage = "Unknown Error";
if (errorGiven && errorGiven != true) {
errorMessage = data["error"];
}
document.getElementById('errorBox').innerHTML += `
<button id="errorMessage" class="btn btn-outline-danger" disabled>${errorMessage}</button>
`;
} else {
let valid = true;
for (let key in data) {
if (data.hasOwnProperty(key)) {
const criterion = document.getElementById(key);
if (criterion) {
if (data[key] === false) {
valid = false;
addAttr(criterion, "list-group-item-danger");
rmAttr(criterion, "list-group-item-success");
} else {
addAttr(criterion, "list-group-item-success");
rmAttr(criterion, "list-group-item-danger");
}
}
}
}
if (valid) {
successBox.show();
}
}
}
}, true);
return false;
});
window.checkPassword = (): void => {
const entry = document.getElementById('inputPassword') as HTMLInputElement;
if (entry.value != "") {
const reentry = document.getElementById('reInputPassword') as HTMLInputElement;
const identical = (entry.value == reentry.value);
const submitButton = document.getElementById('submitButton') as HTMLButtonElement;
if (identical) {
reentry.setCustomValidity('');
rmAttr(submitButton, "btn-outline-danger");
addAttr(submitButton, "btn-outline-primary");
} else {
reentry.setCustomValidity(window.invalidPassword);
addAttr(submitButton, "btn-outline-danger");
rmAttr(submitButton, "btn-outline-primary");
}
}
}