make the main settings ui a bit nicer

1 files changed, 15 insertions, 8 deletions

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