Store user settings/data on the server and multi user support (#2160)

* wip per user data

* Rename, hide menu

* better error
rework default user

* store pretty

* Add userdata endpoints
Change nodetemplates to userdata

* add multi user message

* make normal arg

* Fix tests

* Ignore user dir

* user tests

* Changed to default to browser storage and add server-storage arg

* fix crash on empty templates

* fix settings added before load

* ignore parse errors

web/scripts/ui/spinner.js

+import { addStylesheet } from "../utils.js";
+
+addStylesheet(import.meta.url);
+
+export function createSpinner() {
+	const div = document.createElement("div");
+	div.innerHTML = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
+	return div.firstElementChild;
+}

web/scripts/ui/userSelection.css

+.comfy-user-selection {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: sans-serif;
+    background: linear-gradient(var(--tr-even-bg-color), var(--tr-odd-bg-color));
+}
+
+.comfy-user-selection-inner {
+    background: var(--comfy-menu-bg);
+    margin-top: -30vh;
+    padding: 20px 40px;
+    border-radius: 10px;
+    min-width: 365px;
+    position: relative;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.comfy-user-selection-inner form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.comfy-user-selection-inner h1 {
+    margin: 10px 0 30px 0;
+    font-weight: normal;
+}
+
+.comfy-user-selection-inner label {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.comfy-user-selection input,
+.comfy-user-selection select {
+    background-color: var(--comfy-input-bg);
+    color: var(--input-text);
+    border: 0;
+    border-radius: 5px;
+    padding: 5px;
+    margin-top: 10px;
+}
+
+.comfy-user-selection input::placeholder {
+    color: var(--descrip-text);
+    opacity: 1;
+}
+
+.comfy-user-existing {
+    width: 100%;
+}
+
+.no-users .comfy-user-existing {
+    display: none;
+}
+
+.comfy-user-selection-inner .or-separator {
+    margin: 10px 0;
+    padding: 10px;
+    display: block;
+    text-align: center;
+    width: 100%;
+    color: var(--descrip-text);
+}
+
+.comfy-user-selection-inner .or-separator {
+    overflow: hidden;
+    text-align: center;
+    margin-left: -10px;
+}
+
+.comfy-user-selection-inner .or-separator::before,
+.comfy-user-selection-inner .or-separator::after {
+    content: "";
+    background-color: var(--border-color);
+    position: relative;
+    height: 1px;
+    vertical-align: middle;
+    display: inline-block;
+    width: calc(50% - 20px);
+    top: -1px;
+}
+
+.comfy-user-selection-inner .or-separator::before {
+    right: 10px;
+    margin-left: -50%;
+}
+
+.comfy-user-selection-inner .or-separator::after {
+    left: 10px;
+    margin-right: -50%;
+}
+
+.comfy-user-selection-inner section {
+    width: 100%;
+    padding: 10px;
+    margin: -10px;
+    transition: background-color 0.2s;
+}
+
+.comfy-user-selection-inner section.selected {
+    background: var(--border-color);
+    border-radius: 5px;
+}
+
+.comfy-user-selection-inner footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.comfy-user-selection-inner .comfy-user-error {
+    color: var(--error-text);
+    margin-bottom: 10px;
+}
+
+.comfy-user-button-next {
+    font-size: 16px;
+    padding: 6px 10px;
+    width: 100px;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file

web/scripts/ui/userSelection.js

+import { api } from "../api.js";
+import { $el } from "../ui.js";
+import { addStylesheet } from "../utils.js";
+import { createSpinner } from "./spinner.js";
+
+export class UserSelectionScreen {
+	async show(users, user) {
+		// This will rarely be hit so move the loading to on demand
+		await addStylesheet(import.meta.url);
+		const userSelection = document.getElementById("comfy-user-selection");
+		userSelection.style.display = "";
+		return new Promise((resolve) => {
+			const input = userSelection.getElementsByTagName("input")[0];
+			const select = userSelection.getElementsByTagName("select")[0];
+			const inputSection = input.closest("section");
+			const selectSection = select.closest("section");
+			const form = userSelection.getElementsByTagName("form")[0];
+			const error = userSelection.getElementsByClassName("comfy-user-error")[0];
+			const button = userSelection.getElementsByClassName("comfy-user-button-next")[0];
+
+			let inputActive = null;
+			input.addEventListener("focus", () => {
+				inputSection.classList.add("selected");
+				selectSection.classList.remove("selected");
+				inputActive = true;
+			});
+			select.addEventListener("focus", () => {
+				inputSection.classList.remove("selected");
+				selectSection.classList.add("selected");
+				inputActive = false;
+				select.style.color = "";
+			});
+			select.addEventListener("blur", () => {
+				if (!select.value) {
+					select.style.color = "var(--descrip-text)";
+				}
+			});
+
+			form.addEventListener("submit", async (e) => {
+				e.preventDefault();
+				if (inputActive == null) {
+					error.textContent = "Please enter a username or select an existing user.";
+				} else if (inputActive) {
+					const username = input.value.trim();
+					if (!username) {
+						error.textContent = "Please enter a username.";
+						return;
+					}
+
+					// Create new user
+					input.disabled = select.disabled = input.readonly = select.readonly = true;
+					const spinner = createSpinner();
+					button.prepend(spinner);
+					try {
+						const resp = await api.createUser(username);
+						if (resp.status >= 300) {
+							let message = "Error creating user: " + resp.status + " " + resp.statusText;
+							try {
+								const res = await resp.json();								
+								if(res.error) {
+									message = res.error;
+								}
+							} catch (error) {
+							}
+							throw new Error(message);
+						}
+
+						resolve({ username, userId: await resp.json(), created: true });
+					} catch (err) {
+						spinner.remove();
+						error.textContent = err.message ?? err.statusText ?? err ?? "An unknown error occurred.";
+						input.disabled = select.disabled = input.readonly = select.readonly = false;
+						return;
+					}
+				} else if (!select.value) {
+					error.textContent = "Please select an existing user.";
+					return;
+				} else {
+					resolve({ username: users[select.value], userId: select.value, created: false });
+				}
+			});
+
+			if (user) {
+				const name = localStorage["Comfy.userName"];
+				if (name) {
+					input.value = name;
+				}
+			}
+			if (input.value) {
+				// Focus the input, do this separately as sometimes browsers like to fill in the value
+				input.focus();
+			}
+
+			const userIds = Object.keys(users ?? {});
+			if (userIds.length) {
+				for (const u of userIds) {
+					$el("option", { textContent: users[u], value: u, parent: select });
+				}
+				select.style.color = "var(--descrip-text)";
+
+				if (select.value) {
+					// Focus the select, do this separately as sometimes browsers like to fill in the value
+					select.focus();
+				}
+			} else {
+				userSelection.classList.add("no-users");
+				input.focus();
+			}
+		}).then((r) => {
+			userSelection.remove();
+			return r;
+		});
+	}
+}

web/scripts/utils.js

+import { $el } from "./ui.js";
+
 // Simple date formatter
 const parts = {
 	d: (d) => d.getDate(),
@@ -65,3 +67,22 @@ export function applyTextReplacements(app, value) {
 		return ((widget.value ?? "") + "").replaceAll(/\/|\\/g, "_");
 	});
 }
+
+export async function addStylesheet(urlOrFile, relativeTo) {
+	return new Promise((res, rej) => {
+		let url;
+		if (urlOrFile.endsWith(".js")) {
+			url = urlOrFile.substr(0, urlOrFile.length - 2) + "css";
+		} else {
+			url = new URL(urlOrFile, relativeTo ?? `${window.location.protocol}//${window.location.host}`).toString();
+		}
+		$el("link", {
+			parent: document.head,
+			rel: "stylesheet",
+			type: "text/css",
+			href: url,
+			onload: res,
+			onerror: rej,
+		});
+	});
+}

web/style.css

@@ -121,6 +121,7 @@ body {
 	width: 100%;
 }
 
+.comfy-btn,
 .comfy-menu > button,
 .comfy-menu-btns button,
 .comfy-menu .comfy-list button,
@@ -133,6 +134,7 @@ body {
 	margin-top: 2px;
 }
 
+.comfy-btn:hover:not(:disabled),
 .comfy-menu > button:hover,
 .comfy-menu-btns button:hover,
 .comfy-menu .comfy-list button:hover,