AccessToken.vue

<template>
  <div id="accesstoken">
    <!-- modal for create access-token -->    
    <coscine-modal 
      v-model="isCreateModalVisible"
      :title="$t('CreateModalTitle')"
      :headerText="$t('CreateModalText')">
      <div class="create-modal-content">
        <b-button-group id="tokenButtonGroup" style="width: 100%">
          <b-form-input
            id="accessToken"
            v-model="$v.token.AccessToken.$model"
            :readonly="true"
          />
          <b-button id="copyButton" @click="copyToken" style="margin: inherit"><b-icon-clipboard /></b-button>
          <b-tooltip ref="tooltip" target="copyButton" triggers="focus">{{ $t('CopyToClipboard') }}</b-tooltip>
        </b-button-group>
      </div>
      <div align="right">
        <b-button name="close" @click="isCreateModalVisible = false">{{ $t('CreateModalCloseBtn') }}</b-button>
      </div>
    </coscine-modal>
    <!-- modal for revoke token  -->  
    <coscine-modal 
      v-model="isRevokeModalVisible"
      :title="$t('RevokeModalTitle')"
      :headerText="$t('RevokeModalText')">
      <br/>
      <div class="revoke-modal-content">{{ selectedTokenName }}</div>
      <br/>
      <b-button name="close" @click="isRevokeModalVisible = false">{{ $t('buttons.cancel') }}</b-button>
      <b-button name="deleteToken" @click="confirmeRevoke" variant="danger" style="float: right">{{ $t('TokenRevokeBtn') }}</b-button>
    </coscine-modal>
    <div class="h-divider"></div>
    <h4 style="text-align: left;">{{ $t('AccessTokenHeader') }}</h4>
    <b-form-group
      label-for="TokenBodytext"
      label-cols-sm="3"
      label-align-sm="right"
    >
      <b-form-text
        id="TokenBodytext"
        style="text-align: left;">
        {{ $t('AccessTokenBodytext') }}
      </b-form-text>
    </b-form-group>
    <b-form-group
      class="mandatory"
      label-for="TokenName"
      label-cols-sm="3"
      label-align-sm="right"
      :label="$t('TokenNameLabel')"
    >
      <b-form-input
        id="TokenName"
        v-model="$v.token.TokenName.$model"
        :placeholder="$t('TokenName')"
      />
    </b-form-group>
    <b-form-group
      label-for="ExpiredDate"
      label-cols-sm="3"
      label-align-sm="right"
      :label="$t('TokenExpireLabel')"
    >
      <datepicker
        id="ExpiredDate"
        v-model="$v.token.TokenExpirationDate.$model"
        :language="datepickerLanguage[$i18n.locale]"
        :calendar-button="true"
        calendar-button-icon="material-icons"
        calendar-button-icon-content="date_range"
        :placeholder="$t('TokenExpire')"
        :bootstrap-styling="true"
        :full-month-name="true"
        format="dd MMMM yyyy"
        :disabledDates="disabledExpirationDates"
        :typeable="true"
      >
      </datepicker>
    </b-form-group>
    <b-form-group
      label-cols-sm="3"
      label-align-sm="right"
     >
      <b-button
        type="button"
        variant="secondary"
        class="float-right"
        name="create-token"
        style="margin-right: 0px;"
        @click.prevent="createToken"
        :disabled="$v.token.$invalid">{{ $t('TokenCreateBtn') }}</b-button>
    </b-form-group>
    <b-form-group
      label-for="Token-List"
      label-cols-sm="3"
      label-align-sm="right"
    >
      <b-table
        id="Token-List"
        :fields="headers"
        :items="currentTokens"
        :locale="$i18n.locale"
        :show-empty="true"
        :empty-text="$t('emptyTableText')"
        style="margin-bottom: 0"
        fixed
        sticky-header="100%"
        no-border-collapse>
          <template v-slot:cell(expires)="row">
            <div :class="{ 'text-danger': checkExpiration(row.item.expires) } ">{{row.item.expires}}</div>
          </template>
          <template v-slot:cell(actions)="selectedToken">
            <b-button v-on:click="revokeToken(selectedToken.item)" variant="danger">{{ $t('TokenRevokeBtn') }}</b-button>
          </template>
      </b-table>
    </b-form-group>  
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';

