Support GitLab OAuth redirection URLs

js/router.js

@@ -267,6 +267,14 @@ const routes = [
     component: UserProfile,
     meta: { requiresLogin: true }
   },
+  /*
+   * For compatibility with old GitLab OAuth redirection URLs:
+   * /process/credentials/ should redirect to the OAuth tab of the user's profile.
+   */
+  {
+    path: '/process/credentials/',
+    redirect: { name: 'user-profile' }
+  },
   {
     path: '/group/create',
     name: 'group-create',

vue/Auth/Profile/Main.vue

 <template>
   <main class="container is-fluid">
     <h1 class="title">Your profile and settings</h1>
-    <Tabs :tabs="{ details: 'Details', groups: 'Groups', oauth: 'OAuth' }">
+    <Tabs :tabs="{ details: 'Details', groups: 'Groups', oauth: 'OAuth' }" v-model="tab">
       <template v-slot:details>
         <UserInfo />
       </template>
@@ -27,6 +27,15 @@ export default {
     UserInfo,
     Groups,
     OAuthList
+  },
+  data: () => ({
+    tab: 'details'
+  }),
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // When coming from an old GitLab OAuth redirect URL, select the OAuth tab immediately
+      if (to.redirectedFrom === '/process/credentials/') vm.tab = 'oauth'
+    })
   }
 }
 </script>

vue/Tabs.vue

@@ -6,7 +6,7 @@
           v-for="(displayName, key) in tabs"
           :key="key"
           :class="{ 'is-active': selected === key }"
-          v-on:click="selected = key"
+          v-on:click="select(key)"
         >
           <a>{{ displayName }}</a>
         </li>
@@ -50,11 +50,25 @@ export default {
     autoHide: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Allows using v-model to access or change the currently selected tab in a parent component.
+     */
+    value: {
+      type: String,
+      default: ''
     }
   },
   data: () => ({
     selected: ''
   }),
+  methods: {
+    select (tab) {
+      if (tab && !this.tabs[tab]) throw new Error(`Unknown tab ${tab}`)
+      this.selected = tab
+      this.$emit('input', tab)
+    }
+  },
   watch: {
     /*
      * If the defined tabs change, ensure the selected tab exists or is set to its default empty value
@@ -62,8 +76,17 @@ export default {
     tabs: {
       immediate: true,
       handler (newValue) {
-        if (!newValue) this.selected = ''
-        else if (!newValue[this.selected]) this.selected = Object.keys(newValue)[0]
+        if (!newValue) this.select('')
+        else if (!newValue[this.selected]) this.select(Object.keys(newValue)[0])
+      }
+    },
+    /*
+     * Switch tabs if the value was updated from the parent component
+     */
+    value: {
+      immediate: true,
+      handler (newValue) {
+        if (this.selected !== newValue) this.select(newValue)
       }
     }
   }