comparison src/account.html.luan @ 40:7ea33179592a

email notification
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 27 Feb 2025 16:44:20 -0700
parents 62d04ca486dd
children 818697418dbe
comparison
equal deleted inserted replaced
39:471b13e6ce2c 40:7ea33179592a
1 local Luan = require "luan:Luan.luan" 1 local Luan = require "luan:Luan.luan"
2 local error = Luan.error 2 local error = Luan.error
3 local Parsers = require "luan:Parsers.luan"
4 local json_string = Parsers.json_string or error()
3 local Io = require "luan:Io.luan" 5 local Io = require "luan:Io.luan"
4 local Http = require "luan:http/Http.luan" 6 local Http = require "luan:http/Http.luan"
5 local Shared = require "site:/lib/Shared.luan" 7 local Shared = require "site:/lib/Shared.luan"
6 local head = Shared.head or error() 8 local head = Shared.head or error()
7 local header = Shared.header or error() 9 local header = Shared.header or error()
12 14
13 15
14 return function() 16 return function()
15 local user = current_user() 17 local user = current_user()
16 if user == nil then return end 18 if user == nil then return end
19 local notify_email = user.notify_email
17 Io.stdout = Http.response.text_writer() 20 Io.stdout = Http.response.text_writer()
18 %> 21 %>
19 <!doctype html> 22 <!doctype html>
20 <html> 23 <html>
21 <head> 24 <head>
22 <% head() %> 25 <% head() %>
23 <script> 26 <script>
24 'use strict'; 27 'use strict';
25 28
29 let notifyEmail = <%= json_string(notify_email or "") %>;
30 let multiNotify = <%= user.multi_notify %>;
31
32 function showNotify() {
33 let span = document.querySelector('span[notify]');
34 span.textContent = notifyEmail ? `Send notifications to ${notifyEmail}` : 'No notifications'
35 }
36
37 function editNotify() {
38 let dialog = document.querySelector('dialog[edit_notify]');
39 let input = dialog.querySelector('input[name=notify_email]');
40 input.value = notifyEmail;
41 let radio = dialog.querySelector(`input[type=radio][value=${multiNotify}]`);
42 radio.checked = true;
43 openModal(dialog);
44 }
45
46 function saveNotify() {
47 let dialog = document.querySelector('dialog[edit_notify]');
48 let input = dialog.querySelector('input[name=notify_email]');
49 notifyEmail = input.value;
50 let radio = dialog.querySelector('input[type=radio]:checked');
51 multiNotify = radio.value === 'true';
52 closeModal(input);
53 showNotify();
54 ajax(`save_notify.js?email=${encodeURIComponent(notifyEmail)}&multi=${multiNotify}`);
55 }
56
26 function deleteUser() { 57 function deleteUser() {
27 let dialog = document.querySelector('dialog[delete_user]'); 58 let dialog = document.querySelector('dialog[delete_user]');
28 openModal(dialog); 59 openModal(dialog);
29 } 60 }
30 61
31 function doDeleteUser(el) { 62 function doDeleteUser(el) {
32 closeModal(el); 63 closeModal(el);
33 ajax('delete_user.js'); 64 ajax('delete_user.js');
65 }
66
67 function init() {
68 showNotify();
34 } 69 }
35 </script> 70 </script>
36 <style> 71 <style>
37 div[content] { 72 div[content] {
38 margin-left: auto; 73 margin-left: auto;
40 width: fit-content; 75 width: fit-content;
41 } 76 }
42 h1 { 77 h1 {
43 text-align: center; 78 text-align: center;
44 } 79 }
80 input[name=notify_email] {
81 width: 300px;
82 }
83 span[note] {
84 font-size: small;
85 }
45 </style> 86 </style>
46 </head> 87 </head>
47 <body> 88 <body>
48 <% header() %> 89 <% header() %>
49 <div content> 90 <div content>
50 <h1>Your Account</h1> 91 <h1>Your Account</h1>
51 <p><a href="about.html">About Web Chat</a></p> 92 <p><a href="about.html">About Web Chat</a></p>
52 <p>Your URL: <%= base_url() %>/?with=<%=user.email%></p> 93 <p>Your URL: <%= base_url() %>/?with=<%=user.email%></p>
94 <p><span notify></span> <a href="javascript:editNotify()">Edit</a></p>
53 <p><a href="javascript:logout()">Logout</a></p> 95 <p><a href="javascript:logout()">Logout</a></p>
54 <p><a href="javascript:deleteUser()">Delete account</a></p> 96 <p><a href="javascript:deleteUser()">Delete account</a></p>
55 </div> 97 </div>
98 <dialog edit_notify>
99 <h2>Edit Notification</h2>
100 <form action="javascript:saveNotify()">
101 <p>
102 <label>Send notifications to</label><br>
103 <input type=email name=notify_email><br>
104 <span note>Leave blank for no notifications</span>
105 </p>
106 <p>
107 <label clickable>
108 <input type=radio name=multi_notify value=false>
109 Notify only for first message
110 </label><br>
111 <label clickable>
112 <input type=radio name=multi_notify value=true>
113 Notify for all messages
114 </label>
115 </p>
116 <div buttons>
117 <button type=button cancel onclick="closeModal(this)">Cancel</button>
118 <button type=submit go>Save</button>
119 </div>
120 </form>
121 </dialog>
56 <dialog delete_user> 122 <dialog delete_user>
57 <h2>Delete Account</h2> 123 <h2>Delete Account</h2>
58 <p>Are you sure that you want to delete your account?</p> 124 <p>Are you sure that you want to delete your account?</p>
59 <div buttons> 125 <div buttons>
60 <button cancel onclick="closeModal(this)">Cancel</button> 126 <button cancel onclick="closeModal(this)">Cancel</button>
61 <button go onclick="doDeleteUser(this)">Delete</button> 127 <button go onclick="doDeleteUser(this)">Delete</button>
62 </div> 128 </div>
63 </dialog> 129 </dialog>
130 <script> init(); </script>
64 </body> 131 </body>
65 </html> 132 </html>
66 <% 133 <%
67 end 134 end