form/admin: don't allow "+" in username/email

Jellyfin doesn't like this.
settings: de-dupe settings
2024-12-26 19:10:10 +00:00 · 2024-08-24 15:04:18 +01:00 · 2024-08-24 13:09:22 +01:00 · 2024-08-23 18:50:50 +01:00
14 changed files with 296 additions and 416 deletions
--- a/.gitignore
+++ b/.gitignore
@ -26,3 +26,4 @@ scripts/langmover/lang2
 scripts/langmover/out
 tinyproxy.conf
 static/banner.svg
+start.sh
--- a/2
+++ b/2
@ -196,7 +196,7 @@ STATIC_TARGET = $(STATIC_SRC:static/%=$(DATA)/web/%)
 COPY_SRC = images/banner.svg jfa-go.service LICENSE $(LANG_SRC) $(STATIC_SRC)
 COPY_TARGET = $(DATA)/jfa-go.service
 # $(DATA)/LICENSE $(LANG_TARGET) $(STATIC_TARGET) $(DATA)/web/css/$(CSSVERSION)bundle.css
-$(COPY_TARGET): $(INLINE_TARGET) $(STATIC_SRC)
+$(COPY_TARGET): $(INLINE_TARGET) $(STATIC_SRC) $(LANG_SRC)
 	$(info copying crash page)
 	cp $(DATA)/crash.html $(DATA)/html/
 	$(info copying static data)
--- a/config.go
+++ b/config.go
@ -127,6 +127,8 @@ func (app *appContext) loadConfig() error {
 	app.MustSetValue("user_expiry", "adjustment_email_html", "jfa-go:"+"expiry-adjusted.html")
 	app.MustSetValue("user_expiry", "adjustment_email_text", "jfa-go:"+"expiry-adjusted.txt")

+	app.MustSetValue("email", "collect", "true")
+
 	app.MustSetValue("matrix", "topic", "Jellyfin notifications")
 	app.MustSetValue("matrix", "show_on_reg", "true")

--- a/config/config-base.json
+++ b/config/config-base.json
@ -896,11 +896,20 @@
                    "value": false,
                    "description": "Send emails as plain text instead of HTML."
                },
+                "collect": {
+                    "name": "Collect on sign-up",
+                    "required": false,
+                    "requires_restart": false,
+                    "depends_true": "method",
+                    "type": "bool",
+                    "value": true,
+                    "description": "Ask for an email address on the sign-up form."
+                },
                "required": {
                    "name": "Require on sign-up",
                    "required": false,
                    "requires_restart": false,
-                    "depends_true": "method",
+                    "depends_true": "collect",
                    "type": "bool",
                    "value": false,
                    "description": "Require an email address on sign-up."
@ -909,6 +918,7 @@
                    "name": "Require unique address",
                    "required": false,
                    "requires_restart": true,
+                    "depends_true": "method",
                    "type": "bool",
                    "value": false,
                    "description": "Disables using the same address on multiple accounts."
--- a/html/admin.html
+++ b/html/admin.html
@ -312,25 +312,27 @@
            <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-editor" href="">
                <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
                <div class="row">
-                    <div class="col card ~neutral @low">
-                        <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="aside-editor"></aside> 
-                        <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
-                        <div id="editor-variables" class="mt-4"></div>
-                        <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
-                        <div id="editor-conditionals"></div>
-                        <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
-                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-4 font-mono"></textarea>
-                        <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
-                        <div class="flex-row">
-                            <label class="full-width ml-2">
+                    <div class="col card ~neutral @low flex flex-col gap-2 justify-between">
+                        <div class="flex flex-col gap-2">
+                            <aside class="aside sm ~urge dark:~d_info @low" id="aside-editor"></aside> 
+                            <label class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</label>
+                            <div id="editor-variables" class="flex flex-row gap-2 flex-wrap"></div>
+                            <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
+                            <div id="editor-conditionals"></div>
+                            <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
+                            <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low font-mono"></textarea>
+                        </div>
+                        <div class="flex flex-col gap-2">
+                            <p class="support">{{ .strings.markdownSupported }}</p>
+                            <label class="w-full">
                                <input type="submit" class="unfocused">
-                                <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>
+                                <span class="button ~urge @low w-full supra submit">{{ .strings.submit }}</span>
                            </label>
                        </div>
                    </div>
-                    <div class="col card ~neutral @low">
+                    <div class="col card ~neutral @low flex flex-col gap-2">
                        <span class="subheading supra">{{ .strings.preview }}</span>
-                        <div class="mt-8" id="editor-preview"></div>
+                        <div id="editor-preview"></div>
                    </div>
                </div>
            </form>
--- a/lang/common/en-us.json
+++ b/lang/common/en-us.json
@ -48,7 +48,8 @@
        "errorConnection": "Couldn't connect to jfa-go.",
        "errorUnknown": "Unknown error.",
        "error401Unauthorized": "Unauthorized. Try refreshing the page.",
-        "errorSaveSettings": "Couldn't save settings."
+        "errorSaveSettings": "Couldn't save settings.",
+        "errorSpecialSymbols": "Field cannot contain special symbols."
    },
    "quantityStrings": {
        "year": {
@ -64,4 +65,4 @@
            "plural": "{n} Days"
        }
    }
