summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorpennae <github@quasiparticle.net>2022-07-23 22:41:42 +0200
committerpennae <github@quasiparticle.net>2022-07-23 23:54:19 +0200
commit9aacaaf079373f8bc25f0533d7f6218e691c5de7 (patch)
tree671d2da8348fc220df9d7b33e0a5338dc4d2d1b6 /web
parent2e65f3bb5e561d1d44290b42d43312b52341c45b (diff)
downloadminor-skulk-9aacaaf079373f8bc25f0533d7f6218e691c5de7.tar.gz
minor-skulk-9aacaaf079373f8bc25f0533d7f6218e691c5de7.tar.xz
minor-skulk-9aacaaf079373f8bc25f0533d7f6218e691c5de7.zip
make the main settings ui a bit nicer
Diffstat (limited to 'web')
-rw-r--r--web/index.html37
-rw-r--r--web/js/main.js23
2 files changed, 45 insertions, 15 deletions
diff --git a/web/index.html b/web/index.html
index dd60e7d..d3291f0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,6 +47,13 @@
margin-left: 1em;
}
+ .dialog input {
+ margin: 0.5em;
+ }
+ .dialog input[type=submit] {
+ margin: 0.5em 25%;
+ }
+
hr {
width: 100%;
}
@@ -148,6 +155,7 @@
<template id="tpl-desktop-signin">
<div class="container dialog">
<credentials-form submit-text="sign in"></credentials-form>
+ <hr>
<div>
<a href="#/signup" class="_signup">sign up</a> |
<a href="#/reset-password" class="_reset">reset password</a>
@@ -257,20 +265,35 @@
<template id="tpl-desktop-settings-main">
<style>
+ #frm-avatar input {
+ vertical-align: top;
+ margin-left: 1em;
+ }
+
#avatar-img {
max-width: 200px;
max-height: 200px;
}
+
+ h2 {
+ display: inline;
+ }
+
+ h2:empty::before {
+ color: #888;
+ content: "(no name set)";
+ }
+
+ form {
+ margin: 1em 0;
+ }
</style>
+ <h2 id="name"></h2>
+ <a href="" class="_change-name"><small>change</small></a>
<form id="frm-avatar">
<img id="avatar-img">
- <input type="file" accept="image/*" name="avatar">
- <input type="submit" value="save">
- </form>
- <form id="frm-name">
- <label for="name">user name:</label>
- <input type="text" id="name" name="name" maxlength="256">
- <input type="submit" value="save">
+ <input type="file" accept="image/*" name="avatar" hidden>
+ <input type="submit" value="change avatar">
</form>
<table id="clients">
<thead>
diff --git a/web/js/main.js b/web/js/main.js
index edb41b1..3c1f23a 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -545,19 +545,26 @@ class SettingsMain extends HTMLElement {
let initProfile = async () => {
let profile = await pc.getProfile();
- this.querySelector("#name").value = profile.displayName || "";
- this.querySelector("#frm-name").onsubmit = wrapHandler(async ev => {
+ this.querySelector("#name").innerText = profile.displayName || "";
+ this.querySelector("a._change-name").onclick = wrapHandler(async ev => {
ev.preventDefault();
- showMessage("Applying ...")
- await pc.setDisplayName(ev.target['name'].value);
- hideMessage();
+ const name = prompt("please enter your new display name", profile.displayName || "");
+ if (name !== null) {
+ showMessage("Applying ...")
+ await pc.setDisplayName(name);
+ hideMessage();
+ await this._display();
+ }
});
this.querySelector("#avatar-img").src = profile.avatar;
this.querySelector("#frm-avatar").onsubmit = wrapHandler(async ev => {
ev.preventDefault();
- showMessage("Saving ...")
- await pc.setAvatar(ev.target['avatar'].files[0]);
- await this._display();
+ ev.target['avatar'].onchange = async ev => {
+ showMessage("Saving ...")
+ await pc.setAvatar(ev.target.files[0]);
+ await this._display();
+ };
+ ev.target['avatar'].click();
});
};