anonaddy/resources/js/components/passport/PersonalAccessTokens.vue

<template>
  <div>
    <h3 class="font-bold text-xl">Information</h3>

    <div class="mt-4 w-24 border-b-2 border-grey-200"></div>

    <p class="my-6">
      Your API access tokens can be used with the
      <a
        href="https://github.com/anonaddy/browser-extension"
        target="_blank"
        rel="nofollow noopener noreferrer"
        class="text-indigo-700"
        >open-source</a
      >
      browser extension on
      <a
        href="https://addons.mozilla.org/en-GB/firefox/addon/anonaddy/"
        target="_blank"
        rel="nofollow noopener noreferrer"
        class="text-indigo-700"
        >Firefox</a
      >
      or
      <a
        href="https://chrome.google.com/webstore/detail/anonaddy/iadbdpnoknmbdeolbapdackdcogdmjpe"
        target="_blank"
        rel="nofollow noopener noreferrer"
        class="text-indigo-700"
        >Chrome / Brave</a
      >
      to generate new aliases. Simply paste the token generated below into the browser extension to
      get started. Your API access tokens are secret and should be treated like your password. For
      more information please see the <a href="/docs" class="text-indigo-700">API documentation</a>.
    </p>

    <button
      @click="openCreateTokenModal"
      class="bg-cyan-400 w-full hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
    >
      Generate New Token
    </button>

    <div class="mt-6">
      <h3 class="font-bold text-xl">Personal Access Tokens</h3>

      <div class="my-4 w-24 border-b-2 border-grey-200"></div>

      <p class="my-6">
        Tokens you have generated that can be used to access the API. To revoke an access token
        simply click the delete button next to it.
      </p>

      <div>
        <p class="mb-0" v-if="tokens.length === 0">
          You have not created any personal access tokens.
        </p>

        <div class="table w-full text-sm md:text-base" v-if="tokens.length > 0">
          <div class="table-row">
            <div class="table-cell p-1 md:p-4 font-semibold">Name</div>
            <div class="table-cell p-1 md:p-4 font-semibold">Created</div>
            <div class="table-cell p-1 md:p-4 font-semibold">Expires</div>
            <div class="table-cell p-1 md:p-4"></div>
          </div>
          <div
            v-for="token in tokens"
            :key="token.id"
            class="table-row even:bg-grey-50 odd:bg-white"
          >
            <div class="table-cell p-1 md:p-4">{{ token.name }}</div>
            <div class="table-cell p-1 md:p-4">{{ token.created_at | timeAgo }}</div>
            <div class="table-cell p-1 md:p-4">{{ token.expires_at | timeAgo }}</div>
            <div class="table-cell p-1 md:p-4 text-right">
              <a
                class="text-red-500 font-bold cursor-pointer focus:outline-none"
                @click="showRevokeModal(token)"
              >
                Delete
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Modal :open="createTokenModalOpen" @close="closeCreateTokenModal">
      <div v-if="!accessToken" class="max-w-lg w-full bg-white rounded-lg shadow-2xl px-6 py-6">
        <h2
          class="font-semibold text-grey-900 text-2xl leading-tight border-b-2 border-grey-100 pb-4"
        >
          Create New Token
        </h2>
        <p class="mt-4 text-grey-700">
          What's this token going to be used for? Give it a short name so that you remember later.
        </p>
        <div class="mt-6">
          <div v-if="form.errors.length > 0" class="mb-3 text-red-500">
            <ul>
              <li v-for="error in form.errors" :key="error">
                {{ error }}
              </li>
            </ul>
          </div>
          <label for="create-token-name" class="block text-grey-700 text-sm my-2"> Name: </label>
          <input
            v-model="form.name"
            type="text"
            id="create-token-name"
            class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 mb-6"
            :class="form.errors.length > 0 ? 'border-red-500' : ''"
            placeholder="e.g. Firefox extension"
            autofocus
          />
          <button
            @click="store"
            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
            :class="loading ? 'cursor-not-allowed' : ''"
            :disabled="loading"
          >
            Generate Token
            <loader v-if="loading" />
          </button>
          <button
            @click="closeCreateTokenModal"
            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
          >
            Close
          </button>
        </div>
      </div>
      <div v-else class="max-w-lg w-full bg-white rounded-lg shadow-2xl px-6 py-6">
        <h2
          class="font-semibold text-grey-900 text-2xl leading-tight border-b-2 border-grey-100 pb-4"
        >
          Personal Access Token
        </h2>
        <p class="my-4 text-grey-700">
          This is your new personal access token. This is the only time the token will ever be
          displayed, so please make a note of it in a safe place (e.g. password manager)!
        </p>
        <textarea
          v-model="accessToken"
          class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 text-sm"
          rows="10"
          readonly
        >
        </textarea>
        <div class="mt-6">
          <button
            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
            v-clipboard="() => accessToken"
            v-clipboard:success="clipboardSuccess"
            v-clipboard:error="clipboardError"
          >
            Copy To Clipboard
          </button>
          <button
            @click="closeCreateTokenModal"
            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
          >
            Close
          </button>
        </div>
      </div>
    </Modal>

    <Modal :open="revokeTokenModalOpen" @close="closeRevokeTokenModal">
      <div class="max-w-lg w-full bg-white rounded-lg shadow-2xl px-6 py-6">
        <h2
          class="font-semibold text-grey-900 text-2xl leading-tight border-b-2 border-grey-100 pb-4"
        >
          Revoke API Access Token
        </h2>
        <p class="my-4 text-grey-700">
          Any browser extension, application or script using this API access token will no longer be
          able to access the API. This action cannot be undone.
        </p>
        <div class="mt-6">
          <button
            @click="revoke"
            class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded focus:outline-none"
            :class="revokeTokenLoading ? 'cursor-not-allowed' : ''"
            :disabled="revokeTokenLoading"
          >
            Revoke Token
            <loader v-if="revokeTokenLoading" />
          </button>
          <button
            @click="closeRevokeTokenModal"
            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
          >
            Close
          </button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Modal from './../Modal.vue'