-}
+}
--- a/logger/logger.go
+++ b/logger/logger.go
@ -52,6 +52,14 @@ func lshortfile() string {
 	return Lshortfile(3)
 }

+func LshortfileTree() string {
+	out := ""
+	for i := 6; i >= 0; i-- {
+		out += strconv.Itoa(i) + ":" + Lshortfile(i) + " "
+	}
+	return out
+}
+
 func NewLogger(out io.Writer, prefix string, flag int, color c.Attribute) (l *Logger) {
 	l = &Logger{}
 	// Use reimplemented Lshortfile since wrapping the log functions messes them up
@ -96,6 +104,13 @@ func (l *Logger) PrintfCustomLevel(level int, format string, v ...interface{}) {
 	l.logger.Print(out)
 }

+func (l *Logger) PrintfNoFile(format string, v ...interface{}) {
+	if l.empty {
+		return
+	}
+	l.logger.Print(l.printer.Sprintf(format, v...))
+}
+
 func (l *Logger) Print(v ...interface{}) {
 	if l.empty {
 		return
--- a/logmessages/logmessages.go
+++ b/logmessages/logmessages.go
@ -175,6 +175,7 @@ const (
 	AccountLinked              = "account already linked and require_unique enabled"
 	AccountUnverified          = "unverified"
 	FailedSetDiscordMemberRole = "Failed to apply/remove " + Discord + " member role: %v"
+	InvalidChar                = "Invalid character '%c'"

 	FailedSetEmailAddress = "Failed to set email address for %s user \"%s\": %v"

--- a/models.go
+++ b/models.go
@ -5,8 +5,9 @@ import (
 )

 type stringResponse struct {
-	Response string `json:"response" example:"message"`
-	Error    string `json:"error" example:"errorDescription"`
+	Response  string `json:"response" example:"message"`
+	ErrorText string `json:"error" example:"No special symbols allowed."`
+	ErrorCode string `json:"error_code" example:"errorSpecialSymbols"`
 }

 type boolResponse struct {
--- a/ts/form.ts
+++ b/ts/form.ts
@ -176,13 +176,32 @@ const rePasswordField = document.getElementById("create-reenter-password") as HT

 let captcha = new Captcha(window.code, window.captcha, window.reCAPTCHA, false);

+const clearSubmitButton = () => {
+    submitInput.setCustomValidity("");
+    submitSpan.title = "";
+};
+
+const invalidMessage = (el: HTMLInputElement, msg: string) => {
+    el.setCustomValidity(msg);
+    submitInput.setCustomValidity(msg);
+    submitSpan.title = msg;
+};
+
 function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: boolean): void {
+    clearSubmitButton();
    if (window.emailRequired) {
        if (!emailField.value.includes("@")) {
            oncomplete(false);
            return;
        }
    }
+    usernameField.setCustomValidity("");
+    // Jellyfin doesn't like having "+" in the username field
+    if (usernameField.value.includes("+")) {
+        invalidMessage(usernameField, window.messages["errorSpecialSymbols"]);
+        oncomplete(false);
+        return;
+    }
    if (window.discordEnabled && window.discordRequired && !discordVerified) {
        oncomplete(false);
        return;
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@ -1138,7 +1138,12 @@ export class accountsList {
                        console.log("User created, but welcome email failed");
                    }
                } else {
-                    window.notifications.customError("addUser", window.lang.var("notifications", "errorUserCreated", `"${send['username']}"`));
+                    let msg = window.lang.var("notifications", "errorUserCreated", `"${send['username']}"`);
+                    if ("error" in req.response) {
+                        let realError = window.lang.notif(req.response["error"]);
+                        if (realError) msg = realError;
+                    }
+                    window.notifications.customError("addUser", msg);
                }
                if (req.response["error"] as String) {
                    console.log(req.response["error"]);
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@ -2,6 +2,12 @@ import { _get, _post, _delete, _download, _upload, toggleLoader, addLoader, remo
 import { Marked } from "@ts-stack/markdown";
 import { stripMarkdown } from "../modules/stripmd.js";

+const toBool = (s: string): boolean => {
+    let b = Boolean(s);
+    if (s == "false") b = false;
+    return b;
+}
+
 interface BackupDTO {
    size: string;
    name: string;
@ -9,8 +15,8 @@ interface BackupDTO {
    date: number;
 }

-interface settingsBoolEvent extends Event { 
-    detail: boolean;
+interface settingsChangedEvent extends Event { 
+    detail: string;
 }

 interface Meta {
@ -52,7 +58,8 @@ const splitDependant = (section: string, dep: string): string[] => {
    return parts
 };

-class DOMInput {
+class DOMSetting {
+    protected _hideEl: HTMLElement;
    protected _input: HTMLInputElement;
    protected _container: HTMLDivElement;
    protected _tooltip: HTMLDivElement;
@ -62,11 +69,20 @@ class DOMInput {
    protected _section: string;
    protected _name: string;

-    hide = () => this._input.parentElement.classList.add("unfocused");
-    show = () => this._input.parentElement.classList.remove("unfocused");
+    hide = () => {
+        this._hideEl.classList.add("unfocused");
+        const event = new CustomEvent(`settings-${this._section}-${this._name}`, { "detail": false })
+        document.dispatchEvent(event);

-    private _advancedListener = (event: settingsBoolEvent) => {
-        if (!Boolean(event.detail)) {
+    };
+    show = () => {
+        this._hideEl.classList.remove("unfocused");
+        const event = new CustomEvent(`settings-${this._section}-${this._name}`, { "detail": this.valueAsString() })
+        document.dispatchEvent(event);
+    };
+
+    private _advancedListener = (event: settingsChangedEvent) => {
+        if (!toBool(event.detail)) {
            this.hide();
        } else {
            this.show();
@ -100,9 +116,11 @@ class DOMInput {
    get required(): boolean { return this._required.classList.contains("badge"); }
    set required(state: boolean) {
        if (state) {
+            this._required.classList.remove("unfocused");
            this._required.classList.add("badge", "~critical");
            this._required.textContent = "*";
        } else {
+            this._required.classList.add("unfocused");
            this._required.classList.remove("badge", "~critical");
            this._required.textContent = "";
        }
@ -111,9 +129,11 @@ class DOMInput {
    get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
    set requires_restart(state: boolean) {
        if (state) {
+            this._restart.classList.remove("unfocused");
            this._restart.classList.add("badge", "~info", "dark:~d_warning");
            this._restart.textContent = "R";
        } else {
+            this._restart.classList.add("unfocused");
            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
            this._restart.textContent = "";
        }
@ -123,39 +143,44 @@ class DOMInput {

    onValueChange = () => {
        const event = new CustomEvent(`settings-${this._section}-${this._name}`, { "detail": this.valueAsString() })
+        const setEvent = new CustomEvent(`settings-set-${this._section}-${this._name}`, { "detail": this.valueAsString() })
        document.dispatchEvent(event);
+        document.dispatchEvent(setEvent);
        if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
    };

-    constructor(inputType: string, setting: Setting, section: string, name: string, customInput?: string) {
+    constructor(input: string, setting: Setting, section: string, name: string, inputOnTop: boolean = false) {
        this._section = section;
        this._name = name;
        this._container = document.createElement("div");
        this._container.classList.add("setting");
-        this._container.setAttribute("data-name", name)
-        const defaultInput = `
-            <input type="${inputType}" class="input setting-input ~neutral @low mt-2 mb-2">
-        `;
+        this._container.setAttribute("data-name", name);
        this._container.innerHTML = `
-        <label class="label">
-            <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
-            <div class="setting-tooltip tooltip right unfocused">
-                <i class="icon ri-information-line"></i>
-                <span class="content sm"></span>
+        <label class="label flex flex-col gap-2">
+            ${inputOnTop ? input : ""}
+            <div class="flex flex-row gap-2 items-baseline">
+                <span class="setting-label"></span>
+                <div class="setting-tooltip tooltip right unfocused">
+                    <i class="icon ri-information-line align-baseline"></i>
+                    <span class="content sm"></span>
+                </div>
+                <span class="setting-required unfocused"></span>
+                <span class="setting-restart unfocused"></span>
            </div>
-            ${customInput ? customInput : defaultInput}
+            ${inputOnTop ? "" : input}
        </label>
        `;
        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
+        // "input" variable should supply the HTML of an element with class "setting-input"
        this._input = this._container.querySelector(".setting-input") as HTMLInputElement;
        if (setting.depends_false || setting.depends_true) {
            let dependant = splitDependant(section, setting.depends_true || setting.depends_false);
            let state = true;
            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
-                if (Boolean(event.detail) !== state) {
+            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsChangedEvent) => {
+                if (toBool(event.detail) !== state) {
                    this.hide();
                } else {
                    this.show();
@ -163,13 +188,14 @@ class DOMInput {
            });
        }
        this._input.onchange = this.onValueChange;
-        this.update(setting);
+        document.addEventListener(`settings-loaded`, this.onValueChange);
+        this._hideEl = this._container;
    }

    get value(): any { return this._input.value; }
    set value(v: any) { this._input.value = v; }

-    update = (s: Setting) => {
+    update(s: Setting) {
        this.name = s.name;
        this.description = s.description;
        this.required = s.required;
@ -181,6 +207,17 @@ class DOMInput {
    asElement = (): HTMLDivElement => { return this._container; }
 }

+class DOMInput extends DOMSetting {
+    constructor(inputType: string, setting: Setting, section: string, name: string) {
+        super(
+            `<input type="${inputType}" class="input setting-input ~neutral @low">`,
+            setting, section, name,
+        );
+        // this._hideEl = this._input.parentElement;
+        this.update(setting);
+    }
+}
+
 interface SText extends Setting {
    value: string;
 }
@ -191,85 +228,6 @@ class DOMText extends DOMInput implements SText {
    set value(v: string) { this._input.value = v; }
 }

-interface SList extends Setting {
-    value: string[];
-}
-
-class DOMList extends DOMInput implements SList {
-    protected _inputs: HTMLDivElement;
-    type: string = "list";
-    
-    valueAsString = (): string => { return this.value.join("|"); };
-
-    get value(): string[] {
-        let values = [];
-        const inputs = this._input.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
-        for (let i in inputs) {
-            if (inputs[i].value) values.push(inputs[i].value);
-        }
-        return values;
-    }
-    set value(v: string[]) {
-        this._input.textContent = ``;
-        for (let val of v) {
-            let input = this.inputRow(val);
-            this._input.appendChild(input);
-        }
-        const addDummy = () => {
-            const dummyRow = this.inputRow();
-            const input = dummyRow.querySelector("input") as HTMLInputElement;
-            input.placeholder = window.lang.strings("add");
-            const onDummyChange = () => {
-                if (!(input.value)) return;
-                addDummy();
-                input.removeEventListener("change", onDummyChange);
-                input.placeholder = ``;
-            }
-            input.addEventListener("change", onDummyChange);
-            this._input.appendChild(dummyRow);
-        };
-        addDummy();
-    }
-
-    private inputRow(v: string = ""): HTMLDivElement {
-        let container = document.createElement("div") as HTMLDivElement;
-        container.classList.add("flex", "flex-row", "justify-between");
-        container.innerHTML = `
-            <input type="text" class="input ~neutral @low">
-            <button class="button ~neutral @low center -ml-10 rounded-s-none aria-label="${window.lang.strings("delete")}" title="${window.lang.strings("delete")}">
-                <i class="ri-close-line"></i>
-            </button>
-        `;
-        const input = container.querySelector("input") as HTMLInputElement;
-        input.value = v;
-        input.onchange = this.onValueChange;
-        const removeRow = container.querySelector("button") as HTMLButtonElement;
-        removeRow.onclick = () => {
-            if (!(container.nextElementSibling)) return;
-            container.remove();
-            this.onValueChange();
-        }
-        return container;
-    }
-
-    update = (s: Setting) => {
-        this.name = s.name;
-        this.description = s.description;
-        this.required = s.required;
-        this.requires_restart = s.requires_restart;
-        this.value = s.value as string[];
-        this.advanced = s.advanced;
-    }
-    
-    asElement = (): HTMLDivElement => { return this._container; }
-
-    constructor(setting: Setting, section: string, name: string) {
-        super("list", setting, section, name,
-            `<div class="setting-input flex flex-col gap-2 mt-2 mb-2"></div>`
-        );
-    }
-}
-
 interface SPassword extends Setting {
    value: string;
 }
@ -300,209 +258,107 @@ class DOMNumber extends DOMInput implements SNumber {
    set value(v: number) { this._input.value = ""+v; }
 }

+interface SList extends Setting {
+    value: string[];
+}
+class DOMList extends DOMSetting implements SList {
+    protected _inputs: HTMLDivElement;
+    type: string = "list";
+    
+    valueAsString = (): string => { return this.value.join("|"); };
+
+    get value(): string[] {
+        let values = [];
+        const inputs = this._input.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
+        for (let i in inputs) {
+            if (inputs[i].value) values.push(inputs[i].value);
+        }
+        return values;
+    }
+    set value(v: string[]) {
+        this._input.textContent = ``;
+        for (let val of v) {
+            let input = this.inputRow(val);
+            this._input.appendChild(input);
+        }
+        const addDummy = () => {
+            const dummyRow = this.inputRow();
+            const input = dummyRow.querySelector("input") as HTMLInputElement;
+            input.placeholder = window.lang.strings("add");
+            const onDummyChange = () => {
+                if (!(input.value)) return;
+                addDummy();
+                input.removeEventListener("change", onDummyChange);
+                input.removeEventListener("keyup", onDummyChange);
+                input.placeholder = ``;
+            }
+            input.addEventListener("change", onDummyChange);
+            input.addEventListener("keyup", onDummyChange);
+            this._input.appendChild(dummyRow);
+        };
+        addDummy();
+    }
+
+    private inputRow(v: string = ""): HTMLDivElement {
+        let container = document.createElement("div") as HTMLDivElement;
+        container.classList.add("flex", "flex-row", "justify-between");
+        container.innerHTML = `
+            <input type="text" class="input ~neutral @low">
+            <button class="button ~neutral @low center -ml-10 rounded-s-none aria-label="${window.lang.strings("delete")}" title="${window.lang.strings("delete")}">
+                <i class="ri-close-line"></i>
+            </button>
+        `;
+        const input = container.querySelector("input") as HTMLInputElement;
+        input.value = v;
+        input.onchange = this.onValueChange;
+        const removeRow = container.querySelector("button") as HTMLButtonElement;
+        removeRow.onclick = () => {
+            if (!(container.nextElementSibling)) return;
+            container.remove();
+            this.onValueChange();
+        }
+        return container;
+    }
+    
+    constructor(setting: Setting, section: string, name: string) {
+        super(
+            `<div class="setting-input flex flex-col gap-2"></div>`,
+            setting, section, name,
+        );
+        // this._hideEl = this._input.parentElement;
+        this.update(setting);
+    }
+}
+
 interface SBool extends Setting {
    value: boolean;
 }
-class DOMBool implements SBool {
-    protected _input: HTMLInputElement;
-    private _container: HTMLDivElement;
-    private _tooltip: HTMLDivElement;
-    private _required: HTMLSpanElement;
-    private _restart: HTMLSpanElement;
+class DOMBool extends DOMSetting implements SBool {
    type: string = "bool";
-    private _advanced: boolean;
-    
-    hide = () => this._input.parentElement.classList.add("unfocused");
-    show = () => this._input.parentElement.classList.remove("unfocused");
-
-    private _advancedListener = (event: settingsBoolEvent) => {
-        if (!Boolean(event.detail)) {
-            this.hide();
-        } else {
-            this.show();
-        }
-    }
-
-    get advanced(): boolean { return this._advanced; }
-    set advanced(advanced: boolean) {
-        this._advanced = advanced;
-        if (advanced) {
-            document.addEventListener("settings-advancedState", this._advancedListener);
-        } else {
-            document.removeEventListener("settings-advancedState", this._advancedListener);
-        }
-    }
-
-    get name(): string { return this._container.querySelector("span.setting-label").textContent; }
-    set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
-
-    get description(): string { return this._tooltip.querySelector("span.content").textContent; } 
-    set description(d: string) {
-        const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
-        content.textContent = d;
-        if (d == "") {
-            this._tooltip.classList.add("unfocused");
-        } else {
-            this._tooltip.classList.remove("unfocused");
-        }
-    }
-
-    get required(): boolean { return this._required.classList.contains("badge"); }
-    set required(state: boolean) {
-        if (state) {
-            this._required.classList.add("badge", "~critical");
-            this._required.textContent = "*";
-        } else {
-            this._required.classList.remove("badge", "~critical");
-            this._required.textContent = "";
-        }
-    }
-    
-    get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
-    set requires_restart(state: boolean) {
-        if (state) {
-            this._restart.classList.add("badge", "~info", "dark:~d_warning");
-            this._restart.textContent = "R";
-        } else {
-            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
-            this._restart.textContent = "";
-        }
-    }
-
-    valueAsString = (): string => { return ""+this.value; };

    get value(): boolean { return this._input.checked; }
    set value(state: boolean) { this._input.checked = state; }
    
    constructor(setting: SBool, section: string, name: string) {
-        this._container = document.createElement("div");
-        this._container.classList.add("setting");
-        this._container.setAttribute("data-name", name)
-        this._container.innerHTML = `
-        <label class="switch mb-2">
-            <input type="checkbox">
-            <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
-            <div class="setting-tooltip tooltip right unfocused">
-                <i class="icon ri-information-line"></i>
-                <span class="content sm"></span>
-            </div>
-        </label>
-        `;
-        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
-        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
-        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
-        this._input = this._container.querySelector("input[type=checkbox]") as HTMLInputElement;
-        const onValueChange = () => {
-            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this.valueAsString() })
-            document.dispatchEvent(event);
-        };
-        this._input.onchange = () => { 
-            onValueChange();
-            if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
-        };
-        document.addEventListener(`settings-loaded`, onValueChange);
-
-        if (setting.depends_false || setting.depends_true) {
-            let dependant = splitDependant(section, setting.depends_true || setting.depends_false);
-            let state = true;
-            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
-                if (Boolean(event.detail) !== state) {
-                    this.hide();
-                } else {
-                    this.show();
-                }
-            });
-        }
+        super(
+            `<input type="checkbox" class="setting-input">`,
+            setting, section, name, true,
+        );
+        const label = this._container.getElementsByTagName("LABEL")[0];
+        label.classList.remove("flex-col");
+        label.classList.add("flex-row");
+        // this._hideEl = this._input.parentElement;
        this.update(setting);
    }
-    update = (s: SBool) => {
-        this.name = s.name;
-        this.description = s.description;
-        this.required = s.required;
-        this.requires_restart = s.requires_restart;
-        this.value = s.value;
-        this.advanced = s.advanced;
-    }
-    
-    asElement = (): HTMLDivElement => { return this._container; }
 }

 interface SSelect extends Setting {
    options: string[][];
    value: string;
 }
-class DOMSelect implements SSelect {
-    protected _select: HTMLSelectElement;
-    private _container: HTMLDivElement;
-    private _tooltip: HTMLDivElement;
-    private _required: HTMLSpanElement;
-    private _restart: HTMLSpanElement;
-    private _options: string[][];
+class DOMSelect extends DOMSetting implements SSelect {
    type: string = "bool";
-    private _advanced: boolean;
-
-    hide = () => this._container.classList.add("unfocused");
-    show = () => this._container.classList.remove("unfocused");
-
-    private _advancedListener = (event: settingsBoolEvent) => {
-        if (!Boolean(event.detail)) {
-            this.hide();
-        } else {
-            this.show();
-        }
-    }
-
-    get advanced(): boolean { return this._advanced; }
-    set advanced(advanced: boolean) {
-        this._advanced = advanced;
-        if (advanced) {
-            document.addEventListener("settings-advancedState", this._advancedListener);
-        } else {
-            document.removeEventListener("settings-advancedState", this._advancedListener);
-        }
-    }
-
-    get name(): string { return this._container.querySelector("span.setting-label").textContent; }
-    set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
-
-    get description(): string { return this._tooltip.querySelector("span.content").textContent; } 
-    set description(d: string) {
-        const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
-        content.textContent = d;
-        if (d == "") {
-            this._tooltip.classList.add("unfocused");
-        } else {
-            this._tooltip.classList.remove("unfocused");
-        }
-    }
-
-    get required(): boolean { return this._required.classList.contains("badge"); }
-    set required(state: boolean) {
-        if (state) {
-            this._required.classList.add("badge", "~critical");
-            this._required.textContent = "*";
-        } else {
-            this._required.classList.remove("badge", "~critical");
-            this._required.textContent = "";
-        }
-    }
-    
-    get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
-    set requires_restart(state: boolean) {
-        if (state) {
-            this._restart.classList.add("badge", "~info", "dark:~d_warning");
-            this._restart.textContent = "R";
-        } else {
-            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
-            this._restart.textContent = "";
-        }
-    }
-
-    valueAsString = (): string => { return ""+this.value; };
-
-    get value(): string { return this._select.value; }
-    set value(v: string) { this._select.value = v; }
+    private _options: string[][];

    get options(): string[][] { return this._options; }
    set options(opt: string[][]) {
@ -511,88 +367,47 @@ class DOMSelect implements SSelect {
        for (let option of this._options) {
            innerHTML += `<option value="${option[0]}">${option[1]}</option>`;
        }
-        this._select.innerHTML = innerHTML;
+        this._input.innerHTML = innerHTML;
    }

+    update(s: SSelect) {
+        this.options = s.options;
+        super.update(s);
+    };
+
    constructor(setting: SSelect, section: string, name: string) {
-        this._options = [];
-        this._container = document.createElement("div");
-        this._container.classList.add("setting");
-        this._container.setAttribute("data-name", name)
-        this._container.innerHTML = `
-        <label class="label">
-            <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
-            <div class="setting-tooltip tooltip right unfocused">
-                <i class="icon ri-information-line"></i>
-                <span class="content sm"></span>
-            </div>
-            <div class="select ~neutral @low mt-2 mb-2">
-                <select class="settings-select"></select>
-            </div>
-        </label>
-        `;
-        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
-        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
-        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
-        this._select = this._container.querySelector("select.settings-select") as HTMLSelectElement;
-        if (setting.depends_false || setting.depends_true) {
-            let dependant = splitDependant(section, setting.depends_true || setting.depends_false);
-            let state = true;
-            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
-                if (Boolean(event.detail) !== state) {
-                    this.hide();
-                } else {
-                    this.show();
-                }
-            });
-        }
-        const onValueChange = () => {
-            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this.valueAsString() })
-            document.dispatchEvent(event);
-            if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
-        };
-        this._select.onchange = onValueChange;
-        document.addEventListener(`settings-loaded`, onValueChange);
-
-        const message = document.getElementById("settings-message") as HTMLElement;
-        message.innerHTML = window.lang.var("strings",
-                                            "settingsRequiredOrRestartMessage",
-                                            `<span class="badge ~critical">*</span>`,
-                                            `<span class="badge ~info dark:~d_warning">R</span>`
+        super(
+            `<div class="select ~neutral @low">
+                <select class="setting-select setting-input"></select>
+            </div>`,
+            setting, section, name,
        );
-
+        this._options = [];
+        // this._hideEl = this._container;
        this.update(setting);
    }
-    update = (s: SSelect) => {
-        this.name = s.name;
-        this.description = s.description;
-        this.required = s.required;
-        this.requires_restart = s.requires_restart;
-        this.options = s.options;
-        this.value = s.value;
-    }
-
-    asElement = (): HTMLDivElement => { return this._container; }
 }

 interface SNote extends Setting {
    value: string;
    style?: string;
 }
-class DOMNote implements SNote {
-    private _container: HTMLDivElement;
-    private _aside: HTMLElement;
-    private _name: HTMLElement;
+class DOMNote extends DOMSetting implements SNote {
+    private _nameEl: HTMLElement;
    private _description: HTMLElement;
    type: string = "note";
    private _style: string;

-    hide = () => this._container.classList.add("unfocused");
-    show = () => this._container.classList.remove("unfocused");
+    // We're a note, no one depends on us so we don't need to broadcast a state change.
+    hide = () => {
+		this._container.classList.add("unfocused");
+	};
+    show = () => {
+		this._container.classList.remove("unfocused");
+	};

-    get name(): string { return this._name.textContent; }
-    set name(n: string) { this._name.textContent = n; }
+    get name(): string { return this._nameEl.textContent; }
+    set name(n: string) { this._nameEl.textContent = n; }

    get description(): string { return this._description.textContent; }
    set description(d: string) {
@ -602,51 +417,37 @@ class DOMNote implements SNote {
    valueAsString = (): string => { return ""; };

    get value(): string { return ""; }
-    set value(v: string) { return; }
+    set value(_: string) { return; }
    
    get required(): boolean { return false; }
-    set required(v: boolean) { return; }
+    set required(_: boolean) { return; }
    
    get requires_restart(): boolean { return false; }
-    set requires_restart(v: boolean) { return; }
+    set requires_restart(_: boolean) { return; }

    get style(): string { return this._style; }
    set style(s: string) {
-        this._aside.classList.remove("~" + this._style);
+        this._input.classList.remove("~" + this._style);
        this._style = s;
-        this._aside.classList.add("~" + this._style);
+        this._input.classList.add("~" + this._style);
    }
    
    constructor(setting: SNote, section: string) {
-        this._container = document.createElement("div");
-        this._container.classList.add("setting");
-        this._container.innerHTML = `
-        <aside class="aside my-2">
-            <span class="font-bold setting-name"></span>
-            <span class="content setting-description">
-        </aside>
-        `;
-        this._name = this._container.querySelector(".setting-name");
+        super(
+            `
+            <aside class="aside setting-input">
+                <span class="font-bold setting-name"></span>
+                <span class="content setting-description">
+            </aside>
+            `, setting, section, "",
+        );
+        // this._hideEl = this._container;
+        this._nameEl = this._container.querySelector(".setting-name");
        this._description = this._container.querySelector(".setting-description");
-        this._aside = this._container.querySelector("aside");
-
-        if (setting.depends_false || setting.depends_true) {
-            let dependant = splitDependant(section, setting.depends_true || setting.depends_false);
-            let state = true;
-            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
-                if (Boolean(event.detail) !== state) {
-                    this.hide();
-                } else {
-                    this.show();
-                }
-            });
-        }
-
        this.update(setting);
    }

-    update = (s: SNote) => {
+    update(s: SNote) {
        this.name = s.name;
        this.description = s.description;
        this.style = ("style" in s && s.style) ? s.style : "info";
@ -671,7 +472,7 @@ class sectionPanel {
        this._sectionName = sectionName;
        this._settings = {};
        this._section = document.createElement("div") as HTMLDivElement;
-        this._section.classList.add("settings-section", "unfocused");
+        this._section.classList.add("settings-section", "unfocused", "flex", "flex-col", "gap-2");
        this._section.setAttribute("data-section", sectionName);
        let innerHTML = `
        <div class="flex flex-row justify-between">
@ -683,7 +484,7 @@ class sectionPanel {

        innerHTML += `
        </div>
-        <p class="support lg my-2 settings-section-description">${s.meta.description}</p>
+        <p class="support lg settings-section-description">${s.meta.description}</p>
        `;
        this._section.innerHTML = innerHTML;

@ -724,7 +525,9 @@ class sectionPanel {
                }
                if (setting.type != "note") {
                    this.values[name] = ""+setting.value;
-                    document.addEventListener(`settings-${this._sectionName}-${name}`, (event: CustomEvent) => {
+                    // settings-section-name: Implies the setting changed or was shown/hidden.
+                    // settings-set-section-name: Implies the setting changed.
+                    document.addEventListener(`settings-set-${this._sectionName}-${name}`, (event: CustomEvent) => {
                        // const oldValue = this.values[name];
                        this.values[name] = event.detail;
                        document.dispatchEvent(new CustomEvent("settings-section-changed"));
@ -791,9 +594,8 @@ export class settingsList {
            let dependant = splitDependant(name, s.meta.depends_true || s.meta.depends_false);
            let state = true;
            if (s.meta.depends_false) { state = false; }
-            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
-
-                if (Boolean(event.detail) !== state) {
+            document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsChangedEvent) => {
+                if (toBool(event.detail) !== state) {
                    button.classList.add("unfocused");
                    document.dispatchEvent(new CustomEvent(`settings-${name}`, { detail: false }));
                } else {
@ -801,16 +603,16 @@ export class settingsList {
                    document.dispatchEvent(new CustomEvent(`settings-${name}`, { detail: true }));
                }
            });
-            document.addEventListener(`settings-${dependant[0]}`, (event: settingsBoolEvent) => {
-                if (Boolean(event.detail) !== state) {
+            document.addEventListener(`settings-${dependant[0]}`, (event: settingsChangedEvent) => {
+                if (toBool(event.detail) !== state) {
                    button.classList.add("unfocused");
                    document.dispatchEvent(new CustomEvent(`settings-${name}`, { detail: false }));
                }
            }); 
        }
        if (s.meta.advanced) {
-            document.addEventListener("settings-advancedState", (event: settingsBoolEvent) => {
-                if (!Boolean(event.detail)) {
+            document.addEventListener("settings-advancedState", (event: settingsChangedEvent) => {
+                if (!toBool(event.detail)) {
                    button.classList.add("unfocused");
                } else {
                    button.classList.remove("unfocused");
@ -1002,6 +804,14 @@ export class settingsList {
                this._searchbox.oninput(null);
            };
        };
+
+        // What possessed me to put this in the DOMSelect constructor originally? like what????????
+        const message = document.getElementById("settings-message") as HTMLElement;
+        message.innerHTML = window.lang.var("strings",
+                                            "settingsRequiredOrRestartMessage",
+                                            `<span class="badge ~critical">*</span>`,
+                                            `<span class="badge ~info dark:~d_warning">R</span>`
+        );
    }

    private _addMatrix = () => {
@ -1278,7 +1088,7 @@ class MessageEditor {
                let innerHTML = '';
                for (let i = 0; i < this._templ.variables.length; i++) {
                    let ci = i % colors.length;
-                    innerHTML += '<span class="button ~' + colors[ci] +' @low mb-4" style="margin-left: 0.25rem; margin-right: 0.25rem;"></span>'
+                    innerHTML += '<span class="button ~' + colors[ci] +' @low"></span>'
                }
                if (this._templ.variables.length == 0) {
                    this._variablesLabel.classList.add("unfocused");
--- a/users.go
+++ b/users.go
@ -1,10 +1,13 @@
 package main

 import (
+	"fmt"
+	"strings"
 	"sync"
 	"time"

 	"github.com/gin-gonic/gin"
+	"github.com/hrfee/jfa-go/logger"
 	lm "github.com/hrfee/jfa-go/logmessages"
 	"github.com/hrfee/mediabrowser"
 	"github.com/lithammer/shortuuid/v3"
@ -53,9 +56,11 @@ type NewUserData struct {
 func (app *appContext) NewUserPostVerification(p NewUserParams) (out NewUserData, pendingTasks *sync.WaitGroup) {
 	pendingTasks = &sync.WaitGroup{}
 	// Some helper functions which will behave as our app.info/error/debug
+	// And make sure we capture the correct caller location.
 	deferLogInfo := func(s string, args ...any) {
+		loc := logger.Lshortfile(2)
 		out.Log = func() {
-			app.info.Printf(s, args)
+			app.info.PrintfNoFile(loc+" "+s, args...)
 		}
 	}
 	/* deferLogDebug := func(s string, args ...any) {
@ -64,11 +69,19 @@ func (app *appContext) NewUserPostVerification(p NewUserParams) (out NewUserData
 		}
 	} */
 	deferLogError := func(s string, args ...any) {
+		loc := logger.Lshortfile(2)
 		out.Log = func() {
-			app.err.Printf(s, args)
+			app.err.PrintfNoFile(loc+" "+s, args...)
 		}
 	}

+	if strings.ContainsRune(p.Req.Username, '+') {
+		deferLogError(lm.FailedCreateUser, lm.Jellyfin, p.Req.Username, fmt.Sprintf(lm.InvalidChar, '+'))
+		out.Status = 400
+		out.Message = "errorSpecialSymbols"
+		return
+	}
+
 	existingUser, _ := app.jf.UserByName(p.Req.Username, false)
 	if existingUser.Name != "" {
 		out.Message = lm.UserExists
--- a/views.go
+++ b/views.go
@ -677,7 +677,7 @@ func (app *appContext) NewUserFromConfirmationKey(invite Invite, key string, lan
 		nu.Log()
 	}
 	if !nu.Created {
-		respond(nu.Status, nu.Message, gc)
+		// respond(nu.Status, nu.Message, gc)
 		fail()
 		return
 	}