hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-11-12 21:30:10 +00:00
Code Issues Projects Releases Wiki Activity

implement account creation

Browse Source
This commit is contained in:
Harvey Tindall 2021-01-04 20:51:16 +00:00
parent 563888c5e7
commit 0a426519f8
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
5 changed files with 194 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/admin.html
View File

@ -178,7 +178,7 @@
</form>
</div>
<div id="notification-box"></div>
<div class="page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
<div class="page-container">
<div class="mb-1">
<header class="flex flex-wrap items-center justify-between">
<div class="text-neutral-700">

1
html/form-base.html
View File

@ -5,6 +5,5 @@
window.invalidPassword = "{{ .lang.reEnterPasswordInvalid }}";
window.URLBase = "{{ .urlBase }}";
</script>
<script src="js/modal.js"></script>
<script src="js/form.js" type="module"></script>
{{ end }}

25
html/form.html
View File

@ -13,6 +13,7 @@
<span class="button ~urge !normal full-width center supra submit" id="create-success-button">{{ .lang.successContinueButton }}</span>
</div>
</div>
<div id="notification-box"></div>
<div class="page-container">
<div class="card ~neutral !low">
<div class="row baseline">
@ -21,17 +22,24 @@
</div>
<div class="row">
<div class="col">
<form class="card ~neutral !normal" href="">
<label class="label supra" for="create-username">{{ .lang.username }}</label>
<input type="text" class="input ~neutral !high mt-half mb-1" placeholder="{{ .lang.username }}" id="create-username" aria-label="{{ .lang.username }}">
<form class="card ~neutral !normal" id="form-create" href="">
<label class="label supra">
{{ .lang.username }}
<input type="text" class="input ~neutral !high mt-half mb-1" placeholder="{{ .lang.username }}" id="create-username" aria-label="{{ .lang.username }}">
</label>
<label class="label supra" for="create-email">{{ .lang.emailAddress }}</label>
<input type="email" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.emailAddress }}" id="create-email" aria-label="{{ .lang.emailAddress }}">
<input type="email" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.emailAddress }}" id="create-email" aria-label="{{ .lang.emailAddress }}" value="{{ .email }}">
<label class="label supra" for="create-password">{{ .lang.password }}</label>
<input type="password" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.password }}" id="create-password" aria-label="{{ .lang.password }}">
<input type="submit" class="button ~urge !normal full-width center supra submit" value="{{ .lang.createAccountButton }}">
<label class="label supra" for="create-reenter-password">{{ .lang.reEnterPassword }}</label>
<input type="password" class="input ~neutral 1high mt-half mb-1" placeholder="{{ .lang.password }}" id="create-reenter-password" aria-label="{{ .lang.reEnterPassword }}">
<label>
<input type="submit" class="unfocused">
<span class="button ~urge !normal full-width center supra submit">{{ .lang.createAccountButton }}</span>
</label>
</form>
</div>
<div class="col">
@ -39,11 +47,8 @@
<span class="label supra" for="inv-uses">{{ .lang.passwordRequirementsHeader }}</span>
<ul>
{{ range $key, $value := .requirements }}
<li class="content" id="{{ $key }}" min="${{ $value }}">
<span class="badge lg ~positive"><i class="icon ri-check-line"></i></span>
</li>
<li class="content" id="{{ $key }}" min="${{ $value }}">
<span class="badge lg ~critical"><i class="icon ri-close-line"></i></span>
<li class="" id="requirement-{{ $key }}" min="{{ $value }}">
<span class="badge lg ~positive requirement-valid"></span> <span class="content requirement-content"></span>
</li>
{{ end }}
</ul>

178
ts/form.ts Normal file
View File

