Mercurial Hosting > chat

local Luan = require "luan:Luan.luan"
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"
local head = Shared.head or error()
local header = Shared.header or error()
local Utils = require "site:/lib/Utils.luan"
local base_url = Utils.base_url or error()
local User = require "site:/lib/User.luan"
local current_user = User.current_required or error()


return function()
	local user = current_user()
	if user == nil then return end
	Io.stdout = Http.response.text_writer()
%>
<!doctype html>
<html>
	<head>
<%		head() %>
		<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';
			}

			function editNotify() {
				let dialog = document.querySelector('dialog[edit_notify]');
				let input = dialog.querySelector('input[name=notify_email]');
				input.value = notifyEmail;
				let radio = dialog.querySelector(`input[type=radio][value=${multiNotify}]`);
				radio.checked = true;
				openModal(dialog);
			}

			function saveNotify() {
				let dialog = document.querySelector('dialog[edit_notify]');
				let input = dialog.querySelector('input[name=notify_email]');
				notifyEmail = input.value;
				let radio = dialog.querySelector('input[type=radio]:checked');
				multiNotify = radio.value === 'true';
				closeModal(input);
				showNotify();
				ajax(`save_notify.js?email=${encodeURIComponent(notifyEmail)}&multi=${multiNotify}`);
			}

			function showVoice() {
				let span = document.querySelector('span[voice]');
				span.textContent = voice ? `Your voice URL is ${voice}` : 'No voice URL';
			}

			function editVoice() {
				let dialog = document.querySelector('dialog[edit_voice]');
				let input = dialog.querySelector('input[name=voice]');
				input.value = voice;
				openModal(dialog);
			}

			function saveVoice() {
				let dialog = document.querySelector('dialog[edit_voice]');
				let input = dialog.querySelector('input[name=voice]');
				voice = input.value;
				closeModal(input);
				showVoice();
				ajax(`save_voice.js?url=${encodeURIComponent(voice)}`);
			}

			function deleteUser() {
				let dialog = document.querySelector('dialog[delete_user]');
				openModal(dialog);
			}

			function doDeleteUser(el) {
				closeModal(el);
				ajax('delete_user.js');
			}

			function init() {
				showUsername();
				showNotify();
				showVoice();
			}
		</script>
		<style>
			h1 {
				text-align: center;
			}
			input[name] {
				max-width: 100%;
			}
			input[name=username] {
				width: 300px;
			}
			input[name=notify_email] {
				width: 500px;
			}
			input[name=voice] {
				width: 500px;
			}
			span[note] {
				font-size: small;
			}
		</style>
	</head>
	<body>
<%		header() %>
		<div content>
			<h1>Your Account</h1>
			<p>Your username is <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>Your chat URL is <%= base_url() %>/chat?with=<%=user.email%></p>
			<p><a href="javascript:logout()">Logout</a></p>
			<p><a href="javascript:deleteUser()">Delete account</a></p>
			<p>&nbsp;</p>
			<p><a href="about.html">About Luan Chat</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 onclick="closeModal(this)">Cancel</button>
					<button type=submit>Save</button>
				</div>
			</form>
		</dialog>
		<dialog edit_notify>
			<h2>Edit Notification</h2>
			<form action="javascript:saveNotify()">
				<p>
					<label>Send notifications to</label><br>
					<input type=email multiple name=notify_email><br>
					<span note>Leave blank for no notifications.  Use <a href="https://pushover.net/">Pushover</a> for app notification.</span>
				</p>
				<p>
					<label clickable>
						<input type=radio name=multi_notify value=false>
						Notify only for first message
					</label><br>
					<label clickable>
						<input type=radio name=multi_notify value=true>
						Notify for all messages
					</label>
				</p>
				<div buttons>
					<button type=button onclick="closeModal(this)">Cancel</button>
					<button type=submit>Save</button>
				</div>
			</form>
		</dialog>
		<dialog edit_voice>
			<h2>Edit Voice URL</h2>
			<form action="javascript:saveVoice()">
				<p>
					<label>URL for receiving voice calls</label><br>
					<input type=url name=voice><br>
					<span note>Leave blank for no voice URL.  We recommend <a href="https://talky.io/">Talky</a>.</span>
				</p>
				<div buttons>
					<button type=button onclick="closeModal(this)">Cancel</button>
					<button type=submit>Save</button>
				</div>
			</form>
		</dialog>
		<dialog delete_user>
			<h2>Delete Account</h2>
			<p>Are you sure that you want to delete your account?</p>
			<div buttons>
				<button onclick="closeModal(this)">Cancel</button>
				<button onclick="doDeleteUser(this)">Delete</button>
			</div>
		</dialog>
		<script> init(); </script>
		<!-- ID = <%=user.id%> -->
	</body>
</html>
<%
end
author	Franklin Schmidt <fschmidt@gmail.com>
date	Thu, 06 Mar 2025 03:09:24 -0700
parents	ad9772fc588a
children	e4e331539146