export default {
  components: {
    Modal,
  },
  data() {
    return {
      accessToken: null,
      createTokenModalOpen: false,
      revokeTokenModalOpen: false,
      tokens: [],
      tokenToRevoke: null,
      form: {
        name: '',
        errors: [],
      },
      loading: false,
      revokeTokenLoading: false,
    }
  },
  mounted() {
    this.getTokens()
  },

  methods: {
    getTokens() {
      axios.get('/oauth/personal-access-tokens').then(response => {
        this.tokens = response.data
      })
    },
    store() {
      this.loading = true
      this.accessToken = null
      this.form.errors = []

      axios
        .post('/oauth/personal-access-tokens', this.form)
        .then(response => {
          this.loading = false
          this.form.name = ''
          this.form.errors = []

          this.tokens.push(response.data.token)
          this.accessToken = response.data.accessToken
        })
        .catch(error => {
          this.loading = false
          if (typeof error.response.data === 'object') {
            this.form.errors = _.flatten(_.toArray(error.response.data.errors))
          } else {
            this.error()
          }
        })
    },
    showRevokeModal(token) {
      this.tokenToRevoke = token
      this.revokeTokenModalOpen = true
    },
    revoke() {
      this.revokeTokenLoading = true

      axios.delete(`/oauth/personal-access-tokens/${this.tokenToRevoke.id}`).then(response => {
        this.revokeTokenLoading = false
        this.revokeTokenModalOpen = false
        this.tokenToRevoke = null
        this.getTokens()
      })
    },
    openCreateTokenModal() {
      this.accessToken = null
      this.createTokenModalOpen = true
    },
    closeCreateTokenModal() {
      this.createTokenModalOpen = false
    },
    closeRevokeTokenModal() {
      this.revokeTokenModalOpen = false
    },
    clipboardSuccess() {
      this.success('Copied to clipboard')
    },
    clipboardError() {
      this.error('Could not copy to clipboard')
    },
    success(text = '') {
      this.$notify({
        title: 'Success',
        text: text,
        type: 'success',
      })
    },
    error(text = 'An error has occurred, please try again later') {
      this.$notify({
        title: 'Error',
        text: text,
        type: 'error',
      })
    },
  },
}
</script>