Tweaks to the Web interface #108
Conversation
|
A first version for the PIN page makes the PIN input larger and removes the separate alerts in favour of in-form validation. This version also disables the button while the request is being made, and unlocks when that request succeeds or fails.
|
|
A first version of the password page tweaks layout, rename the name of the page from password to credentials and disables the submit button while loading |
|
The index page and unused clients page have been updated to the new layout style |
|
A first version of the config page updates the layout, adds a loading spinner and disables the button disables while loading |
|
A first partial version of the applications pages features a new list of applications and adds loading behavior to the create and save buttons. The actual form still needs tweaking and adding some form validation would also be nice to avoid creating apps without names. |
| <form action="#" id="form"> | ||
| <div class="mb-3"> | ||
| <label for="input" class="form-label">PIN code</label> | ||
| <input type="text" class="form-control form-control-lg" id="input" name="pin" placeholder="1234" |
There was a problem hiding this comment.
Making this a type="number" can help on mobile keyboard, since it will show only the numbers on smartphones
| formElement.addEventListener("submit", (e) => { | ||
| e.preventDefault(); | ||
| submit.disabled = true; | ||
| // TODO: Check for empty or null values |
There was a problem hiding this comment.
required on PIN should be enough IIRC
| submit.disabled = true; | ||
| // TODO: Check for empty or null values | ||
| const body = JSON.stringify({ pin: input.value }); | ||
| fetch("/api/pin", { method: "POST", body }) |
There was a problem hiding this comment.
Can we remove both is-valid and is-invalid before fetching? This way the feedback does not stay on screen while making multiple calls
| </div> | ||
| <div class="d-flex justify-content-between"> | ||
| <input type="text" class="form-control monospace" v-model="detachedCmd"> | ||
| <button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">+</button> |
There was a problem hiding this comment.
Adding a :disabled="detatchedCmd.length == 0" in the button would avoid adding empty detatched commands
This pull request makes changes and tweaks to the Sunshine Web interface added in #89.
The first set of commits make technical changes, like updating Bootstrap and outputting valid HTML by adding missing tags for
bodyandhtml. A possible future commit would be to de-duplicate the imports of static files, allowing to import them once instead.The second set of changes will update the individual pages, both visually and logically, to make it easier for the user to navigate through the interface. This includes new headers with explicit titles and descriptions, put forward the actions the user probably wants to do, like adding an application and indicate to the users when things are loading by disabling buttons and showing spinners.
This pull request is still under active development, some pages are still being worked on like the Applications and Configuration pages.