Xmysql is now NocoDB (An Open Source Airtable alternative)

packages/nc-gui/components/auth/apiTokens.vue

@@ -0,0 +1,173 @@
+<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>