149 lines
5.8 KiB
HTML
149 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<!-- 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>
|
|
</div>
|
|
</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
|
|
<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>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>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>
|
|
<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>
|
|
<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> |