mirror of
https://github.com/ershisan99/coolify.git
synced 2026-01-30 05:02:12 +00:00
ui: fixes
fix: secret saving process
This commit is contained in:
Andras Bacsai
@@ -1,122 +1,97 @@
|
||||
<script lang="ts">
|
||||
export let length = 0;
|
||||
export let index: number = 0;
|
||||
export let name = '';
|
||||
export let value = '';
|
||||
export let isBuildSecret = false;
|
||||
export let isNewSecret = false;
|
||||
export let isPRMRSecret = false;
|
||||
export let PRMRSecret: any = {};
|
||||
if (isPRMRSecret) value = PRMRSecret.value;
|
||||
|
||||
import { page } from '$app/stores';
|
||||
import { del } from '$lib/api';
|
||||
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';
|
||||
import { saveSecret } from './utils';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const { id } = $page.params;
|
||||
function cleanupState() {
|
||||
if (isNewSecret) {
|
||||
name = '';
|
||||
value = '';
|
||||
isBuildSecret = false;
|
||||
}
|
||||
}
|
||||
async function removeSecret() {
|
||||
try {
|
||||
await del(`/applications/${id}/secrets`, { name });
|
||||
dispatch('refresh');
|
||||
if (isNewSecret) {
|
||||
name = '';
|
||||
value = '';
|
||||
isBuildSecret = false;
|
||||
}
|
||||
cleanupState();
|
||||
addToast({
|
||||
message: 'Secret removed.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function createSecret(isNew: any) {
|
||||
try {
|
||||
if (isNew) {
|
||||
if (!name || !value) {
|
||||
return addToast({
|
||||
message: 'Please fill in all fields.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
if (value === undefined && isPRMRSecret) {
|
||||
return;
|
||||
}
|
||||
if (value === '' && !isPRMRSecret) {
|
||||
throw new Error('Value is required.');
|
||||
}
|
||||
await saveSecret({
|
||||
isNew,
|
||||
name,
|
||||
value,
|
||||
isBuildSecret,
|
||||
isPRMRSecret,
|
||||
isNewSecret,
|
||||
applicationId: id
|
||||
});
|
||||
if (isNewSecret) {
|
||||
name = '';
|
||||
value = '';
|
||||
isBuildSecret = false;
|
||||
addToast({
|
||||
message: 'Secret added.',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
addToast({
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
dispatch('refresh');
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function setSecretValue() {
|
||||
if (!isPRMRSecret) {
|
||||
isBuildSecret = !isBuildSecret;
|
||||
if (!isNewSecret) {
|
||||
await saveSecret({
|
||||
isNew: isNewSecret,
|
||||
name,
|
||||
value,
|
||||
isBuildSecret,
|
||||
isPRMRSecret,
|
||||
isNewSecret,
|
||||
applicationId: id
|
||||
});
|
||||
addToast({
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
async function addNewSecret() {
|
||||
try {
|
||||
if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
|
||||
if (!value) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
|
||||
await post(`/applications/${id}/secrets`, {
|
||||
name,
|
||||
value,
|
||||
isBuildSecret
|
||||
});
|
||||
cleanupState();
|
||||
addToast({
|
||||
message: 'Secret added.',
|
||||
type: 'success'
|
||||
});
|
||||
dispatch('refresh');
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateSecret({
|
||||
changeIsBuildSecret = false
|
||||
}: { changeIsBuildSecret?: boolean } = {}) {
|
||||
if (changeIsBuildSecret) isBuildSecret = !isBuildSecret;
|
||||
if (isNewSecret) return
|
||||
try {
|
||||
await put(`/applications/${id}/secrets`, {
|
||||
name,
|
||||
value,
|
||||
isBuildSecret: changeIsBuildSecret ? isBuildSecret : undefined
|
||||
});
|
||||
addToast({
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
dispatch('refresh');
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2">
|
||||
<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2 pb-2">
|
||||
<div class="flex flex-col">
|
||||
<label for="name" class="pb-2 uppercase">{length > 0 && !isNewSecret ? 'name' : ''}</label>
|
||||
{#if isNewSecret}
|
||||
<div class="lg:hidden block pt-10 pb-2">New Secret</div>
|
||||
{#if (index === 0 && !isNewSecret) || length === 0}
|
||||
<label for="name" class="pb-2 uppercase">name</label>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
id={isNewSecret ? 'secretName' : 'secretNameNew'}
|
||||
bind:value={name}
|
||||
required
|
||||
placeholder="EXAMPLE_VARIABLE"
|
||||
readonly={!isNewSecret}
|
||||
class="lg:w-64 w-full"
|
||||
class=" w-full"
|
||||
class:bg-coolblack={!isNewSecret}
|
||||
class:border={!isNewSecret}
|
||||
class:border-dashed={!isNewSecret}
|
||||
@@ -125,7 +100,10 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="name" class="pb-2 uppercase">{length > 0 && !isNewSecret ? 'value' : ''}</label>
|
||||
{#if (index === 0 && !isNewSecret) || length === 0}
|
||||
<label for="value" class="pb-2 uppercase">value</label>
|
||||
{/if}
|
||||
|
||||
<CopyPasswordField
|
||||
id={isNewSecret ? 'secretValue' : 'secretValueNew'}
|
||||
name={isNewSecret ? 'secretValue' : 'secretValueNew'}
|
||||
@@ -135,22 +113,18 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="flex lg:flex-col flex-row justify-start items-center pt-3 lg:pt-0">
|
||||
<label for="name" class="uppercase"
|
||||
>{length > 0 && !isNewSecret ? 'Need during buildtime?' : ''}</label
|
||||
>
|
||||
{#if isNewSecret}
|
||||
<label class="lg:hidden uppercase" for="name">Need during buildtime?</label>
|
||||
{#if (index === 0 && !isNewSecret) || length === 0}
|
||||
<label for="name" class="pb-2 uppercase lg:block hidden">Need during buildtime?</label>
|
||||
{/if}
|
||||
<div class="flex justify-center h-full items-center pt-0 lg:pt-3 pl-4 lg:pl-0">
|
||||
<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
|
||||
on:click={setSecretValue}
|
||||
on:click={() => updateSecret({ changeIsBuildSecret: true })}
|
||||
aria-pressed="false"
|
||||
class="relative 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}
|
||||
class:opacity-50={isPRMRSecret}
|
||||
class:cursor-not-allowed={isPRMRSecret}
|
||||
class:cursor-pointer={!isPRMRSecret}
|
||||
>
|
||||
<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
|
||||
<span
|
||||
@@ -191,28 +165,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row lg:flex-col lg:items-center items-start">
|
||||
<label for="name" class="lg:block hidden uppercase">{length > 0 && !isNewSecret ? 'Actions' : ''}</label>
|
||||
{#if (index === 0 && !isNewSecret) || 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">
|
||||
{#if isNewSecret}
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="btn btn-sm btn-primary" on:click={() => createSecret(true)}
|
||||
>Save New Secret</button
|
||||
>
|
||||
<button class="btn btn-sm btn-primary" on:click={addNewSecret}>Add</button>
|
||||
</div>
|
||||
{:else}
|
||||
<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={() => createSecret(false)}
|
||||
>Set</button
|
||||
>
|
||||
<button class="btn btn-sm btn-primary" on:click={() => updateSecret()}>Set</button>
|
||||
</div>
|
||||
<div class="flex justify-center items-end">
|
||||
<button class="btn btn-sm btn-error" on:click={removeSecret}>Remove</button>
|
||||
</div>
|
||||
{#if !isPRMRSecret}
|
||||
<div class="flex justify-center items-end">
|
||||
<button class="btn btn-sm btn-error" on:click={removeSecret}
|
||||
>Remove</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user