make the main settings ui a bit nicer

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();
 			});
 		};