source: Klonkt/src/views/pages/account.ejs@ 1be21ba

main
Last change on this file since 1be21ba was 1be21ba, checked in by roboburr <roboburr@…>, 3 months ago

Account: owner can edit site name + tagline in account settings

New "Site" section on /account (owner / god only): edit site_title +
tagline via POST /account/site (ownership check). A quick place to change
the site name without navigating to Appearance.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>
  • Property mode set to 100644
File size: 13.4 KB
Line 
1<div class="container ax-page">
2
3 <header class="ax-header">
4 <a href="/" class="ax-back" aria-label="Terug naar home">←</a>
5 <div>
6 <h1>Account</h1>
7 <p class="ax-tagline">Profiel en avatar.</p>
8 </div>
9 </header>
10
11 <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
12 <% if (error) { %><div class="ax-flash ax-flash-err"><%= error %></div><% } %>
13
14 <% if (isViewer) { %>
15 <div class="ax-viewer-note" role="note">
16 <span class="ax-viewer-ico" aria-hidden="true">👁️</span>
17 <div>
18 <strong>Kijker-modus</strong>
19 <span>Dit is een demo-account. Je kunt alles bekijken, maar niets wijzigen — ook geen foto of bio.</span>
20 </div>
21 </div>
22 <% } %>
23
24 <%# ── PROFILE ────────────────────────────────────────────── %>
25 <section class="ax-card">
26 <div class="ax-card-title">Profiel</div>
27
28 <div class="ax-profile-id">
29 <% if (canMutate) { %>
30 <form action="/account/avatar" method="post" enctype="multipart/form-data" class="ax-avatar-form">
31 <label class="ax-avatar-wrap" title="Klik om je foto te wijzigen">
32 <span class="ax-profile-avatar">
33 <% if (account.avatar_url) { %>
34 <img src="<%= account.avatar_url %>" alt="">
35 <% } else { %>
36 <span><%= account.username.charAt(0).toUpperCase() %></span>
37 <% } %>
38 </span>
39 <span class="ax-avatar-edit" aria-hidden="true">
40 <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
41 </span>
42 <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp,image/gif" onchange="this.form.submit()" hidden>
43 </label>
44 </form>
45 <% } else { %>
46 <span class="ax-profile-avatar ax-profile-avatar-static">
47 <% if (account.avatar_url) { %>
48 <img src="<%= account.avatar_url %>" alt="">
49 <% } else { %>
50 <span><%= account.username.charAt(0).toUpperCase() %></span>
51 <% } %>
52 </span>
53 <% } %>
54 <div class="ax-profile-meta">
55 <div class="ax-profile-name"><%= account.username %></div>
56 <div class="ax-profile-role"><%= account.role %> · <%= account.email %></div>
57 <% if (account.created_at) { %>
58 <div class="ax-profile-joined">Lid sinds <%= formatDate(account.created_at) %></div>
59 <% } %>
60 <% if (account.avatar_url && canMutate) { %>
61 <form action="/account/avatar/remove" method="post" class="ax-avatar-remove">
62 <button type="submit" class="ax-linkbtn">Foto verwijderen</button>
63 </form>
64 <% } %>
65 </div>
66 </div>
67
68 <% if (canMutate) { %>
69 <form action="/account/profile" method="post" class="ax-form ax-form-bio">
70 <label class="ax-field">
71 <span>Bio</span>
72 <textarea name="bio" rows="3" maxlength="500" placeholder="Een korte regel over jezelf"><%= account.bio || '' %></textarea>
73 </label>
74 <div class="ax-form-actions">
75 <button type="submit" class="ax-btn ax-btn-primary">Bio opslaan</button>
76 </div>
77 </form>
78 <% } else { %>
79 <div class="ax-form ax-form-bio">
80 <label class="ax-field">
81 <span>Bio</span>
82 <textarea rows="3" disabled placeholder="Geen bio"><%= account.bio || '' %></textarea>
83 </label>
84 </div>
85 <% } %>
86 </section>
87
88 <%# ── SITE (eigenaar mag de naam van z'n site aanpassen) ── %>
89 <% if (typeof editableSite !== 'undefined' && editableSite && canMutate) { %>
90 <section class="ax-card">
91 <div class="ax-card-title">Site</div>
92 <form action="/account/site" method="post" class="ax-form">
93 <label class="ax-field">
94 <span>Site-naam <small>— getoond in de kop van je site</small></span>
95 <input type="text" name="site_title" value="<%= editableSite.title || '' %>" maxlength="200" required>
96 </label>
97 <label class="ax-field">
98 <span>Tagline <small>— korte oneliner (optioneel)</small></span>
99 <input type="text" name="site_tagline" value="<%= editableSite.tagline || '' %>" maxlength="200">
100 </label>
101 <div class="ax-form-actions">
102 <button type="submit" class="ax-btn ax-btn-primary">Site opslaan</button>
103 </div>
104 </form>
105 </section>
106 <% } %>
107
108 <%# ── WACHTWOORD ────────────────────────────────────────── %>
109 <%# In kijker-modus geen wachtwoord-sectie (niets te wijzigen). %>
110 <% if (canMutate) { %>
111 <% if (hasPassword) { %>
112 <section class="ax-card">
113 <div class="ax-card-title">Wachtwoord wijzigen</div>
114 <form action="/account/password" method="post" class="ax-form">
115 <label class="ax-field">
116 <span>Huidig wachtwoord</span>
117 <input type="password" name="current" required autocomplete="current-password">
118 </label>
119 <div class="ax-row ax-row-2">
120 <label class="ax-field">
121 <span>Nieuw wachtwoord <small>(min 8 tekens)</small></span>
122 <input type="password" name="new_password" required minlength="8" autocomplete="new-password">
123 </label>
124 <label class="ax-field">
125 <span>Bevestig nieuw wachtwoord</span>
126 <input type="password" name="confirm" required minlength="8" autocomplete="new-password">
127 </label>
128 </div>
129 <div class="ax-form-actions">
130 <button type="submit" class="ax-btn ax-btn-primary">Wachtwoord wijzigen</button>
131 </div>
132 </form>
133 </section>
134 <% } else { %>
135 <section class="ax-card">
136 <div class="ax-card-title">Inloggen</div>
137 <p class="ax-tagline" style="margin:0">Je bent ingelogd via Google (<%= account.email %>). Er is geen apart wachtwoord.</p>
138 </section>
139 <% } %>
140 <% } %>
141
142</div>
143
144<style>
145.ax-page { max-width: 720px; margin: 1.5rem auto 4rem; padding: 0 1rem; }
146.ax-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; }
147.ax-header h1 { font-family: var(--font-display, serif); font-size: 1.75rem; margin: 0 0 0.25rem; }
148.ax-tagline { color: var(--ink-muted, var(--ink-soft)); margin: 0; font-size: 0.9rem; }
149.ax-back {
150 display: inline-flex; align-items: center; justify-content: center;
151 width: 40px; height: 40px;
152 border: 1px solid var(--rule); border-radius: 8px;
153 background: var(--paper); color: var(--ink); text-decoration: none;
154 font-size: 1.1rem; flex-shrink: 0; transition: border-color 120ms;
155}
156.ax-back:hover { border-color: var(--accent); }
157
158.ax-flash { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
159.ax-flash-ok { background: rgba(40,160,90,.15); color: #2a9d5e; border: 1px solid rgba(40,160,90,.3); }
160.ax-flash-err { background: rgba(200,60,60,.15); color: #c33; border: 1px solid rgba(200,60,60,.3); }
161
162/* ─── Kijker-modus notice ──────────────────────────────────────── */
163.ax-viewer-note {
164 display: flex; align-items: flex-start; gap: 0.75rem;
165 padding: 0.85rem 1rem; margin-bottom: 1rem;
166 border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
167 border-left: 3px solid var(--accent);
168 border-radius: 10px;
169 background: color-mix(in srgb, var(--accent) 8%, var(--paper));
170}
171.ax-viewer-ico { font-size: 1.1rem; line-height: 1.4; }
172.ax-viewer-note strong { display: block; font-size: 0.92rem; }
173.ax-viewer-note span { color: var(--ink-muted, var(--ink-soft)); font-size: 0.85rem; }
174.ax-profile-avatar-static { flex-shrink: 0; }
175.ax-form-bio textarea:disabled { opacity: 0.7; cursor: default; }
176
177/* ─── Cards ────────────────────────────────────────────────────── */
178.ax-card {
179 background: var(--paper);
180 border: 1px solid var(--rule);
181 border-radius: 12px;
182 padding: 1.25rem;
183 margin-bottom: 1rem;
184}
185.ax-card-title {
186 font-family: var(--font-display, serif);
187 font-size: 1.15rem;
188 font-weight: 600;
189 margin-bottom: 1rem;
190}
191
192/* ─── Form fields ──────────────────────────────────────────────── */
193.ax-form { display: flex; flex-direction: column; gap: 0.85rem; }
194.ax-form-bio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
195.ax-row { display: grid; gap: 0.85rem; }
196.ax-row-2 { grid-template-columns: 1fr 1fr; }
197@media (max-width: 600px) { .ax-row-2 { grid-template-columns: 1fr; } }
198
199.ax-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
200.ax-field > span {
201 font-size: 0.8rem; font-weight: 600;
202 color: var(--ink-soft);
203 display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
204}
205.ax-field > span small { font-weight: 400; color: var(--ink-muted); font-size: 0.95em; }
206.ax-field input[type="text"],
207.ax-field input[type="email"],
208.ax-field input[type="password"],
209.ax-field input[type="url"],
210.ax-field select,
211.ax-field textarea {
212 width: 100%;
213 box-sizing: border-box;
214 padding: 0.6rem 0.75rem;
215 border: 1px solid var(--rule);
216 border-radius: 6px;
217 background: var(--paper-2);
218 color: var(--ink);
219 font-family: var(--font-ui, system-ui), sans-serif;
220 font-size: 0.95rem;
221 -webkit-appearance: none; appearance: none;
222 transition: border-color 120ms;
223}
224.ax-field textarea { resize: vertical; min-height: 70px; font-family: inherit; }
225.ax-field input:focus, .ax-field select:focus, .ax-field textarea:focus {
226 outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
227}
228
229/* ─── File upload ─────────────────────────────────────────────── */
230.ax-file-control {
231 display: flex; align-items: center; gap: 0.5rem;
232 flex-wrap: wrap;
233 position: relative;
234 min-height: 40px;
235}
236.ax-file-control input[type="file"] {
237 position: absolute; inset: 0;
238 opacity: 0; cursor: pointer;
239 z-index: 2;
240}
241.ax-file-btn { pointer-events: none; }
242.ax-file-name {
243 font-size: 0.85rem;
244 color: var(--ink);
245 word-break: break-all;
246 flex: 1; min-width: 0;
247}
248.ax-file-name[data-empty] { color: var(--ink-muted, var(--ink-soft)); }
249
250.ax-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
251
252/* ─── Buttons ──────────────────────────────────────────────────── */
253.ax-btn {
254 display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
255 padding: 0.55rem 1rem;
256 border: 1px solid var(--rule); background: var(--paper-2);
257 color: var(--ink);
258 font-family: var(--font-ui, system-ui), sans-serif;
259 font-size: 0.9rem; font-weight: 500;
260 text-decoration: none; border-radius: 6px;
261 cursor: pointer; min-height: 40px;
262 transition: background 120ms, border-color 120ms;
263 -webkit-tap-highlight-color: transparent;
264}
265.ax-btn:hover { border-color: var(--accent); }
266.ax-btn-secondary { background: var(--paper-2); }
267.ax-btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
268.ax-btn-primary:hover { opacity: 0.92; border-color: var(--accent); }
269
270/* ─── Profile ID row ──────────────────────────────────────────── */
271.ax-profile-id {
272 display: flex; align-items: center; gap: 1rem;
273 padding-bottom: 1rem;
274 border-bottom: 1px solid var(--rule);
275 margin-bottom: 1rem;
276}
277.ax-avatar-form { margin: 0; flex-shrink: 0; }
278.ax-avatar-wrap {
279 position: relative; display: block;
280 width: 84px; height: 84px; cursor: pointer;
281}
282.ax-profile-avatar {
283 width: 84px; height: 84px;
284 border-radius: 50%;
285 overflow: hidden;
286 background: var(--paper-2); /* neutral so transparent avatars blend */
287 color: var(--accent); /* accent only for the fallback initial */
288 display: inline-flex; align-items: center; justify-content: center;
289 font-family: var(--font-display, serif);
290 font-size: 1.7rem; font-weight: 600;
291 border: 1px solid var(--rule);
292 transition: border-color 120ms;
293}
294.ax-avatar-wrap:hover .ax-profile-avatar { border-color: var(--accent); }
295.ax-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
296.ax-avatar-edit {
297 position: absolute; right: -2px; bottom: -2px;
298 width: 28px; height: 28px; border-radius: 50%;
299 background: var(--accent); color: #fff;
300 display: flex; align-items: center; justify-content: center;
301 border: 3px solid var(--paper);
302 transition: transform 120ms;
303}
304.ax-avatar-wrap:hover .ax-avatar-edit { transform: scale(1.08); }
305.ax-avatar-remove { margin-top: 0.45rem; }
306.ax-linkbtn {
307 background: none; border: 0; padding: 0; cursor: pointer;
308 color: var(--ink-muted, var(--ink-soft)); font-size: 0.8rem; text-decoration: underline;
309 font-family: var(--font-ui, system-ui), sans-serif;
310}
311.ax-linkbtn:hover { color: #c33; }
312.ax-profile-meta { min-width: 0; }
313.ax-profile-name { font-weight: 600; font-size: 1.1rem; }
314.ax-profile-role,
315.ax-profile-joined {
316 color: var(--ink-muted, var(--ink-soft));
317 font-size: 0.85rem;
318}
319
320@media (max-width: 480px) {
321 .ax-profile-id { flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; }
322}
323</style>
Note: See TracBrowser for help on using the repository browser.