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

userpage: add password change card, validation, rearrange page

Browse Source 
functionality not done yet, just comitting here because there were lots
of adjustments to layout stuff, accomodating for most combinations of
card presence/size.
This commit is contained in:
Harvey Tindall 2023-06-22 18:31:16 +01:00
parent 4496e1d509
commit 12ce669566
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
7 changed files with 191 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
html/user.html
View File

@ -23,6 +23,7 @@
window.matrixEnabled = {{ .matrixEnabled }};
window.matrixRequired = {{ .matrixRequired }};
window.matrixUserID = "{{ .matrixUser }}";
window.validationStrings = JSON.parse({{ .validationStrings }});
</script>
{{ template "header.html" . }}
<title>{{ .lang.Strings.myAccount }}</title>
@ -113,10 +114,41 @@
<span class="heading mb-2">{{ .strings.contactMethods }}</span>
<div class="content flex justify-between flex-col h-100"></div>
</div>
<div class="card @low dark:~d_neutral unfocused" id="card-status">
<span class="heading mb-2">{{ .strings.expiry }}</span>
<aside class="aside ~warning user-expiry my-4"></aside>
<div class="user-expiry-countdown"></div>
<div>
<div class="card @low dark:~d_neutral content" id="card-password">
<span class="heading row mb-2">{{ .strings.changePassword }}</span>
<div class="">
<div class="my-2">
<span class="label supra row">{{ .strings.passwordRequirementsHeader }}</span>
<ul>
{{ range $key, $value := .requirements }}
<li class="" id="requirement-{{ $key }}" min="{{ $value }}">
<span class="badge lg ~positive requirement-valid"></span> <span class="content requirement-content"></span>
</li>
{{ end }}
</ul>
</div>
<div class="my-2">
<label class="label supra" for="user-old-password">{{ .strings.oldPassword }}</label>
<input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-old-password" aria-label="{{ .strings.oldPassword }}">
<label class="label supra" for="user-new-password">{{ .strings.newPassword }}</label>
<input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-new-password" aria-label="{{ .strings.newPassword }}">
<label class="label supra" for="user-reenter-password">{{ .strings.reEnterPassword }}</label>
<input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-reenter-new-password" aria-label="{{ .strings.reEnterPassword }}">
<span class="button ~info @low full-width center mt-4" id="user-password-submit">
{{ .strings.changePassword }}
</span>
</div>
</div>
</div>
</div>
<div>
<div class="card @low dark:~d_neutral unfocused" id="card-status">
<span class="heading mb-2">{{ .strings.expiry }}</span>
<aside class="aside ~warning user-expiry my-4"></aside>
<div class="user-expiry-countdown"></div>
</div>
</div>
</div>
</div>

5
lang/form/en-us.json
View File

