Merge remote-tracking branch 'origin/develop' into fixes-roundup5

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
-  const { oauth, instance } = state
-  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()))
-      })
+  if (store.state.oauth.userToken) {
+    store.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)
-        .then((app) => { oauthApi.login({ ...app, ...data }) })
+      // 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.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 import(
-    `../../node_modules/@kazvmoe-infra/unicode-emoji-json/annotations/${code}.json`
-  )
+  return annotationsLoader[lang]()
     .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(
-          { params: { ...userInfo } }
+        const token = await store.dispatch('ensureAppToken')
+        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 }) => {
-  if (clientId && clientSecret) {
-    return Promise.resolve({ clientId, clientSecret })
+export const getJsonOrError = async (response) => {
+  if (response.ok) {
+    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,16 +124,33 @@ 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) {
-        console.warn('Can\'t insert rule due to lack of support', e)
+      } catch {
+        // Fallback for older browsers that don't support 'index-max'
+        styles.sheet.insertRule(rule, styles.sheet.cssRules.length)
+        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)
       }
-    } else {
-      styles.sheet.insertRule(rule, 'index-max')
-      styles.rules.push(rule)
     }
   }
 
@@ -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,