Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3

build/emojis_plugin.js

@@ -0,0 +1,64 @@
+import { resolve } from 'node:path'
+import { access } from 'node:fs/promises'
+import { languages, langCodeToCldrName } from '../src/i18n/languages.js'
+
+const annotationsImportPrefix = '@kazvmoe-infra/unicode-emoji-json/annotations/'
+const specialAnnotationsLocale = {
+  ja_easy: 'ja'
+}
+
+const internalToAnnotationsLocale = (internal) => specialAnnotationsLocale[internal] || internal
+
+// This gets all the annotations that are accessible (whose language
+// can be chosen in the settings). Data for other languages are
+// discarded because there is no way for it to be fetched.
+const getAllAccessibleAnnotations = async (projectRoot) => {
+  const imports = (await Promise.all(
+    languages
+      .map(async lang => {
+        const destLang = internalToAnnotationsLocale(lang)
+        const importModule = `${annotationsImportPrefix}${destLang}.json`
+        const importFile = resolve(projectRoot, 'node_modules', importModule)
+        try {
+          await access(importFile)
+          return `'${lang}': () => import('${importModule}')`
+        } catch (e) {
+          return
+        }
+      })))
+        .filter(k => k)
+        .join(',\n')
+
+  return `
+export const annotationsLoader = {
+  ${imports}
+}
+`
+}
+
+const emojiAnnotationsId = 'virtual:pleroma-fe/emoji-annotations'
+const emojiAnnotationsIdResolved = '\0' + emojiAnnotationsId
+
+const emojisPlugin = () => {
+  let projectRoot
+  return {
+    name: 'emojis-plugin',
+    configResolved (conf) {
+      projectRoot = conf.root
+    },
+    resolveId (id) {
+      if (id === emojiAnnotationsId) {
+        return emojiAnnotationsIdResolved
+      }
+      return null
+    },
+    async load (id) {
+      if (id === emojiAnnotationsIdResolved) {
+        return await getAllAccessibleAnnotations(projectRoot)
+      }
+      return null
+    }
+  }
+}
+
+export default emojisPlugin

build/msw_plugin.js

@@ -0,0 +1,28 @@
+import { resolve } from 'node:path'
+import { readFile } from 'node:fs/promises'
+
+const target = 'node_modules/msw/lib/mockServiceWorker.js'
+
+const mswPlugin = () => {
+  let projectRoot
+  return {
+    name: 'msw-plugin',
+    apply: 'serve',
+    configResolved (conf) {
+      projectRoot = conf.root
+    },
+    configureServer (server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.path === '/mockServiceWorker.js') {
+          const file = await readFile(resolve(projectRoot, target))
+          res.set('Content-Type', 'text/javascript')
+          res.send(file)
+        } else {
+          next()
+        }
+      })
+    }
+  }
+}
+
+export default mswPlugin

changelog.d/check-canvas-extract-permission.fix

@@ -0,0 +1 @@
+Check for canvas extract permission when initializing favicon service

changelog.d/emoji-handling.remove

@@ -0,0 +1 @@
+Remove emoji annotations code for unused languages from final build

changelog.d/mobile-theme-editing.fix

@@ -0,0 +1 @@
+Enable mobile theme editing

changelog.d/no-create-app-on-first-visit.fix

@@ -0,0 +1 @@
+Create an OAuth app only when needed

changelog.d/palemoon-css-compatibility.fix

@@ -0,0 +1 @@
+Fix CSS compatibility issues in style_setter.js for older browsers like Palemoon

package.json

@@ -64,38 +64,39 @@
     "@vitest/browser": "^3.0.7",
     "@vitest/ui": "^3.0.7",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.2.5",
+    "@vue/babel-plugin-jsx": "1.4.0",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.5.0",
     "chalk": "5.4.1",
-    "chromedriver": "133.0.2",
+    "chromedriver": "133.0.3",
     "connect-history-api-fallback": "2.0.0",
     "cross-spawn": "7.0.6",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "9.20.1",
