primary email change functionality
Build LinkLog Development Image / development-image (push) Successful in 12s
Build LinkLog Development Image / development-image (push) Successful in 12s
This commit is contained in:
@@ -18,6 +18,9 @@ const otpEnabled = document.querySelector('#otp-enabled');
|
||||
const otpSecret = document.querySelector('#otp-secret');
|
||||
const otpUri = document.querySelector('#otp-uri');
|
||||
const otpStatus = document.querySelector('#otp-status');
|
||||
const emailAddressList = document.querySelector('#email-address-list');
|
||||
const additionalEmailForm = document.querySelector('#additional-email-form');
|
||||
const emailAddressStatus = document.querySelector('#email-address-status');
|
||||
|
||||
function authHeaders(includeJson = false) {
|
||||
return {
|
||||
@@ -37,6 +40,80 @@ function setOtpStatus(message, isError = false) {
|
||||
otpStatus.style.color = isError ? '#b91c1c' : '#166534';
|
||||
}
|
||||
|
||||
function setEmailAddressStatus(message, isError = false) {
|
||||
emailAddressStatus.textContent = message;
|
||||
emailAddressStatus.style.color = isError ? '#b91c1c' : '#166534';
|
||||
}
|
||||
|
||||
function renderEmailAddresses(addresses) {
|
||||
emailAddressList.replaceChildren(...addresses.map((address) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'email-address-row';
|
||||
const label = document.createElement('span');
|
||||
label.textContent = `${address.email} - ${address.verified ? 'validated' : 'not validated'}${address.primary ? ' (primary)' : ''}`;
|
||||
row.appendChild(label);
|
||||
if (!address.primary) {
|
||||
if (!address.verified) {
|
||||
const resend = document.createElement('button');
|
||||
resend.type = 'button';
|
||||
resend.textContent = 'Resend validation';
|
||||
resend.addEventListener('click', async () => {
|
||||
resend.disabled = true;
|
||||
const response = await fetch(`/api/user/emails/${encodeURIComponent(address.id)}/resend`, {method: 'POST', headers: authHeaders()});
|
||||
const result = await response.json();
|
||||
setEmailAddressStatus(response.ok ? result.message : (result.detail || 'Could not send validation email.'), !response.ok);
|
||||
if (response.ok && result.next_allowed_at) window.setTimeout(() => { resend.disabled = false; }, Math.max(0, Date.parse(result.next_allowed_at) - Date.now()));
|
||||
else if (!response.ok) resend.disabled = false;
|
||||
});
|
||||
row.appendChild(resend);
|
||||
}
|
||||
if (address.verified && address.can_be_primary) {
|
||||
const makePrimary = document.createElement('button');
|
||||
makePrimary.type = 'button';
|
||||
makePrimary.textContent = 'Make primary';
|
||||
makePrimary.addEventListener('click', async () => {
|
||||
const response = await fetch(`/api/user/emails/${encodeURIComponent(address.id)}/make-primary`, {method: 'POST', headers: authHeaders()});
|
||||
const result = await response.json();
|
||||
setEmailAddressStatus(response.ok ? `${result.email} is now the primary email address.` : (result.detail || 'Could not change primary email.'), !response.ok);
|
||||
if (response.ok) {
|
||||
await loadEmailAddresses();
|
||||
}
|
||||
});
|
||||
row.appendChild(makePrimary);
|
||||
}
|
||||
const remove = document.createElement('button');
|
||||
remove.type = 'button';
|
||||
remove.textContent = 'Remove';
|
||||
remove.addEventListener('click', async () => {
|
||||
const response = await fetch(`/api/user/emails/${encodeURIComponent(address.id)}`, {method: 'DELETE', headers: authHeaders()});
|
||||
if (response.ok) loadEmailAddresses();
|
||||
else setEmailAddressStatus('Could not remove email address.', true);
|
||||
});
|
||||
row.appendChild(remove);
|
||||
}
|
||||
return row;
|
||||
}));
|
||||
}
|
||||
|
||||
async function loadEmailAddresses() {
|
||||
const response = await fetch('/api/user/emails', {headers: authHeaders()});
|
||||
if (!response.ok) throw new Error('Could not load email addresses');
|
||||
renderEmailAddresses(await response.json());
|
||||
}
|
||||
|
||||
additionalEmailForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const response = await fetch('/api/user/emails', {
|
||||
method: 'POST', headers: authHeaders(true), body: JSON.stringify({email: additionalEmailForm.elements.email.value.trim()}),
|
||||
});
|
||||
const result = await response.json();
|
||||
setEmailAddressStatus(response.ok ? 'Email address added. Check your inbox to validate it.' : (result.detail || 'Could not add email address.'), !response.ok);
|
||||
if (response.ok) {
|
||||
additionalEmailForm.reset();
|
||||
loadEmailAddresses();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadOtp() {
|
||||
const response = await fetch('/api/user/otp', {headers: authHeaders()});
|
||||
if (!response.ok) throw new Error('Could not load one-time password settings');
|
||||
@@ -95,7 +172,7 @@ async function loadProfile() {
|
||||
if (!response.ok) throw new Error('Could not load profile');
|
||||
const profile = await response.json();
|
||||
document.querySelector('#username').textContent = profile.username || '';
|
||||
document.querySelector('#email').value = profile.email || '';
|
||||
document.querySelector('#email').textContent = profile.email || '';
|
||||
document.querySelector('#bio').value = profile.bio || '';
|
||||
const avatarPreview = document.querySelector('#avatar-preview');
|
||||
if (profile.avatar_url) {
|
||||
@@ -211,7 +288,7 @@ passwordForm.addEventListener('submit', async (event) => {
|
||||
if (response.ok) passwordForm.reset();
|
||||
});
|
||||
|
||||
Promise.all([loadProfile(), loadMastodonConfig(), loadOtp()]).catch((error) => {
|
||||
Promise.all([loadProfile(), loadMastodonConfig(), loadOtp(), loadEmailAddresses()]).catch((error) => {
|
||||
setStatus('#profile-status', accessToken ? error.message : 'Please sign in first.', true);
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -430,6 +430,27 @@ button:focus-visible {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.email-address-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.email-address-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.email-address-row button {
|
||||
min-width: 0;
|
||||
padding: 5px 9px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.settings-panel textarea {
|
||||
min-height: 110px;
|
||||
resize: vertical;
|
||||
|
||||
@@ -2,127 +2,148 @@
|
||||
<!-- Copyright © 2026 Olaf Kolkman -->
|
||||
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>LinkLog Profile</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="header-row">
|
||||
<div>
|
||||
<img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
|
||||
<h1>Profile</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
|
||||
<nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
|
||||
<a id="auth-home-link" href="/">Home</a>
|
||||
<a id="auth-about-link" href="/about">About</a>
|
||||
<a id="auth-login-button" href="/login">Sign in</a>
|
||||
<a id="auth-profile-link" class="hidden" href="/profile">Profile</a>
|
||||
<a id="auth-labels-link" class="hidden" href="/labels">Labels</a>
|
||||
<a id="auth-admin-link" class="hidden" href="/admin">Admin</a>
|
||||
<div id="auth-session" class="auth-session hidden">
|
||||
<a id="auth-username" class="user-name" href="/"></a>
|
||||
</div>
|
||||
<button id="logout-button" class="logout-button hidden" type="button">Sign out</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>LinkLog Profile</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="header-row">
|
||||
<div>
|
||||
<img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
|
||||
<h1>Profile</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
|
||||
<nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
|
||||
<a id="auth-home-link" href="/">Home</a>
|
||||
<a id="auth-about-link" href="/about">About</a>
|
||||
<a id="auth-login-button" href="/login">Sign in</a>
|
||||
<a id="auth-profile-link" class="hidden" href="/profile">Profile</a>
|
||||
<a id="auth-labels-link" class="hidden" href="/labels">Labels</a>
|
||||
<a id="auth-admin-link" class="hidden" href="/admin">Admin</a>
|
||||
<div id="auth-session" class="auth-session hidden">
|
||||
<a id="auth-username" class="user-name" href="/"></a>
|
||||
</div>
|
||||
<button id="logout-button" class="logout-button hidden" type="button">Sign out</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Profile Settings</h2>
|
||||
<form id="profile-form">
|
||||
<label>
|
||||
Username
|
||||
<output id="username" class="readonly-value">Loading...</output>
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<input id="email" name="email" type="email" required />
|
||||
</label>
|
||||
<label>
|
||||
Bio
|
||||
<textarea id="bio" name="bio" rows="4"></textarea>
|
||||
</label>
|
||||
<label>
|
||||
Avatar image
|
||||
<input id="avatar-file" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp" />
|
||||
</label>
|
||||
<img id="avatar-preview" class="profile-avatar-preview hidden" alt="Avatar preview" />
|
||||
<button type="submit">Save profile</button>
|
||||
<p id="profile-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
<main class="container">
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Profile Settings</h2>
|
||||
<form id="profile-form">
|
||||
<label>
|
||||
Username
|
||||
<output id="username" class="readonly-value">Loading...</output>
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<output id="email" class="readonly-value">Loading...</output>
|
||||
</label>
|
||||
<label>
|
||||
Bio
|
||||
<textarea id="bio" name="bio" rows="4"></textarea>
|
||||
</label>
|
||||
<label>
|
||||
Avatar image
|
||||
<input id="avatar-file" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp" />
|
||||
</label>
|
||||
<img id="avatar-preview" class="profile-avatar-preview hidden" alt="Avatar preview" />
|
||||
<button type="submit">Save profile</button>
|
||||
<p id="profile-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Password</h2>
|
||||
<form id="password-form">
|
||||
<label>
|
||||
Current password
|
||||
<input name="current_password" type="password" autocomplete="current-password" required />
|
||||
</label>
|
||||
<label>
|
||||
New password
|
||||
<input name="new_password" type="password" minlength="8" autocomplete="new-password" required />
|
||||
</label>
|
||||
<label>
|
||||
Confirm new password
|
||||
<input name="new_password_confirmation" type="password" minlength="8" autocomplete="new-password" required />
|
||||
</label>
|
||||
<button type="submit">Change password</button>
|
||||
<p id="password-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Email addresses</h2>
|
||||
<div id="email-address-list" class="email-address-list" aria-live="polite">Loading email addresses...</div>
|
||||
<form id="additional-email-form">
|
||||
<label>
|
||||
Additional email address
|
||||
<input name="email" type="email" required />
|
||||
</label>
|
||||
<button type="submit">Add email address</button>
|
||||
<p id="email-address-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="link-item settings-panel">
|
||||
<h2>One-time password</h2>
|
||||
<p>Use an authenticator app to add a second sign-in step.</p>
|
||||
<div id="otp-disabled">
|
||||
<button id="otp-setup" type="button">Set up one-time password</button>
|
||||
<div id="otp-provisioning" class="hidden">
|
||||
<p>Scan this QR code or enter the secret in your authenticator app:</p>
|
||||
<code id="otp-secret"></code>
|
||||
<p><a id="otp-uri" href="" target="_blank" rel="noopener noreferrer">Open authenticator link</a></p>
|
||||
<label>Verification code <input id="otp-setup-code" inputmode="numeric" autocomplete="one-time-code" /></label>
|
||||
<button id="otp-enable" type="button">Enable one-time password</button>
|
||||
</div>
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Password</h2>
|
||||
<form id="password-form">
|
||||
<label>
|
||||
Current password
|
||||
<input name="current_password" type="password" autocomplete="current-password" required />
|
||||
</label>
|
||||
<label>
|
||||
New password
|
||||
<input name="new_password" type="password" minlength="8" autocomplete="new-password" required />
|
||||
</label>
|
||||
<label>
|
||||
Confirm new password
|
||||
<input name="new_password_confirmation" type="password" minlength="8" autocomplete="new-password" required />
|
||||
</label>
|
||||
<button type="submit">Change password</button>
|
||||
<p id="password-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="link-item settings-panel">
|
||||
<h2>One-time password</h2>
|
||||
<p>Use an authenticator app to add a second sign-in step.</p>
|
||||
<div id="otp-disabled">
|
||||
<button id="otp-setup" type="button">Set up one-time password</button>
|
||||
<div id="otp-provisioning" class="hidden">
|
||||
<p>Scan this QR code or enter the secret in your authenticator app:</p>
|
||||
<code id="otp-secret"></code>
|
||||
<p><a id="otp-uri" href="" target="_blank" rel="noopener noreferrer">Open authenticator link</a></p>
|
||||
<label>Verification code <input id="otp-setup-code" inputmode="numeric"
|
||||
autocomplete="one-time-code" /></label>
|
||||
<button id="otp-enable" type="button">Enable one-time password</button>
|
||||
</div>
|
||||
<div id="otp-enabled" class="hidden">
|
||||
<p>One-time password is enabled.</p>
|
||||
<label>Verification code <input id="otp-disable-code" inputmode="numeric" autocomplete="one-time-code" /></label>
|
||||
<button id="otp-disable" type="button">Disable one-time password</button>
|
||||
</div>
|
||||
<p id="otp-status" class="status" role="status"></p>
|
||||
</section>
|
||||
</div>
|
||||
<div id="otp-enabled" class="hidden">
|
||||
<p>One-time password is enabled.</p>
|
||||
<label>Verification code <input id="otp-disable-code" inputmode="numeric"
|
||||
autocomplete="one-time-code" /></label>
|
||||
<button id="otp-disable" type="button">Disable one-time password</button>
|
||||
</div>
|
||||
<p id="otp-status" class="status" role="status"></p>
|
||||
</section>
|
||||
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Mastodon</h2>
|
||||
<form id="mastodon-form">
|
||||
<label>
|
||||
Mastodon server
|
||||
<input id="mastodon-instance" name="instance" type="text" value="mastodon.social" placeholder="mastodon.social" required />
|
||||
</label>
|
||||
<label>
|
||||
Post prefix
|
||||
<input id="mastodon-post-prefix" name="post_prefix" type="text" value="From my #LinkLog: " />
|
||||
</label>
|
||||
<button id="mastodon-connect" type="button">Authenticate with this server</button>
|
||||
<button type="submit">Save Mastodon settings</button>
|
||||
<p id="mastodon-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="site-footer">Copyright © 2026 Olaf Kolkman · <a href="https://git.kolkman.org/olaf/Link-Log">git.kolkman.org/LinkLog</a></footer>
|
||||
<script src="/static/auth-header.js?v=3"></script>
|
||||
<script src="/static/logout.js?v=2"></script>
|
||||
<script src="/static/theme.js?v=1"></script>
|
||||
<script src="/static/profile.js?v=5"></script>
|
||||
</body>
|
||||
</html>
|
||||
<section class="link-item settings-panel">
|
||||
<h2>Mastodon</h2>
|
||||
<form id="mastodon-form">
|
||||
<label>
|
||||
Mastodon server
|
||||
<input id="mastodon-instance" name="instance" type="text" value="mastodon.social"
|
||||
placeholder="mastodon.social" required />
|
||||
</label>
|
||||
<button id="mastodon-connect" type="button">Authenticate with this server</button>
|
||||
|
||||
<label>
|
||||
Post prefix
|
||||
<input id="mastodon-post-prefix" name="post_prefix" type="text" value="From my #LinkLog: " />
|
||||
</label>
|
||||
<button type="submit">Save Mastodon settings</button>
|
||||
<p id="mastodon-status" class="status" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="site-footer">Copyright © 2026 Olaf Kolkman · <a
|
||||
href="https://git.kolkman.org/olaf/Link-Log">git.kolkman.org/LinkLog</a></footer>
|
||||
<script src="/static/auth-header.js?v=3"></script>
|
||||
<script src="/static/logout.js?v=2"></script>
|
||||
<script src="/static/theme.js?v=1"></script>
|
||||
<script src="/static/profile.js?v=5"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user