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;