Complete authentication and profile features

frontend/static/profile.js

@@ -3,7 +3,6 @@ const profileForm = document.querySelector('#profile-form');
 const mastodonForm = document.querySelector('#mastodon-form');
 const profileLogoutButton = document.querySelector('#logout-button');
 const accessToken = localStorage.getItem('linklogAccessToken');
-const defaultAvatarUrl = 'https://example.com/avatar.png';
 const defaultMastodonInstance = 'mastodon.social';
 const defaultPostPrefix = 'From my #LinkLog: "';
 
@@ -27,7 +26,11 @@ async function loadProfile() {
   document.querySelector('#username').textContent = profile.username || '';
   document.querySelector('#email').value = profile.email || '';
   document.querySelector('#bio').value = profile.bio || '';
-  document.querySelector('#avatar-url').value = profile.avatar_url || defaultAvatarUrl;
+  const avatarPreview = document.querySelector('#avatar-preview');
+  if (profile.avatar_url) {
+    avatarPreview.src = profile.avatar_url;
+    avatarPreview.classList.remove('hidden');
+  }
   if (profile.is_admin) {
     document.querySelector('#admin-link').classList.remove('hidden');
   }
@@ -46,6 +49,7 @@ async function loadMastodonConfig() {
 profileForm.addEventListener('submit', async (event) => {
   event.preventDefault();
   const formData = new FormData(profileForm);
+  formData.delete('avatar');
   const response = await fetch('/api/user/me', {
     method: 'PUT',
     headers: authHeaders(true),
@@ -54,6 +58,27 @@ profileForm.addEventListener('submit', async (event) => {
   setStatus('#profile-status', response.ok ? 'Profile saved.' : 'Could not save profile.', !response.ok);
 });
 
+document.querySelector('#avatar-file').addEventListener('change', async (event) => {
+  const file = event.target.files[0];
+  if (!file) return;
+  const formData = new FormData();
+  formData.append('avatar', file);
+  const response = await fetch('/api/user/avatar', {
+    method: 'POST',
+    headers: authHeaders(),
+    body: formData,
+  });
+  if (!response.ok) {
+    setStatus('#profile-status', 'Could not upload avatar.', true);
+    return;
+  }
+  const data = await response.json();
+  const avatarPreview = document.querySelector('#avatar-preview');
+  avatarPreview.src = data.avatar_url;
+  avatarPreview.classList.remove('hidden');
+  setStatus('#profile-status', 'Avatar uploaded.');
+});
+
 mastodonForm.addEventListener('submit', async (event) => {
   event.preventDefault();
   const formData = new FormData(mastodonForm);