Working signout button

frontend/static/auth-header.js

@@ -0,0 +1,49 @@
+(() => {
+  const loginButton = document.querySelector('#auth-login-button');
+  const session = document.querySelector('#auth-session');
+  const avatar = document.querySelector('#auth-avatar');
+  const username = document.querySelector('#auth-username');
+  const token = localStorage.getItem('linklogAccessToken');
+
+  if (!loginButton || !session || !avatar || !username) return;
+
+  function showSignedOut() {
+    loginButton.classList.remove('hidden');
+    session.classList.add('hidden');
+  }
+
+  function showSignedIn(user) {
+    loginButton.classList.add('hidden');
+    session.classList.remove('hidden');
+    username.textContent = user.username || '';
+    const initial = (user.username || 'U').slice(0, 1).toUpperCase();
+    avatar.textContent = initial;
+    if (user.avatar_url) {
+      const image = document.createElement('img');
+      image.src = user.avatar_url;
+      image.alt = `${user.username || 'User'} avatar`;
+      image.addEventListener('error', () => {
+        image.remove();
+        avatar.textContent = initial;
+      });
+      avatar.textContent = '';
+      avatar.appendChild(image);
+    }
+  }
+
+  if (!token) {
+    showSignedOut();
+    return;
+  }
+
+  fetch(`/api/auth/me?token=${encodeURIComponent(token)}`)
+    .then((response) => {
+      if (!response.ok) throw new Error('Session expired');
+      return response.json();
+    })
+    .then(showSignedIn)
+    .catch(() => {
+      localStorage.removeItem('linklogAccessToken');
+      showSignedOut();
+    });
+})();

frontend/static/profile.js

@@ -1,5 +1,6 @@
 (() => {
 const profileForm = document.querySelector('#profile-form');
+const passwordForm = document.querySelector('#password-form');
 const mastodonForm = document.querySelector('#mastodon-form');
 const profileLogoutButton = document.querySelector('#logout-button');
 const accessToken = localStorage.getItem('linklogAccessToken');
@@ -90,6 +91,19 @@ mastodonForm.addEventListener('submit', async (event) => {
   setStatus('#mastodon-status', response.ok ? 'Mastodon settings saved.' : 'Could not save Mastodon settings.', !response.ok);
 });
 
+passwordForm.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const response = await fetch('/api/user/password', {
+    method: 'PUT',
+    headers: authHeaders(true),
+    body: JSON.stringify(Object.fromEntries(new FormData(passwordForm))),
+  });
+  const status = document.querySelector('#password-status');
+  status.textContent = response.ok ? 'Password changed.' : 'Could not change password.';
+  status.style.color = response.ok ? '#94e2d5' : '#f38ba8';
+  if (response.ok) passwordForm.reset();
+});
+
 Promise.all([loadProfile(), loadMastodonConfig()]).catch((error) => {
   setStatus('#profile-status', accessToken ? error.message : 'Please sign in first.', true);
 });

frontend/static/style.css

@@ -105,6 +105,25 @@ body::selection {
   gap: 8px;
 }
 
+.auth-session {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.auth-session .avatar {
+  width: 32px;
+  height: 32px;
+  flex-basis: 32px;
+}
+
+.auth-session .user-name {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .login-button {
   flex: 0 0 auto;
   margin-top: 2px;
@@ -447,6 +466,10 @@ button:disabled {
     flex-direction: column;
   }
 
+  .auth-session {
+    flex-direction: column;
+  }
+
   .login-button {
     padding: 8px 11px;
     font-size: 0.9rem;

frontend/templates/admin.html

@@ -16,7 +16,11 @@
           </div>
           <div class="header-actions">
             <a id="admin-login-button" class="login-button" href="/login">Sign in</a>
-            <button id="logout-button" class="logout-button hidden" type="button">Sign out</button>
+            <div id="auth-session" class="auth-session hidden">
+              <div id="auth-avatar" class="avatar"></div>
+              <span id="auth-username" class="user-name"></span>
+              <button id="logout-button" class="logout-button" type="button">Sign out</button>
+            </div>
           </div>
         </div>
       </div>
@@ -56,6 +60,7 @@
       </section>
       </div>
     </main>
+    <script src="/static/auth-header.js?v=1"></script>
     <script src="/static/logout.js?v=2"></script>
     <script src="/static/admin.js?v=2"></script>
   </body>

frontend/templates/feed.html

@@ -14,7 +14,14 @@
             <h1>LinkLog</h1>
             <p>Public link feed</p>
           </div>
-          <a class="login-button" href="/login">Sign in</a>
+          <div class="header-actions">
+            <a id="auth-login-button" class="login-button" href="/login">Sign in</a>
+            <div id="auth-session" class="auth-session hidden">
+              <div id="auth-avatar" class="avatar"></div>
+              <span id="auth-username" class="user-name"></span>
+              <button id="logout-button" class="logout-button" type="button">Sign out</button>
+            </div>
+          </div>
         </div>
       </div>
     </header>
@@ -54,6 +61,8 @@
       <section id="feed" class="feed" aria-live="polite"></section>
     </main>
 
+    <script src="/static/auth-header.js?v=1"></script>
+    <script src="/static/logout.js?v=3"></script>
     <script src="/static/feed.js?v=5"></script>
   </body>
 </html>

frontend/templates/login.html

@@ -9,8 +9,20 @@
   <body>
     <header class="site-header">
       <div class="container">
-        <h1>Sign in</h1>
-        <p>Access your LinkLog settings</p>
+        <div class="header-row">
+          <div>
+            <h1>Sign in</h1>
+            <p>Access your LinkLog settings</p>
+          </div>
+          <div class="header-actions">
+            <a id="auth-login-button" class="login-button" href="/login">Sign in</a>
+            <div id="auth-session" class="auth-session hidden">
+              <div id="auth-avatar" class="avatar"></div>
+              <span id="auth-username" class="user-name"></span>
+              <button id="logout-button" class="logout-button" type="button">Sign out</button>
+            </div>
+          </div>
+        </div>
       </div>
     </header>
     <main class="container">
@@ -29,6 +41,8 @@
         </form>
       </section>
     </main>
+    <script src="/static/auth-header.js?v=1"></script>
+    <script src="/static/logout.js?v=3"></script>
     <script src="/static/login.js"></script>
   </body>
 </html>

frontend/templates/user_profile.html

@@ -13,7 +13,11 @@
           <h1>Profile</h1>
           <div class="header-actions">
             <a id="admin-link" class="login-button hidden" href="/admin">Admin</a>
-            <button id="logout-button" class="logout-button hidden" type="button">Sign out</button>
+            <div id="auth-session" class="auth-session hidden">
+              <div id="auth-avatar" class="avatar"></div>
+              <span id="auth-username" class="user-name"></span>
+              <button id="logout-button" class="logout-button" type="button">Sign out</button>
+            </div>
           </div>
         </div>
       </div>
@@ -46,6 +50,22 @@
         </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>
+          <button type="submit">Change password</button>
+          <p id="password-status" class="status" role="status"></p>
+        </form>
+      </section>
+
       <section class="link-item settings-panel">
         <h2>Mastodon</h2>
         <form id="mastodon-form">
@@ -66,6 +86,7 @@
         </form>
       </section>
     </main>
+    <script src="/static/auth-header.js?v=1"></script>
     <script src="/static/logout.js?v=2"></script>
     <script src="/static/profile.js?v=2"></script>
   </body>