236 lines
11 KiB
Vue
236 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import GitConnectionController from '@/actions/App/Http/Controllers/Settings/GitConnectionController';
|
|
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 editGitConnections } from '@/routes/git-connections';
|
|
import type { BreadcrumbItem, SettingsGitConnectionsPageProps } from '@/types';
|
|
|
|
defineProps<SettingsGitConnectionsPageProps>();
|
|
|
|
const breadcrumbItems: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Git connections',
|
|
href: editGitConnections(),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbItems">
|
|
<Head title="Git connections" />
|
|
|
|
<SettingsLayout>
|
|
<div class="flex flex-col gap-6">
|
|
<div class="space-y-2">
|
|
<Heading
|
|
variant="small"
|
|
title="Git connections"
|
|
description="Add your personal Git provider credentials here. Project repository links will use these connections to fetch repositories, branches, and pull requests you can access."
|
|
/>
|
|
<p class="text-sm text-muted-foreground">
|
|
Each user needs their own application key. Without a
|
|
matching personal connection, KanbanGit can only show
|
|
repository names and will link you back to this page.
|
|
</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 class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Add Gitea connection</CardTitle>
|
|
<CardDescription>
|
|
Connect a Gitea account by storing the instance
|
|
base URL and a personal application token.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<Form
|
|
v-bind="GitConnectionController.store.form()"
|
|
class="space-y-4"
|
|
v-slot="{ errors, processing }"
|
|
>
|
|
<input name="provider" type="hidden" value="gitea" />
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="base_url">Gitea base URL</Label>
|
|
<Input
|
|
id="base_url"
|
|
name="base_url"
|
|
type="url"
|
|
required
|
|
autofocus
|
|
placeholder="https://git.example.com"
|
|
/>
|
|
<InputError :message="errors.base_url" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="api_token">Application token</Label>
|
|
<Input
|
|
id="api_token"
|
|
name="api_token"
|
|
type="password"
|
|
required
|
|
placeholder="Paste your Gitea application key"
|
|
/>
|
|
<InputError :message="errors.api_token" />
|
|
</div>
|
|
|
|
<Button type="submit" :disabled="processing">
|
|
Add connection
|
|
</Button>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card class="gap-0 overflow-hidden">
|
|
<CardHeader class="border-b">
|
|
<CardTitle>Saved connections</CardTitle>
|
|
<CardDescription>
|
|
Tokens stay hidden after save. Updating a
|
|
connection requires entering a fresh token.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent class="space-y-4 p-6">
|
|
<div
|
|
v-if="gitConnections.length === 0"
|
|
class="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground"
|
|
>
|
|
No Git connections have been added yet.
|
|
</div>
|
|
|
|
<div
|
|
v-for="gitConnection in gitConnections"
|
|
:key="gitConnection.id"
|
|
class="rounded-xl border border-border p-4"
|
|
>
|
|
<div
|
|
class="mb-4 flex flex-wrap items-start justify-between gap-3"
|
|
>
|
|
<div class="space-y-1">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<Badge>{{ gitConnection.provider_label }}</Badge>
|
|
<span class="text-sm font-medium">
|
|
{{ gitConnection.account_login }}
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-muted-foreground">
|
|
{{
|
|
gitConnection.account_name ??
|
|
'Unnamed remote account'
|
|
}}
|
|
</p>
|
|
<p class="text-xs text-muted-foreground">
|
|
{{ gitConnection.base_url }}
|
|
</p>
|
|
</div>
|
|
|
|
<p class="text-xs text-muted-foreground">
|
|
Remote user ID:
|
|
{{ gitConnection.provider_user_id }}
|
|
</p>
|
|
</div>
|
|
|
|
<Form
|
|
v-bind="
|
|
GitConnectionController.update.form(
|
|
gitConnection.id,
|
|
)
|
|
"
|
|
class="grid gap-4"
|
|
v-slot="{ errors, processing }"
|
|
>
|
|
<input
|
|
name="provider"
|
|
type="hidden"
|
|
:value="gitConnection.provider"
|
|
/>
|
|
|
|
<div class="grid gap-2">
|
|
<Label :for="`base-url-${gitConnection.id}`">
|
|
Gitea base URL
|
|
</Label>
|
|
<Input
|
|
:id="`base-url-${gitConnection.id}`"
|
|
name="base_url"
|
|
type="url"
|
|
:default-value="gitConnection.base_url"
|
|
required
|
|
/>
|
|
<InputError :message="errors.base_url" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label :for="`token-${gitConnection.id}`">
|
|
New application token
|
|
</Label>
|
|
<Input
|
|
:id="`token-${gitConnection.id}`"
|
|
name="api_token"
|
|
type="password"
|
|
required
|
|
placeholder="Paste a new token to verify and save"
|
|
/>
|
|
<InputError :message="errors.api_token" />
|
|
</div>
|
|
|
|
<div class="flex flex-wrap justify-between gap-3">
|
|
<Button
|
|
type="submit"
|
|
variant="outline"
|
|
:disabled="processing"
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
|
|
<Form
|
|
v-bind="
|
|
GitConnectionController.destroy.form(
|
|
gitConnection.id,
|
|
)
|
|
"
|
|
class="mt-3 flex justify-end"
|
|
v-slot="{ processing }"
|
|
>
|
|
<Button
|
|
type="submit"
|
|
variant="destructive"
|
|
:disabled="processing"
|
|
>
|
|
Remove connection
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</SettingsLayout>
|
|
</AppLayout>
|
|
</template>
|