Implement Gitea user connection foundation
This commit is contained in:
@@ -0,0 +1,235 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user