github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/components/SettingTokens.vue (about)

     1  <template>
     2    <v-card flat>
     3      <v-card-title>OAuth Tokens</v-card-title>
     4      <v-divider />
     5      <v-card-text>
     6        <v-text-field label="Token Name" v-model="tokenName" outlined dense flat>
     7          <template v-slot:append-outer>
     8            <v-btn
     9              small
    10              color="accent"
    11              :disabled="!tokenName"
    12              :loading="loading"
    13              @click="generateToken"
    14            >Generate</v-btn>
    15          </template>
    16        </v-text-field>
    17        <v-sheet
    18          class="text-center text-subtitle-1 my-1 rounded"
    19          v-show="accessToken"
    20          color="primary"
    21          dark
    22        >{{accessToken}}</v-sheet>
    23        <v-divider />
    24        <v-list>
    25          <v-list-item v-for="(token, i) in tokens" :key="i">
    26            <v-list-item-icon>
    27              <v-icon color="primary">mdi-send</v-icon>
    28            </v-list-item-icon>
    29            <v-list-item-content>
    30              <v-list-item-title>{{token.name}}</v-list-item-title>
    31              <v-list-item-subtitle>{{createTime(token)}}</v-list-item-subtitle>
    32            </v-list-item-content>
    33            <v-list-item-action>
    34              <v-btn small color="error" @click="clickedDelete(token)">DELETE</v-btn>
    35            </v-list-item-action>
    36          </v-list-item>
    37        </v-list>
    38      </v-card-text>
    39      <v-overlay :value="overlay">
    40        <v-card flat v-if="selectedToken" color="accent" :loading="loading">
    41          <v-card-title>Delete Token: {{selectedToken.name}}</v-card-title>
    42          <v-card-text>Deleting a token will revoke access to your account for applications using it. Continue?</v-card-text>
    43          <v-card-actions>
    44            <v-spacer />
    45            <v-btn text color="error" @click="cancelDelete">Cancel</v-btn>
    46            <v-btn text @click="deleteSelectedToken" :loading="loading">Continue</v-btn>
    47          </v-card-actions>
    48        </v-card>
    49      </v-overlay>
    50    </v-card>
    51  </template>
    52  
    53  <script lang="ts">
    54  import { Component } from 'vue-property-decorator';
    55  import Vue from '@/vue';
    56  import { Actions } from '@/store';
    57  
    58  @Component({
    59    name: 'setting-tokens'
    60  })
    61  export default class SettingTokens extends Vue {
    62    // TODO: Add unittest
    63    private tokenName = '';
    64    private accessToken = '';
    65    private selectedToken?: Token = undefined;
    66    private overlay = false;
    67    private loading = false;
    68    get tokens(): Token[] {
    69      return this.$store.state.user.tokens;
    70    }
    71  
    72    createTime(token: Token): string {
    73      const date = new Date(token.createdAt);
    74      return date.toLocaleString();
    75    }
    76  
    77    generateToken() {
    78      const base = this.$store.state.base;
    79      const formData = new FormData();
    80      formData.append('name', this.tokenName);
    81      this.loading = true;
    82      this.$http
    83        .post<string>(`${base}/api/v1/user/tokens`, formData)
    84        .then(response => {
    85          this.accessToken = response.data;
    86        })
    87        .finally(() => {
    88          this.tokenName = '';
    89          this.loading = false;
    90          this.$store.dispatch(Actions.FETCH_USER_TOKENS);
    91        });
    92    }
    93  
    94    clickedDelete(token: Token) {
    95      this.overlay = true;
    96      this.selectedToken = token;
    97    }
    98  
    99    cancelDelete() {
   100      this.selectedToken = undefined;
   101      this.overlay = false;
   102    }
   103  
   104    deleteSelectedToken() {
   105      if (!this.selectedToken) {
   106        return;
   107      }
   108      this.loading = true;
   109      const base = this.$store.state.base;
   110      const tokenID = this.selectedToken.id;
   111      this.$http.delete(`${base}/api/v1/user/tokens/${tokenID}`).finally(() => {
   112        this.loading = false;
   113        this.overlay = false;
   114        this.selectedToken = undefined;
   115        this.$store.dispatch(Actions.FETCH_USER_TOKENS);
   116      });
   117    }
   118  }
   119  </script>