wip per user data

app/app_settings.py

@@ -0,0 +1,54 @@
+import os
+import json
+from aiohttp import web
+
+
+class AppSettings():
+    def __init__(self, user_manager):
+        self.user_manager = user_manager
+
+    def get_settings(self, request):
+        file = self.user_manager.get_request_user_filepath(
+            request, "comfy.settings.json")
+        if os.path.isfile(file):
+            with open(file) as f:
+                return json.load(f)
+        else:
+            return {}
+
+    def save_settings(self, request, settings):
+        file = self.user_manager.get_request_user_filepath(
+            request, "comfy.settings.json")
+        with open(file, "w") as f:
+            f.write(json.dumps(settings))
+
+    def add_routes(self, routes):
+        @routes.get("/settings")
+        async def get_settings(request):
+            return web.json_response(self.get_settings(request))
+
+        @routes.get("/settings/{id}")
+        async def get_setting(request):
+            value = None
+            settings = self.get_settings(request)
+            setting_id = request.match_info.get("id", None)
+            if setting_id and setting_id in settings:
+                value = settings[setting_id]
+            return web.json_response(value)
+
+        @routes.post("/settings")
+        async def post_settings(request):
+            settings = self.get_settings(request)
+            new_settings = await request.json()
+            self.save_settings(request, {**settings, **new_settings})
+            return web.Response(status=200)
+
+        @routes.post("/settings/{id}")
+        async def post_setting(request):
+            setting_id = request.match_info.get("id", None)
+            if not setting_id:
+                return web.Response(status=400)
+            settings = self.get_settings(request)
+            settings[setting_id] = await request.json()
+            self.save_settings(request, settings)
+            return web.Response(status=200)

app/user_manager.py

@@ -0,0 +1,95 @@
+import json
+import os
+import re
+import uuid
+from aiohttp import web
+from comfy.cli_args import args
+from folder_paths import user_directory
+from .app_settings import AppSettings
+
+default_user = "default"
+users_file = os.path.join(user_directory, "users.json")
+
+
+class UserManager():
+    def __init__(self):
+        global user_directory
+
+        self.settings = AppSettings(self)
+        if not os.path.exists(user_directory):
+            os.mkdir(user_directory)
+
+        if args.multi_user:
+            if os.path.isfile(users_file):
+                with open(users_file) as f:
+                    self.users = json.load(f)
+            else:
+                self.users = {}
+        else:
+            self.users = {"default": "default"}
+
+    def get_request_user_id(self, request, default_user="default"):
+        user = default_user
+        if args.multi_user and "comfy-user" in request.headers:
+            user = request.headers["comfy-user"]
+
+        if user not in self.users:
+            raise KeyError("Unknown user: " + user)
+
+        return user
+
+    def get_request_user_filepath(self, request, file, type="userdata", default_user="default"):
+        global user_directory
+
+        if type == "userdata":
+            root_dir = user_directory
+        else:
+            raise KeyError("Unknown filepath type:" + type)
+
+        user = self.get_request_user_id(request, default_user)
+        user_root = os.path.abspath(os.path.join(root_dir, user))
+
+        # prevent leaving /{type}
+        if os.path.commonpath((root_dir, user_root)) != root_dir:
+            return None
+
+        # prevent leaving /{type}/{user}
+        path = os.path.abspath(os.path.join(user_root, file))
+        if os.path.commonpath((user_root, path)) != user_root:
+            return None
+
+        if not os.path.exists(user_root):
+            os.mkdir(user_root)
+
+        return path
+
+    def add_user(self, name):
+        name = name.strip()
+        if not name:
+            raise ValueError("username not provided")
+        user_id = re.sub("[^a-zA-Z0-9-_]+", '-', name)
+        user_id = user_id + "_" + str(uuid.uuid4())
+
+        self.users[user_id] = name
+
+        global users_file
+        with open(users_file, "w") as f:
+            json.dump(self.users, f)
+
+        return user_id
+
+    def add_routes(self, routes):
+        self.settings.add_routes(routes)
+
+        @routes.get("/users")
+        async def get_users(request):
+            if args.multi_user:
+                return web.json_response(self.users)
+            else:
+                return web.json_response(None)
+
+        @routes.post("/users")
+        async def post_users(request):
+            body = await request.json()
+            user_id = self.add_user(body["username"])
+            return web.json_response(user_id)

comfy/cli_args.py

