2FAuth/resources/js/views/settings/OAuth.vue

151 lines
6.0 KiB
Vue
Raw Normal View History

<template>
<div>
2022-09-21 17:23:40 +02:00
<setting-tabs :activeTab="'settings.oauth.tokens'"></setting-tabs>
<div class="options-tabs">
<form-wrapper>
<div v-if="isRemoteUser" class="notification is-warning has-text-centered" v-html="$t('auth.auth_handled_by_proxy')" />
<h4 class="title is-4 has-text-grey-light">{{ $t('settings.personal_access_tokens') }}</h4>
<div class="is-size-7-mobile">
{{ $t('settings.token_legend')}}
</div>
<div class="mt-3">
<a class="is-link" @click="createToken()">
<font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('settings.generate_new_token')}}
</a>
</div>
<div v-if="tokens.length > 0">
<div v-for="token in tokens" :key="token.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
<font-awesome-icon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }}
<!-- revoke link -->
<div class="tags is-pulled-right">
2022-09-18 16:04:59 +02:00
<button v-if="token.value" class="button tag" v-clipboard="() => token.value" v-clipboard:success="clipboardSuccessHandler">{{ $t('commons.copy') }}</button>
<button class="button tag is-dark " @click="revokeToken(token.id)" :title="$t('settings.revoke')">{{ $t('settings.revoke') }}</button>
2022-03-15 14:47:07 +01:00
</div>
<!-- edit link -->
<!-- <router-link :to="{ name: 'settings.oauth.editPAT' }" class="has-text-grey pl-1" :title="$t('commons.edit')">
<font-awesome-icon :icon="['fas', 'pen-square']" />
</router-link> -->
<!-- warning msg -->
<span v-if="token.value" class="is-size-7-mobile is-size-6 my-3">
{{ $t('settings.make_sure_copy_token') }}
</span>
<!-- token value -->
<span v-if="token.value" class="pat is-family-monospace is-size-6 is-size-7-mobile has-text-success">
{{ token.value }}
</span>
</div>
<div class="mt-2 is-size-7 is-pulled-right">
{{ $t('settings.revoking_a_token_is_permanent')}}
</div>
</div>
<div v-if="isFetching && tokens.length === 0" class="has-text-centered mt-6">
<span class="is-size-4">
<font-awesome-icon :icon="['fas', 'spinner']" spin />
</span>
</div>
<!-- footer -->
<vue-footer :showButtons="true">
<!-- close button -->
<p class="control">
<router-link :to="{ name: 'accounts', params: { toRefresh: false } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
</p>
</vue-footer>
</form-wrapper>
</div>
</div>
</template>
<script>
import Form from './../../components/Form'
export default {
data(){
return {
tokens : [],
isFetching: false,
form: new Form({
token : '',
}),
isRemoteUser: false,
}
},
mounted() {
this.fetchTokens()
},
methods : {
/**
* Get all groups from backend
*/
async fetchTokens() {
this.isFetching = true
await this.axios.get('/oauth/personal-access-tokens', {returnError: true})
.then(response => {
const tokens = []
response.data.forEach((data) => {
if (data.id === this.$route.params.token_id) {
data.value = this.$route.params.accessToken
tokens.unshift(data)
}
else {
tokens.push(data)
}
})
this.tokens = tokens
})
.catch(error => {
if( error.response.status === 400 ) {
this.isRemoteUser = true
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
})
this.isFetching = false
},
clipboardSuccessHandler ({ value, event }) {
this.$notify({ type: 'is-success', text: this.$t('commons.copied_to_clipboard') })
},
clipboardErrorHandler ({ value, event }) {
console.log('error', value)
},
/**
* revoke a token (after confirmation)
*/
async revokeToken(tokenId) {
if(confirm(this.$t('settings.confirm.revoke'))) {
await this.axios.delete('/oauth/personal-access-tokens/' + tokenId).then(response => {
// Remove the revoked token from the collection
this.tokens = this.tokens.filter(a => a.id !== tokenId)
this.$notify({ type: 'is-success', text: this.$t('settings.token_revoked') })
});
}
},
/**
* Open the PAT creation view
*/
createToken() {
if (this.isRemoteUser) {
this.$notify({ type: 'is-warning', text: this.$t('errors.unsupported_with_reverseproxy') })
}
else this.$router.push({ name: 'settings.oauth.generatePAT' })
},
},
}
</script>