Listing an Organization's Access Tokens

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, we need to accept our accessTokens array as a prop in our Organization Settings page. Then, we can go ahead and pass it through to our Organization Access Tokens Card.

// inertia/pages/settings/organization.vue
<script setup lang="ts">
import { Abilities } from '#actions/abilities/get_abilities'
import AccessTokenDto from '#dtos/access_token'
import OrganizationDto from '#dtos/organization'
import OrganizationInviteDto from '#dtos/organization_invite'
import RoleDto from '#dtos/role'
import UserDto from '#dtos/user'

defineProps<{
  organization: OrganizationDto
  user: UserDto
  users: UserDto[]
  roles: RoleDto[]
  invites: OrganizationInviteDto[]
++  accessTokens: AccessTokenDto[] // 👈
  can: Abilities
}>()
</script>

<template>
  <AppHead
    title="Organization Settings"
    :description="`Manage your ${organization.name} organization`"
  />

  <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 :tokens="accessTokens" /> // 👈
  </SettingsShell>
</template>