mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-06 05:39:05 +00:00
Initial commit
This commit is contained in:
Jarek Krochmalski
251
routes/settings/git/GitCredentialModal.svelte
Normal file
251
routes/settings/git/GitCredentialModal.svelte
Normal file
@@ -0,0 +1,251 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Dialog from '$lib/components/ui/dialog';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { ToggleGroup } from '$lib/components/ui/toggle-pill';
|
||||
import { Key, KeyRound, Lock } from 'lucide-svelte';
|
||||
import { focusFirstInput } from '$lib/utils';
|
||||
|
||||
// Auth type options with icons
|
||||
const authTypeOptions = [
|
||||
{ value: 'password', label: 'Password/Token', icon: Lock },
|
||||
{ value: 'ssh', label: 'SSH Key', icon: KeyRound }
|
||||
];
|
||||
|
||||
interface GitCredential {
|
||||
id: number;
|
||||
name: string;
|
||||
authType: 'none' | 'password' | 'ssh';
|
||||
username?: string;
|
||||
hasPassword: boolean;
|
||||
hasSshKey: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
credential?: GitCredential | null;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
let { open = $bindable(), credential = null, onClose, onSaved }: Props = $props();
|
||||
|
||||
// Form state
|
||||
let formName = $state('');
|
||||
let formAuthType = $state<'none' | 'password' | 'ssh'>('password');
|
||||
let formUsername = $state('');
|
||||
let formPassword = $state('');
|
||||
let formSshKey = $state('');
|
||||
let formSshPassphrase = $state('');
|
||||
let formError = $state('');
|
||||
let formSaving = $state(false);
|
||||
let errors = $state<{ name?: string; password?: string; sshKey?: string }>({});
|
||||
|
||||
const isEditing = $derived(credential !== null);
|
||||
|
||||
// Track which credential was initialized to avoid repeated resets
|
||||
let lastInitializedCredId = $state<number | null | undefined>(undefined);
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
const currentCredId = credential?.id ?? null;
|
||||
if (lastInitializedCredId !== currentCredId) {
|
||||
lastInitializedCredId = currentCredId;
|
||||
resetForm();
|
||||
}
|
||||
} else {
|
||||
lastInitializedCredId = undefined;
|
||||
}
|
||||
});
|
||||
|
||||
function resetForm() {
|
||||
if (credential) {
|
||||
formName = credential.name;
|
||||
formAuthType = credential.authType;
|
||||
formUsername = credential.username || '';
|
||||
formPassword = '';
|
||||
formSshKey = '';
|
||||
formSshPassphrase = '';
|
||||
} else {
|
||||
formName = '';
|
||||
formAuthType = 'password';
|
||||
formUsername = '';
|
||||
formPassword = '';
|
||||
formSshKey = '';
|
||||
formSshPassphrase = '';
|
||||
}
|
||||
formError = '';
|
||||
errors = {};
|
||||
}
|
||||
|
||||
async function saveCredential() {
|
||||
errors = {};
|
||||
let hasErrors = false;
|
||||
|
||||
if (!formName.trim()) {
|
||||
errors.name = 'Name is required';
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (formAuthType === 'password' && !formPassword.trim() && !credential?.hasPassword) {
|
||||
errors.password = 'Password is required';
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (formAuthType === 'ssh' && !formSshKey.trim() && !credential?.hasSshKey) {
|
||||
errors.sshKey = 'SSH private key is required';
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (hasErrors) return;
|
||||
|
||||
formSaving = true;
|
||||
formError = '';
|
||||
|
||||
try {
|
||||
const body: any = {
|
||||
name: formName.trim(),
|
||||
authType: formAuthType,
|
||||
username: formUsername.trim() || undefined
|
||||
};
|
||||
|
||||
if (formAuthType === 'password') {
|
||||
body.password = formPassword;
|
||||
}
|
||||
|
||||
if (formAuthType === 'ssh') {
|
||||
body.sshPrivateKey = formSshKey;
|
||||
if (formSshPassphrase) body.sshPassphrase = formSshPassphrase;
|
||||
}
|
||||
|
||||
const url = credential
|
||||
? `/api/git/credentials/${credential.id}`
|
||||
: '/api/git/credentials';
|
||||
const method = credential ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
formError = data.error || 'Failed to save credential';
|
||||
toast.error(formError);
|
||||
return;
|
||||
}
|
||||
|
||||
onSaved();
|
||||
onClose();
|
||||
toast.success(credential ? 'Credential updated' : 'Credential created');
|
||||
} catch (error) {
|
||||
formError = 'Failed to save credential';
|
||||
toast.error('Failed to save credential');
|
||||
} finally {
|
||||
formSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open onOpenChange={(o) => { if (o) focusFirstInput(); else onClose(); }}>
|
||||
<Dialog.Content class="max-w-md">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title class="flex items-center gap-2">
|
||||
<Key class="w-5 h-5" />
|
||||
{isEditing ? 'Edit' : 'Add'} Git credential
|
||||
</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
{isEditing ? 'Update credential settings' : 'Create a new credential for accessing Git repositories'}
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); saveCredential(); }} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="cred-name">Name</Label>
|
||||
<Input
|
||||
id="cred-name"
|
||||
bind:value={formName}
|
||||
placeholder="e.g., GitHub Personal"
|
||||
class={errors.name ? 'border-destructive focus-visible:ring-destructive' : ''}
|
||||
oninput={() => errors.name = undefined}
|
||||
/>
|
||||
{#if errors.name}
|
||||
<p class="text-xs text-destructive">{errors.name}</p>
|
||||
{:else if !isEditing}
|
||||
<p class="text-xs text-muted-foreground">A friendly name to identify this credential</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Authentication type</Label>
|
||||
<ToggleGroup
|
||||
value={formAuthType}
|
||||
options={authTypeOptions}
|
||||
onchange={(val) => formAuthType = val as 'password' | 'ssh'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Fixed height container to prevent layout jump -->
|
||||
<div class="min-h-[220px] space-y-4">
|
||||
{#if formAuthType === 'password'}
|
||||
<div class="space-y-2">
|
||||
<Label for="cred-username">Username</Label>
|
||||
<Input id="cred-username" bind:value={formUsername} placeholder="Username or email" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="cred-password">Password or token</Label>
|
||||
<Input
|
||||
id="cred-password"
|
||||
type="password"
|
||||
bind:value={formPassword}
|
||||
placeholder={isEditing ? 'Leave empty to keep current' : 'Password or personal access token'}
|
||||
class={errors.password ? 'border-destructive focus-visible:ring-destructive' : ''}
|
||||
oninput={() => errors.password = undefined}
|
||||
/>
|
||||
{#if errors.password}
|
||||
<p class="text-xs text-destructive">{errors.password}</p>
|
||||
{:else if isEditing && credential?.hasPassword}
|
||||
<p class="text-xs text-muted-foreground">Current password is set. Leave empty to keep it.</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if formAuthType === 'ssh'}
|
||||
<div class="space-y-2">
|
||||
<Label for="cred-ssh-key">SSH private key</Label>
|
||||
<textarea
|
||||
id="cred-ssh-key"
|
||||
bind:value={formSshKey}
|
||||
class="w-full h-32 px-3 py-2 text-sm border rounded-md font-mono bg-background {errors.sshKey ? 'border-destructive focus-visible:ring-destructive' : ''}"
|
||||
placeholder="-----BEGIN OPENSSH PRIVATE KEY----- ... -----END OPENSSH PRIVATE KEY-----"
|
||||
oninput={() => errors.sshKey = undefined}
|
||||
></textarea>
|
||||
{#if errors.sshKey}
|
||||
<p class="text-xs text-destructive">{errors.sshKey}</p>
|
||||
{:else if isEditing && credential?.hasSshKey}
|
||||
<p class="text-xs text-muted-foreground">Current SSH key is set. Leave empty to keep it.</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="cred-ssh-passphrase">SSH passphrase (optional)</Label>
|
||||
<Input id="cred-ssh-passphrase" type="password" bind:value={formSshPassphrase} placeholder="Passphrase for encrypted key" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if formError}
|
||||
<p class="text-sm text-destructive">{formError}</p>
|
||||
{/if}
|
||||
|
||||
<Dialog.Footer>
|
||||
<Button variant="outline" type="button" onclick={onClose}>Cancel</Button>
|
||||
<Button type="submit" disabled={formSaving}>
|
||||
{formSaving ? 'Saving...' : (isEditing ? 'Save changes' : 'Add credential')}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
176
routes/settings/git/GitCredentialsTab.svelte
Normal file
176
routes/settings/git/GitCredentialsTab.svelte
Normal file
@@ -0,0 +1,176 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Plus, Trash2, Pencil, Key, KeyRound, Lock } from 'lucide-svelte';
|
||||
import ConfirmPopover from '$lib/components/ConfirmPopover.svelte';
|
||||
import { canAccess } from '$lib/stores/auth';
|
||||
import GitCredentialModal from './GitCredentialModal.svelte';
|
||||
import { EmptyState } from '$lib/components/ui/empty-state';
|
||||
|
||||
interface GitCredential {
|
||||
id: number;
|
||||
name: string;
|
||||
authType: 'none' | 'password' | 'ssh';
|
||||
username?: string;
|
||||
hasPassword: boolean;
|
||||
hasSshKey: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
let credentials = $state<GitCredential[]>([]);
|
||||
let loading = $state(true);
|
||||
let showModal = $state(false);
|
||||
let editingCredential = $state<GitCredential | null>(null);
|
||||
let confirmDeleteId = $state<number | null>(null);
|
||||
|
||||
async function fetchCredentials() {
|
||||
try {
|
||||
const response = await fetch('/api/git/credentials');
|
||||
credentials = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch git credentials:', error);
|
||||
toast.error('Failed to fetch git credentials');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(cred?: GitCredential) {
|
||||
editingCredential = cred || null;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
editingCredential = null;
|
||||
}
|
||||
|
||||
async function handleSaved() {
|
||||
await fetchCredentials();
|
||||
}
|
||||
|
||||
async function deleteCredential(id: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/git/credentials/${id}`, { method: 'DELETE' });
|
||||
if (response.ok) {
|
||||
await fetchCredentials();
|
||||
toast.success('Credential deleted');
|
||||
} else {
|
||||
toast.error('Failed to delete credential');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete credential:', error);
|
||||
toast.error('Failed to delete credential');
|
||||
}
|
||||
}
|
||||
|
||||
function getAuthTypeBadge(authType: string) {
|
||||
switch (authType) {
|
||||
case 'password':
|
||||
return { label: 'Password', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' };
|
||||
case 'ssh':
|
||||
return { label: 'SSH Key', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' };
|
||||
default:
|
||||
return { label: 'None', class: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' };
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchCredentials();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">Git credentials</h3>
|
||||
<p class="text-sm text-muted-foreground">Manage credentials for accessing Git repositories</p>
|
||||
</div>
|
||||
{#if $canAccess('settings', 'edit')}
|
||||
<Button size="sm" onclick={() => openModal()}>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
Add credential
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="text-sm text-muted-foreground">Loading credentials...</p>
|
||||
{:else if credentials.length === 0}
|
||||
<Card.Root>
|
||||
<Card.Content>
|
||||
<EmptyState
|
||||
icon={Key}
|
||||
title="No Git credentials configured"
|
||||
description="Add credentials to connect to private Git repositories"
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<div class="space-y-1.5">
|
||||
{#each credentials as cred (cred.id)}
|
||||
<Card.Root>
|
||||
<Card.Content class="py-2 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-1.5 rounded-lg bg-muted">
|
||||
{#if cred.authType === 'ssh'}
|
||||
<KeyRound class="w-3.5 h-3.5" />
|
||||
{:else if cred.authType === 'password'}
|
||||
<Lock class="w-3.5 h-3.5" />
|
||||
{:else}
|
||||
<Key class="w-3.5 h-3.5" />
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm">{cred.name}</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{#if cred.username}
|
||||
Username: {cred.username}
|
||||
{:else}
|
||||
No username
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" class={getAuthTypeBadge(cred.authType).class}>
|
||||
{getAuthTypeBadge(cred.authType).label}
|
||||
</Badge>
|
||||
</div>
|
||||
{#if $canAccess('settings', 'edit')}
|
||||
<div class="flex items-center gap-0.5">
|
||||
<Button variant="ghost" size="sm" onclick={() => openModal(cred)} class="h-7 w-7 p-0">
|
||||
<Pencil class="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<ConfirmPopover
|
||||
open={confirmDeleteId === cred.id}
|
||||
action="Delete"
|
||||
itemType="credential"
|
||||
itemName={cred.name}
|
||||
title="Delete"
|
||||
onConfirm={() => deleteCredential(cred.id)}
|
||||
onOpenChange={(open) => confirmDeleteId = open ? cred.id : null}
|
||||
>
|
||||
{#snippet children({ open })}
|
||||
<Button variant="ghost" size="sm" class="h-7 w-7 p-0">
|
||||
<Trash2 class="w-3.5 h-3.5 {open ? 'text-destructive' : 'text-muted-foreground hover:text-destructive'}" />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</ConfirmPopover>
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<GitCredentialModal
|
||||
bind:open={showModal}
|
||||
credential={editingCredential}
|
||||
onClose={closeModal}
|
||||
onSaved={handleSaved}
|
||||
/>
|
||||
244
routes/settings/git/GitRepositoriesTab.svelte
Normal file
244
routes/settings/git/GitRepositoriesTab.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Plus, Trash2, Pencil, GitBranch, FolderGit2, Plug, CheckCircle, XCircle, Loader2, Github, Lock, Globe } from 'lucide-svelte';
|
||||
import ConfirmPopover from '$lib/components/ConfirmPopover.svelte';
|
||||
import { canAccess } from '$lib/stores/auth';
|
||||
import GitRepositoryModal from './GitRepositoryModal.svelte';
|
||||
import { EmptyState } from '$lib/components/ui/empty-state';
|
||||
|
||||
interface GitCredential {
|
||||
id: number;
|
||||
name: string;
|
||||
authType: string;
|
||||
}
|
||||
|
||||
interface GitRepository {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
branch: string;
|
||||
credentialId: number | null;
|
||||
credentialName?: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
let repositories = $state<GitRepository[]>([]);
|
||||
let credentials = $state<GitCredential[]>([]);
|
||||
let loading = $state(true);
|
||||
let showModal = $state(false);
|
||||
let editingRepo = $state<GitRepository | null>(null);
|
||||
let confirmDeleteId = $state<number | null>(null);
|
||||
let testingId = $state<number | null>(null);
|
||||
let testResult = $state<{ id: number; success: boolean; message: string } | null>(null);
|
||||
|
||||
async function fetchRepositories() {
|
||||
try {
|
||||
const response = await fetch('/api/git/repositories');
|
||||
repositories = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch git repositories:', error);
|
||||
toast.error('Failed to fetch git repositories');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCredentials() {
|
||||
try {
|
||||
const response = await fetch('/api/git/credentials');
|
||||
credentials = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch git credentials:', error);
|
||||
toast.error('Failed to fetch git credentials');
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(repo?: GitRepository) {
|
||||
editingRepo = repo || null;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
editingRepo = null;
|
||||
}
|
||||
|
||||
async function handleSaved() {
|
||||
await fetchRepositories();
|
||||
}
|
||||
|
||||
async function deleteRepository(id: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/git/repositories/${id}`, { method: 'DELETE' });
|
||||
if (response.ok) {
|
||||
await fetchRepositories();
|
||||
toast.success('Repository deleted');
|
||||
} else {
|
||||
toast.error('Failed to delete repository');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete repository:', error);
|
||||
toast.error('Failed to delete repository');
|
||||
}
|
||||
}
|
||||
|
||||
async function testRepository(id: number) {
|
||||
testingId = id;
|
||||
testResult = null;
|
||||
try {
|
||||
const response = await fetch(`/api/git/repositories/${id}/test`, { method: 'POST' });
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
testResult = {
|
||||
id,
|
||||
success: true,
|
||||
message: `Connected! Branch: ${data.branch}, Last commit: ${data.lastCommit}`
|
||||
};
|
||||
toast.success('Repository connection successful');
|
||||
} else {
|
||||
testResult = {
|
||||
id,
|
||||
success: false,
|
||||
message: data.error || 'Connection failed'
|
||||
};
|
||||
toast.error(`Connection failed: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
// Auto-clear after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (testResult?.id === id) {
|
||||
testResult = null;
|
||||
}
|
||||
}, 5000);
|
||||
} catch (error) {
|
||||
testResult = {
|
||||
id,
|
||||
success: false,
|
||||
message: 'Failed to test connection'
|
||||
};
|
||||
toast.error('Failed to test repository connection');
|
||||
} finally {
|
||||
testingId = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchCredentials();
|
||||
fetchRepositories();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">Git repositories</h3>
|
||||
<p class="text-sm text-muted-foreground">Manage Git repositories that can be used to deploy stacks</p>
|
||||
</div>
|
||||
{#if $canAccess('settings', 'edit')}
|
||||
<Button size="sm" onclick={() => openModal()}>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
Add repository
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="text-sm text-muted-foreground">Loading repositories...</p>
|
||||
{:else if repositories.length === 0}
|
||||
<Card.Root>
|
||||
<Card.Content>
|
||||
<EmptyState
|
||||
icon={FolderGit2}
|
||||
title="No Git repositories configured"
|
||||
description="Add a repository to use it when deploying stacks from Git"
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<div class="space-y-1">
|
||||
{#each repositories as repo (repo.id)}
|
||||
<div class="flex items-center justify-between py-2 px-3 rounded-md border bg-card hover:bg-muted/50 transition-colors">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
{#if repo.url.includes('github.com')}
|
||||
<Github class="w-4 h-4 shrink-0 text-muted-foreground" />
|
||||
{:else}
|
||||
<FolderGit2 class="w-4 h-4 shrink-0 text-muted-foreground" />
|
||||
{/if}
|
||||
<span class="font-medium text-sm truncate">{repo.name}</span>
|
||||
<span class="text-xs text-muted-foreground truncate hidden sm:inline">{repo.url}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
{#if testResult?.id === repo.id}
|
||||
<span class="flex items-center gap-1 text-xs px-2 py-0.5 rounded {testResult.success ? 'text-green-600 bg-green-50 dark:bg-green-950/30' : 'text-red-600 bg-red-50 dark:bg-red-950/30'}">
|
||||
{#if testResult.success}
|
||||
<CheckCircle class="w-3 h-3" />
|
||||
{:else}
|
||||
<XCircle class="w-3 h-3" />
|
||||
{/if}
|
||||
<span class="hidden sm:inline">{testResult.message}</span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if repo.credentialName}
|
||||
<span class="flex items-center gap-1 text-xs text-muted-foreground" title="Using credential: {repo.credentialName}">
|
||||
<Lock class="w-3 h-3" />
|
||||
<span class="hidden sm:inline">{repo.credentialName}</span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="flex items-center gap-1 text-xs text-muted-foreground" title="Public repository">
|
||||
<Globe class="w-3 h-3" />
|
||||
<span class="hidden sm:inline">Public</span>
|
||||
</span>
|
||||
{/if}
|
||||
<Badge variant="outline" class="text-xs flex items-center gap-1">
|
||||
<GitBranch class="w-3 h-3" />
|
||||
{repo.branch}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7"
|
||||
onclick={() => testRepository(repo.id)}
|
||||
disabled={testingId === repo.id}
|
||||
title="Test connection"
|
||||
>
|
||||
{#if testingId === repo.id}
|
||||
<Loader2 class="w-3.5 h-3.5 animate-spin" />
|
||||
{:else}
|
||||
<Plug class="w-3.5 h-3.5" />
|
||||
{/if}
|
||||
</Button>
|
||||
{#if $canAccess('settings', 'edit')}
|
||||
<Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => openModal(repo)} title="Edit repository">
|
||||
<Pencil class="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<ConfirmPopover
|
||||
open={confirmDeleteId === repo.id}
|
||||
action="Delete"
|
||||
itemType="repository"
|
||||
itemName={repo.name}
|
||||
title="Delete"
|
||||
onConfirm={() => deleteRepository(repo.id)}
|
||||
onOpenChange={(open) => confirmDeleteId = open ? repo.id : null}
|
||||
>
|
||||
{#snippet children({ open })}
|
||||
<Trash2 class="w-3.5 h-3.5 {open ? 'text-destructive' : 'text-muted-foreground hover:text-destructive'}" />
|
||||
{/snippet}
|
||||
</ConfirmPopover>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<GitRepositoryModal
|
||||
bind:open={showModal}
|
||||
repository={editingRepo}
|
||||
{credentials}
|
||||
onClose={closeModal}
|
||||
onSaved={handleSaved}
|
||||
/>
|
||||
330
routes/settings/git/GitRepositoryModal.svelte
Normal file
330
routes/settings/git/GitRepositoryModal.svelte
Normal file
@@ -0,0 +1,330 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Dialog from '$lib/components/ui/dialog';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Loader2, GitBranch, KeyRound, Lock, Key, Globe, Play, CheckCircle2 } from 'lucide-svelte';
|
||||
import { focusFirstInput } from '$lib/utils';
|
||||
|
||||
interface GitCredential {
|
||||
id: number;
|
||||
name: string;
|
||||
authType: string;
|
||||
}
|
||||
|
||||
interface GitRepository {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
branch: string;
|
||||
credentialId: number | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
repository?: GitRepository | null;
|
||||
credentials: GitCredential[];
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
let { open = $bindable(), repository = null, credentials, onClose, onSaved }: Props = $props();
|
||||
|
||||
// Form state
|
||||
let formName = $state('');
|
||||
let formUrl = $state('');
|
||||
let formBranch = $state('main');
|
||||
let formCredentialId = $state<number | null>(null);
|
||||
let formError = $state('');
|
||||
let formErrors = $state<{ name?: string; url?: string }>({});
|
||||
let formSaving = $state(false);
|
||||
|
||||
// Test state
|
||||
let testing = $state(false);
|
||||
let testResult = $state<{ success: boolean; error?: string; branch?: string; lastCommit?: string } | null>(null);
|
||||
|
||||
const isEditing = $derived(repository !== null);
|
||||
|
||||
function getAuthIcon(type: string) {
|
||||
switch (type) {
|
||||
case 'ssh': return KeyRound;
|
||||
case 'password': return Lock;
|
||||
default: return Key;
|
||||
}
|
||||
}
|
||||
|
||||
function getAuthLabel(type: string) {
|
||||
switch (type) {
|
||||
case 'ssh': return 'SSH Key';
|
||||
case 'password': return 'Password';
|
||||
default: return 'None';
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
if (repository) {
|
||||
formName = repository.name;
|
||||
formUrl = repository.url;
|
||||
formBranch = repository.branch;
|
||||
formCredentialId = repository.credentialId;
|
||||
} else {
|
||||
formName = '';
|
||||
formUrl = '';
|
||||
formBranch = 'main';
|
||||
formCredentialId = null;
|
||||
}
|
||||
formError = '';
|
||||
formErrors = {};
|
||||
testResult = null;
|
||||
}
|
||||
|
||||
// Track which repository was initialized to avoid repeated resets
|
||||
let lastInitializedRepoId = $state<number | null | undefined>(undefined);
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
const currentRepoId = repository?.id ?? null;
|
||||
if (lastInitializedRepoId !== currentRepoId) {
|
||||
lastInitializedRepoId = currentRepoId;
|
||||
resetForm();
|
||||
}
|
||||
} else {
|
||||
lastInitializedRepoId = undefined;
|
||||
}
|
||||
});
|
||||
|
||||
async function testRepository() {
|
||||
if (!formUrl.trim()) {
|
||||
formErrors.url = 'Repository URL is required to test';
|
||||
return;
|
||||
}
|
||||
|
||||
testing = true;
|
||||
testResult = null;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/git/repositories/test', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
url: formUrl.trim(),
|
||||
branch: formBranch || 'main',
|
||||
credentialId: formCredentialId
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
testResult = data;
|
||||
|
||||
if (data.success) {
|
||||
toast.success(`Connection successful! Branch: ${data.branch}, Commit: ${data.lastCommit}`);
|
||||
} else {
|
||||
toast.error(data.error || 'Connection test failed');
|
||||
}
|
||||
} catch (error) {
|
||||
testResult = { success: false, error: 'Failed to test connection' };
|
||||
toast.error('Failed to test connection');
|
||||
} finally {
|
||||
testing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveRepository() {
|
||||
formErrors = {};
|
||||
|
||||
if (!formName.trim()) {
|
||||
formErrors.name = 'Name is required';
|
||||
}
|
||||
|
||||
if (!formUrl.trim()) {
|
||||
formErrors.url = 'Repository URL is required';
|
||||
}
|
||||
|
||||
if (formErrors.name || formErrors.url) {
|
||||
return;
|
||||
}
|
||||
|
||||
formSaving = true;
|
||||
formError = '';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
name: formName.trim(),
|
||||
url: formUrl.trim(),
|
||||
branch: formBranch || 'main',
|
||||
credentialId: formCredentialId
|
||||
};
|
||||
|
||||
const url = repository
|
||||
? `/api/git/repositories/${repository.id}`
|
||||
: '/api/git/repositories';
|
||||
const method = repository ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
if (data.error?.includes('already exists')) {
|
||||
formErrors.name = 'Repository name already exists';
|
||||
} else {
|
||||
formError = data.error || 'Failed to save repository';
|
||||
}
|
||||
toast.error(formError || 'Failed to save repository');
|
||||
return;
|
||||
}
|
||||
|
||||
const wasEditing = repository !== null;
|
||||
onSaved();
|
||||
onClose();
|
||||
toast.success(wasEditing ? 'Repository updated' : 'Repository added');
|
||||
} catch (error) {
|
||||
formError = 'Failed to save repository';
|
||||
toast.error('Failed to save repository');
|
||||
} finally {
|
||||
formSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open onOpenChange={(o) => { if (o) focusFirstInput(); else onClose(); }}>
|
||||
<Dialog.Content class="max-w-lg">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title class="flex items-center gap-2">
|
||||
<GitBranch class="w-5 h-5" />
|
||||
{isEditing ? 'Edit' : 'Add'} Git repository
|
||||
</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
{isEditing ? 'Update repository settings' : 'Add a Git repository that can be used to deploy stacks'}
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); saveRepository(); }} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="repo-name">Name</Label>
|
||||
<Input
|
||||
id="repo-name"
|
||||
bind:value={formName}
|
||||
placeholder="e.g., my-app-repo"
|
||||
class={formErrors.name ? 'border-destructive focus-visible:ring-destructive' : ''}
|
||||
oninput={() => formErrors.name = undefined}
|
||||
/>
|
||||
{#if formErrors.name}
|
||||
<p class="text-xs text-destructive">{formErrors.name}</p>
|
||||
{:else if !isEditing}
|
||||
<p class="text-xs text-muted-foreground">A friendly name to identify this repository</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="repo-url">Repository URL</Label>
|
||||
<Input
|
||||
id="repo-url"
|
||||
bind:value={formUrl}
|
||||
placeholder="https://github.com/user/repo.git or git@github.com:user/repo.git"
|
||||
class={formErrors.url ? 'border-destructive focus-visible:ring-destructive' : ''}
|
||||
oninput={() => { formErrors.url = undefined; testResult = null; }}
|
||||
/>
|
||||
{#if formErrors.url}
|
||||
<p class="text-xs text-destructive">{formErrors.url}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="repo-branch">Branch</Label>
|
||||
<Input id="repo-branch" bind:value={formBranch} placeholder="main" oninput={() => testResult = null} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="repo-credential">Credential (optional)</Label>
|
||||
<Select.Root
|
||||
type="single"
|
||||
value={formCredentialId?.toString() ?? 'none'}
|
||||
onValueChange={(v) => { formCredentialId = v === 'none' ? null : parseInt(v); testResult = null; }}
|
||||
>
|
||||
<Select.Trigger class="w-full">
|
||||
{@const selectedCred = credentials.find(c => c.id === formCredentialId)}
|
||||
{#if selectedCred}
|
||||
{@const Icon = getAuthIcon(selectedCred.authType)}
|
||||
<span class="flex items-center gap-2">
|
||||
<Icon class="w-4 h-4 text-muted-foreground" />
|
||||
{selectedCred.name} ({getAuthLabel(selectedCred.authType)})
|
||||
</span>
|
||||
{:else}
|
||||
<span class="flex items-center gap-2">
|
||||
<Globe class="w-4 h-4 text-muted-foreground" />
|
||||
None (public repository)
|
||||
</span>
|
||||
{/if}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="none">
|
||||
<span class="flex items-center gap-2">
|
||||
<Globe class="w-4 h-4 text-muted-foreground" />
|
||||
None (public repository)
|
||||
</span>
|
||||
</Select.Item>
|
||||
{#each credentials as cred}
|
||||
<Select.Item value={cred.id.toString()}>
|
||||
<span class="flex items-center gap-2">
|
||||
{#if cred.authType === 'ssh'}
|
||||
<KeyRound class="w-4 h-4 text-muted-foreground" />
|
||||
{:else if cred.authType === 'password'}
|
||||
<Lock class="w-4 h-4 text-muted-foreground" />
|
||||
{:else}
|
||||
<Key class="w-4 h-4 text-muted-foreground" />
|
||||
{/if}
|
||||
{cred.name} ({getAuthLabel(cred.authType)})
|
||||
</span>
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{#if credentials.length === 0 && !isEditing}
|
||||
<p class="text-xs text-muted-foreground">
|
||||
<a href="/settings?tab=git&subtab=credentials" class="text-primary hover:underline">Add credentials</a> for private repositories
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if formError}
|
||||
<p class="text-sm text-destructive">{formError}</p>
|
||||
{/if}
|
||||
|
||||
<Dialog.Footer>
|
||||
<Button variant="outline" type="button" onclick={onClose}>Cancel</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onclick={testRepository}
|
||||
disabled={testing || !formUrl.trim()}
|
||||
class={testResult?.success ? 'border-green-500 text-green-600 dark:border-green-500 dark:text-green-400' : ''}
|
||||
>
|
||||
{#if testing}
|
||||
<Loader2 class="w-4 h-4 mr-1.5 animate-spin" />
|
||||
{:else if testResult?.success}
|
||||
<CheckCircle2 class="w-4 h-4 mr-1.5 text-green-500" />
|
||||
{:else}
|
||||
<Play class="w-4 h-4 mr-1.5" />
|
||||
{/if}
|
||||
Test
|
||||
</Button>
|
||||
<Button type="submit" disabled={formSaving}>
|
||||
{#if formSaving}
|
||||
<Loader2 class="w-4 h-4 mr-1 animate-spin" />
|
||||
Saving...
|
||||
{:else}
|
||||
{isEditing ? 'Save changes' : 'Add repository'}
|
||||
{/if}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
36
routes/settings/git/GitTab.svelte
Normal file
36
routes/settings/git/GitTab.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { FolderGit2, Key } from 'lucide-svelte';
|
||||
import GitCredentialsTab from './GitCredentialsTab.svelte';
|
||||
import GitRepositoriesTab from './GitRepositoriesTab.svelte';
|
||||
|
||||
let gitSubTab = $derived<'repositories' | 'credentials'>(
|
||||
($page.url.searchParams.get('subtab') as 'repositories' | 'credentials') || 'repositories'
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Git subtabs -->
|
||||
<div class="inline-flex gap-1 p-1 bg-muted/50 rounded-lg">
|
||||
<a
|
||||
href="/settings?tab=git&subtab=repositories"
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-md transition-all flex items-center gap-1.5 {gitSubTab === 'repositories' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
|
||||
>
|
||||
<FolderGit2 class="w-4 h-4" />
|
||||
Repositories
|
||||
</a>
|
||||
<a
|
||||
href="/settings?tab=git&subtab=credentials"
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-md transition-all flex items-center gap-1.5 {gitSubTab === 'credentials' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
|
||||
>
|
||||
<Key class="w-4 h-4" />
|
||||
Credentials
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#if gitSubTab === 'repositories'}
|
||||
<GitRepositoriesTab />
|
||||
{:else}
|
||||
<GitCredentialsTab />
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user