mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
4.8 KiB
174 lines
4.8 KiB
3 years ago
|
<template>
|
||
|
<div>
|
||
|
<v-toolbar flat height="38" class="toolbar-border-bottom">
|
||
|
|
||
|
<v-spacer></v-spacer>
|
||
|
|
||
|
<x-btn outlined tooltip="Reload API tokens"
|
||
|
color="primary"
|
||
|
small
|
||
|
:disabled="loading"
|
||
|
@click="loadApiTokens"
|
||
|
v-ge="['roles','reload']"
|
||
|
@click.prevent>
|
||
|
<v-icon small left>refresh</v-icon>
|
||
|
Reload
|
||
|
</x-btn>
|
||
|
<x-btn
|
||
|
v-if="_isUIAllowed('newUser')"
|
||
|
outlined tooltip="Generate new API token"
|
||
|
color="primary"
|
||
|
small
|
||
|
:disabled="loading"
|
||
|
@click="newTokenDialog = true"
|
||
|
v-ge="['roles','add new']">
|
||
|
<v-icon small left>mdi-plus</v-icon>
|
||
|
New Token
|
||
|
</x-btn>
|
||
|
</v-toolbar>
|
||
|
|
||
|
|
||
|
<v-container fluid>
|
||
|
|
||
|
<v-simple-table dense v-slot:default v-if="tokens" class="mx-auto caption text-center" style="max-width:700px">
|
||
|
<thead>
|
||
|
<tr class="">
|
||
|
<th class="caption text-center">
|
||
|
Description
|
||
|
</th>
|
||
|
<th class="caption text-center">
|
||
|
Token
|
||
|
</th>
|
||
|
<th class="caption text-center">Actions</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tr v-for="token in tokens">
|
||
|
<td class="caption text-center">{{ token.description }}</td>
|
||
|
<td class="caption text-center">
|
||
|
<div class="d-flex justify-center">
|
||
|
|
||
|
|
||
|
<span v-if="token.show">{{ token.token }}</span>
|
||
|
<span v-else>****************************************</span>
|
||
|
|
||
|
|
||
|
</div>
|
||
|
</td>
|
||
|
<td class="caption">
|
||
|
<x-icon x-small @click="$set(token,'show' ,!token.show)" icon.class="ml-2"
|
||
|
:tooltip="`${token.show ?'Hide':'Show' } API token`">
|
||
|
{{ token.show ? 'visibility_off' : 'visibility' }}
|
||
|
</x-icon>
|
||
|
|
||
|
<!-- <v-spacer></v-spacer>-->
|
||
|
<x-icon x-small icon.class="ml-2" @click="copyToken(token.token)" tooltip="Copy token to clipboard">
|
||
|
mdi-content-copy
|
||
|
</x-icon>
|
||
|
<x-icon
|
||
|
tooltip="Remove API token" class="ml-2" color="error"
|
||
|
@click.prevent.stop="deleteToken(token)"
|
||
|
x-small>mdi-delete-outline
|
||
|
</x-icon>
|
||
|
|
||
|
</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td colspan="3" class="text-center">
|
||
|
<x-btn tooltip="Generate new api token" @click="newTokenDialog = true" outlined x-small color="primary">
|
||
|
<v-icon>mdi-plus</v-icon>
|
||
|
Add New Token
|
||
|
</x-btn>
|
||
|
</td>
|
||
|
</tr>
|
||
|
</v-simple-table>
|
||
|
</v-container>
|
||
|
|
||
|
|
||
|
<v-dialog v-model="newTokenDialog" width="400">
|
||
|
|
||
|
<v-card class="px-15 py-5 " style="min-height: 100%">
|
||
|
<h4 class="text-center text-capitalize mt-2 d-100 display-1">
|
||
|
<template>Generate Token</template>
|
||
|
</h4>
|
||
|
|
||
|
<v-form v-model="valid" @submit.prevent="generateToken">
|
||
|
|
||
|
<v-row class="mt-4">
|
||
|
<v-col cols="12">
|
||
|
<v-text-field
|
||
|
filled
|
||
|
dense
|
||
|
v-model="tokenObj.description"
|
||
|
label="Description"></v-text-field>
|
||
|
</v-col>
|
||
|
|
||
|
|
||
|
</v-row>
|
||
|
</v-form>
|
||
|
|
||
|
<v-card-actions class="justify-center">
|
||
|
<x-btn tooltip="Generate new api token"
|
||
|
color="primary"
|
||
|
@click="generateToken"
|
||
|
btn.class="mt-5 mb-3 pr-5"
|
||
|
v-ge="['rows','save']"
|
||
|
>
|
||
|
Generate
|
||
|
</x-btn>
|
||
|
</v-card-actions>
|
||
|
|
||
|
</v-card>
|
||
|
|
||
|
</v-dialog>
|
||
|
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
name: "apiTokens",
|
||
|
data: () => ({
|
||
|
tokens: null,
|
||
|
newTokenDialog: false,
|
||
|
tokenObj: {},
|
||
|
valid: true
|
||
|
}),
|
||
|
created() {
|
||
|
this.loadApiTokens();
|
||
|
},
|
||
|
methods: {
|
||
|
copyToken(token) {
|
||
|
this.$clipboard(token);
|
||
|
this.$toast.info('Copied to clipboard').goAway(1000)
|
||
|
},
|
||
|
async loadApiTokens() {
|
||
|
this.tokens = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcApiTokenList']);
|
||
|
},
|
||
|
async generateToken() {
|
||
|
try {
|
||
|
this.newTokenDialog = false;
|
||
|
this.tokens = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcApiTokenCreate', this.tokenObj]);
|
||
|
this.$toast.success('Token generated successfully').goAway(3000);
|
||
|
this.tokenObj = {};
|
||
|
await this.loadApiTokens();
|
||
|
} catch (e) {
|
||
|
this.$toast.error(e.message).goAway(3000);
|
||
|
}
|
||
|
},
|
||
|
async deleteToken(item) {
|
||
|
try {
|
||
|
this.tokens = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcApiTokenDelete', {id: item.id}]);
|
||
|
this.$toast.success('Token deleted successfully').goAway(3000);
|
||
|
await this.loadApiTokens();
|
||
|
} catch (e) {
|
||
|
this.$toast.error(e.message).goAway(3000);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
|
||
|
</style>
|