diff src/account.html.luan @ 46:42b741a1d5c6

add username
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 28 Feb 2025 19:25:12 -0700
parents e138343b2c76
children 8c6a2f602dbd
line wrap: on
line diff
--- a/src/account.html.luan	Fri Feb 28 14:37:11 2025 -0700
+++ b/src/account.html.luan	Fri Feb 28 19:25:12 2025 -0700
@@ -2,6 +2,8 @@
 local error = Luan.error
 local Parsers = require "luan:Parsers.luan"
 local json_string = Parsers.json_string or error()
+local Html = require "luan:Html.luan"
+local html_encode = Html.encode or error()
 local Io = require "luan:Io.luan"
 local Http = require "luan:http/Http.luan"
 local Shared = require "site:/lib/Shared.luan"
@@ -25,10 +27,33 @@
 		<script>
 			'use strict';
 
+			let email = <%= json_string(user.email) %>;
+			let username = <%= json_string(user.name) or "" %>;
 			let notifyEmail = <%= json_string(user.notify_email or "") %>;
 			let multiNotify = <%= user.multi_notify %>;
 			let voice = <%= json_string(user.voice_url or "") %>;
 
+			function showUsername() {
+				let span = document.querySelector('span[username]');
+				span.textContent = username || email;
+			}
+
+			function editUsername() {
+				let dialog = document.querySelector('dialog[edit_username]');
+				let input = dialog.querySelector('input[name=username]');
+				input.value = username;
+				openModal(dialog);
+			}
+
+			function saveUsername() {
+				let dialog = document.querySelector('dialog[edit_username]');
+				let input = dialog.querySelector('input[name=username]');
+				username = input.value;
+				closeModal(input);
+				showUsername();
+				ajax(`save_username.js?username=${encodeURIComponent(username)}`);
+			}
+
 			function showNotify() {
 				let span = document.querySelector('span[notify]');
 				span.textContent = notifyEmail ? `Send notifications to ${notifyEmail}` : 'No notifications';
@@ -86,6 +111,7 @@
 			}
 
 			function init() {
+				showUsername();
 				showNotify();
 				showVoice();
 			}
@@ -100,6 +126,7 @@
 			h1 {
 				text-align: center;
 			}
+			input[name=username],
 			input[name=notify_email] {
 				width: 300px;
 				max-width: 100%;
@@ -119,11 +146,25 @@
 			<h1>Your Account</h1>
 			<p><a href="about.html">About Web Chat</a></p>
 			<p>Your URL: <%= base_url() %>/?with=<%=user.email%></p>
+			<p>Your username: <span username></span> <a href="javascript:editUsername()">Edit</a></p>
 			<p><span notify></span> <a href="javascript:editNotify()">Edit</a></p>
 			<p><span voice></span> <a href="javascript:editVoice()">Edit</a></p>
 			<p><a href="javascript:logout()">Logout</a></p>
 			<p><a href="javascript:deleteUser()">Delete account</a></p>
 		</div>
+		<dialog edit_username>
+			<h2>Edit Username</h2>
+			<form action="javascript:saveUsername()">
+				<p>
+					<label>Username</label><br> 
+					<input type=text name=username placeholder="<%=html_encode(user.email)%>"><br>
+				</p>
+				<div buttons>
+					<button type=button cancel onclick="closeModal(this)">Cancel</button>
+					<button type=submit go>Save</button>
+				</div>
+			</form>
+		</dialog>
 		<dialog edit_notify>
 			<h2>Edit Notification</h2>
 			<form action="javascript:saveNotify()">