migrate adminSettings to pinia

2026-06-09 13:11:21 +03:00 · 2026-06-09 13:11:21 +03:00 · 50b356fc1d
commit 50b356fc1d
parent 5ecfbee434
15 changed files with 178 additions and 164 deletions
--- a/src/components/settings_modal/admin_tabs/admin_card.js
+++ b/src/components/settings_modal/admin_tabs/admin_card.js
@ -7,7 +7,7 @@ import { useAdminUsersStore } from 'src/stores/adminUsers.js'
 const AdminCard = {
  props: {
    userId: {
-      type: String
+      type: String,
    },
  },
  components: {
@ -43,7 +43,7 @@ const AdminCard = {
    },
    isConfirmed() {
      return this.userAdminData.is_confirmed
-    }
+    },
  },
 }

--- a/src/components/settings_modal/admin_tabs/auth_tab.js
+++ b/src/components/settings_modal/admin_tabs/auth_tab.js
@ -9,6 +9,8 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 import TupleSetting from '../helpers/tuple_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const AuthTab = {
  provide() {
    return {
@ -30,9 +32,7 @@ const AuthTab = {
  computed: {
    ...SharedComputedObject(),
    LDAPEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':ldap'][
-        ':enabled'
-      ]
+      return useAdminSettingsStore().draft[':pleroma'][':ldap'][':enabled']
    },
  },
 }
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@ -7,6 +7,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInterfaceStore } from 'src/stores/interface.js'

 import { library } from '@fortawesome/fontawesome-svg-core'
