diff options
| -rw-r--r-- | web/index.html | 37 | ||||
| -rw-r--r-- | web/js/main.js | 23 |
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(); }); }; |