Move state generation to page load

2023-10-09 19:37:52 +02:00
parent 81844e476c
commit bf8ac44011
3 changed files with 123 additions and 101 deletions
@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", async function() {

 async function ready() {
  const domain = localStorage.getItem('domain');
-  let accessToken = localStorage.getItem(`access_token_${domain}`);
+  let accessToken = localStorage.getItem(`access_token`);

  if (domain) document.getElementById('instance').value = domain;

@@ -12,7 +12,9 @@ async function ready() {
  const code = urlParams.get('code');

  if (domain && code && !accessToken) await getToken(code, domain).then(res => accessToken = res);
-  if (accessToken) await setStateAndRedirect(accessToken, domain);
+  if (accessToken) {
+    window.location.href = '/prepare.html';
+  }
 }

 async function auth() {
@@ -51,14 +53,14 @@ async function registerApp(domain) {
  })
    .then(async res => {
      const app = await res.json();
-      localStorage.setItem(`client_id_${domain}`, app.client_id);
-      localStorage.setItem(`client_secret_${domain}`, app.client_secret);
+      localStorage.setItem(`client_id`, app.client_id);
+      localStorage.setItem(`client_secret`, app.client_secret);
    });
 }

 function authorize(domain) {
  setMessage('Authorizing');
-  const clientId = localStorage.getItem(`client_id_${domain}`);
+  const clientId = localStorage.getItem(`client_id`);
  document.location.href = `https://${domain}/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${document.location.origin + document.location.pathname}&scope=read+write+follow+push`;
 }

@@ -66,8 +68,8 @@ async function getToken(code, domain) {
  setMessage('Getting token');

  const tokenUrl = `https://${domain}/oauth/token`;
-  const clientId = localStorage.getItem(`client_id_${domain}`);
-  const clientSecret = localStorage.getItem(`client_secret_${domain}`);
+  const clientId = localStorage.getItem(`client_id`);
+  const clientSecret = localStorage.getItem(`client_secret`);

  const formData = new FormData();
  formData.append('grant_type', 'authorization_code');
@@ -88,99 +90,11 @@ async function getToken(code, domain) {
  })
    .then(async res => {
      const app = await res.json();
-      if (app.access_token) localStorage.setItem(`access_token_${domain}`, app.access_token);
+      if (app.access_token) localStorage.setItem(`access_token`, app.access_token);
      return app.access_token;
    });
 }

