ui: fixes

fix: secret saving process
2026-01-29 20:52:10 +00:00 · 2022-09-23 14:09:26 +02:00
parent 3d6adeffc4
commit 01fd5901fe
17 changed files with 683 additions and 472 deletions
--- a/apps/ui/src/routes/applications/[id]/_PreviewSecret.svelte
+++ b/apps/ui/src/routes/applications/[id]/_PreviewSecret.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	export let length = 0;
+	export let index: number = 0;
+	export let name = '';
+	export let value = '';
+	export let isBuildSecret = false;
+
+	import { page } from '$app/stores';
+	import { del, post, put } from '$lib/api';
+	import { errorNotification } from '$lib/common';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { addToast } from '$lib/store';
+	import { t } from '$lib/translations';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	const { id } = $page.params;
+
+	async function updatePreviewSecret() {
+		try {
+			await put(`/applications/${id}/secrets/preview`, {
+				name,
+				value
+			});
+			addToast({
+				message: 'Secret updated.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2 pb-2">
+	<div class="flex flex-col">
+		{#if index === 0 || length === 0}
+			<label for="name" class="pb-2 uppercase">name</label>
+		{/if}
+
+		<input
+			id="secretName"
+			readonly
+			disabled
+			value={name}
+			required
+			placeholder="EXAMPLE_VARIABLE"
+			class=" w-full"
+		/>
+	</div>
+	<div class="flex flex-col">
+		{#if index === 0 || length === 0}
+			<label for="value" class="pb-2 uppercase">value</label>
+		{/if}
+
+		<CopyPasswordField
+			id="secretValue"
+			name="secretValue"
+			isPasswordField={true}
+			bind:value
+			placeholder="J$#@UIO%HO#$U%H"
+		/>
+	</div>
+	<div class="flex lg:flex-col flex-row justify-start items-center pt-3 lg:pt-0">
+		{#if index === 0 || length === 0}
+			<label for="name" class="pb-2 uppercase lg:block hidden">Need during buildtime?</label>
+		{/if}
+		<label for="name" class="pb-2 uppercase lg:hidden block">Need during buildtime?</label>
+
+		<div class="flex justify-center h-full items-center pt-0 lg:pt-0 pl-4 lg:pl-0">
+			<button
+				aria-pressed="false"
+				class="opacity-50 cursor-pointer cursor-not-allowedrelative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+				class:bg-green-600={isBuildSecret}
+				class:bg-stone-700={!isBuildSecret}
+			>
+				<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
+				<span
+					class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+					class:translate-x-5={isBuildSecret}
+					class:translate-x-0={!isBuildSecret}
+				>
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+						class:opacity-0={isBuildSecret}
+						class:opacity-100={!isBuildSecret}
+						aria-hidden="true"
+					>
+						<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+							<path
+								d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</span>
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+						aria-hidden="true"
+						class:opacity-100={isBuildSecret}
+						class:opacity-0={!isBuildSecret}
+					>
+						<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+							<path
+								d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+							/>
+						</svg>
+					</span>
+				</span>
+			</button>
+		</div>
+	</div>
+	<div class="flex flex-row lg:flex-col lg:items-center items-start">
+		{#if index === 0 || length === 0}
+			<label for="name" class="pb-2 uppercase lg:block hidden">Actions</label>
+		{/if}
+
+		<div class="flex justify-center h-full items-center pt-3">
+			<div class="flex flex-row justify-center space-x-2">
+				<div class="flex items-center justify-center">
+					<button class="btn btn-sm btn-primary" on:click={updatePreviewSecret}>Update</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>