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>
Then, within the Organization Access Tokens Card, we need to accept tokens
as a prop with a type of our AccessTokensDto[]
. While in our component's script also ensure Luxon's DateTime
is imported, we'll use that next in our template.
// inertia/components/OrganizationAccessTokensCard.vue
<script setup lang="ts">
++import AccessTokenDto from '#dtos/access_token'
++import { DateTime } from 'luxon'
import TokenActions from '#enums/token_actions'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import { Clipboard, ClipboardCheck, Loader } from 'lucide-vue-next'
import { ref } from 'vue'
++defineProps<{ tokens: AccessTokenDto[] }>() // 👈
let copyTimeout: NodeJS.Timeout | null = null
const isDialogShown = ref(false)
const processing = ref(false)
const isCopied = ref(false)
const token = ref<string | null>(null)
const permissionOptions = Object.values(TokenActions)
const form = ref({
name: '',
permissions: new Set(['read']),
})
// ...
</script>
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!