Add hacky functionality to open specific settings tabs

src/components/post_status_form/post_status_form.js

@@ -555,6 +555,9 @@ const PostStatusForm = {
     },
     updateIdempotencyKey () {
       this.idempotencyKey = Date.now().toString()
+    },
+    openProfileTab () {
+      this.$store.dispatch('openSettingsModalTab', 'profile')
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -23,9 +23,12 @@
           tag="p"
           class="visibility-notice"
         >
-          <router-link :to="{ name: 'user-settings' }">
+          <a
+            href="#"
+            @click="openProfileTab"
+          >
             {{ $t('post_status.account_not_locked_warning_link') }}
-          </router-link>
+          </a>
         </i18n>
         <p
           v-if="!hideScopeNotice && newStatus.visibility === 'public'"

src/components/settings_modal/settings_modal_content.js

@@ -27,6 +27,34 @@ const SettingsModalContent = {
   computed: {
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => {
+          return elm.data && elm.data.attrs['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time settings is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearSettingsModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
     }
   }
 }

src/components/settings_modal/settings_modal_content.vue

@@ -8,6 +8,7 @@
     <div
       :label="$t('settings.general')"
       icon="wrench"
+      data-tab-name="general"
     >
       <GeneralTab />
     </div>
@@ -15,6 +16,7 @@
       v-if="isLoggedIn"
       :label="$t('settings.profile_tab')"
       icon="user"
+      data-tab-name="profile"
     >
       <ProfileTab />
     </div>
@@ -22,18 +24,21 @@
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"
       icon="lock"
+      data-tab-name="security"
     >
       <SecurityTab />
     </div>
     <div
       :label="$t('settings.filtering')"
       icon="filter"
+      data-tab-name="filtering"
     >
       <FilteringTab />
     </div>
     <div
       :label="$t('settings.theme')"
       icon="brush"
+      data-tab-name="theme"
     >
       <ThemeTab />
     </div>
@@ -41,6 +46,7 @@
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
       icon="bell-ringing-o"
+      data-tab-name="notifications"
     >
       <NotificationsTab />
     </div>
@@ -48,6 +54,7 @@
       v-if="isLoggedIn"
       :label="$t('settings.data_import_export_tab')"
       icon="download"
+      data-tab-name="dataImportExport"
     >
       <DataImportExportTab />
     </div>
@@ -56,12 +63,14 @@
       :label="$t('settings.mutes_and_blocks')"
       :fullHeight="true"
       icon="eye-off"
+      data-tab-name="mutesAndBlocks"
     >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.version.title')"
       icon="info-circled"
+      data-tab-name="version"
     >
       <VersionTab />
     </div>

src/components/tab_switcher/tab_switcher.js

@@ -60,9 +60,13 @@ export default Vue.component('tab-switcher', {
     }
   },
   methods: {
-    activateTab (index) {
+    clickTab (index) {
       return (e) => {
         e.preventDefault()
+        this.setTab(index)
+      }
+    },
+    setTab (index) {
       if (typeof this.onSwitch === 'function') {
         this.onSwitch.call(null, this.$slots.default[index].key)
       }
@@ -71,7 +75,6 @@ export default Vue.component('tab-switcher', {
         this.$refs.contents.scrollTop = 0
       }
     }
-    }
   },
   render (h) {
     const tabs = this.$slots.default
@@ -88,7 +91,7 @@ export default Vue.component('tab-switcher', {
             <div class={classesWrapper.join(' ')}>
               <button
                 disabled={slot.data.attrs.disabled}
-                onClick={this.activateTab(index)}
+                onClick={this.clickTab(index)}
                 class={classesTab.join(' ')}>
                 <img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
                 {slot.data.attrs.label ? '' : slot.data.attrs.label}
@@ -100,7 +103,7 @@ export default Vue.component('tab-switcher', {
           <div class={classesWrapper.join(' ')}>
             <button
               disabled={slot.data.attrs.disabled}
-              onClick={this.activateTab(index)}
+              onClick={this.clickTab(index)}
               class={classesTab.join(' ')}
               type="button"
             >

src/modules/interface.js

@@ -3,6 +3,7 @@ import { set, delete as del } from 'vue'
 const defaultState = {
   settingsModalState: 'hidden',
   settingsModalLoaded: false,
+  settingsModalTargetTab: null,
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null,
@@ -62,6 +63,9 @@ const interfaceMod = {
         state.settingsModalLoaded = true
       }
     },
+    setSettingsModalTargetTab (state, value) {
+      state.settingsModalTargetTab = value
+    },
     pushGlobalNotice (state, notice) {
       state.globalNotices.push(notice)
     },
@@ -97,6 +101,13 @@ const interfaceMod = {
     togglePeekSettingsModal ({ commit }) {
       commit('togglePeekSettingsModal')
     },
+    clearSettingsModalTargetTab ({ commit }) {
+      commit('setSettingsModalTargetTab', null)
+    },
+    openSettingsModalTab ({ commit }, value) {
+      commit('setSettingsModalTargetTab', value)
+      commit('openSettingsModal')
+    },
     pushGlobalNotice (
       { commit, dispatch },
       {