@ -8,6 +8,8 @@
"accountDetails": "Details",
"emailAddress": "Email",
"username": "Username",
"oldPassword": "Old Password",
"newPassword": "New Password",
"password": "Password",
"reEnterPassword": "Re-enter Password",
"reEnterPasswordInvalid": "Passwords are not the same.",
@ -31,7 +33,8 @@
"resetPasswordThroughJellyfin": "To reset your password, visit {jfLink} and press the \"Forgot Password\" button.",
"resetPasswordThroughLink": "To reset your password, enter your username, email address or a linked contact method username, and submit. A link will be sent to reset your password.",
"resetSent": "Reset Sent.",
"resetSentDescription": "If an account with the given username/contact method exists, a password reset link has been sent via all contact methods available. The code will expire in 30 minutes."
"resetSentDescription": "If an account with the given username/contact method exists, a password reset link has been sent via all contact methods available. The code will expire in 30 minutes.",
"changePassword": "Change Password"
},
"notifications": {
"errorUserExists": "User already exists.",

29
ts/form.ts
View File

@ -2,7 +2,7 @@ import { Modal } from "./modules/modal.js";
import { notificationBox, whichAnimationEvent } from "./modules/common.js";
import { _get, _post, toggleLoader, addLoader, removeLoader, toDateString } from "./modules/common.js";
import { loadLangSelector } from "./modules/lang.js";
import { initValidator } from "./modules/validator.js";
import { Validator, ValidatorConf } from "./modules/validator.js";
import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
interface formWindow extends Window {
@ -69,7 +69,7 @@ if (window.telegramEnabled) {
const radio = document.getElementById("contact-via-telegram") as HTMLInputElement;
radio.parentElement.classList.remove("unfocused");
radio.checked = true;
validatorFunc();
validator.validate();
}
};
@ -101,7 +101,7 @@ if (window.discordEnabled) {
const radio = document.getElementById("contact-via-discord") as HTMLInputElement;
radio.parentElement.classList.remove("unfocused")
radio.checked = true;
validatorFunc();
validator.validate();
}
};
@ -133,7 +133,7 @@ if (window.matrixEnabled) {
const radio = document.getElementById("contact-via-matrix") as HTMLInputElement;
radio.parentElement.classList.remove("unfocused");
radio.checked = true;
validatorFunc();
validator.validate();
}
};
@ -162,7 +162,7 @@ if (window.userExpiryEnabled) {
}
const form = document.getElementById("form-create") as HTMLFormElement;
const submitButton = form.querySelector("input[type=submit]") as HTMLInputElement;
const submitInput = form.querySelector("input[type=submit]") as HTMLInputElement;
const submitSpan = form.querySelector("span.submit") as HTMLSpanElement;
const submitText = submitSpan.textContent;
let usernameField = document.getElementById("create-username") as HTMLInputElement;
@ -242,12 +242,19 @@ interface GreCAPTCHA {
declare var grecaptcha: GreCAPTCHA
let r = initValidator(passwordField, rePasswordField, submitButton, submitSpan, baseValidator);
var requirements = r[0];
var validatorFunc = r[1] as () => void;
let validatorConf: ValidatorConf = {
passwordField: passwordField,
rePasswordField: rePasswordField,
submitInput: submitInput,
submitButton: submitSpan,
validatorFunc: baseValidator
};
let validator = new Validator(validatorConf);
var requirements = validator.requirements;
if (window.emailRequired) {
emailField.addEventListener("keyup", validatorFunc)
emailField.addEventListener("keyup", validator.validate)
}
interface respDTO {
@ -287,7 +294,7 @@ const genCaptcha = () => {
if (window.captcha && !window.reCAPTCHA) {
genCaptcha();
(document.getElementById("captcha-regen") as HTMLSpanElement).onclick = genCaptcha;
captchaInput.onkeyup = validatorFunc;
captchaInput.onkeyup = validator.validate;
}
const create = (event: SubmitEvent) => {
@ -386,6 +393,6 @@ const create = (event: SubmitEvent) => {
});
};
validatorFunc();
validator.validate();
form.onsubmit = create;

110
ts/modules/validator.ts
View File

@ -60,8 +60,21 @@ class Requirement {
validate = (count: number) => { this.valid = (count >= this._minCount); }
}
export function initValidator(passwordField: HTMLInputElement, rePasswordField: HTMLInputElement, submitButton: HTMLInputElement, submitSpan: HTMLSpanElement, validatorFunc?: (oncomplete: (valid: boolean) => void) => void): ({ [category: string]: Requirement }|(() => void))[] {
var defaultPwValStrings: pwValStrings = {
export interface ValidatorConf {
passwordField: HTMLInputElement;
rePasswordField: HTMLInputElement;
submitInput?: HTMLInputElement;
submitButton: HTMLSpanElement;
validatorFunc?: (oncomplete: (valid: boolean) => void) => void;
}
export interface Validation { [name: string]: number }
export interface Requirements { [category: string]: Requirement };
export class Validator {
private _conf: ValidatorConf;
private _requirements: Requirements = {};
private _defaultPwValStrings: pwValStrings = {
length: {
singular: "Must have at least {n} character",
plural: "Must have at least {n} characters"
@ -82,39 +95,34 @@ export function initValidator(passwordField: HTMLInputElement, rePasswordField:
singular: "Must have at least {n} special character",
plural: "Must have at least {n} special characters"
}
};
private _checkPasswords = () => {
return this._conf.passwordField.value == this._conf.rePasswordField.value;
}
const checkPasswords = () => {
return passwordField.value == rePasswordField.value;
}
const checkValidity = () => {
const pw = checkPasswords();
validatorFunc((valid: boolean) => {
validate = () => {
const pw = this._checkPasswords();
this._conf.validatorFunc((valid: boolean) => {
if (pw && valid) {
rePasswordField.setCustomValidity("");
submitButton.disabled = false;
submitSpan.removeAttribute("disabled");
this._conf.rePasswordField.setCustomValidity("");
if (this._conf.submitInput) this._conf.submitInput.disabled = false;
this._conf.submitButton.removeAttribute("disabled");
} else if (!pw) {
rePasswordField.setCustomValidity(window.invalidPassword);
submitButton.disabled = true;
submitSpan.setAttribute("disabled", "");
this._conf.rePasswordField.setCustomValidity(window.invalidPassword);
if (this._conf.submitInput) this._conf.submitInput.disabled = true;
this._conf.submitButton.setAttribute("disabled", "");
} else {
rePasswordField.setCustomValidity("");
submitButton.disabled = true;
submitSpan.setAttribute("disabled", "");
this._conf.rePasswordField.setCustomValidity("");
if (this._conf.submitInput) this._conf.submitInput.disabled = true;
this._conf.submitButton.setAttribute("disabled", "");
}
});
};
rePasswordField.addEventListener("keyup", checkValidity);
passwordField.addEventListener("keyup", checkValidity);
// Incredible code right here
const isInt = (s: string): boolean => { return (s in ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]); }
const testStrings = (f: pwValString): boolean => {
private _isInt = (s: string): boolean => { return (s >= '0' && s <= '9'); }
private _testStrings = (f: pwValString): boolean => {
const testString = (s: string): boolean => {
if (s == "" || !s.includes("{n}")) { return false; }
return true;
@ -122,14 +130,12 @@ export function initValidator(passwordField: HTMLInputElement, rePasswordField:
return testString(f.singular) && testString(f.plural);
}
interface Validation { [name: string]: number }
const validate = (s: string): Validation => {
private _validate = (s: string): Validation => {
let v: Validation = {};
for (let criteria of ["length", "lowercase", "uppercase", "number", "special"]) { v[criteria] = 0; }
v["length"] = s.length;
for (let c of s) {
if (isInt(c)) { v["number"]++; }
if (this._isInt(c)) { v["number"]++; }
else {
const upper = c.toUpperCase();
if (upper == c.toLowerCase()) { v["special"]++; }
@ -141,27 +147,37 @@ export function initValidator(passwordField: HTMLInputElement, rePasswordField:
}
return v
}
passwordField.addEventListener("keyup", () => {
const v = validate(passwordField.value);
for (let criteria in requirements) {
requirements[criteria].validate(v[criteria]);
}
});
var requirements: { [category: string]: Requirement } = {};
if (!window.validationStrings) {
window.validationStrings = defaultPwValStrings;
} else {
private _bindRequirements = () => {
for (let category in window.validationStrings) {
if (!testStrings(window.validationStrings[category])) {
window.validationStrings[category] = defaultPwValStrings[category];
if (!this._testStrings(window.validationStrings[category])) {
window.validationStrings[category] = this._defaultPwValStrings[category];
}
const el = document.getElementById("requirement-" + category);
if (el) {
requirements[category] = new Requirement(category, el as HTMLLIElement);
if (typeof(el) === 'undefined' || el == null) continue;
this._requirements[category] = new Requirement(category, el as HTMLLIElement);
}
};
get requirements(): Requirements { return this._requirements };
constructor(conf: ValidatorConf) {
this._conf = conf;
if (!(this._conf.validatorFunc)) {
this._conf.validatorFunc = (oncomplete: (valid: boolean) => void) => { oncomplete(true); };
}
this._conf.rePasswordField.addEventListener("keyup", this.validate);
this._conf.passwordField.addEventListener("keyup", this.validate);
this._conf.passwordField.addEventListener("keyup", () => {
const v = this._validate(this._conf.passwordField.value);
for (let criteria in this._requirements) {
this._requirements[criteria].validate(v[criteria]);
}
});
if (!window.validationStrings) {
window.validationStrings = this._defaultPwValStrings;
} else {
this._bindRequirements();
}
}
return [requirements, checkValidity]
}

16
ts/pwr.ts
View File

@ -1,5 +1,5 @@
import { Modal } from "./modules/modal.js";
import { initValidator } from "./modules/validator.js";
import { Validator, ValidatorConf } from "./modules/validator.js";
import { _post, addLoader, removeLoader } from "./modules/common.js";
import { loadLangSelector } from "./modules/lang.js";
@ -35,14 +35,22 @@ loadLangSelector("pwr");
declare var window: formWindow;
const form = document.getElementById("form-create") as HTMLFormElement;
const submitButton = form.querySelector("input[type=submit]") as HTMLInputElement;
const submitInput = form.querySelector("input[type=submit]") as HTMLInputElement;
const submitSpan = form.querySelector("span.submit") as HTMLSpanElement;
const passwordField = document.getElementById("create-password") as HTMLInputElement;
const rePasswordField = document.getElementById("create-reenter-password") as HTMLInputElement;
window.successModal = new Modal(document.getElementById("modal-success"), true);
var requirements = initValidator(passwordField, rePasswordField, submitButton, submitSpan)
let validatorConf: ValidatorConf = {
passwordField: passwordField,
rePasswordField: rePasswordField,
submitInput: submitInput,
submitButton: submitSpan
};
var validator = new Validator(validatorConf);
var requirements = validator.requirements;
interface sendDTO {
pin: string;
@ -81,3 +89,5 @@ form.onsubmit = (event: Event) => {
}
}, true);
};
validator.validate();

70
ts/user.ts
View File

@ -4,6 +4,7 @@ import { Modal } from "./modules/modal.js";
import { _get, _post, _delete, notificationBox, whichAnimationEvent, toDateString, toggleLoader } from "./modules/common.js";
import { Login } from "./modules/login.js";
import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
import { Validator, ValidatorConf } from "./modules/validator.js";
interface userWindow extends Window {
jellyfinID: string;
@ -88,6 +89,7 @@ const grid = document.querySelector(".grid");
var rootCard = document.getElementById("card-user");
var contactCard = document.getElementById("card-contact");
var statusCard = document.getElementById("card-status");
var passwordCard = document.getElementById("card-password");
interface MyDetailsContactMethod {
value: string;
@ -385,6 +387,29 @@ const matrixConf: MatrixConfiguration = {
let matrix = new Matrix(matrixConf);
const oldPasswordField = document.getElementById("user-old-password") as HTMLInputElement;
const newPasswordField = document.getElementById("user-new-password") as HTMLInputElement;
const rePasswordField = document.getElementById("user-reenter-new-password") as HTMLInputElement;
const changePasswordButton = document.getElementById("user-password-submit") as HTMLSpanElement;
let baseValidator = (oncomplete: (valid: boolean) => void): void => {
if (oldPasswordField.value.length == 0) return oncomplete(false);
oncomplete(true);
};
let validatorConf: ValidatorConf = {
passwordField: newPasswordField,
rePasswordField: rePasswordField,
submitButton: changePasswordButton,
validatorFunc: baseValidator
};
let validator = new Validator(validatorConf);
let requirements = validator.requirements;
oldPasswordField.addEventListener("keyup", validator.validate);
// FIXME: Submit & Validate
document.addEventListener("details-reload", () => {
_get("/my/details", null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
@ -448,20 +473,10 @@ document.addEventListener("details-reload", () => {
}
if (typeof(messageCard) != "undefined" && messageCard != null) {
let largestNonMessageCardHeight = 0;
const cards = grid.querySelectorAll(".card") as NodeListOf<HTMLElement>;
for (let i = 0; i < cards.length; i++) {
if (cards[i].id == "card-message") continue;
if (computeRealHeight(cards[i]) > largestNonMessageCardHeight) {
largestNonMessageCardHeight = computeRealHeight(cards[i]);
}
}
let rowSpan = Math.ceil(computeRealHeight(messageCard) / largestNonMessageCardHeight);
if (rowSpan > 0)
messageCard.style.gridRow = `span ${rowSpan}`;
setBestRowSpan(messageCard, false);
// contactCard.querySelector(".content").classList.add("h-100");
} else if (!statusCard.classList.contains("unfocused")) {
setBestRowSpan(passwordCard, true);
}
}
});
@ -474,11 +489,36 @@ login.onLogin = () => {
document.dispatchEvent(new CustomEvent("details-reload"));
};
const setBestRowSpan = (el: HTMLElement, setOnParent: boolean) => {
let largestNonMessageCardHeight = 0;
const cards = grid.querySelectorAll(".card") as NodeListOf<HTMLElement>;
for (let i = 0; i < cards.length; i++) {
if (cards[i].id == el.id) continue;
if (computeRealHeight(cards[i]) > largestNonMessageCardHeight) {
largestNonMessageCardHeight = computeRealHeight(cards[i]);
}
}
let rowSpan = Math.ceil(computeRealHeight(el) / largestNonMessageCardHeight);
if (rowSpan > 0)
(setOnParent ? el.parentElement : el).style.gridRow = `span ${rowSpan}`;
};
const computeRealHeight = (el: HTMLElement): number => {
let children = el.children as HTMLCollectionOf<HTMLElement>;
let total = 0;
for (let i = 0; i < children.length; i++) {
total += children[i].offsetHeight;
// Cope with the contact method card expanding to fill, by counting each contact method individually
if (el.id == "card-contact" && children[i].classList.contains("content")) {
// console.log("FOUND CARD_CONTACT, OG:", total + children[i].offsetHeight);
for (let j = 0; j < children[i].children.length; j++) {
total += (children[i].children[j] as HTMLElement).offsetHeight;
}
// console.log("NEW:", total);
} else {
total += children[i].offsetHeight;
}
}
return total;
}

3
views.go
View File

@ -183,10 +183,11 @@ func (app *appContext) MyUserPage(gc *gin.Context) {
"notifications": notificationsEnabled,
"username": !app.config.Section("email").Key("no_username").MustBool(false),
"strings": app.storage.lang.User[lang].Strings,
"validationStrings": app.storage.lang.User[lang].ValidationStrings,
"validationStrings": app.storage.lang.User[lang].validationStringsJSON,
"language": app.storage.lang.User[lang].JSON,
"langName": lang,
"jfLink": app.config.Section("ui").Key("redirect_url").String(),
"requirements": app.validator.getCriteria(),
}
if telegramEnabled {
data["telegramUsername"] = app.telegram.username