2021-10-29 17:12:58 +02:00
|
|
|
<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 }">
|
2022-06-24 09:10:49 +02:00
|
|
|
<a :id="tab.id" @click="selectTab(tab.view)">{{ tab.name }}</a>
|
2021-10-29 17:12:58 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'SettingTabs',
|
|
|
|
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
tabs: [
|
|
|
|
{
|
|
|
|
'name' : this.$t('settings.options'),
|
2022-06-24 09:10:49 +02:00
|
|
|
'view' : 'settings.options',
|
|
|
|
'id' : 'lnkTabOptions'
|
2021-10-29 17:12:58 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
'name' : this.$t('settings.account'),
|
2022-06-24 09:10:49 +02:00
|
|
|
'view' : 'settings.account',
|
|
|
|
'id' : 'lnkTabAccount'
|
2021-10-29 17:12:58 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
'name' : this.$t('settings.oauth'),
|
2022-06-24 09:10:49 +02:00
|
|
|
'view' : 'settings.oauth.tokens',
|
|
|
|
'id' : 'lnkTabOAuth'
|
2021-10-29 17:12:58 +02:00
|
|
|
},
|
2022-03-15 14:47:07 +01:00
|
|
|
{
|
|
|
|
'name' : this.$t('settings.webauthn'),
|
2022-06-24 09:10:49 +02:00
|
|
|
'view' : 'settings.webauthn.devices',
|
|
|
|
'id' : 'lnkTabWebauthn'
|
2022-03-15 14:47:07 +01:00
|
|
|
},
|
2021-10-29 17:12:58 +02:00
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
props: {
|
|
|
|
activeTab: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
selectTab(viewName) {
|
|
|
|
this.$router.push({ name: viewName })
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|