mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-09 05:39:05 +00:00
Initial commit
This commit is contained in:
Jarek Krochmalski
213
routes/settings/registries/RegistriesTab.svelte
Normal file
213
routes/settings/registries/RegistriesTab.svelte
Normal file
@@ -0,0 +1,213 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
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, Star, Key, Download, Icon } from 'lucide-svelte';
|
||||
import { whale } from '@lucide/lab';
|
||||
import ConfirmPopover from '$lib/components/ConfirmPopover.svelte';
|
||||
import { canAccess } from '$lib/stores/auth';
|
||||
import RegistryModal from './RegistryModal.svelte';
|
||||
import { EmptyState } from '$lib/components/ui/empty-state';
|
||||
|
||||
// Registry types
|
||||
interface Registry {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
username?: string;
|
||||
hasCredentials: boolean;
|
||||
isDefault: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// Check if a registry is Docker Hub
|
||||
function isDockerHub(registry: Registry): boolean {
|
||||
const url = registry.url.toLowerCase();
|
||||
return url.includes('docker.io') ||
|
||||
url.includes('hub.docker.com') ||
|
||||
url.includes('registry.hub.docker.com');
|
||||
}
|
||||
|
||||
// Registry state
|
||||
let registries = $state<Registry[]>([]);
|
||||
let regLoading = $state(true);
|
||||
let showRegModal = $state(false);
|
||||
let editingReg = $state<Registry | null>(null);
|
||||
let confirmDeleteRegistryId = $state<number | null>(null);
|
||||
|
||||
async function fetchRegistries() {
|
||||
regLoading = true;
|
||||
try {
|
||||
const response = await fetch('/api/registries');
|
||||
registries = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch registries:', error);
|
||||
toast.error('Failed to fetch registries');
|
||||
} finally {
|
||||
regLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openRegModal(registry?: Registry) {
|
||||
editingReg = registry || null;
|
||||
showRegModal = true;
|
||||
}
|
||||
|
||||
async function deleteRegistry(id: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/registries/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await fetchRegistries();
|
||||
toast.success('Registry deleted');
|
||||
} else {
|
||||
const data = await response.json();
|
||||
toast.error(data.error || 'Failed to delete registry');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete registry');
|
||||
}
|
||||
}
|
||||
|
||||
async function setRegDefault(id: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/registries/${id}/default`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await fetchRegistries();
|
||||
toast.success('Default registry updated');
|
||||
} else {
|
||||
toast.error('Failed to set default registry');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to set default registry:', error);
|
||||
toast.error('Failed to set default registry');
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchRegistries();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<Badge variant="secondary" class="text-xs">{registries.length} total</Badge>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
{#if $canAccess('registries', 'create')}
|
||||
<Button size="sm" onclick={() => openRegModal()}>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
Add registry
|
||||
</Button>
|
||||
{/if}
|
||||
<Button size="sm" variant="outline" onclick={fetchRegistries}>Refresh</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if regLoading && registries.length === 0}
|
||||
<p class="text-muted-foreground text-sm">Loading registries...</p>
|
||||
{:else if registries.length === 0}
|
||||
<EmptyState
|
||||
icon={Download}
|
||||
title="No registries found"
|
||||
description="Add a Docker registry to pull and push images"
|
||||
/>
|
||||
{:else}
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each registries as registry (registry.id)}
|
||||
<div out:fade={{ duration: 200 }}>
|
||||
<Card.Root class={registry.isDefault ? 'border-primary' : ''}>
|
||||
<Card.Header class="pb-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if isDockerHub(registry)}
|
||||
<Icon iconNode={whale} class="w-5 h-5 text-muted-foreground" />
|
||||
{:else}
|
||||
<Download class="w-5 h-5 text-muted-foreground" />
|
||||
{/if}
|
||||
<Card.Title class="text-base">{registry.name}</Card.Title>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
{#if registry.isDefault}
|
||||
<Badge variant="default" class="text-xs">Default</Badge>
|
||||
{/if}
|
||||
{#if registry.hasCredentials}
|
||||
<Badge variant="secondary" class="text-xs">Auth</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-3">
|
||||
<div class="text-sm text-muted-foreground truncate" title={registry.url}>
|
||||
{registry.url}
|
||||
</div>
|
||||
|
||||
<!-- Always reserve space for username row -->
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground h-4">
|
||||
{#if registry.username}
|
||||
<Key class="w-3 h-3" />
|
||||
<span>{registry.username}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-2 min-h-[32px]">
|
||||
{#if !registry.isDefault && $canAccess('registries', 'edit')}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => setRegDefault(registry.id)}
|
||||
>
|
||||
<Star class="w-3 h-3 mr-1" />
|
||||
Set default
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $canAccess('registries', 'edit')}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => openRegModal(registry)}
|
||||
>
|
||||
<Pencil class="w-3 h-3" />
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $canAccess('registries', 'delete')}
|
||||
<ConfirmPopover
|
||||
open={confirmDeleteRegistryId === registry.id}
|
||||
action="Delete"
|
||||
itemType="registry"
|
||||
itemName={registry.name}
|
||||
title="Remove"
|
||||
position="left"
|
||||
onConfirm={() => deleteRegistry(registry.id)}
|
||||
onOpenChange={(open) => confirmDeleteRegistryId = open ? registry.id : null}
|
||||
>
|
||||
{#snippet children({ open })}
|
||||
<Trash2 class="w-3 h-3 {open ? 'text-destructive' : 'text-muted-foreground hover:text-destructive'}" />
|
||||
{/snippet}
|
||||
</ConfirmPopover>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<RegistryModal
|
||||
bind:open={showRegModal}
|
||||
registry={editingReg}
|
||||
onClose={() => { showRegModal = false; editingReg = null; }}
|
||||
onSaved={fetchRegistries}
|
||||
/>
|
||||
153
routes/settings/registries/RegistryModal.svelte
Normal file
153
routes/settings/registries/RegistryModal.svelte
Normal file
@@ -0,0 +1,153 @@
|
||||
<script lang="ts">
|
||||
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 { Plus, Check, RefreshCw } from 'lucide-svelte';
|
||||
import { focusFirstInput } from '$lib/utils';
|
||||
|
||||
export interface Registry {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
username?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
registry?: Registry | null;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
let { open = $bindable(), registry = null, onClose, onSaved }: Props = $props();
|
||||
|
||||
const isEditing = $derived(registry !== null);
|
||||
|
||||
// Form state
|
||||
let formName = $state('');
|
||||
let formUrl = $state('');
|
||||
let formUsername = $state('');
|
||||
let formPassword = $state('');
|
||||
let formError = $state('');
|
||||
let formSaving = $state(false);
|
||||
|
||||
function resetForm() {
|
||||
formName = '';
|
||||
formUrl = '';
|
||||
formUsername = '';
|
||||
formPassword = '';
|
||||
formError = '';
|
||||
formSaving = false;
|
||||
}
|
||||
|
||||
// Initialize form when registry changes or modal opens
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
if (registry) {
|
||||
formName = registry.name;
|
||||
formUrl = registry.url;
|
||||
formUsername = registry.username || '';
|
||||
formPassword = '';
|
||||
formError = '';
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function save() {
|
||||
if (!formName.trim() || !formUrl.trim()) {
|
||||
formError = 'Name and URL are required';
|
||||
return;
|
||||
}
|
||||
|
||||
formSaving = true;
|
||||
formError = '';
|
||||
|
||||
try {
|
||||
const body: Record<string, string | undefined> = {
|
||||
name: formName.trim(),
|
||||
url: formUrl.trim(),
|
||||
username: formUsername.trim() || undefined
|
||||
};
|
||||
|
||||
// Only include password if provided (for edit, empty means keep existing)
|
||||
if (formPassword || !isEditing) {
|
||||
body.password = formPassword || undefined;
|
||||
}
|
||||
|
||||
const url = isEditing ? `/api/registries/${registry!.id}` : '/api/registries';
|
||||
const method = isEditing ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
open = false;
|
||||
onSaved();
|
||||
} else {
|
||||
const data = await response.json();
|
||||
formError = data.error || `Failed to ${isEditing ? 'update' : 'create'} registry`;
|
||||
}
|
||||
} catch {
|
||||
formError = `Failed to ${isEditing ? 'update' : 'create'} registry`;
|
||||
} finally {
|
||||
formSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
open = false;
|
||||
onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open onOpenChange={(o) => { if (o) { formError = ''; focusFirstInput(); } }}>
|
||||
<Dialog.Content class="max-w-md">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{isEditing ? 'Edit' : 'Add'} registry</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
<div class="space-y-4">
|
||||
{#if formError}
|
||||
<div class="text-sm text-red-600 dark:text-red-400">{formError}</div>
|
||||
{/if}
|
||||
<div class="space-y-2">
|
||||
<Label for="reg-name">Name</Label>
|
||||
<Input id="reg-name" bind:value={formName} placeholder="My Private Registry" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="reg-url">URL</Label>
|
||||
<Input id="reg-url" bind:value={formUrl} placeholder="https://registry.example.com" />
|
||||
</div>
|
||||
<div class="space-y-4 pt-2 border-t">
|
||||
<p class="text-xs text-muted-foreground">Credentials {isEditing ? '(leave password blank to keep existing)' : '(optional)'}</p>
|
||||
<div class="space-y-2">
|
||||
<Label for="reg-username">Username</Label>
|
||||
<Input id="reg-username" bind:value={formUsername} placeholder="username" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="reg-password">Password / Token</Label>
|
||||
<Input id="reg-password" type="password" bind:value={formPassword} placeholder={isEditing ? 'leave blank to keep existing' : 'password or access token'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog.Footer>
|
||||
<Button variant="outline" onclick={handleClose}>Cancel</Button>
|
||||
<Button onclick={save} disabled={formSaving}>
|
||||
{#if formSaving}
|
||||
<RefreshCw class="w-4 h-4 mr-1 animate-spin" />
|
||||
{:else if isEditing}
|
||||
<Check class="w-4 h-4 mr-1" />
|
||||
{:else}
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
{/if}
|
||||
{isEditing ? 'Save' : 'Add'}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
Reference in New Issue
Block a user