@@ -106,6 +106,9 @@ parser.add_argument("--windows-standalone-build", action="store_true", help="Win
 
 parser.add_argument("--disable-metadata", action="store_true", help="Disable saving prompt metadata in files.")
 
+user_group = parser.add_mutually_exclusive_group()
+user_group.add_argument("--multi-user", action="store_true", help="Enables per-user settings.")
+
 if comfy.options.args_parsing:
     args = parser.parse_args()
 else:

folder_paths.py

@@ -34,6 +34,7 @@ folder_names_and_paths["classifiers"] = ([os.path.join(models_dir, "classifiers"
 output_directory = os.path.join(os.path.dirname(os.path.realpath(__file__)), "output")
 temp_directory = os.path.join(os.path.dirname(os.path.realpath(__file__)), "temp")
 input_directory = os.path.join(os.path.dirname(os.path.realpath(__file__)), "input")
+user_directory = os.path.join(os.path.dirname(os.path.realpath(__file__)), "user")
 
 filename_list_cache = {}
 

server.py

@@ -30,6 +30,7 @@ from comfy.cli_args import args
 import comfy.utils
 import comfy.model_management
 
+from app.user_manager import UserManager
 
 class BinaryEventTypes:
     PREVIEW_IMAGE = 1
@@ -72,6 +73,7 @@ class PromptServer():
         mimetypes.init()
         mimetypes.types_map['.js'] = 'application/javascript; charset=utf-8'
 
+        self.user_manager = UserManager()
         self.supports = ["custom_nodes_from_web"]
         self.prompt_queue = None
         self.loop = loop
@@ -521,6 +523,7 @@ class PromptServer():
             return web.Response(status=200)
         
     def add_routes(self):
+        self.user_manager.add_routes(self.routes)
         self.app.add_routes(self.routes)
 
         for name, dir in nodes.EXTENSION_WEB_DIRS.items():

web/index.html

@@ -16,5 +16,33 @@
 			window.graph = app.graph;
 		</script>
 	</head>
-	<body class="litegraph"></body>
+	<body class="litegraph">
+		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
+			<main class="comfy-user-selection-inner">
+				<h1>ComfyUI</h1>
+				<form>
+					<section>
+						<label>New user:
+							<input placeholder="Enter a username" />
+						</label>
+					</section>
+					<div class="comfy-user-existing">
+						<span class="or-separator">OR</span>
+						<section>
+							<label>
+								Existing user:
+								<select>
+									<option hidden disabled selected value> Select a user </option>
+								</select>
+							</label>
+						</section>
+					</div>
+					<footer>
+						<span class="comfy-user-error">&nbsp;</span>
+						<button class="comfy-btn comfy-user-button-next">Next</button>
+					</footer>
+				</form>
+			</main>
+		</div>
+	</body>
 </html>

web/scripts/api.js

@@ -12,6 +12,13 @@ class ComfyApi extends EventTarget {
 	}
 
 	fetchApi(route, options) {
+		if (!options) {
+			options = {};
+		}
+		if (!options.headers) {
+			options.headers = {};
+		}
+		options.headers["Comfy-User"] = this.user;
 		return fetch(this.apiURL(route), options);
 	}
 
@@ -315,6 +322,44 @@ class ComfyApi extends EventTarget {
 	async interrupt() {
 		await this.#postItem("interrupt", null);
 	}
+
+	/**
+	 * Gets a list of all setting values for the current user
+	 * @returns { Promise<string, unknown> }
+	 */
+	async getSettings() {
+		return (await this.fetchApi("/settings")).json();
+	}
+
+	/**
+	 * Gets a setting for the current user
+	 * @returns { Promise<unknown> }
+	 */
+	async getSetting(id) {
+		return (await this.fetchApi(`/settings/${encodeURIComponent(id)}`)).json();
+	}
+
+	/**
+	 * Stores a dictionary of settings for the current user
+	 * @returns { Promise<void> }
+	 */
+	async storeSettings(settings) {
+		return this.fetchApi(`/settings`, {
+			method: "POST",
+			body: JSON.stringify(settings)
+		});
+	}
+
+	/**
+	 * Stores a setting for the current user
+	 * @returns { Promise<void> }
+	 */
+	async storeSetting(id, value) {
+		return this.fetchApi(`/settings/${encodeURIComponent(id)}`, {
+			method: "POST",
+			body: JSON.stringify(value)
+		});
+	}
 }
 
 export const api = new ComfyApi();

web/scripts/app.js

@@ -1287,10 +1287,87 @@ export class ComfyApp {
 	    await Promise.all(extensionPromises);
 	}
 
+	async #migrateSettings() {
+		this.isNewUserSession = true;
+		// Store all current settings
+		const settings = Object.keys(this.ui.settings).reduce((p, n) => {
+			const v = localStorage[`Comfy.Settings.${n}`];
+			if (v) {
+				try {
+					p[n] = JSON.parse(v);
+				} catch (error) {}
+			}
+			return p;
+		}, {});
+
+		await api.storeSettings(settings);
+	}
+
+	async #setUser() {
+		const users = await (await api.fetchApi("users")).json();
+		if(typeof users === "boolean") {
+			// Single user mode returns true/false for if the default user is created
+			if(!users) {
+				// Default user not created yet
+				await this.#migrateSettings();
+			}
+			return;
+		}
+
+		this.multiUserServer = true;
+		let user = localStorage["Comfy.userId"];
+		if (!user || !users[user]) {
+			// This will rarely be hit so move the loading to on demand
+			const { UserSelectionDialog } = await import("./ui/userSelection.js");
+			const { userId, username, created } = await new UserSelectionDialog().show(users, user);
+			user = userId;
+			localStorage["Comfy.userName"] = username;
+			localStorage["Comfy.userId"] = user;
+
+			if (created) {
+				api.user = user;
+				await this.#migrateSettings();
+			}
+		}
+
+		api.user = user;
+
+		this.ui.settings.addSetting({
+			id: "Comfy.SwitchUser",
+			name: "Switch User",
+			type: (name) => {
+				let currentUser = localStorage["Comfy.userName"];
+				if (currentUser) {
+					currentUser = ` (${currentUser})`;
+				}
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							textContent: name,
+						}),
+					]),
+					$el("td", [
+						$el("button", {
+							textContent: name + (currentUser ?? ""),
+							onclick: () => {
+								delete localStorage["Comfy.userId"];
+								delete localStorage["Comfy.userName"];
+								window.location.reload();
+							},
+						}),
+					]),
+				]);
+			},
+		});
+	}
+
 	/**
 	 * Set up the app on the page
 	 */
 	async setup() {
+		await this.#setUser();
+		await this.ui.settings.load();
+		this.ui.menuContainer.style.display = "";
 		await this.#loadExtensions();
 
 		// Create and mount the LiteGraph in the DOM

web/scripts/ui.js

@@ -1,4 +1,8 @@
-import {api} from "./api.js";
+import { api } from "./api.js";
+import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js";
+import { ComfySettingsDialog } from "./ui/settings.js";
+
+export const ComfyDialog = _ComfyDialog;
 
 export function $el(tag, propsOrChildren, children) {
 	const split = tag.split(".");
@@ -167,267 +171,6 @@ function dragElement(dragEl, settings) {
 	}
 }
 
-export class ComfyDialog {
-	constructor() {
-		this.element = $el("div.comfy-modal", {parent: document.body}, [
-			$el("div.comfy-modal-content", [$el("p", {$: (p) => (this.textElement = p)}), ...this.createButtons()]),
-		]);
-	}
-
-	createButtons() {
-		return [
-			$el("button", {
-				type: "button",
-				textContent: "Close",
-				onclick: () => this.close(),
-			}),
-		];
-	}
-
-	close() {
-		this.element.style.display = "none";
-	}
-
-	show(html) {
-		if (typeof html === "string") {
-			this.textElement.innerHTML = html;
-		} else {
-			this.textElement.replaceChildren(html);
-		}
-		this.element.style.display = "flex";
-	}
-}
-
-class ComfySettingsDialog extends ComfyDialog {
-	constructor() {
-		super();
-		this.element = $el("dialog", {
-			id: "comfy-settings-dialog",
-			parent: document.body,
-		}, [
-			$el("table.comfy-modal-content.comfy-table", [
-				$el("caption", {textContent: "Settings"}),
-				$el("tbody", {$: (tbody) => (this.textElement = tbody)}),
-				$el("button", {
-					type: "button",
-					textContent: "Close",
-					style: {
-						cursor: "pointer",
-					},
-					onclick: () => {
-						this.element.close();
-					},
-				}),
-			]),
-		]);
-		this.settings = [];
-	}
-
-	getSettingValue(id, defaultValue) {
-		const settingId = "Comfy.Settings." + id;
-		const v = localStorage[settingId];
-		return v == null ? defaultValue : JSON.parse(v);
-	}
-
-	setSettingValue(id, value) {
-		const settingId = "Comfy.Settings." + id;
-		localStorage[settingId] = JSON.stringify(value);
-	}
-
-	addSetting({id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined}) {
-		if (!id) {
-			throw new Error("Settings must have an ID");
-		}
-
-		if (this.settings.find((s) => s.id === id)) {
-			throw new Error(`Setting ${id} of type ${type} must have a unique ID.`);
-		}
-
-		const settingId = `Comfy.Settings.${id}`;
-		const v = localStorage[settingId];
-		let value = v == null ? defaultValue : JSON.parse(v);
-
-		// Trigger initial setting of value
-		if (onChange) {
-			onChange(value, undefined);
-		}
-
-		this.settings.push({
-			render: () => {
-				const setter = (v) => {
-					if (onChange) {
-						onChange(v, value);
-					}
-					localStorage[settingId] = JSON.stringify(v);
-					value = v;
-				};
-				value = this.getSettingValue(id, defaultValue);
-
-				let element;
-				const htmlID = id.replaceAll(".", "-");
-
-				const labelCell = $el("td", [
-					$el("label", {
-						for: htmlID,
-						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
-						textContent: name,
-					})
-				]);
-
-				if (typeof type === "function") {
-					element = type(name, setter, value, attrs);
-				} else {
-					switch (type) {
-						case "boolean":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("input", {
-										id: htmlID,
-										type: "checkbox",
-										checked: value,
-										onchange: (event) => {
-											const isChecked = event.target.checked;
-											if (onChange !== undefined) {
-												onChange(isChecked)
-											}
-											this.setSettingValue(id, isChecked);
-										},
-									}),
-								]),
-							])
-							break;
-						case "number":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("input", {
-										type,
-										value,
-										id: htmlID,
-										oninput: (e) => {
-											setter(e.target.value);
-										},
-										...attrs
-									}),
-								]),
-							]);
-							break;
-						case "slider":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("div", {
-										style: {
-											display: "grid",
-											gridAutoFlow: "column",
-										},
-									}, [
-										$el("input", {
-											...attrs,
-											value,
-											type: "range",
-											oninput: (e) => {
-												setter(e.target.value);
-												e.target.nextElementSibling.value = e.target.value;
-											},
-										}),
-										$el("input", {
-											...attrs,
-											value,
-											id: htmlID,
-											type: "number",
-											style: {maxWidth: "4rem"},
-											oninput: (e) => {
-												setter(e.target.value);
-												e.target.previousElementSibling.value = e.target.value;
-											},
-										}),
-									]),
-								]),
-							]);
-							break;
-						case "combo":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el(
-										"select",
-										{
-											oninput: (e) => {
-												setter(e.target.value);
-											},
-										},
-										(typeof options === "function" ? options(value) : options || []).map((opt) => {
-											if (typeof opt === "string") {
-												opt = { text: opt };
-											}
-											const v = opt.value ?? opt.text;
-											return $el("option", {
-												value: v,
-												textContent: opt.text,
-												selected: value + "" === v + "",
-											});
-										})
-									),
-								]),
-							]);
-							break;
-						case "text":
-						default:
-							if (type !== "text") {
-								console.warn(`Unsupported setting type '${type}, defaulting to text`);
-							}
-
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("input", {
-										value,
-										id: htmlID,
-										oninput: (e) => {
-											setter(e.target.value);
-										},
-										...attrs,
-									}),
-								]),
-							]);
-							break;
-					}
-				}
-				if (tooltip) {
-					element.title = tooltip;
-				}
-
-				return element;
-			},
-		});
-
-		const self = this;
-		return {
-			get value() {
-				return self.getSettingValue(id, defaultValue);
-			},
-			set value(v) {
-				self.setSettingValue(id, v);
-			},
-		};
-	}
-
-	show() {
-		this.textElement.replaceChildren(
-			$el("tr", {
-				style: {display: "none"},
-			}, [
-				$el("th"),
-				$el("th", {style: {width: "33%"}})
-			]),
-			...this.settings.map((s) => s.render()),
-		)
-		this.element.showModal();
-	}
-}
-
 class ComfyList {
 	#type;
 	#text;
@@ -526,7 +269,7 @@ export class ComfyUI {
 	constructor(app) {
 		this.app = app;
 		this.dialog = new ComfyDialog();
-		this.settings = new ComfySettingsDialog();
+		this.settings = new ComfySettingsDialog(app);
 
 		this.batchCount = 1;
 		this.lastQueueSize = 0;

web/scripts/ui/dialog.js

@@ -0,0 +1,32 @@
+import { $el } from "../ui.js";
+
+export class ComfyDialog {
+	constructor() {
+		this.element = $el("div.comfy-modal", { parent: document.body }, [
+			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
+		]);
+	}
+
+	createButtons() {
+		return [
+			$el("button", {
+				type: "button",
+				textContent: "Close",
+				onclick: () => this.close(),
+			}),
+		];
+	}
+
+	close() {
+		this.element.style.display = "none";
+	}
+
+	show(html) {
+		if (typeof html === "string") {
+			this.textElement.innerHTML = html;
+		} else {
+			this.textElement.replaceChildren(html);
+		}
+		this.element.style.display = "flex";
+	}
+}

web/scripts/ui/settings.js

@@ -0,0 +1,282 @@
+import { $el } from "../ui.js";
+import { api } from "../api.js";
+import { ComfyDialog } from "./dialog.js";
+
+export class ComfySettingsDialog extends ComfyDialog {
+	constructor(app) {
+		super();
+		this.app = app;
+		this.settingsValues = {};
+		this.settingsLookup = {};
+		this.element = $el(
+			"dialog",
+			{
+				id: "comfy-settings-dialog",
+				parent: document.body,
+			},
+			[
+				$el("table.comfy-modal-content.comfy-table", [
+					$el("caption", { textContent: "Settings" }),
+					$el("tbody", { $: (tbody) => (this.textElement = tbody) }),
+					$el("button", {
+						type: "button",
+						textContent: "Close",
+						style: {
+							cursor: "pointer",
+						},
+						onclick: () => {
+							this.element.close();
+						},
+					}),
+				]),
+			]
+		);
+	}
+
+	get settings() {
+		return Object.values(this.settingsLookup);
+	}
+
+	async load() {
+		this.settingsValues = await api.getSettings();
+	}
+
+	getSettingValue(id, defaultValue) {
+		return this.settingsValues[id] ?? defaultValue;
+	}
+
+	async setSettingValueAsync(id, value) {
+		const json = JSON.stringify(value);
+		localStorage["Comfy.Settings." + id] = json; // backwards compatibility for extensions keep setting in storage
+
+		let oldValue = this.settingsValues[id];
+		this.settingsValues[id] = value;
+
+		if (id in this.settingsLookup) {
+			this.settingsLookup[id].onChange?.(value, oldValue);
+		}
+
+		await api.storeSetting(id, value);
+	}
+
+	setSettingValue(id, value) {
+		this.setSettingValueAsync(id, value).catch((err) => {
+			alert(`Error saving setting '${id}'`);
+			console.error(err);
+		});
+	}
+
+	addSetting({ id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined }) {
+		if (!id) {
+			throw new Error("Settings must have an ID");
+		}
+
+		if (id in this.settingsLookup) {
+			throw new Error(`Setting ${id} of type ${type} must have a unique ID.`);
+		}
+
+		let skipOnChange = false;
+		let value = this.settingsValues[id];
+		if (value == null) {
+			if (this.app.isNewUserSession) {
+				// Check if we have a localStorage value but not a setting value and we are a new user
+				const localValue = localStorage["Comfy.Settings." + id];
+				if (localValue) {
+					value = JSON.parse(localValue);
+					this.setSettingValue(id, value); // Store on the server
+				}
+			}
+			if (value == null) {
+				value = defaultValue;
+			}
+		}
+
+		// Trigger initial setting of value
+		if (!skipOnChange) {
+			onChange?.(value, undefined);
+		}
+
+		this.settingsLookup[id] = {
+			id,
+			onChange,
+			name,
+			render: () => {
+				const setter = (v) => {
+					if (onChange) {
+						onChange(v, value);
+					}
+
+					this.setSettingValue(id, v);
+					value = v;
+				};
+				value = this.getSettingValue(id, defaultValue);
+
+				let element;
+				const htmlID = id.replaceAll(".", "-");
+
+				const labelCell = $el("td", [
+					$el("label", {
+						for: htmlID,
+						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
+						textContent: name,
+					}),
+				]);
+
+				if (typeof type === "function") {
+					element = type(name, setter, value, attrs);
+				} else {
+					switch (type) {
+						case "boolean":
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el("input", {
+										id: htmlID,
+										type: "checkbox",
+										checked: value,
+										onchange: (event) => {
+											const isChecked = event.target.checked;
+											if (onChange !== undefined) {
+												onChange(isChecked);
+											}
+											this.setSettingValue(id, isChecked);
+										},
+									}),
+								]),
+							]);
+							break;
+						case "number":
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el("input", {
+										type,
+										value,
+										id: htmlID,
+										oninput: (e) => {
+											setter(e.target.value);
+										},
+										...attrs,
+									}),
+								]),
+							]);
+							break;
+						case "slider":
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el(
+										"div",
+										{
+											style: {
+												display: "grid",
+												gridAutoFlow: "column",
+											},
+										},
+										[
+											$el("input", {
+												...attrs,
+												value,
+												type: "range",
+												oninput: (e) => {
+													setter(e.target.value);
+													e.target.nextElementSibling.value = e.target.value;
+												},
+											}),
+											$el("input", {
+												...attrs,
+												value,
+												id: htmlID,
+												type: "number",
+												style: { maxWidth: "4rem" },
+												oninput: (e) => {
+													setter(e.target.value);
+													e.target.previousElementSibling.value = e.target.value;
+												},
+											}),
+										]
+									),
+								]),
+							]);
+							break;
+						case "combo":
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el(
+										"select",
+										{
+											oninput: (e) => {
+												setter(e.target.value);
+											},
+										},
+										(typeof options === "function" ? options(value) : options || []).map((opt) => {
+											if (typeof opt === "string") {
+												opt = { text: opt };
+											}
+											const v = opt.value ?? opt.text;
+											return $el("option", {
+												value: v,
+												textContent: opt.text,
+												selected: value + "" === v + "",
+											});
+										})
+									),
+								]),
+							]);
+							break;
+						case "text":
+						default:
+							if (type !== "text") {
+								console.warn(`Unsupported setting type '${type}, defaulting to text`);
+							}
+
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el("input", {
+										value,
+										id: htmlID,
+										oninput: (e) => {
+											setter(e.target.value);
+										},
+										...attrs,
+									}),
+								]),
+							]);
+							break;
+					}
+				}
+				if (tooltip) {
+					element.title = tooltip;
+				}
+
+				return element;
+			},
+		};
+
+		const self = this;
+		return {
+			get value() {
+				return self.getSettingValue(id, defaultValue);
+			},
+			set value(v) {
+				self.setSettingValue(id, v);
+			},
+		};
+	}
+
+	show() {
+		this.textElement.replaceChildren(
+			$el(
+				"tr",
+				{
+					style: { display: "none" },
+				},
+				[$el("th"), $el("th", { style: { width: "33%" } })]
+			),
+			...this.settings.sort((a, b) => a.name.localeCompare(b.name)).map((s) => s.render())
+		);
+		this.element.showModal();
+	}
+}

web/scripts/ui/spinner.css

@@ -0,0 +1,34 @@
+.lds-ring {
+	display: inline-block;
+	position: relative;
+	width: 1em;
+	height: 1em;
+}
+.lds-ring div {
+	box-sizing: border-box;
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border: 0.15em solid #fff;
+	border-radius: 50%;
+	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+	border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+	animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+	animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+	animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

web/scripts/ui/spinner.js

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,135 @@
+.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;
+}

web/scripts/ui/userSelection.js

@@ -0,0 +1,113 @@
+import { api } from "../api.js";
+import { $el } from "../ui.js";
+import { addStylesheet } from "../utils.js";
+import { createSpinner } from "./spinner.js";
+
+export class UserSelectionDialog {
+	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(async (r) => {
+			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.";
+					return;
+				} 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.fetchApi("/users", {
+							method: "POST",
+							headers: {
+								"Content-Type": "application/json",
+							},
+							body: JSON.stringify({ username }),
+						});
+						if (resp.status >= 300) {
+							throw new Error("Error creating user: " + resp.status + " " + resp.statusText);
+						}
+
+						r({ 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 {
+					r({ 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 input, 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

@@ -0,0 +1,20 @@
+import { $el } from "./ui.js";
+
+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,