-async function setStateAndRedirect(access_token, domain) {
-  setMessage('Assembling state object');
-  const apiUrl = `https://${domain}/api`;
-  const instance = await fetch(`${apiUrl}/v1/instance`).then(async p => await p.json());
-  const options = {headers: {Authorization: `Bearer ${access_token}`}};
-  const credentials = await fetch(`${apiUrl}/v1/accounts/verify_credentials`, options).then(async p => await p.json());
-  const state = {
-    "accounts": {
-      "plc":{
-        "accepts_direct_messages_from":"everybody",
-        "acct": credentials.acct,
-        "avatar": credentials.avatar,
-        "avatar_static": credentials.avatar_static,
-        "bot": credentials.bot,
-        "created_at": credentials.created_at,
-        "display_name": credentials.display_name,
-        "emojis":[],
-        "fields":[],
-        "follow_requests_count":0,
-        "followers_count": credentials.followers_count,
-        "following_count": credentials.following_count,
-        "fqn":`${credentials.acct}@${domain}`,
-        "header": credentials.header,
-        "header_static": credentials.header_static,
-        "id": credentials.id,
-        "last_status_at": credentials.created_at,
-        "locked": credentials.locked,
-        "note":"",
-        "source": credentials.source,
-        "statuses_count": credentials.statuses_count,
-        "url": credentials.url,
-        "username": credentials.acct
-      }
-    },
-    "char_limit": instance.configuration.statuses.max_characters,
-    "compose": {
-      "allow_content_types": [
-        "text/x.misskeymarkdown"
-      ],
-      "default_privacy": credentials.source.privacy,
-      "default_sensitive": credentials.source.sensitive,
-      "me": credentials.id
-    },
-    "media_attachments": {
-      "accept_content_types": instance.configuration.media_attachments.supported_mime_types
-    },
-    "meta": {
-      "access_token": access_token,
-      "admin": "0",
-      "advanced_layout": true,
-      "auto_play_gif": false,
-      "boost_modal": false,
-      "compact_reaction": false,
-      "delete_modal": true,
-      "display_sensitive_media": false,
-      "domain": domain,
-      "enable_reaction": true,
-      "locale": "en",
-      "mascot": "/images/mascot.svg",
-      "max_toot_chars": instance.configuration.statuses.max_characters,
-      "me": credentials.id,
-      "reduce_motion": false,
-      "show_quote_button": true,
-      "base_url": `https://${domain}`,
-      "streaming_api_base_url": `wss://${domain}`,
-      "title": `${instance.title}`,
-      "unfollow_modal": true,
-      "source_url": 'https://iceshrimp.dev/iceshrimp/masto-fe-standalone',
-      "version": instance.version
-    },
-    "poll_limits": {
-      "max_expiration": instance.configuration.polls.max_expiration,
-      "max_option_chars": instance.configuration.polls.max_characters_per_option,
-      "max_options": instance.configuration.polls.max_options,
-      "min_expiration": instance.configuration.polls.min_expiration
-    },
-    "push_subscription": null,
-    "rights": {
-      "admin": false,
-      "delete_others_notice": false
-    },
-    "settings": {}
-  };
-
-  localStorage.setItem('initial-state', JSON.stringify(state));
-  window.location.href = '/';
-}
-
 function setMessage(message, disabled = true) {
  document.getElementById('message').textContent = message;
  document.getElementById('btn').disabled = disabled;
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Login | Masto-FE standalone</title>
+    <script src="/verify-state.js"></script>
+</head>
+<body>
+<p>Preparing state object...</p>
+</body>
+</html>
@@ -1,6 +1,103 @@
-const initialState = localStorage.getItem('initial-state');
-if (!initialState) {
-  window.location.href = '/login.html';
-} else {
-  document.getElementById('initial-state').textContent = initialState;
+loadState().then(_ => null);
+
+async function loadState() {
+  const domain = localStorage.getItem('domain');
+  const access_token = localStorage.getItem('access_token');
+  const storedState = localStorage.getItem('initial_state');
+
+  if (!domain || !access_token) {
+    window.location.href = '/login.html';
+    return;
+  }
+
+  if (storedState && window.location.pathname !== '/prepare.html') {
+    document.getElementById('initial-state').textContent = storedState;
+  }
+
+  const apiUrl = `https://${domain}/api`;
+  const instance = await fetch(`${apiUrl}/v1/instance`).then(async p => await p.json());
+  const options = {headers: {Authorization: `Bearer ${access_token}`}};
+  const credentials = await fetch(`${apiUrl}/v1/accounts/verify_credentials`, options).then(async p => await p.json());
+  const state = {
+    "accounts": {
+      "plc":{
+        "accepts_direct_messages_from":"everybody",
+        "acct": credentials.acct,
+        "avatar": credentials.avatar,
+        "avatar_static": credentials.avatar_static,
+        "bot": credentials.bot,
+        "created_at": credentials.created_at,
+        "display_name": credentials.display_name,
+        "emojis":[],
+        "fields":[],
+        "follow_requests_count":0,
+        "followers_count": credentials.followers_count,
+        "following_count": credentials.following_count,
+        "fqn":`${credentials.acct}@${domain}`,
+        "header": credentials.header,
+        "header_static": credentials.header_static,
+        "id": credentials.id,
+        "last_status_at": credentials.created_at,
+        "locked": credentials.locked,
+        "note":"",
+        "source": credentials.source,
+        "statuses_count": credentials.statuses_count,
+        "url": credentials.url,
+        "username": credentials.acct
+      }
+    },
+    "char_limit": instance.configuration.statuses.max_characters,
+    "compose": {
+      "allow_content_types": [
+        "text/x.misskeymarkdown"
+      ],
+      "default_privacy": credentials.source.privacy,
+      "default_sensitive": credentials.source.sensitive,
+      "me": credentials.id
+    },
+    "media_attachments": {
+      "accept_content_types": instance.configuration.media_attachments.supported_mime_types
+    },
+    "meta": {
+      "access_token": access_token,
+      "admin": "0",
+      "advanced_layout": true,
+      "auto_play_gif": false,
+      "boost_modal": false,
+      "compact_reaction": false,
+      "delete_modal": true,
+      "display_sensitive_media": false,
+      "domain": domain,
+      "enable_reaction": true,
+      "locale": "en",
+      "mascot": "/images/mascot.svg",
+      "max_toot_chars": instance.configuration.statuses.max_characters,
+      "me": credentials.id,
+      "reduce_motion": false,
+      "show_quote_button": true,
+      "base_url": `https://${domain}`,
+      "streaming_api_base_url": `wss://${domain}`,
+      "title": `${instance.title}`,
+      "unfollow_modal": true,
+      "source_url": 'https://iceshrimp.dev/iceshrimp/masto-fe-standalone',
+      "version": instance.version
+    },
+    "poll_limits": {
+      "max_expiration": instance.configuration.polls.max_expiration,
+      "max_option_chars": instance.configuration.polls.max_characters_per_option,
+      "max_options": instance.configuration.polls.max_options,
+      "min_expiration": instance.configuration.polls.min_expiration
+    },
+    "push_subscription": null,
+    "rights": {
+      "admin": false,
+      "delete_others_notice": false
+    },
+    "settings": {}
+  };
+
+  const json = JSON.stringify(state);
+  if (window.location.pathname !== '/prepare.html') document.getElementById('initial-state').textContent = json;
+  localStorage.setItem("initial_state", json);
+  if (window.location.pathname === '/prepare.html') window.location.href = '/';
 }