Merge pull request #1807 from codidact/0valt/1805/sign-in-redirect-fix

Fix redirects to paths only used in AJAX requests after signing in

Author: Oaphi

app/assets/javascripts/comments.js

@@ -188,9 +188,7 @@ $(() => {
     const threadId = $tgt.data('thread');
     const $modal = $($tgt.data('modal'));
 
-    const resp = await fetch(`/comments/thread/${threadId}/followers`, {
-      method: 'GET',
-      credentials: 'include',
+    const resp = await QPixel.fetch(`/comments/thread/${threadId}/followers`, {
       headers: { 'Accept': 'text/html' }
     });
 
@@ -279,7 +277,8 @@ $(() => {
       const postId = $tgt.data('post');
 
       if (!pingable[`${threadId}-${postId}`] || Object.keys(pingable[`${threadId}-${postId}`]).length === 0) {
-        const resp = await fetch(`/comments/thread/${threadId}/pingable?post=${postId}`);
+        const resp = await QPixel.getJSON(`/comments/thread/${threadId}/pingable?post=${postId}`);
+
         pingable[`${threadId}-${postId}`] = await resp.json();
       }
 

app/assets/javascripts/notifications.js

@@ -45,14 +45,11 @@ $(() => {
     }
   };
 
-  $('.inbox-toggle').on('click', async (evt) => {
-    evt.preventDefault();
+  $('.inbox-toggle').on('click', async (ev) => {
+    ev.preventDefault();
     const $inbox = $('.inbox');
     if($inbox.hasClass("is-active")) {
-      const resp = await fetch(`/users/me/notifications`, {
-        credentials: 'include',
-        headers: { 'Accept': 'application/json' }
-      });
+      const resp = await QPixel.getJSON(`/users/me/notifications`);
 
       const data = await resp.json();
       const $inboxContainer = $inbox.find(".inbox--container");

app/assets/javascripts/qpixel_api.js

@@ -130,11 +130,8 @@ window.QPixel = {
       return QPixel._pendingUserResponse;
     }
 
-    const myselfPromise = fetch('/users/me', {
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json'
-      }
+    const myselfPromise = QPixel.fetch('/users/me', {
+      headers: { 'Accept': 'application/json' }
     });
 
     QPixel._pendingUserResponse = myselfPromise;
@@ -219,12 +216,7 @@ window.QPixel = {
   filters: async () => {
     if (this._filters == null) {
       // If they're still absent after loading from storage, load from the API.
-      const resp = await fetch('/users/me/filters', {
-        credentials: 'include',
-        headers: {
-          'Accept': 'application/json'
-        }
-      });
+      const resp = await QPixel.getJSON('/users/me/filters');
       const data = await resp.json();
 
       QPixel.Storage?.set('user_filters', data);
@@ -240,13 +232,8 @@ window.QPixel = {
     if (!user) {
       return '';
     }
-
-    const resp = await fetch(`/users/me/filters/default?category=${categoryId}`, {
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json'
-      }
-    });
+    
+    const resp = await QPixel.getJSON(`/users/me/filters/default?category=${categoryId}`);
 
     const data = await resp.json();
     return data.name;
@@ -313,12 +300,7 @@ window.QPixel = {
   },
 
   _fetchPreferences: async () => {
-    const resp = await fetch('/users/me/preferences', {
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json'
-      }
-    });
+    const resp = await QPixel.getJSON('/users/me/preferences');
     const data = await resp.json();
     QPixel._updatePreferencesLocally(data);
   },
@@ -343,41 +325,56 @@ window.QPixel = {
     return [currentSequence, posInSeq];
   },
 
-  fetchJSON: async (uri, data, options) => {
+  fetch: async (uri, init) => {
     const defaultHeaders = {
       'X-CSRF-Token': QPixel.csrfToken(),
+      // X-Requested-With is necessary for request.xhr? to work
+      'X-Requested-With': 'XMLHttpRequest',
       'Content-Type': 'application/json',
     };
 
-    const { headers = {}, ...otherOptions } = options ?? {};
+    const { headers = {}, ...restInit } = init ?? {};
+
+        /** @type {RequestInit} */
+        const requestInit = {
+          headers: {
+            ...defaultHeaders,
+            ...headers,
+          },
+          credentials: 'include',
+          ...restInit,
+        };
 
+    return fetch(uri, requestInit);
+  },
+
+  fetchJSON: async (uri, data, options = {}) => {
     /** @type {RequestInit} */
     const requestInit = {
       method: 'POST',
-      headers: {
-        ...defaultHeaders,
-        ...headers,
-      },
-      credentials: 'include',
-      body: otherOptions.method === 'GET' ? void 0 : JSON.stringify(data),
-      ...otherOptions,
+      body: options.method === 'GET' ? void 0 : JSON.stringify(data),
+      ...options,
     };
 
-    return fetch(uri, requestInit);
+    return QPixel.fetch(uri, requestInit);
   },
 
   getJSON: async (uri, options = {}) => {
+    const { headers = {} } = options ?? {};
+
     return QPixel.fetchJSON(uri, {}, {
       ...options,
+      headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        ...headers,
+      },
       method: 'GET',
     });
   },
 
   getComment: async (id) => {
-    const resp = await fetch(`/comments/${id}`, {
-      credentials: 'include',
-      headers: { 'Accept': 'application/json' }
-    });
+    const resp = await QPixel.getJSON(`/comments/${id}`);
 
     const data = await resp.json();
 
@@ -392,7 +389,7 @@ window.QPixel = {
     url.searchParams.append('inline', `${inline}`);
     url.searchParams.append('show_deleted_comments', `${showDeleted ? 1 : 0}`);
 
-    const resp = await fetch(url.toString(), {
+    const resp = await QPixel.fetch(url.toString(), {
       headers: { 'Accept': 'text/html' }
     });
 
@@ -404,7 +401,7 @@ window.QPixel = {
   getThreadsListContent: async (id) => {
     const url = new URL(`/comments/post/${id}`, window.location.origin);
 
-    const resp = await fetch(url.toString(), {
+    const resp = await QPixel.fetch(url.toString(), {
       headers: { 'Accept': 'text/html' }
     });
 

app/assets/javascripts/search.js

@@ -1,5 +1,6 @@
 $(() => {
-  let postTypes;
+  /** @type {QPixelPostType[] | null} */
+  let postTypes = null;
   const $itemTemplate = $('<a href="javascript:void(0)" class="item"></a>');
 
   $(document).on('keyup', 'input[name="search"]', async (ev) => {
@@ -32,18 +33,15 @@ $(() => {
     };
 
     if (!postTypes) {
-      const resp = await fetch(`/posts/types`, {
-        method: 'GET',
-        headers: {
-          'Accept': 'application/json'
-        }
-      });
+      const resp = await QPixel.getJSON(`/posts/types`);
+
       postTypes = await resp.json();
     }
 
     const items = postTypes.filter((pt) => pt.name.startsWith(currentWord.substr(10))).map((pt) => {
       return $itemTemplate.clone().text(pt.name).attr('data-post-type-id', pt.id);
     });
+
     QPixel.Popup.getPopup(items, $tgt[0], callback);
   });
 });

app/assets/javascripts/site_settings.js

@@ -27,9 +27,7 @@ $(() => {
     const valueType = $tgt.data('type');
     const communityId = $tgt.data('community-id');
 
-    const resp = await fetch(`/admin/settings/${name}${!!communityId ? '?community_id=' + communityId : ''}`, {
-      credentials: 'include'
-    });
+    const resp = await QPixel.getJSON(`/admin/settings/${name}${!!communityId ? '?community_id=' + communityId : ''}`);
 
     const data = await resp.json();
     const value = data.typed;

app/assets/javascripts/tag_sets.js

@@ -3,11 +3,9 @@ $(() => {
     const $tgt = $(ev.target);
     const tagSetId = $tgt.data('set-id');
 
-    const response = await fetch(`/admin/tag-sets/${tagSetId}`, {
-      headers: { 'Accept': 'application/json' }
-    });
+    const resp = await QPixel.getJSON(`/admin/tag-sets/${tagSetId}`);
 
-    const data = await response.json();
+    const data = await resp.json();
 
     const name = data.name;
     const $form = `<input type="text" class="js-edit-set-name form-element" value="${name}" />

global.d.ts

@@ -270,6 +270,26 @@ interface GetThreadContentOptions {
   showDeleted?: boolean
 }
 
+type QPixelPostType = {
+  id: number
+  name: string
+  description: string | null
+  has_answers: boolean
+  has_votes: boolean
+  has_tags: boolean
+  has_parent: boolean
+  has_category: boolean
+  has_license: boolean
+  is_public_editable: boolean
+  is_closeable: boolean
+  is_top_level: boolean
+  is_freely_editable: boolean
+  icon_name: string | null
+  has_reactions: boolean
+  answer_type_id: number | null
+  has_only_specific_reactions: boolean
+ }
+
 interface QPixel {
   // constants
 
@@ -423,6 +443,13 @@ interface QPixel {
    */
   validatePost?: (postText: string) => [boolean, PostValidatorMessage[]];
 
+  /**
+   * Wrapper around {@link fetch} to ensure credentials, CSRF token, and X-Requested-With are always sent
+   * @param uri target URI of the request
+   * @param options options to pass to {@link fetch}
+   */
+  fetch?: (uri: string | URL, options?: RequestInit) => Promise<Response>
+
   /**
    * Send a request with JSON data, pre-authorized with QPixel credentials for the signed in user.
    * @param uri The URI to which to send the request.
@@ -435,7 +462,6 @@ interface QPixel {
   /**
    * @param uri The URI to which to send the request.
    * @param options An optional {@link RequestInit} to override the defaults provided by {@link fetchJSON}
-   * @returns 
    */
   getJSON?: (uri: string, options?: Omit<RequestInit, 'method'>) => Promise<Response>;