2024-09-05 22:56:01 +00:00
|
|
|
{"version":3,"file":"userSelection-DSpF-zVD.js","sources":["../../src/scripts/ui/userSelection.ts"],"sourcesContent":["import { api } from '../api'\nimport { $el } from '../ui'\nimport { createSpinner } from './spinner'\nimport './userSelection.css'\n\ninterface SelectedUser {\n username: string\n userId: string\n created: boolean\n}\n\nexport class UserSelectionScreen {\n async show(users, user): Promise<SelectedUser> {\n const userSelection = document.getElementById('comfy-user-selection')\n userSelection.style.display = ''\n return new Promise((resolve) => {\n const input = userSelection.getElementsByTagName('input')[0]\n const select = userSelection.getElementsByTagName('select')[0]\n const inputSection = input.closest('section')\n const selectSection = select.closest('section')\n const form = userSelection.getElementsByTagName('form')[0]\n const error = userSelection.getElementsByClassName('comfy-user-error')[0]\n const button = userSelection.getElementsByClassName(\n 'comfy-user-button-next'\n )[0]\n\n let inputActive = null\n input.addEventListener('focus', () => {\n inputSection.classList.add('selected')\n selectSection.classList.remove('selected')\n inputActive = true\n })\n select.addEventListener('focus', () => {\n inputSection.classList.remove('selected')\n selectSection.classList.add('selected')\n inputActive = false\n select.style.color = ''\n })\n select.addEventListener('blur', () => {\n if (!select.value) {\n select.style.color = 'var(--descrip-text)'\n }\n })\n\n form.addEventListener('submit', async (e) => {\n e.preventDefault()\n if (inputActive == null) {\n error.textContent =\n 'Please enter a username or select an existing user.'\n } else if (inputActive) {\n const username = input.value.trim()\n if (!username) {\n error.textContent = 'Please enter a username.'\n return\n }\n\n // Create new user\n // Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339)\n // Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)\n input.disabled =\n select.disabled =\n // @ts-expect-error\n input.readonly =\n // @ts-expect-error\n select.readonly =\n true\n const spinner = createSpinner()\n button.prepend(spinner)\n try {\n const resp = await api.createUser(username)\n if (resp.status >= 300) {\n let message =\n 'Error creating user: ' + resp.status + ' ' + resp.statusText\n try {\n const res = await resp.json()\n if (res.error) {\n message = res.error\n }\n } catch (error) {}\n throw new Error(message)\n }\n\n resolve({ username, userId: await resp.json(), created: true })\n } catch (err) {\n spinner.remove()\n error.textContent =\n err.message ??\n err.statusText ??\n err ??\n 'An unknown error occurred.'\n // Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339)\n // Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)\n input.disabled =\n select.disabled =\n // @ts-expect-error\n input.readonly =\n // @ts-expect-error\n select.readonly =\n false\n return\n }\n } else if (!select.value) {\n error.textContent = 'Please select an existing user.'\n return\n } else {\n resolve({\n username: users[select.value],\n userId: select.value,\n created: false\n
|
