Add OAuth Personal Access Token management

resources/js/components/Footer.vue

@@ -11,7 +11,7 @@
             <a class="has-text-grey" href="https://github.com/Bubka/2FAuth"><b>2FAuth</b> <font-awesome-icon :icon="['fab', 'github-alt']" /></a> - v{{ appVersion }}
         </div>
         <div v-else class="content has-text-centered">
-            <router-link :to="{ name: 'settings' }" class="has-text-grey">{{ $t('settings.settings') }}</router-link> - <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
+            <router-link :to="{ name: 'settings.options' }" class="has-text-grey">{{ $t('settings.settings') }}</router-link> - <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
         </div>
     </footer>
 </template>

resources/js/components/SettingTabs.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="options-header has-background-black-ter">
+        <div class="columns is-centered">
+            <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+                <div class="tabs is-centered is-fullwidth">
+                    <ul>
+                        <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
+                            <a @click="selectTab(tab.view)">{{ tab.name }}</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: 'SettingTabs',
+
+        data(){
+            return {
+                tabs: [
+                	{
+                		'name' : this.$t('settings.options'),
+                        'view' : 'settings.options'
+                	},
+                	{
+                		'name' : this.$t('settings.account'),
+                        'view' : 'settings.account'
+                	},
+                	{
+                		'name' : this.$t('settings.oauth'),
+                        'view' : 'settings.oauth'
+                	},
+            	]
+            }
+        },
+
+        props: {
+            activeTab: {
+                type: String,
+                default: ''
+            },
+        },
+
+        methods: {
+            selectTab(viewName) {
+                this.$router.push({ name: viewName })
+            },
+        }
+    }
+
+</script>

resources/js/components/index.js

@@ -11,6 +11,7 @@ import FormCheckbox     from './FormCheckbox'
 import FormButtons      from './FormButtons'
 import VueFooter        from './Footer'
 import Kicker           from './Kicker'
+import SettingTabs      from './SettingTabs'
 
 // Components that are registered globaly.
 [
@@ -25,7 +26,8 @@ import Kicker           from './Kicker'
     FormCheckbox,
     FormButtons,
     VueFooter,
-    Kicker
+    Kicker,
+    SettingTabs
 ].forEach(Component => {
 	Vue.component(Component.name, Component)
 })