Skip to content

Commit 48f0152

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 665ffa1 commit 48f0152

File tree

3 files changed

+196
-0
lines changed

3 files changed

+196
-0
lines changed

‎resources/components/Dashboard/Sidebar.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,16 @@
241241
/>
242242
</RouterLink>
243243

244+
<RouterLink
245+
to="/access-tokens"
246+
class="sidebar-bottom-link"
247+
:class="{ 'active-bottom-link': $route.path === '/access-tokens' }"
248+
>
249+
<div
250+
class="i-hugeicons-api h-5 w-5 text-gray-500 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600"
251+
/>
252+
</RouterLink>
253+
244254
<RouterLink
245255
to="/settings/ai"
246256
class="sidebar-bottom-link"

‎resources/views/dashboard/access-tokens/index.vue

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<script lang="ts" setup>
2+
useHead({
3+
title: 'Dashboard - Access Tokens',
4+
})
5+
6+
const tokens = [
7+
{
8+
name: 'Mobile App Token',
9+
token: '2|LlNSaUVFmBXoD6OYH5ZxNlxsFxHh4QqGxspKGKdt',
10+
abilities: ['read', 'write'],
11+
lastUsed: '2 minutes ago',
12+
status: 'active',
13+
createdAt: '2024-01-15 08:23:15',
14+
expiresAt: '2024-02-14 08:23:15'
15+
},
16+
{
17+
name: 'Dashboard API',
18+
token: '3|KkMRbTEElBWnC5NXG4YwMkwrEwGg3PpFwroJFJcs',
19+
abilities: ['read'],
20+
lastUsed: '1 hour ago',
21+
status: 'active',
22+
createdAt: '2024-01-10 15:45:30',
23+
expiresAt: '2024-01-24 15:45:30'
24+
},
25+
{
26+
name: 'Integration Service',
27+
token: '4|JjLQaSsDDkVmB4MWF3XvLjvrDvFf2OoEvqnIEIbr',
28+
abilities: ['read', 'write', 'delete'],
29+
lastUsed: '3 days ago',
30+
status: 'revoked',
31+
createdAt: '2023-12-20 11:30:00',
32+
expiresAt: '2024-01-19 11:30:00'
33+
}
34+
]
35+
</script>
36+
37+
<template>
38+
<div class="min-h-screen py-4 dark:bg-blue-gray-800 lg:py-8">
39+
<div class="mb-8 px-4 lg:px-8 sm:px-6">
40+
<div>
41+
<h3 class="text-base text-gray-900 font-semibold leading-6">
42+
Token Statistics
43+
</h3>
44+
45+
<dl class="grid grid-cols-1 mt-5 gap-5 lg:grid-cols-3 sm:grid-cols-2">
46+
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
47+
<dt>
48+
<div class="absolute rounded-md bg-blue-500 p-3">
49+
<div class="i-heroicons-key h-6 w-6 text-white" />
50+
</div>
51+
52+
<p class="ml-16 truncate text-sm text-gray-500 font-medium">
53+
Active Tokens
54+
</p>
55+
</dt>
56+
57+
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
58+
<p class="text-2xl text-gray-900 font-semibold">
59+
{{ tokens.filter(t => t.status === 'active').length }}
60+
</p>
61+
</dd>
62+
</div>
63+
</dl>
64+
</div>
65+
</div>
66+
67+
<div class="px-4 pt-12 lg:px-8 sm:px-6">
68+
<div class="sm:flex sm:items-center">
69+
<div class="sm:flex-auto">
70+
<h1 class="text-base text-gray-900 font-semibold leading-6">
71+
Access Tokens
72+
</h1>
73+
<p class="mt-2 text-sm text-gray-700">
74+
Manage your API access tokens for authentication
75+
</p>
76+
</div>
77+
78+
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
79+
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm text-white font-semibold shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline">
80+
Generate New Token
81+
</button>
82+
</div>
83+
</div>
84+
85+
<div class="mt-8 flow-root">
86+
<div class="overflow-x-auto -mx-4 -my-2 lg:-mx-8 sm:-mx-6">
87+
<div class="inline-block min-w-full py-2 align-middle lg:px-8 sm:px-6">
88+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
89+
<table class="min-w-full divide-y divide-gray-300">
90+
<thead class="bg-gray-50">
91+
<tr>
92+
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm text-gray-900 font-semibold sm:pl-6">
93+
Name
94+
</th>
95+
96+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
97+
Last Used
98+
</th>
99+
100+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
101+
Abilities
102+
</th>
103+
104+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
105+
Status
106+
</th>
107+
108+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold sm:text-right">
109+
Created At
110+
</th>
111+
112+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold sm:text-right">
113+
Expires At
114+
</th>
115+
116+
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
117+
<span class="sr-only">Actions</span>
118+
</th>
119+
</tr>
120+
</thead>
121+
122+
<tbody class="bg-white divide-y divide-gray-200">
123+
<tr v-for="token in tokens" :key="token.name">
124+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 font-medium sm:pl-6">
125+
{{ token.name }}
126+
</td>
127+
128+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
129+
{{ token.lastUsed }}
130+
</td>
131+
132+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
133+
<div class="flex gap-1">
134+
<span
135+
v-for="ability in token.abilities"
136+
:key="ability"
137+
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs text-blue-700 font-medium ring-1 ring-blue-600/20 ring-inset"
138+
>
139+
{{ ability }}
140+
</span>
141+
</div>
142+
</td>
143+
144+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
145+
<span
146+
:class="[
147+
'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
148+
token.status === 'active'
149+
? 'bg-green-50 text-green-700 ring-green-600/20'
150+
: 'bg-red-50 text-red-700 ring-red-600/20'
151+
]"
152+
>
153+
{{ token.status }}
154+
</span>
155+
</td>
156+
157+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
158+
{{ token.createdAt }}
159+
</td>
160+
161+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
162+
{{ token.expiresAt }}
163+
</td>
164+
165+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
166+
<button
167+
class="text-blue-600 hover:text-blue-900 mr-4"
168+
:disabled="token.status === 'revoked'"
169+
>
170+
{{ token.status === 'active' ? 'Revoke' : 'Revoked' }}
171+
</button>
172+
<button class="text-gray-600 hover:text-gray-900">
173+
Copy
174+
</button>
175+
</td>
176+
</tr>
177+
</tbody>
178+
</table>
179+
</div>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
</template>

‎storage/framework/types/dashboard-router.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ declare module 'vue-router/auto-routes' {
1919
*/
2020
export interface RouteNamedMap {
2121
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
22+
'/access-tokens/': RouteRecordInfo<'/access-tokens/', '/access-tokens', Record<never, never>, Record<never, never>>,
2223
'/actions/': RouteRecordInfo<'/actions/', '/actions', Record<never, never>, Record<never, never>>,
2324
'/buddy/': RouteRecordInfo<'/buddy/', '/buddy', Record<never, never>, Record<never, never>>,
2425
'/commands/': RouteRecordInfo<'/commands/', '/commands', Record<never, never>, Record<never, never>>,

0 commit comments

Comments
 (0)