@ -43,7 +44,7 @@ const FrontendsTab = {
  computed: {
    ...SharedComputedObject(),
    frontends() {
-      return this.$store.state.adminSettings.frontends
+      return useAdminSettingsStore().frontends
    },
  },
  methods: {
@ -104,7 +105,7 @@ const FrontendsTab = {
      const ref = suggestRef || this.getSuggestedRef(frontend)
      const { name } = frontend

-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
        path: [':pleroma', ':frontends', ':primary'],
        value: { name, ref },
      })
--- a/src/components/settings_modal/admin_tabs/http_tab.js
+++ b/src/components/settings_modal/admin_tabs/http_tab.js
@ -12,6 +12,8 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 import TupleSetting from '../helpers/tuple_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const HTTPTab = {
  provide() {
    return {
@ -35,7 +37,7 @@ const HTTPTab = {
    ...SharedComputedObject(),
    sslOptions() {
      const desc = get(
-        this.$store.state.adminSettings.descriptions,
+        useAdminSettingsStore().descriptions,
        ':pleroma.:http.:adapter.:ssl_options.:versions',
      )
      return new Set(
--- a/src/components/settings_modal/admin_tabs/instance_tab.js
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@ -12,6 +12,8 @@ import PWAManifestIconsSetting from '../helpers/pwa_manifest_icons_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const InstanceTab = {
  provide() {
    return {
@ -34,7 +36,7 @@ const InstanceTab = {
  computed: {
    ...SharedComputedObject(),
    providersOptions() {
-      const desc = get(this.$store.state.adminSettings.descriptions, [
+      const desc = get(useAdminSettingsStore().descriptions, [
        ':pleroma',
        'Pleroma.Web.Metadata',
        ':providers',
@ -47,7 +49,7 @@ const InstanceTab = {
      )
    },
    limitLocalContentOptions() {
-      const desc = get(this.$store.state.adminSettings.descriptions, [
+      const desc = get(useAdminSettingsStore().descriptions, [
        ':pleroma',
        ':instance',
        ':limit_to_local_content',
--- a/src/components/settings_modal/admin_tabs/links_tab.js
+++ b/src/components/settings_modal/admin_tabs/links_tab.js
@ -10,6 +10,8 @@ import ListSetting from '../helpers/list_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const LinksTab = {
  provide() {
    return {
@ -30,27 +32,27 @@ const LinksTab = {
  computed: {
    classIsPresent() {
      return (
-        this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][
+        useAdminSettingsStore().draft[':pleroma']['Pleroma.Formatter'][
          ':class'
        ] !== false
      )
    },
    relIsPresent() {
      return (
-        this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][
+        useAdminSettingsStore().draft[':pleroma']['Pleroma.Formatter'][
          ':rel'
        ] !== false
      )
    },
    truncateIsPresent() {
      return (
-        this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][
+        useAdminSettingsStore().draft[':pleroma']['Pleroma.Formatter'][
          ':truncate'
        ] !== false
      )
    },
    truncateDescription() {
-      return get(this.$store.state.adminSettings.descriptions, [
+      return get(useAdminSettingsStore().descriptions, [
        ':pleroma',
        'Pleroma.Formatter',
        ':truncate',
@ -58,7 +60,7 @@ const LinksTab = {
    },
    ttlSettersOptions() {
      const desc = get(
-        this.$store.state.adminSettings.descriptions,
+        useAdminSettingsStore().descriptions,
        ':pleroma.:rich_media.:ttl_setters',
      )
      return new Set(
@ -70,7 +72,7 @@ const LinksTab = {
    },
    parsersOptions() {
      const desc = get(
-        this.$store.state.adminSettings.descriptions,
+        useAdminSettingsStore().descriptions,
        ':pleroma.:rich_media.:parsers',
      )
      return new Set(
@ -97,12 +99,12 @@ const LinksTab = {
      ]
    },
    mediaProxyEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
        ':enabled'
      ]
    },
    mediaInvalidationProvider() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
        ':invalidation'
      ][':provider']
    },
@ -110,19 +112,19 @@ const LinksTab = {
  },
  methods: {
    checkRel(e) {
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
        path: [':pleroma', 'Pleroma.Formatter', ':rel'],
        value: e ? '' : false,
      })
    },
    checkClass(e) {
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
        path: [':pleroma', 'Pleroma.Formatter', ':class'],
        value: e ? '' : false,
      })
    },
    checkTruncate(e) {
-      this.$store.commit('updateAdminDraft', {
+      useAdminSettingsStore.updateAdminDraft({
        path: [':pleroma', 'Pleroma.Formatter', ':truncate'],
        value: e ? 20 : false,
      })
--- a/src/components/settings_modal/admin_tabs/mailer_tab.js
+++ b/src/components/settings_modal/admin_tabs/mailer_tab.js
@ -7,6 +7,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const MailerTab = {
  provide() {
    return {
@ -26,7 +28,7 @@ const MailerTab = {
  computed: {
    adaptersLabels() {
      const prefix = 'Swoosh.Adapters.'
-      const descriptions = this.$store.state.adminSettings.descriptions
+      const descriptions = useAdminSettingsStore().descriptions
      const options =
        descriptions[':pleroma']['Pleroma.Emails.Mailer'][':adapter']
          .suggestions
@ -46,20 +48,20 @@ const MailerTab = {
      // ]))
    },
    adapter() {
-      return this.$store.state.adminSettings.draft[':pleroma'][
-        'Pleroma.Emails.Mailer'
-      ][':adapter']
+      return useAdminSettingsStore().draft[':pleroma']['Pleroma.Emails.Mailer'][
+        ':adapter'
+      ]
    },
    mailerEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][
-        'Pleroma.Emails.Mailer'
-      ][':enabled']
+      return useAdminSettingsStore().draft[':pleroma']['Pleroma.Emails.Mailer'][
+        ':enabled'
+      ]
    },
    ...SharedComputedObject(),
  },
  methods: {
    adapterHasKey(key) {
-      const descriptions = this.$store.state.adminSettings.descriptions
+      const descriptions = useAdminSettingsStore().descriptions
      const mailerStuff = descriptions[':pleroma']['Pleroma.Emails.Mailer']
      const adapterStuff = mailerStuff[':subgroup,' + this.adapter]
      return Object.hasOwn(adapterStuff, key)
--- a/src/components/settings_modal/admin_tabs/media_proxy_tab.js
+++ b/src/components/settings_modal/admin_tabs/media_proxy_tab.js
@ -7,6 +7,8 @@ import ListSetting from '../helpers/list_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const MediaProxyTab = {
  provide() {
    return {
@ -25,12 +27,12 @@ const MediaProxyTab = {
  },
  computed: {
    mediaProxyEnabled() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
        ':enabled'
      ]
    },
    mediaInvalidationProvider() {
-      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][
+      return useAdminSettingsStore().draft[':pleroma'][':media_proxy'][
        ':invalidation'
      ][':provider']
    },
--- a/src/components/settings_modal/admin_tabs/uploads_tab.js
+++ b/src/components/settings_modal/admin_tabs/uploads_tab.js
@ -4,6 +4,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
+
 const UploadsTab = {
  provide() {
    return {
@ -40,9 +42,9 @@ const UploadsTab = {
  },
  computed: {
    uploader() {
-      return this.$store.state.adminSettings.draft[':pleroma'][
-        'Pleroma.Upload'
-      ][':uploader']
+      return useAdminSettingsStore().draft[':pleroma']['Pleroma.Upload'][
+        ':uploader'
+      ]
    },
    ...SharedComputedObject(),
  },
--- a/src/components/settings_modal/admin_tabs/users_tab.js
+++ b/src/components/settings_modal/admin_tabs/users_tab.js
@ -115,7 +115,8 @@ const UsersTab = {
  },
  methods: {
    fetchUsers(page) {
-      return useAdminUsersStore().fetchAdminUsers({
+      return useAdminUsersStore()
+        .fetchAdminUsers({
          ...this.fetchOptions,
          page,
        })
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@ -4,6 +4,7 @@ import DraftButtons from './draft_buttons.vue'
 import LocalSettingIndicator from './local_setting_indicator.vue'
 import ModifiedIndicator from './modified_indicator.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useLocalConfigStore } from 'src/stores/local_config.js'
@ -125,14 +126,14 @@ export default {
    draft: {
      get() {
        if (this.realSource === 'admin' || this.path == null) {
-          return get(this.$store.state.adminSettings.draft, this.canonPath)
+          return get(useAdminSettingsStore().draft, this.canonPath)
        } else {
          return this.localDraft
        }
      },
      set(value) {
        if (this.realSource === 'admin' || this.path == null) {
-          this.$store.commit('updateAdminDraft', {
+          useAdminSettingsStore.updateAdminDraft({
            path: this.canonPath,
            value,
          })
@ -164,10 +165,7 @@ export default {
        : this.draftMode
    },
    backendDescription() {
-      return get(
-        this.$store.state.adminSettings.descriptions,
-        this.descriptionPath,
-      )
+      return get(useAdminSettingsStore().descriptions, this.descriptionPath)
    },
    backendDescriptionLabel() {
      if (this.realSource !== 'admin') return ''
@ -221,10 +219,7 @@ export default {
      let parentValue = null
      if (this.parentPath !== undefined && this.realSource === 'admin') {
        if (this.realDraftMode) {
-          parentValue = get(
-            this.$store.state.adminSettings.draft,
-            this.parentPath,
-          )
+          parentValue = get(useAdminSettingsStore().draft, this.parentPath)
        } else {
          parentValue = get(this.configSource, this.parentPath)
        }
@ -243,7 +238,7 @@ export default {
        case 'profile':
          return this.$store.state.profileConfig
        case 'admin':
-          return this.$store.state.adminSettings.config
+          return useAdminSettingsStore().config
        default:
          return useMergedConfigStore().mergedConfig
      }
@ -259,7 +254,7 @@ export default {
            this.$store.dispatch('setProfileOption', { name: k, value: v })
        case 'admin':
          return (k, v) =>
-            this.$store.dispatch('pushAdminSetting', { path: k, value: v })
+            useAdminSettingsStore.pushAdminSetting({ path: k, value: v })
        default:
          return (readPath, value) => {
            const writePath = `${readPath}`
@ -372,9 +367,7 @@ export default {
    canHardReset() {
      return (
        this.realSource === 'admin' &&
-        this.$store.state.adminSettings.modifiedPaths?.has(
-          this.canonPath.join(' -> '),
-        )
+        useAdminSettingsStore().modifiedPaths?.has(this.canonPath.join(' -> '))
      )
    },
    matchesExpertLevel() {
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -8,6 +8,7 @@ import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from 'src/components/popover/popover.vue'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useLocalConfigStore } from 'src/stores/local_config.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@ -232,10 +233,10 @@ const SettingsModal = {
      return clone
    },
    resetAdminDraft() {
-      this.$store.commit('resetAdminDraft')
+      useAdminSettingsStore.resetAdminDraft()
    },
    pushAdminDraft() {
-      this.$store.dispatch('pushAdminDraft')
+      useAdminSettingsStore.pushAdminDraft()
    },
    ...mapActions(useInterfaceStore, [
      'temporaryChangesRevert',
@ -265,8 +266,8 @@ const SettingsModal = {
    },
    adminDraftAny() {
      return !isEqual(
-        this.$store.state.adminSettings.config,
-        this.$store.state.adminSettings.draft,
+        useAdminSettingsStore().config,
+        useAdminSettingsStore().draft,
      )
    },
  },
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@ -19,6 +19,7 @@ import UploadsTab from './admin_tabs/uploads_tab.vue'
 import UsersTab from './admin_tabs/users_tab.vue'
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'

+import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
 import { useInterfaceStore } from 'src/stores/interface.js'

 import { library } from '@fortawesome/fontawesome-svg-core'
@ -109,18 +110,18 @@ const SettingsModalAdminContent = {
      return useInterfaceStore().settingsModalState === 'visible'
    },
    adminDbLoaded() {
-      return this.$store.state.adminSettings.loaded
+      return useAdminSettingsStore().loaded
    },
    adminDescriptionsLoaded() {
-      return this.$store.state.adminSettings.descriptions !== null
+      return useAdminSettingsStore().descriptions !== null
    },
    noDb() {
-      return this.$store.state.adminSettings.dbConfigEnabled === false
+      return useAdminSettingsStore().dbConfigEnabled === false
    },
  },
  created() {
    if (this.user.rights.admin) {
-      this.$store.dispatch('loadAdminStuff')
+      useAdminSettingsStore().loadAdminStuff()
    }
  },
  methods: {
--- a/src/modules/index.js
+++ b/src/modules/index.js
@ -1,4 +1,3 @@
-import adminSettings from './adminSettings.js'
 import api from './api.js'
 import chats from './chats.js'
 import drafts from './drafts.js'
@ -13,7 +12,6 @@ export default {
  users,
  api,
  profileConfig,
-  adminSettings,
  drafts,
  chats,
 }
--- a/src/stores/admin_settings.js
+++ b/src/stores/admin_settings.js
@ -1,4 +1,5 @@
 import { cloneDeep, differenceWith, flatten, get, isEqual, set } from 'lodash'
+import { defineStore } from 'pinia'

 export const defaultState = {
  frontends: [],
@ -15,17 +16,17 @@ export const newUserFlags = {
  ...defaultState.flagStorage,
 }

-const adminSettingsStorage = {
-  state: {
+export const useAdminSettingsStore = defineStore('adminSettings', {
+  state: () => ({
    ...cloneDeep(defaultState),
-  },
-  mutations: {
-    setInstanceAdminNoDbConfig(state) {
-      state.loaded = false
-      state.dbConfigEnabled = false
+  }),
+  actions: {
+    setInstanceAdminNoDbConfig() {
+      this.loaded = false
+      this.dbConfigEnabled = false
    },
-    setAvailableFrontends(state, { frontends }) {
-      state.frontends = frontends.map((f) => {
+    setAvailableFrontends({ frontends }) {
+      this.frontends = frontends.map((f) => {
        f.installedRefs = f.installed_refs
        if (f.name === 'pleroma-fe') {
          f.refs = ['master', 'develop']
@ -35,58 +36,60 @@ const adminSettingsStorage = {
        return f
      })
    },
-    updateAdminSettings(state, { config, modifiedPaths }) {
-      state.loaded = true
-      state.dbConfigEnabled = true
-      state.config = config
-      state.modifiedPaths = modifiedPaths
+    updateAdminSettings({ config, modifiedPaths }) {
+      this.loaded = true
+      this.dbConfigEnabled = true
+      this.config = config
+      this.modifiedPaths = modifiedPaths
    },
-    updateAdminDescriptions(state, { descriptions }) {
-      state.descriptions = descriptions
+    updateAdminDescriptions({ descriptions }) {
+      this.descriptions = descriptions
    },
-    updateAdminDraft(state, { path, value }) {
+    updateAdminDraft({ path, value }) {
      const [group, key, subkey] = path
      const parent = [group, key, subkey]

-      set(state.draft, path, value)
+      set(this.draft, path, value)

      // force-updating grouped draft to trigger refresh of group settings
      if (path.length > parent.length) {
-        set(state.draft, parent, cloneDeep(get(state.draft, parent)))
+        set(this.draft, parent, cloneDeep(get(this.draft, parent)))
      }
    },
-    resetAdminDraft(state) {
-      state.draft = cloneDeep(state.config)
+    resetAdminDraft() {
+      this.draft = cloneDeep(this.config)
    },
-  },
-  actions: {
-    async fetchAdminUsers(store, opts) {
-      const data = await store.rootState.api.backendInteractor.adminListUsers({
-        opts,
-      })
-      data.users.forEach((user) =>
-        store.dispatch('fetchUserIfMissing', user.id),
+    async fetchAdminUsers(opts) {
+      const data = await window.vuex.state.api.backendInteractor.adminListUsers(
+        {
+          opts,
+        },
      )
+
+      data.users.forEach((user) =>
+        window.vuex.dispatch('fetchUserIfMissing', user.id),
+      )
+
      return data
    },
-    adminAddUserToAdminGroup(store, user) {
-      store.rootState.api.backendInteractor
+    adminAddUserToAdminGroup(user) {
+      window.vuex.state.api.backendInteractor
        .adminAddUserToAdminGroup({ user })
        .then((res) =>
-          store.commit('updateRight', {
+          window.vuex.commit('updateRight', {
            user,
            right: 'admin',
            value: res.is_admin,
          }),
        )
    },
-    adminRemoveUserFromAdminGroup(store, user) {
+    adminRemoveUserFromAdminGroup(user) {
      // prevent revokation of own rights
-      if (user.id !== store.rootState.users.currentUser.id) {
-        return store.rootState.api.backendInteractor
+      if (user.id !== window.vuex.state.users.currentUser.id) {
+        return window.vuex.state.api.backendInteractor
          .adminRemoveUserFromAdminGroup({ user })
          .then((res) =>
-            store.commit('updateRight', {
+            window.vuex.commit('updateRight', {
              user,
              right: 'admin',
              value: res.is_admin,
@ -94,24 +97,24 @@ const adminSettingsStorage = {
          )
      }
    },
-    adminAddUserToModeratorGroup(store, user) {
-      return store.rootState.api.backendInteractor
+    adminAddUserToModeratorGroup(user) {
+      return window.vuex.state.api.backendInteractor
        .adminAddUserToModeratorGroup({ user })
        .then((res) =>
-          store.commit('updateRight', {
+          window.vuex.commit('updateRight', {
            user,
            right: 'moderator',
            value: res.is_moderator,
          }),
        )
    },
-    adminRemoveUserFromModeratorGroup(store, user) {
+    adminRemoveUserFromModeratorGroup(user) {
      // prevent revokation of own rights
-      if (user.id !== store.state.users.currentUser.id) {
-        return store.rootState.api.backendInteractor
+      if (user.id !== window.vuex.state.users.currentUser.id) {
+        return window.vuex.state.api.backendInteractor
          .adminRemoveUserFromModeratorGroup({ user })
          .then((res) =>
-            store.commit('updateRight', {
+            window.vuex.commit('updateRight', {
              user,
              right: 'moderator',
              value: res.is_moderator,
@ -119,89 +122,89 @@ const adminSettingsStorage = {
          )
      }
    },
-    adminActivateUser(store, user) {
-      return store.rootState.api.backendInteractor
+    adminActivateUser(user) {
+      return window.vuex.state.api.backendInteractor
        .activateUser({ user })
        .then((res) => {
          const deactivated = !res.is_active
-          store.commit('updateActivationStatus', { user, deactivated })
+          window.vuex.commit('updateActivationStatus', { user, deactivated })
        })
    },
-    adminDeactivateUser(store, user) {
-      return store.rootState.api.backendInteractor
+    adminDeactivateUser(user) {
+      return window.vuex.state.api.backendInteractor
        .deactivateUser({ user })
        .then((res) => {
          const deactivated = !res.is_active
-          store.commit('updateActivationStatus', { user, deactivated })
+          window.vuex.commit('updateActivationStatus', { user, deactivated })
        })
    },
-    adminDeleteUser(store, user) {
-      return store.rootState.api.backendInteractor.deleteUser({ user })
+    adminDeleteUser(user) {
+      return window.vuex.state.api.backendInteractor.deleteUser({ user })
    },
-    adminConfirmUser(store, user) {
-      return store.rootState.api.backendInteractor
+    adminConfirmUser(user) {
+      return window.vuex.state.api.backendInteractor
        .adminConfirmUser({ user })
-        .then(() => store.dispatch('fetchUser', user.id))
+        .then(() => window.vuex.dispatch('fetchUser', user.id))
    },
-    adminResendConfirmationEmail(store, user) {
-      return store.rootState.api.backendInteractor.adminResendConfirmationEmail(
+    adminResendConfirmationEmail(user) {
+      return window.vuex.state.api.backendInteractor.adminResendConfirmationEmail(
        { user },
      )
    },
-    adminApproveUser(store, user) {
-      return store.rootState.api.backendInteractor.adminApproveUser({ user })
+    adminApproveUser(user) {
+      return window.vuex.state.api.backendInteractor.adminApproveUser({ user })
    },
-    adminListStatuses(store, { userId, opts }) {
-      return store.rootState.api.backendInteractor.adminListStatuses({
+    adminListStatuses({ userId, opts }) {
+      return window.vuex.state.api.backendInteractor.adminListStatuses({
        userId,
        opts,
      })
    },
-    adminChangeStatusScope(store, { opts }) {
-      return store.rootState.api.backendInteractor.adminChangeStatusScope({
+    adminChangeStatusScope({ opts }) {
+      return window.vuex.state.api.backendInteractor.adminChangeStatusScope({
        opts,
      })
    },
-    adminDisableMFA(store, user) {
-      return store.rootState.api.backendInteractor.adminDisableMFA({ user })
+    adminDisableMFA(user) {
+      return window.vuex.state.api.backendInteractor.adminDisableMFA({ user })
    },
-    adminTagUser(store, { user, tag }) {
-      return store.rootState.api.backendInteractor.tagUser({ user, tag })
+    adminTagUser({ user, tag }) {
+      return window.vuex.state.api.backendInteractor.tagUser({ user, tag })
    },
-    adminUntagUser(store, { user, tag }) {
-      return store.rootState.api.backendInteractor.untagUser({ user, tag })
+    adminUntagUser({ user, tag }) {
+      return window.vuex.state.api.backendInteractor.untagUser({ user, tag })
    },
-    loadFrontendsStuff({ rootState, commit }) {
-      rootState.api.backendInteractor
+    loadFrontendsStuff() {
+      window.vuex.state.api.backendInteractor
        .fetchAvailableFrontends()
-        .then((frontends) => commit('setAvailableFrontends', { frontends }))
+        .then((frontends) => this.setAvailableFrontends({ frontends }))
    },
-    loadAdminStuff({ state, rootState, dispatch, commit }) {
-      rootState.api.backendInteractor
+    loadAdminStuff() {
+      window.vuex.state.api.backendInteractor
        .fetchInstanceDBConfig()
        .then((backendDbConfig) => {
          if (backendDbConfig.error) {
            if (backendDbConfig.error.status === 400) {
              backendDbConfig.error.json().then((errorJson) => {
                if (/configurable_from_database/.test(errorJson.error)) {
-                  commit('setInstanceAdminNoDbConfig')
+                  this.setInstanceAdminNoDbConfig()
                }
              })
            }
          } else {
-            dispatch('setInstanceAdminSettings', { backendDbConfig })
+            this.setInstanceAdminSettings({ backendDbConfig })
          }
        })
-      if (state.descriptions === null) {
-        rootState.api.backendInteractor
+      if (this.descriptions === null) {
+        window.vuex.state.api.backendInteractor
          .fetchInstanceConfigDescriptions()
          .then((backendDescriptions) =>
-            dispatch('setInstanceAdminDescriptions', { backendDescriptions }),
+            this.setInstanceAdminDescriptions({ backendDescriptions }),
          )
      }
    },
-    setInstanceAdminSettings({ state, commit }, { backendDbConfig }) {
-      const config = state.config || {}
+    setInstanceAdminSettings({ backendDbConfig }) {
+      const config = this.config || {}
      const modifiedPaths = new Set()

      backendDbConfig.configs.forEach((c) => {
@ -257,10 +260,10 @@ const adminSettingsStorage = {
          },
        }
      }
-      commit('updateAdminSettings', { config, modifiedPaths })
-      commit('resetAdminDraft')
+      this.updateAdminSettings({ config, modifiedPaths })
+      this.resetAdminDraft()
    },
-    setInstanceAdminDescriptions({ commit }, { backendDescriptions }) {
+    setInstanceAdminDescriptions({ backendDescriptions }) {
      const convert = (
        { children, description, label, key = '<ROOT>', group, suggestions },
        path,
@ -279,12 +282,12 @@ const adminSettingsStorage = {
      const descriptions = {}

      backendDescriptions.forEach((d) => convert(d, '', descriptions))
-      commit('updateAdminDescriptions', { descriptions })
+      this.updateAdminDescriptions({ descriptions })
    },

    // This action takes draft state, diffs it with live config state and then pushes
    // only differences between the two. Difference detection only work up to subkey (third) level.
-    pushAdminDraft({ rootState, state, dispatch }) {
+    pushAdminDraft() {
      // TODO cleanup paths in modifiedPaths
      const convert = (value) => {
        if (typeof value !== 'object') {
@ -298,20 +301,20 @@ const adminSettingsStorage = {

      // Getting all group-keys used in config
      const allGroupKeys = flatten(
-        Object.entries(state.config).map(([group, lv1data]) =>
+        Object.entries(this.config).map(([group, lv1data]) =>
          Object.keys(lv1data).map((key) => ({ group, key })),
        ),
      )

      // Only using group-keys where there are changes detected
      const changedGroupKeys = allGroupKeys.filter(({ group, key }) => {
-        return !isEqual(state.config[group][key], state.draft[group][key])
+        return !isEqual(this.config[group][key], this.draft[group][key])
      })

      // Here we take all changed group-keys and get all changed subkeys
      const changed = changedGroupKeys.map(({ group, key }) => {
-        const config = state.config[group][key]
-        const draft = state.draft[group][key]
+        const config = this.config[group][key]
+        const draft = this.draft[group][key]

        // We convert group-key value into entries arrays
        const eConfig = Object.entries(config)
@ -328,18 +331,20 @@ const adminSettingsStorage = {
        }
      })

-      rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
        .pushInstanceDBConfig({
          payload: {
            configs: changed,
          },
        })
-        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(() =>
+          window.vuex.state.api.backendInteractor.fetchInstanceDBConfig(),
+        )
        .then((backendDbConfig) =>
-          dispatch('setInstanceAdminSettings', { backendDbConfig }),
+          this.setInstanceAdminSettings({ backendDbConfig }),
        )
    },
-    pushAdminSetting({ rootState, dispatch }, { path, value }) {
+    pushAdminSetting({ path, value }) {
      const [group, key, ...rest] = Array.isArray(path)
        ? path
        : path.split(/\./g)
@ -357,7 +362,7 @@ const adminSettingsStorage = {
        }
      }

-      rootState.api.backendInteractor
+      window.vuex.state.api.backendInteractor
        .pushInstanceDBConfig({
          payload: {
            configs: [
@ -369,19 +374,21 @@ const adminSettingsStorage = {
            ],
          },
        })
-        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(() =>
+          window.vuex.state.api.backendInteractor.fetchInstanceDBConfig(),
+        )
        .then((backendDbConfig) =>
-          dispatch('setInstanceAdminSettings', { backendDbConfig }),
+          this.setInstanceAdminSettings({ backendDbConfig }),
        )
    },
-    resetAdminSetting({ rootState, state, dispatch }, { path }) {
+    resetAdminSetting({ path }) {
      const [group, key, subkey] = Array.isArray(path)
        ? path
        : path.split(/\./g)

-      state.modifiedPaths.delete(path)
+      this.modifiedPaths.delete(path)

-      return rootState.api.backendInteractor
+      return window.vuex.state.api.backendInteractor
        .pushInstanceDBConfig({
          payload: {
            configs: [
@ -394,12 +401,12 @@ const adminSettingsStorage = {
            ],
          },
        })
-        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(() =>
+          window.vuex.state.api.backendInteractor.fetchInstanceDBConfig(),
+        )
        .then((backendDbConfig) =>
-          dispatch('setInstanceAdminSettings', { backendDbConfig }),
+          this.setInstanceAdminSettings({ backendDbConfig }),
        )
    },
  },
-}
-
-export default adminSettingsStorage
+})