a mini social media app for small communities
1@include 'partial/header.html'
2
3@if ctx.is_logged_in()
4<script src="/static/js/text_area_counter.js"></script>
5<script src="/static/js/password.js"></script>
6
7<h1>user settings:</h1>
8
9<form action="/api/user/set_bio" method="post">
10 <label for="bio">bio: (<span id="bio_chars">0/@{app.config.user.bio_max_len}</span>)</label>
11 <br>
12 <textarea
13 name="bio"
14 id="bio"
15 cols="30"
16 rows="10"
17 minlength="@app.config.user.bio_min_len"
18 maxlength="@app.config.user.bio_max_len"
19 >@user.bio</textarea>
20 <br>
21 <input type="submit" value="save">
22</form>
23
24<hr>
25
26<form action="/api/user/set_pronouns" method="post">
27 <label for="pronouns">pronouns: (<span id="pronouns_chars">0/@{app.config.user.pronouns_max_len}</span>)</label>
28 <input
29 type="text"
30 name="pronouns"
31 id="pronouns"
32 minlength="@app.config.user.pronouns_min_len"
33 maxlength="@app.config.user.pronouns_max_len"
34 pattern="@app.config.user.pronouns_pattern"
35 value="@user.pronouns"
36 >
37 <input type="submit" value="save">
38</form>
39
40<hr>
41
42<form action="/api/user/set_nickname" method="post">
43 <label for="nickname">nickname: (<span id="nickname_chars">0/@{app.config.user.nickname_max_len}</span>)</label>
44 <input
45 type="text"
46 name="nickname"
47 id="nickname"
48 pattern="@app.config.user.nickname_pattern"
49 minlength="@app.config.user.nickname_min_len"
50 maxlength="@app.config.user.nickname_max_len"
51 value="@{user.nickname or { '' }}"
52 >
53 <input type="submit" value="save">
54</form>
55
56<form action="/api/user/set_nickname" method="post">
57 <input type="submit" value="reset nickname">
58</form>
59
60<script>
61 add_character_counter('bio', 'bio_chars', @{app.config.user.bio_max_len})
62 add_character_counter('pronouns', 'pronouns_chars', @{app.config.user.pronouns_max_len})
63 add_character_counter('nickname', 'nickname_chars', @{app.config.user.nickname_max_len})
64</script>
65
66@if app.config.instance.allow_changing_theme
67<hr>
68
69<form action="/api/user/set_theme" method="post">
70 <label for="url">theme:</label>
71 <input type="text" name="url" id="url" value="@user.theme">
72 <input type="submit" value="save">
73</form>
74
75<hr>
76
77<form action="/api/user/set_css" method="post">
78 <label for="css">custom css:</label>
79 <br>
80 <textarea type="text" name="css" id="css" style="font: monospace;">@user.css</textarea>
81 <input type="submit" value="save">
82</form>
83@end
84
85<hr>
86
87<form action="/api/user/set_username" method="post">
88 <label for="new_username">username:</label>
89 <input
90 type="text"
91 name="new_username"
92 id="new_username"
93 pattern="@app.config.user.username_pattern"
94 minlength="@app.config.user.username_min_len"
95 maxlength="@app.config.user.username_max_len"
96 value="@{user.username}"
97 required aria-required
98 >
99 <input type="submit" value="save">
100</form>
101
102<hr>
103
104<form action="/api/user/set_automated" method="post">
105 <div>
106 <label for="is_automated">is automated:</label>
107 <input
108 type="checkbox"
109 name="is_automated"
110 id="is_automated"
111 value="true"
112 @if user.automated
113 checked aria-checked
114 @end
115 >
116 </div>
117 <input type="submit" value="save">
118 <p>automated accounts are primarily intended to tell users that this account makes posts automatically.</p>
119 <p>it will also hide most front-end interactions since the user of this account likely will not be using those very often.</p>
120</form>
121
122<hr>
123
124<details>
125 <summary>dangerous settings (click to reveal)</summary>
126
127 <br>
128
129 <details>
130 <summary>change password (click to reveal)</summary>
131 <form action="/api/user/set_password" method="post" beep-redirect="/login">
132 <p>changing your password will log you out of all devices, so you will need to log in again after changing it.</p>
133 <label for="current_password">current password:</label>
134 <input
135 type="password"
136 name="current_password"
137 id="current_password"
138 pattern="@app.config.user.password_pattern"
139 minlength="@app.config.user.password_min_len"
140 maxlength="@app.config.user.password_max_len"
141 required aria-required
142 autocomplete="off" aria-autocomplete="off"
143 >
144 <br>
145 <label for="new_password">new password: <input type="button" id="view-new_password" style="display: inline;" value="view"></input></label>
146 <input
147 type="password"
148 name="new_password"
149 id="new_password"
150 pattern="@app.config.user.password_pattern"
151 minlength="@app.config.user.password_min_len"
152 maxlength="@app.config.user.password_max_len"
153 required aria-required
154 autocomplete="off" aria-autocomplete="off"
155 >
156 <label for="confirm_password">confirm password: <input type="button" id="view-confirm_password" style="display: inline;" value="view"></input></label>
157 <input
158 type="password"
159 name="confirm_password"
160 id="confirm_password"
161 pattern="@app.config.user.password_pattern"
162 minlength="@app.config.user.password_min_len"
163 maxlength="@app.config.user.password_max_len"
164 required aria-required
165 autocomplete="off" aria-autocomplete="off"
166 >
167 <br>
168 <p>passwords match: <span id="passwords-match">yes</span></p>
169 <br>
170 <input type="submit" value="save">
171 </form>
172 </details>
173
174 <br>
175
176 <details>
177 <summary>account deletion (click to reveal)</summary>
178 <form action="/api/user/delete" autocomplete="off" beep-redirect="/">
179 <input
180 type="number"
181 name="id"
182 id="id"
183 value="@user.id"
184 required aria-required
185 readonly aria-readonly
186 hidden aria-hidden
187 >
188 <p><strong>there is NO GOING BACK after deleting your account.</strong></p>
189 <p><strong>EVERY ONE of your posts, notifications, likes, dislikes, and ALL OTHER USER DATA WILL BE PERMANENTLY DELETED</strong></p>
190 <div>
191 <input type="checkbox" name="are-you-sure" id="are-you-sure" required aria-required>
192 <label for="are-you-sure">click to confirm</label>
193 </div>
194 <br>
195 <div>
196 <input type="checkbox" name="are-you-really-sure" id="are-you-really-sure" required aria-required>
197 <label for="are-you-really-sure">click to doubly confirm</label>
198 </div>
199 <br>
200 <div>
201 <input type="checkbox" name="are-you-absolutely-sure" id="are-you-absolutely-sure" required aria-required>
202 <label for="are-you-absolutely-sure">click to triply confirm</label>
203 </div>
204 <br>
205 <details>
206 <summary>(click to reveal deletion button)</summary>
207 <input type="submit" value="delete your account">
208 </details>
209 </form>
210 </details>
211</details>
212
213<script>
214 add_password_checkers('new_password', 'confirm_password', 'passwords-match');
215</script>
216
217@else
218<p>uh oh, you need to be logged in to view this page!</p>
219@end
220
221@include 'partial/footer.html'