Creating Access Tokens Part 2: Inertia/Vue

In this lesson, we'll rig up the create access token route we created in the last lesson to a form within our Vue application. We'll also stub the overall manage access tokens card for the organization itself.

Published
Apr 25
Duration
12m 44s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

If you're just here for the API stuff and don't care for the Inertia/Vue side of this application, please feel free to apply the below code changes and continue onward. I'll also have the completed Inertia/Vue code available in the last lesson of this API Authentication module if you'd prefer waiting for that!

First, create a new file at inertia/components/OrganizationAccessTokensCard.vue with the following contents:


<script setup lang="ts">
import TokenActions from '#enums/token_actions'
import axios from 'axios'
import { Loader } from 'lucide-vue-next'
import { ref } from 'vue'

const isDialogShown = ref(false)
const processing = ref(false)
const permissionOptions = Object.values(TokenActions)
const form = ref({
  name: '',
  permissions: new Set(['read']),
})

async function onSubmit() {
  processing.value = true

  const { data } = await axios.post('/settings/organization/access-tokens', {
    name: form.value.name,
    permissions: [...form.value.permissions],
  })

  processing.value = false
}
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Organization Access Tokens</CardTitle>
      <CardDescription>Manage tokens your organization can use to access our API.</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="flex justify-end mt-4">
        <Button type="button" @click="isDialogShown = true"> Add Access Token </Button>
      </div>
    </CardContent>
  </Card>

  <Dialog v-model:open="isDialogShown">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Add Access Token</DialogTitle>
      </DialogHeader>

      <form id="accessTokenDialog" @submit.prevent="onSubmit">
        <FormInput
          label="Name"
          type="text"
          class="flex-1"
          v-model="form.name"
          :disabled="processing"
        />

        <div class="flex flex-col gap-3 my-3">
          <Label>Permissions</Label>

          <FormInput type="group">
            <div v-for="option in permissionOptions" :key="option" class="flex items-center gap-2">
              <Checkbox
                :checked="form.permissions.has(option)"
                :disable="processing"
                @update:checked="
                  $event ? form.permissions.add(option) : form.permissions.delete(option)
                "
              />
              <span class="capitalize">{{ option }}</span>
            </div>
          </FormInput>
        </div>
      </form>

      <DialogFooter>
        <Button type="submit" :disabled="processing" form="accessTokenDialog">
          <Loader v-if="processing" class="mr-2 h-4 w-4 animate-spin" />
          Create Access Token
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
  • inertia
  • components
  • OrganizationAccessTokensCard.vue

Then, add this component to the inertia/pages/settings/organization.vue page as the last component within our <SettingsShell>


<SettingsShell>
    <OrganizationEditCard v-if="can.organization.edit" :organization="organization" />
    <OrganizationUsersCard :user="user" :users="users" :roles="roles" :can="can" />
    <OrganizationUserInvitesCard :invites="invites" :roles="roles" :can="can" />
    <OrganizationAccessTokensCard /> <! 👈 >
  </SettingsShell>
  • inertia
  • pages
  • settings
  • organization.vue

We'll expand on this a little further in future lessons, again, I'll have the completed code you can copy/paste if you're not interested in the Vue/Inertia side of this application in the last lesson of this API Authentication module.

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!