snipe-it/resources/assets/js/components/passport/AuthorizedClients.vue

113 lines
3.2 KiB
Vue
Raw Normal View History

2016-12-14 10:06:05 -08:00
<style scoped>
.action-link {
cursor: pointer;
}
.m-b-none {
margin-bottom: 0;
}
</style>
<template>
<div>
<div v-if="tokens.length > 0">
<div class="panel panel-default">
2020-04-01 03:51:08 -07:00
<h2 class="panel-heading">Authorized Applications</h2>
2016-12-14 10:06:05 -08:00
<div class="panel-body">
<!-- Authorized Tokens -->
<table class="table table-borderless m-b-none">
<thead>
<tr>
<th>Name</th>
<th>Scopes</th>
2020-04-01 03:51:08 -07:00
<th><span class="sr-only">Delete</span></th>
2016-12-14 10:06:05 -08:00
</tr>
</thead>
<tbody>
<tr v-for="token in tokens">
<!-- Client Name -->
<td style="vertical-align: middle;">
{{ token.client.name }}
</td>
<!-- Scopes -->
<td style="vertical-align: middle;">
<span v-if="token.scopes.length > 0">
{{ token.scopes.join(', ') }}
</span>
</td>
<!-- Revoke Button -->
<td style="vertical-align: middle;">
<a class="action-link text-danger" @click="revoke(token)">
Revoke
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['clientsUrl', 'tokensUrl'],
2016-12-14 10:06:05 -08:00
/*
* The component's data.
*/
data() {
return {
tokens: []
};
},
/**
* Prepare the component (Vue 1.x).
*/
ready() {
this.prepareComponent();
},
/**
* Prepare the component (Vue 2.x).
*/
mounted() {
this.prepareComponent();
},
methods: {
/**
* Prepare the component (Vue 2.x).
*/
prepareComponent() {
this.getTokens();
},
/**
* Get all of the authorized tokens for the user.
*/
getTokens() {
this.$http.get(this.tokensUrl)
2016-12-14 10:06:05 -08:00
.then(response => {
this.tokens = response.data;
});
},
/**
* Revoke the given token.
*/
revoke(token) {
this.$http.delete(this.tokensUrl +'/'+ token.id)
2016-12-14 10:06:05 -08:00
.then(response => {
this.getTokens();
});
}
}
}
</script>