comparison 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
comparison
equal deleted inserted replaced
45:e138343b2c76 46:42b741a1d5c6
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" 3 local Parsers = require "luan:Parsers.luan"
4 local json_string = Parsers.json_string or error() 4 local json_string = Parsers.json_string or error()
5 local Html = require "luan:Html.luan"
6 local html_encode = Html.encode or error()
5 local Io = require "luan:Io.luan" 7 local Io = require "luan:Io.luan"
6 local Http = require "luan:http/Http.luan" 8 local Http = require "luan:http/Http.luan"
7 local Shared = require "site:/lib/Shared.luan" 9 local Shared = require "site:/lib/Shared.luan"
8 local head = Shared.head or error() 10 local head = Shared.head or error()
9 local header = Shared.header or error() 11 local header = Shared.header or error()
23 <head> 25 <head>
24 <% head() %> 26 <% head() %>
25 <script> 27 <script>
26 'use strict'; 28 'use strict';
27 29
30 let email = <%= json_string(user.email) %>;
31 let username = <%= json_string(user.name) or "" %>;
28 let notifyEmail = <%= json_string(user.notify_email or "") %>; 32 let notifyEmail = <%= json_string(user.notify_email or "") %>;
29 let multiNotify = <%= user.multi_notify %>; 33 let multiNotify = <%= user.multi_notify %>;
30 let voice = <%= json_string(user.voice_url or "") %>; 34 let voice = <%= json_string(user.voice_url or "") %>;
35
36 function showUsername() {
37 let span = document.querySelector('span[username]');
38 span.textContent = username || email;
39 }
40
41 function editUsername() {
42 let dialog = document.querySelector('dialog[edit_username]');
43 let input = dialog.querySelector('input[name=username]');
44 input.value = username;
45 openModal(dialog);
46 }
47
48 function saveUsername() {
49 let dialog = document.querySelector('dialog[edit_username]');
50 let input = dialog.querySelector('input[name=username]');
51 username = input.value;
52 closeModal(input);
53 showUsername();
54 ajax(`save_username.js?username=${encodeURIComponent(username)}`);
55 }
31 56
32 function showNotify() { 57 function showNotify() {
33 let span = document.querySelector('span[notify]'); 58 let span = document.querySelector('span[notify]');
34 span.textContent = notifyEmail ? `Send notifications to ${notifyEmail}` : 'No notifications'; 59 span.textContent = notifyEmail ? `Send notifications to ${notifyEmail}` : 'No notifications';
35 } 60 }
84 closeModal(el); 109 closeModal(el);
85 ajax('delete_user.js'); 110 ajax('delete_user.js');
86 } 111 }
87 112
88 function init() { 113 function init() {
114 showUsername();
89 showNotify(); 115 showNotify();
90 showVoice(); 116 showVoice();
91 } 117 }
92 </script> 118 </script>
93 <style> 119 <style>
98 max-width: 94%; 124 max-width: 94%;
99 } 125 }
100 h1 { 126 h1 {
101 text-align: center; 127 text-align: center;
102 } 128 }
129 input[name=username],
103 input[name=notify_email] { 130 input[name=notify_email] {
104 width: 300px; 131 width: 300px;
105 max-width: 100%; 132 max-width: 100%;
106 } 133 }
107 input[name=voice] { 134 input[name=voice] {
117 <% header() %> 144 <% header() %>
118 <div content> 145 <div content>
119 <h1>Your Account</h1> 146 <h1>Your Account</h1>
120 <p><a href="about.html">About Web Chat</a></p> 147 <p><a href="about.html">About Web Chat</a></p>
121 <p>Your URL: <%= base_url() %>/?with=<%=user.email%></p> 148 <p>Your URL: <%= base_url() %>/?with=<%=user.email%></p>
149 <p>Your username: <span username></span> <a href="javascript:editUsername()">Edit</a></p>
122 <p><span notify></span> <a href="javascript:editNotify()">Edit</a></p> 150 <p><span notify></span> <a href="javascript:editNotify()">Edit</a></p>
123 <p><span voice></span> <a href="javascript:editVoice()">Edit</a></p> 151 <p><span voice></span> <a href="javascript:editVoice()">Edit</a></p>
124 <p><a href="javascript:logout()">Logout</a></p> 152 <p><a href="javascript:logout()">Logout</a></p>
125 <p><a href="javascript:deleteUser()">Delete account</a></p> 153 <p><a href="javascript:deleteUser()">Delete account</a></p>
126 </div> 154 </div>
155 <dialog edit_username>
156 <h2>Edit Username</h2>
157 <form action="javascript:saveUsername()">
158 <p>
159 <label>Username</label><br>
160 <input type=text name=username placeholder="<%=html_encode(user.email)%>"><br>
161 </p>
162 <div buttons>
163 <button type=button cancel onclick="closeModal(this)">Cancel</button>
164 <button type=submit go>Save</button>
165 </div>
166 </form>
167 </dialog>
127 <dialog edit_notify> 168 <dialog edit_notify>
128 <h2>Edit Notification</h2> 169 <h2>Edit Notification</h2>
129 <form action="javascript:saveNotify()"> 170 <form action="javascript:saveNotify()">
130 <p> 171 <p>
131 <label>Send notifications to</label><br> 172 <label>Send notifications to</label><br>