open-source-mirrors
/
jfa-go
mirror of https://github.com/hrfee/jfa-go
1
0
Fork 0
Code Issues Packages 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.
user-page
Harvey Tindall 11 months ago
parent 4496e1d509
commit 12ce669566
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2
7 changed files with 190 additions and 81 deletions
Show Stats Download Patch File Download Diff File

40
html/user.html
Unescape 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
Unescape 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
Unescape 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;

108
ts/modules/validator.ts
Unescape 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"
}
}
};
const checkPasswords = () => {
return passwordField.value == rePasswordField.value;
private _checkPasswords = () => {
return this._conf.passwordField.value == this._conf.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
Unescape 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
Unescape 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
Unescape 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

Write Preview
Loading…
Cancel
Save