@ -0,0 +1,178 @@
import { Modal } from "./modules/modal.js";
import { _post, toggleLoader } from "./modules/common.js";
interface formWindow extends Window {
validationStrings: pwValStrings;
invalidPassword: string;
modal: Modal;
}
interface pwValString {
singular: string;
plural: string;
}
interface pwValStrings {
length: pwValString;
uppercase: pwValString;
lowercase: pwValString;
number: pwValString;
special: pwValString;
[ type: string ]: pwValString;
}
window.modal = new Modal(document.getElementById("modal-success"));
declare var window: formWindow;
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 form = document.getElementById("form-create") as HTMLFormElement;
const submitButton = form.querySelector("input[type=submit]") as HTMLInputElement;
const submitSpan = form.querySelector("span.submit") as HTMLSpanElement;
let usernameField = document.getElementById("create-username") as HTMLInputElement;
const emailField = document.getElementById("create-email") as HTMLInputElement;
if (!window.usernameEnabled) { usernameField.parentElement.remove(); usernameField = emailField; }
const passwordField = document.getElementById("create-password") as HTMLInputElement;
const rePasswordField = document.getElementById("create-reenter-password") as HTMLInputElement;
const checkPasswords = () => {
if (passwordField.value != rePasswordField.value) {
rePasswordField.setCustomValidity(window.invalidPassword);
submitButton.disabled = true;
submitSpan.setAttribute("disabled", "");
} else {
rePasswordField.setCustomValidity("");
submitButton.disabled = false;
submitSpan.removeAttribute("disabled");
}
};
rePasswordField.addEventListener("keyup", checkPasswords);
passwordField.addEventListener("keyup", checkPasswords);
interface respDTO {
[ type: string ]: boolean;
}
interface sendDTO {
code: string;
email: string;
username: string;
password: string;
}
const create = (event: SubmitEvent) => {
event.preventDefault();
toggleLoader(submitSpan);
let send: sendDTO = {
code: window.location.href.split('/').pop(),
username: usernameField.value,
email: emailField.value,
password: passwordField.value
};
_post("/newUser", send, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
let vals = JSON.parse(req.response) as respDTO;
let valid = true;
for (let type in vals) {
if (requirements[type]) { requirements[type].valid = vals[type]; }
if (!vals[type]) { valid = false; }
}
toggleLoader(submitSpan);
if (req.status == 200 && valid) {
window.modal.show();
} else {
submitSpan.classList.add("~critical");
submitSpan.classList.remove("~urge");
setTimeout(() => {
submitSpan.classList.add("~urge");
submitSpan.classList.remove("~critical");
}, 1000);
}
}
});
};
form.onsubmit = create;
class Requirement {
private _name: string;
private _minCount: number;
private _content: HTMLSpanElement;
private _valid: HTMLSpanElement;
private _li: HTMLLIElement;
get valid(): boolean { return this._valid.classList.contains("~positive"); }
set valid(state: boolean) {
if (state) {
this._valid.classList.add("~positive");
this._valid.classList.remove("~critical");
this._valid.innerHTML = `<i class="icon ri-check-line" title="valid"></i>`;
} else {
this._valid.classList.add("~critical");
this._valid.classList.remove("~positive");
this._valid.innerHTML = `<i class="icon ri-close-line" title="invalid"></i>`;
}
}
constructor(name: string, el: HTMLLIElement) {
this._name = name;
this._li = el;
this._content = this._li.querySelector("span.requirement-content") as HTMLSpanElement;
this._valid = this._li.querySelector("span.requirement-valid") as HTMLSpanElement;
this.valid = false;
this._minCount = +this._li.getAttribute("min");
let text = "";
if (this._minCount == 1) {
text = window.validationStrings[this._name].singular.replace("{n}", "1");
} else {
text = window.validationStrings[this._name].plural.replace("{n}", ""+this._minCount);
}
this._content.textContent = text;
}
}
const testStrings = (f: pwValString): boolean => {
const testString = (s: string): boolean => {
if (s == "" || !s.includes("{n}")) { return false; }
return true;
}
return testString(f.singular) && testString(f.plural);
}
var requirements: { [category: string]: Requirement} = {};
if (!window.validationStrings) {
window.validationStrings = defaultPwValStrings;
} else {
for (let category in window.validationStrings) {
if (!testStrings(window.validationStrings[category])) {
window.validationStrings[category] = defaultPwValStrings[category];
}
const el = document.getElementById("requirement-" + category);
if (el) {
requirements[category] = new Requirement(category, el as HTMLLIElement);
} else { console.log(category); }
}
}

1
ts/typings/d.ts
View File

@ -59,7 +59,6 @@ declare interface Modals {
settingsRestart: Modal;
settingsRefresh: Modal;
ombiDefaults?: Modal;
newAccountSuccess?: Modal;
profiles: Modal;
addProfile: Modal;
}