import { TokenApi } from '@coscine/api-connection';

import { BootstrapVue } from 'bootstrap-vue';
import { BIconClipboard } from 'bootstrap-vue';

import Datepicker from 'vuejs-datepicker';
import { de, en } from 'vuejs-datepicker/dist/locale';

import { CoscineModal } from '@coscine/component-library';
import '@coscine/component-library/dist/index.css';

import moment from 'moment';

Vue.use(BootstrapVue);

const today = moment();

export default Vue.extend({
  mixins: [validationMixin],
  name: 'accesstoken',
  components: {
    Datepicker,
    CoscineModal,
    BIconClipboard,
  },
  validations: {
    token: {
      TokenExpirationDate: {},
      TokenName: {
        required,
      },
      AccessToken: {},
    },
  },
  data() {
    return {
      isCreateModalVisible: false,
      isRevokeModalVisible: false,
      headers: [
        {
          label: this.$t('TokenTableName'),
          key: 'name',
        },
        {
          label: this.$t('TokenTableCreated'),
          key: 'created',
        },
        {
          label: this.$t('TokenTableExpires'),
          key: 'expires',
        },
        {
          label: this.$t('TokenTableAction'),
          key: 'actions',
        },
      ],
      disabledExpirationDates: {
        to: moment(today).add(6, 'days').toDate(),
        from: moment(today).add(371, 'days').toDate(),
      },
      currentTokens: [] as object[],
      datepickerLanguage: {
        de,
        en,
      },
      selectedTokenId: '',
      selectedTokenName: '',
      externalUser: true,
      token: {
        TokenExpirationDate: moment(today).add(7, 'days').toDate(),
        TokenName: '',
        AccessToken: '',
      },
      languages: [] as object[],
      Language: [] as object[],
    };
  },
  mounted() {
    this.getTokens();
  },
  methods: {
    getTokens() {
      TokenApi.GetUserTokens((response: any) => {
        this.currentTokens = [];
        for (const data of response.data) {
          data.expires = this.format_date(data.expires);
          data.created = this.format_date(data.created);
          this.currentTokens.push(data);
        }
        this.$v.token.$reset();
      });
    },
    createToken() {
      const data = {
        name: this.token.TokenName,
        expiration: 0,
      };
      const expDate = this.token.TokenExpirationDate;
      data.expiration = moment(expDate).diff(today, 'days') + 1;
      TokenApi.AddToken(data,
        (response: any) => {
          this.getTokens();
          this.token.AccessToken = response.data.token;
          this.isCreateModalVisible = true;
          this.token.TokenName = '';
        });
    },
    copyToken() {
      navigator.clipboard.writeText(this.token.AccessToken);
    },
    // -- delete selected token
    revokeToken(selectedToken: any) {
      this.selectedTokenId = selectedToken.tokenId;
      this.selectedTokenName = selectedToken.name;
      this.isRevokeModalVisible = true;
    },
    confirmeRevoke() {
      TokenApi.RevokeToken(this.selectedTokenId,
        (response: any) => {
          this.getTokens();
        });
      this.isRevokeModalVisible = false;
    },
    // -- format displayed date
    format_date(date: any) {
      if (date) {
        return moment(date).format('DD.MM.YYYY');
      }
    },
    checkExpiration(expires: any) {
      const expiration = moment(expires, 'DD.MM.YYYY');
      if (today.isAfter(expiration)) {
        return true;
      } else {
        return false;
      }
    },
  },
});
</script>

<style>
#accesstoken .vdp-datepicker .form-control {
  background-color: #ffffff;
}
#accesstoken .vdp-datepicker__calendar-button {
  height: calc(1.4em + 0.75rem + 2px);
}
.table td {
  vertical-align: middle;
  padding: 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.table .btn {
  margin: 2px;
}
.table .b-table-empty-row {
  background-color: #f5f5f5;
}
.h-divider {
  margin-top: 5px;
  margin-bottom: 10px;
  height: 1px;
  width: 100%;
  border-top: 1px solid #bebbbb;
}
.btn-danger:focus {
  outline: none; 
  box-shadow: none; 
  /* Default color codes for bootsrap btn-danger */
  color: #fff;
  background-color: #cc071e;
  border-color: #cc071e;
}
.create-modal-content {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  border: 0;
}
.revoke-modal-content {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
</style>