+    "eslint": "9.22.0",
     "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-n": "17.15.1",
+    "eslint-plugin-n": "17.16.2",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "9.32.0",
+    "eslint-plugin-vue": "9.33.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.21.2",
     "function-bind": "1.1.2",
     "http-proxy-middleware": "3.0.3",
     "iso-639-1": "3.1.5",
     "lodash": "4.17.21",
-    "nightwatch": "2.6.25",
+    "msw": "2.7.3",
+    "nightwatch": "3.11.1",
     "opn": "5.5.0",
     "ora": "0.4.1",
     "playwright": "1.49.1",
-    "postcss": "8.5.2",
+    "postcss": "8.5.3",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",
-    "sass": "1.85.0",
+    "sass": "1.85.1",
     "selenium-server": "3.141.59",
     "semver": "7.7.1",
     "serve-static": "1.16.2",

src/boot/after_store.js

@@ -11,7 +11,6 @@ import routes from './routes'
 import VBodyScrollLock from 'src/directives/body_scroll_lock'
 
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
-import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
@@ -228,17 +227,8 @@ const getStickers = async ({ store }) => {
 }
 
 const getAppSecret = async ({ store }) => {
-  const { state, commit } = store
+  if (store.state.oauth.userToken) {
-  const { oauth, instance } = state
+    store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
-  if (oauth.userToken) {
-    commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
-  } else {
-    return getOrCreateApp({ ...oauth, instance: instance.server, commit })
-      .then((app) => getClientToken({ ...app, instance: instance.server }))
-      .then((token) => {
-        commit('setAppToken', token.access_token)
-        commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
-      })
   }
 }
 

src/components/login_form/login_form.js

@@ -34,16 +34,21 @@ const LoginForm = {
       this.isTokenAuth ? this.submitToken() : this.submitPassword()
     },
     submitToken () {
-      const { clientId, clientSecret } = this.oauth
       const data = {
-        clientId,
-        clientSecret,
         instance: this.instance.server,
         commit: this.$store.commit
       }
 
-      oauthApi.getOrCreateApp(data)
+      // NOTE: we do not really need the app token, but obtaining a token and
-        .then((app) => { oauthApi.login({ ...app, ...data }) })
+      // calling verify_credentials is the only way to ensure the app still works.
+      this.$store.dispatch('ensureAppToken')
+        .then(() => {
+          const app = {
+            clientId: this.oauth.clientId,
+            clientSecret: this.oauth.clientSecret,
+          }
+          oauthApi.login({ ...app, ...data })
+        })
     },
     submitPassword () {
       const { clientId } = this.oauth
@@ -55,7 +60,14 @@ const LoginForm = {
       }
       this.error = false
 
-      oauthApi.getOrCreateApp(data).then((app) => {
+      // NOTE: we do not really need the app token, but obtaining a token and
+      // calling verify_credentials is the only way to ensure the app still works.
+      this.$store.dispatch('ensureAppToken').then(() => {
+        const app = {
+          clientId: this.oauth.clientId,
+          clientSecret: this.oauth.clientSecret,
+        }
+
         oauthApi.getTokenWithCredentials(
           {
             ...app,

src/components/settings_modal/settings_modal_user_content.vue

@@ -22,7 +22,7 @@
       <AppearanceTab />
     </div>
     <div
-      v-if="expertLevel > 0 && !isMobileLayout"
+      v-if="expertLevel > 0"
       :label="$t('settings.style.themes3.editor.title')"
       icon="palette"
       data-tab-name="style"
@@ -31,7 +31,7 @@
       <StyleTab />
     </div>
     <div
-      v-if="expertLevel > 0 && !isMobileLayout"
+      v-if="expertLevel > 0"
       :label="$t('settings.theme_old')"
       icon="paint-brush"
       data-tab-name="theme"

src/components/settings_modal/tabs/appearance_tab.vue

@@ -336,6 +336,15 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
+        <li>
+          <UnitSetting
+            path="themeEditorMinWidth"
+            :units="['px', 'rem']"
+            expert="1"
+          >
+            {{ $t('settings.theme_editor_min_width') }}
+          </UnitSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -1,4 +1,6 @@
 .StyleTab {
+  min-width: var(--themeEditorMinWidth, fit-content);
+
   .style-control {
     display: flex;
     flex-wrap: wrap;

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,4 +1,6 @@
 .theme-tab {
+  min-width: var(--themeEditorMinWidth, fit-content);
+
   .deprecation-warning {
     padding: 0.5em;
     margin: 2em;

src/i18n/en.json

@@ -709,6 +709,7 @@
     "column_sizes_sidebar": "Sidebar",
     "column_sizes_content": "Content",
     "column_sizes_notifs": "Notifications",
+    "theme_editor_min_width": "Minimum width of theme editor (0 for \"fit-content\")",
     "tree_advanced": "Allow more flexible navigation in tree view",
     "tree_fade_ancestors": "Display ancestors of the current status in faint text",
     "conversation_display_linear": "Linear-style",

src/main.js

@@ -5,6 +5,13 @@ import { createPinia } from 'pinia'
 import 'custom-event-polyfill'
 import './lib/event_target_polyfill.js'
 
+// Polyfill for Array.prototype.toSorted (ES2023)
+if (!Array.prototype.toSorted) {
+  Array.prototype.toSorted = function(compareFn) {
+    return [...this].sort(compareFn)
+  }
+}
+
 import vuexModules from './modules/index.js'
 
 import { createI18n } from 'vue-i18n'

src/modules/config.js

@@ -13,6 +13,7 @@ const APPEARANCE_SETTINGS_KEYS = new Set([
   'sidebarColumnWidth',
   'contentColumnWidth',
   'notifsColumnWidth',
+  'themeEditorMinWidth',
   'textSize',
   'navbarSize',
   'panelHeaderSize',

src/modules/default_config_state.js

@@ -121,6 +121,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  themeEditorMinWidth: undefined, // instance default
   emojiReactionsScale: undefined,
   textSize: undefined, // instance default
   emojiSize: undefined, // instance default

src/modules/instance.js

@@ -1,7 +1,9 @@
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
-import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
+import { ensureFinalFallback } from '../i18n/languages.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+// See build/emojis_plugin for more details
+import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'
 
 const SORTED_EMOJI_GROUP_IDS = [
   'smileys-and-emotion',
@@ -110,6 +112,7 @@ const defaultState = {
   emojiSize: '2.2rem',
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
+  themeEditorMinWidth: '0rem',
   forcedRoundness: -1,
   fontsOverride: {},
   virtualScrolling: true,
@@ -179,10 +182,7 @@ const defaultState = {
 }
 
 const loadAnnotations = (lang) => {
-  const code = langCodeToCldrName(lang)
+  return annotationsLoader[lang]()
-  return import(
-    `../../node_modules/@kazvmoe-infra/unicode-emoji-json/annotations/${code}.json`
-  )
     .then(k => k.default)
 }
 

src/modules/oauth.js

@@ -1,5 +1,27 @@
+import { createApp, getClientToken, verifyAppToken } from 'src/services/new_api/oauth.js'
+
+// status codes about verifyAppToken (GET /api/v1/apps/verify_credentials)
+const isAppTokenRejected = error => (
+  // Pleroma API docs say it returns 422 when unauthorized
+  error.statusCode === 422 ||
+  // but it actually returns 400 (as of 2.9.0)
+  // NOTE: don't try to match against the error message, it is translatable
+  error.statusCode === 400 ||
+  // and Mastodon docs say it returns 401
+  error.statusCode === 401
+)
+
+// status codes about getAppToken (GET /oauth/token)
+const isClientDataRejected = error => (
+  // Mastodon docs say it returns 401
+  error.statusCode === 401 ||
+  // but Pleroma actually returns 400 (as of 2.9.0)
+  // NOTE: don't try to match against the error message, it is translatable
+  error.statusCode === 400
+)
+
 const oauth = {
-  state: {
+  state: () => ({
     clientId: false,
     clientSecret: false,
     /* App token is authentication for app without any user, used mostly for
@@ -11,7 +33,7 @@ const oauth = {
      * that need authorized user to be successful (i.e. posting, liking etc)
      */
     userToken: false
-  },
+  }),
   mutations: {
     setClientData (state, { clientId, clientSecret }) {
       state.clientId = clientId
@@ -41,6 +63,88 @@ const oauth = {
       // added here for smoother transition, otherwise user will be logged out
       return state.userToken || state.token
     }
+  },
+  actions: {
+    async createApp ({ rootState, commit }) {
+      const instance = rootState.instance.server
+      const app = await createApp(instance)
+      commit('setClientData', app)
+      return app
+    },
+    /// Use this if you want to get the client id and secret but are not interested
+    /// in whether they are valid.
+    /// @return {{ clientId: string, clientSecret: string }} An object representing the app
+    ensureApp ({ state, dispatch }) {
+      if (state.clientId && state.clientSecret) {
+        return {
+          clientId: state.clientId,
+          clientSecret: state.clientSecret
+        }
+      } else {
+        return dispatch('createApp')
+      }
+    },
+    async getAppToken ({ state, rootState, commit }) {
+      const res = await getClientToken({
+        clientId: state.clientId,
+        clientSecret: state.clientSecret,
+        instance: rootState.instance.server
+      })
+      commit('setAppToken', res.access_token)
+      return res.access_token
+    },
+    /// Use this if you want to ensure the app is still valid to use.
+    /// @return {string} The access token to the app (not attached to any user)
+    async ensureAppToken ({ state, rootState, dispatch, commit }) {
+      if (state.appToken) {
+        try {
+          await verifyAppToken({
+            instance: rootState.instance.server,
+            appToken: state.appToken
+          })
+          return state.appToken
+        } catch (e) {
+          if (!isAppTokenRejected(e)) {
+            // The server did not reject our token, but we encountered other problems. Maybe the server is down.
+            throw e
+          } else {
+            // The app token is rejected, so it is no longer useful.
+            commit('setAppToken', false)
+          }
+        }
+      }
+
+      // appToken is not available, or is rejected: try to get a new one.
+      // First, make sure the client id and client secret are filled.
+      try {
+        await dispatch('ensureApp')
+      } catch (e) {
+        console.error('Cannot create app', e)
+        throw e
+      }
+
+      // Note that at this step, the client id and secret may be invalid
+      // (because the backend may have already deleted the app due to no user login)
+      try {
+        return await dispatch('getAppToken')
+      } catch (e) {
+        if (!isClientDataRejected(e)) {
+          // Non-credentials problem, fail fast
+          console.error('Cannot get app token', e)
+          throw e
+        } else {
+          // the client id and secret are invalid, so we should clear them
+          // and re-create our app
+          commit('setClientData', {
+            clientId: false,
+            clientSecret: false
+          })
+          await dispatch('createApp')
+          // try once again to get the token
+          return await dispatch('getAppToken')
+        }
+      }
+    }
   }
 }
 

src/modules/users.js

@@ -1,5 +1,6 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
+import apiService from '../services/api/api.service.js'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/sw/sw.js'
@@ -527,11 +528,10 @@ const users = {
     async signUp (store, userInfo) {
       store.commit('signUpPending')
 
-      const rootState = store.rootState
-
       try {
-        const data = await rootState.api.backendInteractor.register(
+        const token = await store.dispatch('ensureAppToken')
-          { params: { ...userInfo } }
+        const data = await apiService.register(
+          { credentials: token, params: { ...userInfo } }
         )
 
         if (data.access_token) {
@@ -562,7 +562,9 @@ const users = {
         instance: instance.server
       }
 
-      return oauthApi.getOrCreateApp(data)
+      // NOTE: No need to verify the app still exists, because if it doesn't,
+      // the token will be invalid too
+      return store.dispatch('ensureApp')
         .then((app) => {
           const params = {
             app,

src/services/favicon_service/favicon_service.js

@@ -1,3 +1,19 @@
+const checkCanvasExtractPermission = () => {
+  const canvas = document.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return false;
+
+  ctx.fillStyle = '#0f161e';
+  ctx.fillRect(0, 0, 1, 1);
+
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+
+  return data.join(',') === '15,22,30,255';
+};
+
 const createFaviconService = () => {
   const favicons = []
   const faviconWidth = 128
@@ -5,6 +21,8 @@ const createFaviconService = () => {
   const badgeRadius = 32
 
   const initFaviconService = () => {
+    if (!checkCanvasExtractPermission()) return;
+
     const nodes = document.querySelectorAll('link[rel="icon"]')
     nodes.forEach(favicon => {
       if (favicon) {

src/services/new_api/oauth.js

@@ -1,12 +1,20 @@
 import { reduce } from 'lodash'
+import { StatusCodeError } from 'src/services/errors/errors.js'
 
 const REDIRECT_URI = `${window.location.origin}/oauth-callback`
 
-export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) => {
+export const getJsonOrError = async (response) => {
-  if (clientId && clientSecret) {
+  if (response.ok) {
-    return Promise.resolve({ clientId, clientSecret })
+    return response.json()
+      .catch((error) => {
+        throw new StatusCodeError(response.status, error, {}, response)
+      })
+  } else {
+    throw new StatusCodeError(response.status, await response.text(), {}, response)
   }
+}
 
+export const createApp = (instance) => {
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
 
@@ -19,9 +27,16 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
     method: 'POST',
     body: form
   })
-    .then((data) => data.json())
+    .then(getJsonOrError)
     .then((app) => ({ clientId: app.client_id, clientSecret: app.client_secret }))
-    .then((app) => commit('setClientData', app) || app)
+}
+
+export const verifyAppToken = ({ instance, appToken }) => {
+  return window.fetch(`${instance}/api/v1/apps/verify_credentials`, {
+    method: 'GET',
+    headers: { Authorization: `Bearer ${appToken}` }
+  })
+    .then(getJsonOrError)
 }
 
 const login = ({ instance, clientId }) => {
@@ -92,7 +107,7 @@ export const getClientToken = ({ clientId, clientSecret, instance }) => {
   return window.fetch(url, {
     method: 'POST',
     body: form
-  }).then((data) => data.json())
+  }).then(getJsonOrError)
 }
 const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
   const url = `${instance}/oauth/mfa/challenge`
@@ -144,7 +159,6 @@ const oauth = {
   login,
   getToken,
   getTokenWithCredentials,
-  getOrCreateApp,
   verifyOTPCode,
   verifyRecoveryCode,
   revokeToken

src/services/style_setter/style_setter.js

@@ -124,17 +124,34 @@ export const applyTheme = (
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
   const insertRule = (styles, rule) => {
-    if (rule.indexOf('webkit') >= 0) {
+    try {
+      // Try to use modern syntax first
       try {
         styles.sheet.insertRule(rule, 'index-max')
         styles.rules.push(rule)
-      } catch (e) {
+      } catch {
-        console.warn('Can\'t insert rule due to lack of support', e)
+        // Fallback for older browsers that don't support 'index-max'
-      }
+        styles.sheet.insertRule(rule, styles.sheet.cssRules.length)
-    } else {
-      styles.sheet.insertRule(rule, 'index-max')
         styles.rules.push(rule)
       }
+    } catch (e) {
+      console.warn('Can\'t insert rule due to lack of support', e, rule)
+
+      // Try to sanitize the rule for better compatibility
+      try {
+        // Remove any potentially problematic CSS features
+        let sanitizedRule = rule
+          .replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
+          .replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
+
+        if (sanitizedRule !== rule) {
+          styles.sheet.insertRule(sanitizedRule, styles.sheet.cssRules.length)
+          styles.rules.push(sanitizedRule)
+        }
+      } catch (e2) {
+        console.error('Failed to insert even sanitized rule', e2)
+      }
+    }
   }
 
   const { lazyProcessFunc } = generateTheme(
@@ -170,6 +187,7 @@ const extractStyleConfig = ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
+  themeEditorMinWidth,
   emojiReactionsScale,
   emojiSize,
   navbarSize,
@@ -181,6 +199,7 @@ const extractStyleConfig = ({
     sidebarColumnWidth,
     contentColumnWidth,
     notifsColumnWidth,
+    themeEditorMinWidth: parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
     emojiReactionsScale,
     emojiSize,
     navbarSize,

test/fixtures/mock_api.js

@@ -0,0 +1,62 @@
+import { test as testBase } from 'vitest'
+import { setupWorker } from 'msw/browser'
+import { http, HttpResponse } from 'msw'
+
+// https://mswjs.io/docs/recipes/vitest-browser-mode
+export const injectMswToTest = (defaultHandlers) => {
+  const worker = setupWorker(...defaultHandlers)
+
+  return testBase.extend({
+    worker: [
+      async ({}, use) => {
+        await worker.start()
+
+        await use(worker)
+
+        worker.resetHandlers()
+        worker.stop()
+      },
+      {
+        auto: true
+      }
+    ],
+  })
+}
+
+export const testServer = 'https://test.server.example'
+
+export const authApis = [
+  http.post(`${testServer}/api/v1/apps`, () => {
+    return HttpResponse.json({
+      client_id: 'test-id',
+      client_secret: 'test-secret'
+    })
+  }),
+  http.get(`${testServer}/api/v1/apps/verify_credentials`, ({ request }) => {
+    const authHeader = request.headers.get('Authorization')
+    if (authHeader === 'Bearer test-app-token' ||
+        authHeader === 'Bearer also-good-app-token') {
+      return HttpResponse.json({})
+    } else {
+      // Pleroma 2.9.0 gives the following respoonse upon error
+      return HttpResponse.json({ error: { detail: 'Internal server error' } }, {
+        status: 400
+      })
+    }
+  }),
+  http.post(`${testServer}/oauth/token`, async ({ request }) => {
+    const data = await request.formData()
+
+    if (data.get('client_id') === 'test-id' &&
+       data.get('client_secret') === 'test-secret' &&
+       data.get('grant_type') === 'client_credentials' &&
+       data.has('redirect_uri')) {
+      return HttpResponse.json({ access_token: 'test-app-token' })
+    } else {
+      // Pleroma 2.9.0 gives the following respoonse upon error
+      return HttpResponse.json({ error: 'Invalid credentials' }, {
+        status: 400
+      })
+    }
+  })
+]

test/unit/specs/modules/oauth.spec.js

@@ -0,0 +1,199 @@
+import { createStore } from 'vuex'
+import { http, HttpResponse } from 'msw'
+import oauth from 'src/modules/oauth.js'
+import { injectMswToTest, authApis, testServer } from '/test/fixtures/mock_api.js'
+
+const test = injectMswToTest(authApis)
+
+const getStore = (defaultStateInjection) => {
+  const stateFunction = defaultStateInjection ? () => {
+    return {
+      ...oauth.state(),
+      ...defaultStateInjection
+    }
+  } : oauth.state
+
+  return createStore({
+    modules: {
+      instance: {
+        state: () => ({ server: testServer })
+      },
+      oauth: {
+        ...oauth,
+        state: stateFunction
+      }
+    }
+  })
+}
+
+
+describe('createApp', () => {
+  test('it should use create an app and record client id and secret', async () => {
+    const store = getStore()
+    const app = await store.dispatch('createApp')
+    expect(store.state.oauth.clientId).to.eql('test-id')
+    expect(store.state.oauth.clientSecret).to.eql('test-secret')
+    expect(app.clientId).to.eql('test-id')
+    expect(app.clientSecret).to.eql('test-secret')
+  })
+
+  test('it should throw and not update if failed', async ({ worker }) => {
+    worker.use(
+      http.post(`${testServer}/api/v1/apps`, () => {
+        return HttpResponse.text('Throttled', { status: 429 })
+      })
+    )
+
+    const store = getStore()
+    const res = store.dispatch('createApp')
+    await expect(res).rejects.toThrowError('Throttled')
+    expect(store.state.oauth.clientId).to.eql(false)
+    expect(store.state.oauth.clientSecret).to.eql(false)
+  })
+})
+
+describe('ensureApp', () => {
+  test('it should create an app if it does not exist', async () => {
+    const store = getStore()
+    const app = await store.dispatch('ensureApp')
+    expect(store.state.oauth.clientId).to.eql('test-id')
+    expect(store.state.oauth.clientSecret).to.eql('test-secret')
+    expect(app.clientId).to.eql('test-id')
+    expect(app.clientSecret).to.eql('test-secret')
+  })
+
+  test('it should not create an app if it exists', async ({ worker }) => {
+    worker.use(
+      http.post(`${testServer}/api/v1/apps`, () => {
+        return HttpResponse.text('Should not call this API', { status: 400 })
+      })
+    )
+
+    const store = getStore({
+      clientId: 'another-id',
+      clientSecret: 'another-secret'
+    })
+    const app = await store.dispatch('ensureApp')
+    expect(store.state.oauth.clientId).to.eql('another-id')
+    expect(store.state.oauth.clientSecret).to.eql('another-secret')
+    expect(app.clientId).to.eql('another-id')
+    expect(app.clientSecret).to.eql('another-secret')
+  })
+})
+
+describe('getAppToken', () => {
+  test('it should get app token and set it in state', async () => {
+    const store = getStore({
+      clientId: 'test-id',
+      clientSecret: 'test-secret'
+    })
+    const token = await store.dispatch('getAppToken')
+    expect(token).to.eql('test-app-token')
+    expect(store.state.oauth.appToken).to.eql('test-app-token')
+  })
+
+  test('it should throw and not set state if it cannot get app token', async () => {
+    const store = getStore({
+      clientId: 'bad-id',
+      clientSecret: 'bad-secret'
+    })
+    await expect(store.dispatch('getAppToken')).rejects.toThrowError('400')
+    expect(store.state.oauth.appToken).to.eql(false)
+  })
+})
+
+describe('ensureAppToken', () => {
+  test('it should work if the state is empty', async () => {
+    const store = getStore()
+    const token = await store.dispatch('ensureAppToken')
+    expect(token).to.eql('test-app-token')
+    expect(store.state.oauth.appToken).to.eql('test-app-token')
+  })
+
+  test('it should work if we already have a working token', async () => {
+    const store = getStore({
+      appToken: 'also-good-app-token'
+    })
+    const token = await store.dispatch('ensureAppToken')
+    expect(token).to.eql('also-good-app-token')
+    expect(store.state.oauth.appToken).to.eql('also-good-app-token')
+  })
+
+  test('it should work if we have a bad token but good app credentials', async ({ worker }) => {
+    worker.use(
+      http.post(`${testServer}/api/v1/apps`, () => {
+        return HttpResponse.text('Should not call this API', { status: 400 })
+      })
+    )
+    const store = getStore({
+      appToken: 'bad-app-token',
+      clientId: 'test-id',
+      clientSecret: 'test-secret'
+    })
+    const token = await store.dispatch('ensureAppToken')
+    expect(token).to.eql('test-app-token')
+    expect(store.state.oauth.appToken).to.eql('test-app-token')
+  })
+
+  test('it should work if we have no token but good app credentials', async ({ worker }) => {
+    worker.use(
+      http.post(`${testServer}/api/v1/apps`, () => {
+        return HttpResponse.text('Should not call this API', { status: 400 })
+      })
+    )
+    const store = getStore({
+      clientId: 'test-id',
+      clientSecret: 'test-secret'
+    })
+    const token = await store.dispatch('ensureAppToken')
+    expect(token).to.eql('test-app-token')
+    expect(store.state.oauth.appToken).to.eql('test-app-token')
+  })
+
+  test('it should work if we have no token and bad app credentials', async () => {
+    const store = getStore({
+      clientId: 'bad-id',
+      clientSecret: 'bad-secret'
+    })
+    const token = await store.dispatch('ensureAppToken')
+    expect(token).to.eql('test-app-token')
+    expect(store.state.oauth.appToken).to.eql('test-app-token')
+    expect(store.state.oauth.clientId).to.eql('test-id')
+    expect(store.state.oauth.clientSecret).to.eql('test-secret')
+  })
+
+  test('it should work if we have bad token and bad app credentials', async () => {
+    const store = getStore({
+      appToken: 'bad-app-token',
+      clientId: 'bad-id',
+      clientSecret: 'bad-secret'
+    })
+    const token = await store.dispatch('ensureAppToken')
+    expect(token).to.eql('test-app-token')
+    expect(store.state.oauth.appToken).to.eql('test-app-token')
+    expect(store.state.oauth.clientId).to.eql('test-id')
+    expect(store.state.oauth.clientSecret).to.eql('test-secret')
+  })
+
+  test('it should throw if we cannot create an app', async ({ worker }) => {
+    worker.use(
+      http.post(`${testServer}/api/v1/apps`, () => {
+        return HttpResponse.text('Throttled', { status: 429 })
+      })
+    )
+
+    const store = getStore()
+    await expect(store.dispatch('ensureAppToken')).rejects.toThrowError('Throttled')
+  })
+
+  test('it should throw if we cannot obtain app token', async ({ worker }) => {
+    worker.use(
+      http.post(`${testServer}/oauth/token`, () => {
+        return HttpResponse.text('Throttled', { status: 429 })
+      })
+    )
+
+    const store = getStore()
+    await expect(store.dispatch('ensureAppToken')).rejects.toThrowError('Throttled')
+  })
+})

vite.config.js

@@ -5,9 +5,11 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import stylelint from 'vite-plugin-stylelint'
 import eslint from 'vite-plugin-eslint2'
+import emojisPlugin from './build/emojis_plugin.js'
 import { devSwPlugin, buildSwPlugin, swMessagesPlugin } from './build/sw_plugin.js'
 import copyPlugin from './build/copy_plugin.js'
 import { getCommitHash } from './build/commit_hash.js'
+import mswPlugin from './build/msw_plugin.js'
 
 const localConfigPath = '<projectRoot>/config/local.json'
 const getLocalDevSettings = async () => {
@@ -104,6 +106,7 @@ export default defineConfig(async ({ mode, command }) => {
       devSwPlugin({ swSrc, swDest, transformSW, alias }),
       buildSwPlugin({ swSrc, swDest }),
       swMessagesPlugin(),
+      emojisPlugin(),
       copyPlugin({
         inUrl: '/static/ruffle',
         inFs: resolve(projectRoot, 'node_modules/@ruffle-rs/ruffle')
@@ -117,7 +120,8 @@ export default defineConfig(async ({ mode, command }) => {
         lintInWorker: true,
         lintOnStart: true,
         cacheLocation: resolve(projectRoot, 'node_modules/.cache/stylelintcache')
-      })
+      }),
+      ...(mode === 'test' ? [mswPlugin()] : [])
     ],
     optimizeDeps: {
       // For unknown reasons, during vitest, vite will re-optimize the following