Mastodon Oauth

frontend/static/profile.js

@@ -9,6 +9,7 @@ const profileLogoutButton = document.querySelector('#logout-button');
 const accessToken = localStorage.getItem('linklogAccessToken');
 const defaultMastodonInstance = 'mastodon.social';
 const defaultPostPrefix = 'From my #LinkLog: ';
+const mastodonConnectButton = document.querySelector('#mastodon-connect');
 
 function authHeaders(includeJson = false) {
   return {
@@ -46,7 +47,6 @@ async function loadMastodonConfig() {
   if (!response.ok) throw new Error('Could not load Mastodon settings');
   const config = await response.json();
   document.querySelector('#mastodon-instance').value = config.instance || defaultMastodonInstance;
-  document.querySelector('#mastodon-access-token').value = config.access_token || '';
   document.querySelector('#mastodon-post-prefix').value = config.post_prefix || defaultPostPrefix;
 }
 
@@ -94,6 +94,24 @@ mastodonForm.addEventListener('submit', async (event) => {
   setStatus('#mastodon-status', response.ok ? 'Mastodon settings saved.' : 'Could not save Mastodon settings.', !response.ok);
 });
 
+mastodonConnectButton.addEventListener('click', async () => {
+  mastodonConnectButton.disabled = true;
+  const instance = document.querySelector('#mastodon-instance').value || defaultMastodonInstance;
+  try {
+    const response = await fetch(`/api/mastodon/oauth/start?instance=${encodeURIComponent(instance)}`, {headers: authHeaders()});
+    const result = await response.json();
+    if (!response.ok || !result.authorization_url) throw new Error(result.error || 'Could not start Mastodon authorization.');
+    window.location.assign(result.authorization_url);
+  } catch (error) {
+    setStatus('#mastodon-status', error.message, true);
+    mastodonConnectButton.disabled = false;
+  }
+});
+
+const mastodonParams = new URLSearchParams(window.location.search);
+if (mastodonParams.get('mastodon') === 'connected') setStatus('#mastodon-status', 'Mastodon connected.');
+if (mastodonParams.get('mastodon_error')) setStatus('#mastodon-status', mastodonParams.get('mastodon_error'), true);
+
 passwordForm.addEventListener('submit', async (event) => {
   event.preventDefault();
   const response = await fetch('/api/user/password', {

frontend/templates/user_profile.html

@@ -84,14 +84,11 @@
             Instance
             <input id="mastodon-instance" name="instance" type="text" value="mastodon.social" placeholder="mastodon.social" />
           </label>
-          <label>
-            Access token
-            <input id="mastodon-access-token" name="access_token" type="password" autocomplete="off" />
-          </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">Connect Mastodon</button>
           <button type="submit">Save Mastodon settings</button>
           <p id="mastodon-status" class="status" role="status"></p>
         </form>
@@ -100,6 +97,6 @@
     <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/profile.js?v=3"></script>
+    <script src="/static/profile.js?v=4"></script>
   </body>
 </html>