2021-10-29 17:12:58 +02:00
|
|
|
<template>
|
|
|
|
<div>
|
2022-09-21 17:23:40 +02:00
|
|
|
<setting-tabs :activeTab="'settings.oauth.tokens'"></setting-tabs>
|
2021-10-29 17:12:58 +02:00
|
|
|
<div class="options-tabs">
|
2022-03-24 14:58:30 +01:00
|
|
|
<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>
|
2022-03-24 14:58:30 +01:00
|
|
|
<!-- 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 }}
|
2021-10-29 17:12:58 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
2022-03-24 14:58:30 +01:00
|
|
|
<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>
|
2021-10-29 17:12:58 +02:00
|
|
|
</div>
|
2022-03-24 14:58:30 +01:00
|
|
|
<!-- 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>
|
2021-10-29 17:12:58 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import Form from './../../components/Form'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
tokens : [],
|
|
|
|
isFetching: false,
|
|
|
|
form: new Form({
|
|
|
|
token : '',
|
2022-03-24 14:58:30 +01:00
|
|
|
}),
|
|
|
|
isRemoteUser: false,
|
2021-10-29 17:12:58 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
this.fetchTokens()
|
|
|
|
},
|
|
|
|
|
|
|
|
methods : {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get all groups from backend
|
|
|
|
*/
|
|
|
|
async fetchTokens() {
|
|
|
|
|
|
|
|
this.isFetching = true
|
|
|
|
|
2022-05-16 23:27:43 +02:00
|
|
|
await this.axios.get('/oauth/personal-access-tokens', {returnError: true})
|
2022-03-29 15:02:43 +02:00
|
|
|
.then(response => {
|
2021-10-29 17:12:58 +02:00
|
|
|
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
|
|
|
|
})
|
2022-03-29 15:02:43 +02:00
|
|
|
.catch(error => {
|
|
|
|
if( error.response.status === 400 ) {
|
|
|
|
|
|
|
|
this.isRemoteUser = true
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
|
|
|
|
this.$router.push({ name: 'genericError', params: { err: error.response } });
|
|
|
|
}
|
|
|
|
})
|
2021-10-29 17:12:58 +02:00
|
|
|
|
|
|
|
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'))) {
|
|
|
|
|
2022-03-24 15:03:45 +01:00
|
|
|
await this.axios.delete('/oauth/personal-access-tokens/' + tokenId).then(response => {
|
2021-10-29 17:12:58 +02:00
|
|
|
// 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') })
|
|
|
|
});
|
|
|
|
}
|
2022-03-24 14:58:30 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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' })
|
|
|
|
},
|
2021-10-29 17:12:58 +02:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|