Add application API keys
This commit is contained in:
@@ -6,6 +6,7 @@ import { Separator } from '@/components/ui/separator';
|
||||
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
||||
import { toUrl } from '@/lib/utils';
|
||||
import { edit as editAppearance } from '@/routes/appearance/index';
|
||||
import { edit as editApplications } from '@/routes/applications/index';
|
||||
import { edit as editGitConnections } from '@/routes/git-connections/index';
|
||||
import { edit as editProfile } from '@/routes/profile/index';
|
||||
import { edit as editSecurity } from '@/routes/security/index';
|
||||
@@ -24,6 +25,10 @@ const sidebarNavItems: NavItem[] = [
|
||||
title: 'Git connections',
|
||||
href: editGitConnections(),
|
||||
},
|
||||
{
|
||||
title: 'Applications',
|
||||
href: editApplications(),
|
||||
},
|
||||
{
|
||||
title: 'Appearance',
|
||||
href: editAppearance(),
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import UserApplicationController from '@/actions/App/Http/Controllers/Settings/UserApplicationController';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
||||
import { edit as editApplications } from '@/routes/applications/index';
|
||||
import type { BreadcrumbItem, SettingsApplicationsPageProps } from '@/types';
|
||||
|
||||
defineProps<SettingsApplicationsPageProps>();
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Applications',
|
||||
href: editApplications(),
|
||||
},
|
||||
];
|
||||
|
||||
const formatDate = (value: string | null): string => {
|
||||
if (value === null) {
|
||||
return 'Never';
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(value));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbItems">
|
||||
<Head title="Applications" />
|
||||
|
||||
<SettingsLayout>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="space-y-2">
|
||||
<Heading
|
||||
variant="small"
|
||||
title="Applications"
|
||||
description="Create API keys for tools that should use KanbanGit with your account permissions."
|
||||
/>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Keys are shown once. Delete an application when a tool
|
||||
should lose access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="status"
|
||||
class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
|
||||
>
|
||||
{{ status }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="applicationKey"
|
||||
class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-900/70 dark:bg-amber-950/30 dark:text-amber-100"
|
||||
>
|
||||
<p class="font-medium">Save this API key now.</p>
|
||||
<p class="mt-1">
|
||||
It will not be shown again after you leave this page.
|
||||
</p>
|
||||
<Input
|
||||
class="mt-3 font-mono text-xs"
|
||||
:model-value="applicationKey"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Create application</CardTitle>
|
||||
<CardDescription>
|
||||
Name the tool that will receive an API key.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<Form
|
||||
v-bind="UserApplicationController.store.form()"
|
||||
class="space-y-4"
|
||||
v-slot="{ errors, processing }"
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Application name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
autofocus
|
||||
placeholder="Claude Desktop"
|
||||
/>
|
||||
<InputError :message="errors.name" />
|
||||
</div>
|
||||
|
||||
<Button type="submit" :disabled="processing">
|
||||
Create application
|
||||
</Button>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="gap-0 overflow-hidden">
|
||||
<CardHeader class="border-b">
|
||||
<CardTitle>Saved applications</CardTitle>
|
||||
<CardDescription>
|
||||
Existing keys stay hidden. Create a new
|
||||
application when another key is needed.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="space-y-4 p-6">
|
||||
<div
|
||||
v-if="applications.length === 0"
|
||||
class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
|
||||
>
|
||||
No applications have been created yet.
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="application in applications"
|
||||
:key="application.id"
|
||||
class="border-border rounded-xl border p-4"
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap items-start justify-between gap-4"
|
||||
>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2"
|
||||
>
|
||||
<Badge>API key</Badge>
|
||||
<span class="text-sm font-medium">
|
||||
{{ application.name }}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
class="text-muted-foreground text-xs"
|
||||
>
|
||||
Created:
|
||||
{{
|
||||
formatDate(
|
||||
application.created_at,
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<p
|
||||
class="text-muted-foreground text-xs"
|
||||
>
|
||||
Last used:
|
||||
{{
|
||||
formatDate(
|
||||
application.last_used_at,
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Form
|
||||
v-bind="
|
||||
UserApplicationController.destroy.form(
|
||||
application.id,
|
||||
)
|
||||
"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="destructive"
|
||||
:disabled="processing"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
export type UserApplicationModel = {
|
||||
id: number;
|
||||
user_id: number;
|
||||
name: string;
|
||||
last_used_at: string | null;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
};
|
||||
@@ -14,6 +14,7 @@ import type { TicketPriorityModel } from '@/types/models/ticket-priority-model';
|
||||
import type { TicketStatusModel } from '@/types/models/ticket-status-model';
|
||||
import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
|
||||
import type { TicketTypeModel } from '@/types/models/ticket-type-model';
|
||||
import type { UserApplicationModel } from '@/types/models/user-application-model';
|
||||
import type { UserGitConnectionModel } from '@/types/models/user-git-connection-model';
|
||||
import type { UserModel } from '@/types/models/user-model';
|
||||
|
||||
@@ -150,3 +151,9 @@ export type SettingsGitConnectionsPageProps = {
|
||||
gitConnections: UserGitConnectionModel[];
|
||||
status?: string | null;
|
||||
};
|
||||
|
||||
export type SettingsApplicationsPageProps = {
|
||||
applicationKey?: string | null;
|
||||
applications: UserApplicationModel[];
|
||||
status?: string | null;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user