feat: docker registries working

apps/ui/src/routes/applications/[id]/__layout.svelte

@@ -244,14 +244,14 @@
 			{/if}
 		</div>
 		{#if $page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
-			<div class="px-2">
+			<div class="px-4">
 				{#if forceDelete}
 					<button
 						on:click={() => deleteApplication(application.name, true)}
 						disabled={!$appSession.isAdmin}
 						class:bg-red-600={$appSession.isAdmin}
 						class:hover:bg-red-500={$appSession.isAdmin}
-						class="btn btn-sm btn-error text-sm"
+						class="btn btn-sm btn-error hover:bg-red-700 text-sm w-64"
 					>
 						Force Delete Application
 					</button>
@@ -261,7 +261,7 @@
 						disabled={!$appSession.isAdmin}
 						class:bg-red-600={$appSession.isAdmin}
 						class:hover:bg-red-500={$appSession.isAdmin}
-						class="btn btn-sm btn-error text-sm"
+						class="btn btn-sm btn-error hover:bg-red-700 text-sm w-64"
 					>
 						Delete Application
 					</button>

apps/ui/src/routes/applications/[id]/configuration/registry.svelte

@@ -0,0 +1,118 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, url, stuff }) => {
+		try {
+			const { application } = stuff;
+			if (application?.destinationDockerId && !url.searchParams.get('from')) {
+				return {
+					status: 302,
+					redirect: `/applications/${params.id}`
+				};
+			}
+			const response = await get(`/settings`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error) {
+			return {
+				status: 500,
+				error: new Error(`Could not load ${url}`)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let registries: any;
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { get, post } from '$lib/api';
+	import { errorNotification } from '$lib/common';
+
+	const { id } = $page.params;
+	const from = $page.url.searchParams.get('from');
+
+	async function handleSubmit(registryId: any) {
+		try {
+			await post(`/applications/${id}/configuration/registry`, { registryId });
+			return await goto(from || `/applications/${id}`);
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="flex flex-col justify-center w-full">
+	<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto gap-4">
+		{#each registries.public as registry}
+			<button
+				on:click={() => handleSubmit(registry.id)}
+				class="box-selection hover:bg-primary relative"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+					/>
+					<path d="M5 10h3v3h-3z" />
+					<path d="M8 10h3v3h-3z" />
+					<path d="M11 10h3v3h-3z" />
+					<path d="M8 7h3v3h-3z" />
+					<path d="M11 7h3v3h-3z" />
+					<path d="M11 4h3v3h-3z" />
+					<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+					<line x1="10" y1="16" x2="10" y2="16.01" />
+				</svg>
+
+				<div class="font-bold text-xl text-center truncate">{registry.name}</div>
+				<div class="text-center truncate">{registry.url}</div>
+				<div>public</div>
+			</button>
+		{/each}
+		{#each registries.private as registry}
+			<button
+				on:click={() => handleSubmit(registry.id)}
+				class="box-selection hover:bg-primary relative"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+					/>
+					<path d="M5 10h3v3h-3z" />
+					<path d="M8 10h3v3h-3z" />
+					<path d="M11 10h3v3h-3z" />
+					<path d="M8 7h3v3h-3z" />
+					<path d="M11 7h3v3h-3z" />
+					<path d="M11 4h3v3h-3z" />
+					<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+					<line x1="10" y1="16" x2="10" y2="16.01" />
+				</svg>
+
+				<div class="font-bold text-xl text-center truncate">{registry.name}</div>
+				<div class="text-center truncate">{registry.url}</div>
+				<div>private</div>
+			</button>
+		{/each}
+	</div>
+</div>

apps/ui/src/routes/applications/[id]/danger.svelte

@@ -61,7 +61,7 @@
 			disabled={!$appSession.isAdmin}
 			class:bg-red-600={$appSession.isAdmin}
 			class:hover:bg-red-500={$appSession.isAdmin}
-			class="btn btn-lg btn-error text-sm"
+			class="btn btn-lg btn-error hover:bg-red-700 text-sm w-64"
 		>
 			Force Delete Application
 		</button>
@@ -71,7 +71,7 @@
 			on:click={() => deleteApplication(application.name, false)}
 			type="submit"
 			disabled={!$appSession.isAdmin}
-			class="btn btn-lg btn-error hover:bg-red-700 text-sm"
+			class="btn btn-lg btn-error hover:bg-red-700 text-sm w-64"
 		>
 			Delete Application
 		</button>

apps/ui/src/routes/applications/[id]/index.svelte

@@ -522,6 +522,27 @@
 						>
 					{/if}
 				</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="registry">Docker Registry</label>
+					{#if isDisabled}
+						<input
+							class="capitalize w-full"
+							disabled={isDisabled}
+							value={application.dockerRegistry.name}
+						/>
+					{:else}
+						<a
+							href={`/applications/${id}/configuration/registry?from=/applications/${id}`}
+							class="no-underline"
+						>
+							<input
+								value={application.dockerRegistry.name}
+								id="registry"
+								class="cursor-pointer hover:bg-coolgray-500 capitalize w-full"
+							/></a
+						>
+					{/if}
+				</div>
 				<div class="grid grid-cols-2 items-center">
 					<label for="buildPack">{$t('application.build_pack')} </label>
 					{#if isDisabled}

apps/ui/src/routes/settings/docker.svelte

@@ -21,6 +21,7 @@
 	import { del, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { addToast } from '$lib/store';
 	const publicRegistries = registries.public;
 	const privateRegistries = registries.private;
 
@@ -36,9 +37,8 @@
 
 	async function handleSubmit() {
 		try {
-			console.log(newRegistry);
-			// await post(`/settings/sshKey`, { ...newSSHKey });
-			// return window.location.reload();
+			await post(`/settings/registry/new`, newRegistry);
+			return window.location.reload();
 		} catch (error) {
 			errorNotification(error);
 			return false;
@@ -47,14 +47,23 @@
 	async function setRegistry(registry: any) {
 		try {
 			await post(`/settings/registry`, registry);
-		} catch (error) {}
+			return addToast({
+				message: 'Registry updated successfully.',
+				type: 'success'
+			});
+		} catch (error) {
+			errorNotification(error);
+			return false;
+		}
 	}
-	async function deleteSSHKey(id: string) {
-		const sure = confirm('Are you sure you would like to delete this SSH key?');
+	async function deleteDockerRegistry(id: string) {
+		const sure = confirm(
+			'Are you sure you would like to delete this Docker Registry? All dependent resources will be affected and fails to redeploy.'
+		);
 		if (sure) {
 			try {
 				if (!id) return;
-				// await del(`/settings/sshKey`, { id });
+				await del(`/settings/registry`, { id });
 				return window.location.reload();
 			} catch (error) {
 				errorNotification(error);
@@ -78,7 +87,7 @@
 			<thead>
 				<tr>
 					<th>Name</th>
-					<th>Public</th>
+					<th>SystemWide</th>
 					<th>Username</th>
 					<th>Password</th>
 					<th>Actions</th>
@@ -87,7 +96,7 @@
 			<tbody>
 				{#each publicRegistries as registry}
 					<tr>
-						<td>{registry.name}</td>
+						<td>{registry.name}<div class="text-xs">{registry.url}</div></td>
 						<td>{(registry.isSystemWide && 'Yes') || 'No'}</td>
 						<td>
 							<CopyPasswordField
@@ -110,9 +119,10 @@
 							<button on:click={() => setRegistry(registry)} class="btn btn-sm btn-primary"
 								>Set</button
 							>
-							{#if !registry.isSystemWide}
-								<button on:click={() => deleteSSHKey(registry.id)} class="btn btn-sm btn-error"
-									>Delete</button
+							{#if registry.id !== '0'}
+								<button
+									on:click={() => deleteDockerRegistry(registry.id)}
+									class="btn btn-sm btn-error">Delete</button
 								>
 							{/if}
 						</td>
@@ -120,15 +130,34 @@
 				{/each}
 				{#each privateRegistries as registry}
 					<tr>
-						<td>{registry.name}</td>
+						<td>{registry.name} <div class="text-xs">{registry.url}</div></td>
 						<td>{(registry.isSystemWide && 'Yes') || 'No'}</td>
-						<td>{registry.username ?? 'N/A'}</td>
-						<td>{registry.password ?? 'N/A'}</td>
+						<td>
+							<CopyPasswordField
+								name="username"
+								id="Username"
+								bind:value={registry.username}
+								placeholder="Username"
+							/></td
+						>
+						<td
+							><CopyPasswordField
+								isPasswordField={true}
+								name="Password"
+								id="Password"
+								bind:value={registry.password}
+								placeholder="Password"
+							/></td
+						>
 
 						<td>
-							{#if !registry.isSystemWide}
-								<button on:click={() => deleteSSHKey(registry.id)} class="btn btn-sm btn-error"
-									>Delete</button
+							<button on:click={() => setRegistry(registry)} class="btn btn-sm btn-primary"
+								>Set</button
+							>
+							{#if registry.id !== '0'}
+								<button
+									on:click={() => deleteDockerRegistry(registry.id)}
+									class="btn btn-sm btn-error">Delete</button
 								>
 							{/if}
 						</td>