Merge branch 'main' into fix/github-token

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

@@ -17,7 +17,7 @@
 		const endpoint = `/applications/${params.id}.json`;
 		const res = await fetch(endpoint);
 		if (res.ok) {
-			const { application, githubToken, ghToken, isRunning, appId } = await res.json();
+			const { application, isRunning, appId } = await res.json();
 			if (!application || Object.entries(application).length === 0) {
 				return {
 					status: 302,
@@ -42,8 +42,6 @@
 				},
 				stuff: {
 					isRunning,
-					ghToken,
-					githubToken,
 					application,
 					appId
 				}

src/routes/applications/[id]/check.json.ts

@@ -16,7 +16,7 @@ export const post: RequestHandler = async (event) => {
 		const found = await db.isDomainConfigured({ id, fqdn });
 		if (found) {
 			throw {
-				message: `Domain ${getDomain(fqdn)} is already configured.`
+				message: `Domain ${getDomain(fqdn).replace('www.', '')} is already configured.`
 			};
 		}
 		return {

src/routes/applications/[id]/configuration/_GithubRepositories.svelte

@@ -3,13 +3,11 @@
 
 	import { goto } from '$app/navigation';
 
-	export let githubToken;
 	export let application;
 
-	import { page } from '$app/stores';
+	import { page, session } from '$app/stores';
 	import { get, post } from '$lib/api';
-	import { getGithubToken } from '$lib/components/common';
-	import { enhance, errorNotification } from '$lib/form';
+	import { errorNotification } from '$lib/form';
 	import { onMount } from 'svelte';
 
 	const { id } = $page.params;
@@ -32,15 +30,12 @@
 		branch: undefined
 	};
 	let showSave = false;
-	let token = null;
-
 	async function loadRepositoriesByPage(page = 0) {
 		return await get(`${apiUrl}/installation/repositories?per_page=100&page=${page}`, {
 			Authorization: `token ${$session.ghToken}`
 		});
 	}
 	async function loadRepositories() {
-		token = await getGithubToken({ apiUrl, githubToken, application });
 		let page = 1;
 		let reposCount = 0;
 		const loadedRepos = await loadRepositoriesByPage();
@@ -61,7 +56,7 @@
 		selected.projectId = repositories.find((repo) => repo.full_name === selected.repository).id;
 		try {
 			branches = await get(`${apiUrl}/repos/${selected.repository}/branches`, {
-				Authorization: `token ${token}`
+				Authorization: `token ${$session.ghToken}`
 			});
 			return;
 		} catch ({ error }) {

src/routes/applications/[id]/configuration/_GitlabRepositories.svelte

@@ -8,7 +8,6 @@
 	import cuid from 'cuid';
 	import { goto } from '$app/navigation';
 	import { del, get, post, put } from '$lib/api';
-
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
 

src/routes/applications/[id]/configuration/buildpack.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
 	export const load: Load = async ({ fetch, params, url, stuff }) => {
-		const { application, ghToken } = stuff;
+		const { application } = stuff;
 		if (application?.buildPack && !url.searchParams.get('from')) {
 			return {
 				status: 302,
@@ -14,8 +14,7 @@
 			return {
 				props: {
 					...(await res.json()),
-					application,
-					ghToken
+					application
 				}
 			};
 		}
@@ -43,7 +42,6 @@
 	export let projectId;
 	export let repository;
 	export let branch;
-	export let ghToken;
 	export let type;
 	export let application;
 
@@ -96,7 +94,7 @@
 				}
 			} else if (type === 'github') {
 				const files = await get(`${apiUrl}/repos/${repository}/contents?ref=${branch}`, {
-					Authorization: `Bearer ${ghToken}`,
+					Authorization: `Bearer ${$session.ghToken}`,
 					Accept: 'application/vnd.github.v2.json'
 				});
 				const packageJson = files.find(
@@ -113,7 +111,7 @@
 					foundConfig.buildPack = 'docker';
 				} else if (packageJson) {
 					const data = await get(`${packageJson.git_url}`, {
-						Authorization: `Bearer ${ghToken}`,
+						Authorization: `Bearer ${$session.ghToken}`,
 						Accept: 'application/vnd.github.v2.raw'
 					});
 					const json = JSON.parse(data) || {};

src/routes/applications/[id]/configuration/repository.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
 	export const load: Load = async ({ params, url, stuff }) => {
-		const { application, githubToken, appId } = stuff;
+		const { application, appId } = stuff;
 		if (application?.branch && application?.repository && !url.searchParams.get('from')) {
 			return {
 				status: 302,
@@ -10,7 +10,6 @@
 		}
 		return {
 			props: {
-				githubToken,
 				application,
 				appId
 			}
@@ -20,7 +19,6 @@
 
 <script lang="ts">
 	export let application;
-	export let githubToken;
 	export let appId;
 	import GithubRepositories from './_GithubRepositories.svelte';
 	import GitlabRepositories from './_GitlabRepositories.svelte';
@@ -31,7 +29,7 @@
 </div>
 <div class="flex flex-wrap justify-center">
 	{#if application.gitSource.type === 'github'}
-		<GithubRepositories {application} {githubToken} />
+		<GithubRepositories {application} />
 	{:else if application.gitSource.type === 'gitlab'}
 		<GitlabRepositories {application} {appId} />
 	{/if}

src/routes/applications/[id]/index.json.ts

@@ -15,8 +15,8 @@ export const get: RequestHandler = async (event) => {
 	let githubToken = null;
 	let ghToken = null;
 	let isRunning = false;
-
 	const { id } = event.params;
+
 	try {
 		const application = await db.getApplication({ id, teamId });
 		const { gitSource } = application;
@@ -52,15 +52,20 @@ export const get: RequestHandler = async (event) => {
 		if (application.destinationDockerId) {
 			isRunning = await checkContainer(application.destinationDocker.engine, id);
 		}
-		return {
+		const payload = {
 			body: {
 				isRunning,
-				ghToken,
-				githubToken,
 				application,
 				appId
-			}
+			},
+			headers: {}
 		};
+		if (ghToken) {
+			payload.headers = {
+				'set-cookie': [`ghToken=${ghToken}; HttpOnly; Path=/; Max-Age=15778800;`]
+			};
+		}
+		return payload;
 	} catch (error) {
 		console.log(error);
 		return ErrorHandler(error);

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

@@ -42,7 +42,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 	import type Prisma from '@prisma/client';
-	import { getDomain, notNodeDeployments, staticDeployments } from '$lib/components/common';
+	import { notNodeDeployments, staticDeployments } from '$lib/components/common';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { post } from '$lib/api';
 	const { id } = $page.params;
@@ -52,6 +52,7 @@
 	let loading = false;
 	let debug = application.settings.debug;
 	let previews = application.settings.previews;
+	let dualCerts = application.settings.dualCerts;
 
 	onMount(() => {
 		domainEl.focus();
@@ -64,8 +65,11 @@
 		if (name === 'previews') {
 			previews = !previews;
 		}
+		if (name === 'dualCerts') {
+			dualCerts = !dualCerts;
+		}
 		try {
-			await post(`/applications/${id}/settings.json`, { previews, debug });
+			await post(`/applications/${id}/settings.json`, { previews, debug, dualCerts });
 			return toast.push('Settings saved.');
 		} catch ({ error }) {
 			return errorNotification(error);
@@ -193,7 +197,7 @@
 							value={application.gitSource.name}
 							id="gitSource"
 							disabled
-							class="cursor-pointer bg-coolgray-200 hover:bg-coolgray-500"
+							class="cursor-pointer hover:bg-coolgray-500"
 						/></a
 					>
 				</div>
@@ -210,7 +214,7 @@
 							value="{application.repository}/{application.branch}"
 							id="repository"
 							disabled
-							class="cursor-pointer bg-coolgray-200 hover:bg-coolgray-500"
+							class="cursor-pointer hover:bg-coolgray-500"
 						/></a
 					>
 				</div>
@@ -228,7 +232,7 @@
 							value={application.buildPack}
 							id="buildPack"
 							disabled
-							class="cursor-pointer bg-coolgray-200 hover:bg-coolgray-500"
+							class="cursor-pointer hover:bg-coolgray-500"
 						/></a
 					>
 				</div>
@@ -252,7 +256,7 @@
 		</div>
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-3">
-				<label for="fqdn" class="pt-2">Domain (FQDN)</label>
+				<label for="fqdn" class="relative pt-2">Domain (FQDN)</label>
 				<div class="col-span-2">
 					<input
 						readonly={!$session.isAdmin || isRunning}
@@ -266,11 +270,21 @@
 						required
 					/>
 					<Explainer
-						text="If you specify <span class='text-green-600 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-600 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
+						text="If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
 					/>
 				</div>
 			</div>
-
+			<div class="grid grid-cols-2 items-center pb-8">
+				<Setting
+					dataTooltip="Must be stopped to modify."
+					disabled={isRunning}
+					isCenter={false}
+					bind:setting={dualCerts}
+					title="Generate SSL for www and non-www?"
+					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-green-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+					on:click={() => !isRunning && changeSettings('dualCerts')}
+				/>
+			</div>
 			{#if !staticDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-3 items-center">
 					<label for="port">Port</label>
@@ -285,6 +299,7 @@
 					</div>
 				</div>
 			{/if}
+
 			{#if !notNodeDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-3 items-center">
 					<label for="installCommand">Install Command</label>
@@ -361,8 +376,7 @@
 	<div class="flex space-x-1 pb-5 font-bold">
 		<div class="title">Features</div>
 	</div>
-	<div class="px-4 pb-10 sm:px-6">
-		<!-- <ul class="mt-2 divide-y divide-stone-800">
+	<!-- <ul class="mt-2 divide-y divide-stone-800">
 			<Setting
 				bind:setting={forceSSL}
 				on:click={() => changeSettings('forceSSL')}
@@ -370,21 +384,24 @@
 				description="Creates a https redirect for all requests from http and also generates a https certificate for the domain through Let's Encrypt."
 			/>
 		</ul> -->
-		<ul class="mt-2 divide-y divide-stone-800">
+	<div class="px-10 pb-10">
+		<div class="grid grid-cols-2 items-center">
 			<Setting
+				isCenter={false}
 				bind:setting={previews}
 				on:click={() => changeSettings('previews')}
 				title="Enable MR/PR Previews"
 				description="Creates previews from pull and merge requests."
 			/>
-		</ul>
-		<ul class="mt-2 divide-y divide-stone-800">
+		</div>
+		<div class="grid grid-cols-2 items-center">
 			<Setting
+				isCenter={false}
 				bind:setting={debug}
 				on:click={() => changeSettings('debug')}
 				title="Debug Logs"
 				description="Enable debug logs during build phase. <br>(<span class='text-red-500'>sensitive information</span> could be visible in logs)"
 			/>
-		</ul>
+		</div>
 	</div>
 </div>

src/routes/applications/[id]/logs/build/_BuildLog.svelte

@@ -86,6 +86,7 @@
 		<div class="flex justify-end sticky top-0 p-2">
 			<button
 				on:click={followBuild}
+				class="bg-transparent"
 				data-tooltip="Follow logs"
 				class:text-green-500={followingBuild}
 			>
@@ -108,7 +109,7 @@
 			</button>
 		</div>
 		<div
-			class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12"
+			class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 			bind:this={logsEl}
 		>
 			{#each logs as log}

src/routes/applications/[id]/logs/build/index.svelte

@@ -82,7 +82,7 @@
 	}
 	async function loadBuild(build) {
 		buildId = build;
-		goto(`/applications/${id}/logs/build?buildId=${buildId}`);
+		await goto(`/applications/${id}/logs/build?buildId=${buildId}`);
 	}
 </script>
 
@@ -94,17 +94,19 @@
 <div class="block flex-row justify-start space-x-2 px-5 pt-6 sm:px-10 md:flex">
 	<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
 		<div class="top-4 md:sticky">
-			{#each builds as build (build.id)}
+			{#each builds as build, index (build.id)}
 				<div
 					data-tooltip={new Intl.DateTimeFormat('default', dateOptions).format(
 						new Date(build.createdAt)
 					) + `\n${build.status}`}
 					on:click={() => loadBuild(build.id)}
-					class="tooltip-top flex cursor-pointer items-center justify-center rounded-r border-l-2 border-transparent py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl "
+					class:rounded-tr={index === 0}
+					class:rounded-br={index === builds.length - 1}
+					class="tooltip-top flex cursor-pointer items-center justify-center border-l-2 border-transparent py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl "
 					class:bg-coolgray-400={buildId === build.id}
 					class:border-red-500={build.status === 'failed'}
 					class:border-green-500={build.status === 'success'}
-					class:border-yellow-500={build.status === 'inprogress'}
+					class:border-yellow-500={build.status === 'running'}
 				>
 					<div class="flex-col px-2">
 						<div class="text-sm font-bold">

src/routes/applications/[id]/logs/index.svelte

@@ -77,11 +77,12 @@
 	{#if logs.length === 0}
 		<div class="text-xl font-bold tracking-tighter">Waiting for the logs...</div>
 	{:else}
-		<div class="relative w-full">
+		<div class="relative">
 			<LoadingLogs />
 			<div class="flex justify-end sticky top-0 p-2">
 				<button
 					on:click={followBuild}
+					class="bg-transparent"
 					data-tooltip="Follow logs"
 					class:text-green-500={followingBuild}
 				>
@@ -104,12 +105,14 @@
 				</button>
 			</div>
 			<div
-				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 p-6 whitespace-pre-wrap break-words w-full mb-10 -mt-12"
+				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 				bind:this={logsEl}
 			>
-				{#each logs as log}
-					{log + '\n'}
-				{/each}
+				<div class="px-2">
+					{#each logs as log}
+						{log + '\n'}
+					{/each}
+				</div>
 			</div>
 		</div>
 	{/if}

src/routes/applications/[id]/previews/index.json.ts

@@ -11,6 +11,9 @@ export const get: RequestHandler = async (event) => {
 
 	const { id } = event.params;
 	try {
+		const secrets = await db.listSecrets(id);
+		const applicationSecrets = secrets.filter((secret) => !secret.isPRMRSecret);
+		const PRMRSecrets = secrets.filter((secret) => secret.isPRMRSecret);
 		const destinationDocker = await db.getDestinationByApplicationId({ id, teamId });
 		const docker = dockerInstance({ destinationDocker });
 		const listContainers = await docker.engine.listContainers({
@@ -35,7 +38,13 @@ export const get: RequestHandler = async (event) => {
 			});
 		return {
 			body: {
-				containers: jsonContainers
+				containers: jsonContainers,
+				applicationSecrets: applicationSecrets.sort((a, b) => {
+					return ('' + a.name).localeCompare(b.name);
+				}),
+				PRMRSecrets: PRMRSecrets.sort((a, b) => {
+					return ('' + a.name).localeCompare(b.name);
+				})
 			}
 		};
 	} catch (error) {

src/routes/applications/[id]/previews/index.svelte

@@ -22,8 +22,19 @@
 <script lang="ts">
 	export let containers;
 	export let application;
-
+	export let PRMRSecrets;
+	export let applicationSecrets;
 	import { getDomain } from '$lib/components/common';
+	import Secret from '../secrets/_Secret.svelte';
+	import { get } from '$lib/api';
+	import { page } from '$app/stores';
+	import Explainer from '$lib/components/Explainer.svelte';
+
+	const { id } = $page.params;
+	async function refreshSecrets() {
+		const data = await get(`/applications/${id}/secrets.json`);
+		PRMRSecrets = [...data.secrets];
+	}
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
@@ -32,7 +43,57 @@
 	</div>
 </div>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
+	<table class="mx-auto">
+		<thead class=" rounded-xl border-b border-coolgray-500">
+			<tr>
+				<th
+					scope="col"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white">Name</th
+				>
+				<th
+					scope="col"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
+					>Value</th
+				>
+				<th
+					scope="col"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
+					>Need during buildtime?</th
+				>
+				<th
+					scope="col"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
+				/>
+			</tr>
+		</thead>
+		<tbody class="">
+			{#each applicationSecrets as secret}
+				{#key secret.id}
+					<tr class="h-20 transition duration-100 hover:bg-coolgray-400">
+						<Secret
+							PRMRSecret={PRMRSecrets.find((s) => s.name === secret.name)}
+							isPRMRSecret
+							name={secret.name}
+							value={secret.value}
+							isBuildSecret={secret.isBuildSecret}
+							on:refresh={refreshSecrets}
+						/>
+					</tr>
+				{/key}
+			{/each}
+		</tbody>
+	</table>
+</div>
+<div class="flex justify-center py-4 text-center">
+	<Explainer
+		customClass="w-full"
+		text={applicationSecrets.length === 0
+			? "<span class='font-bold text-white text-xl'>Please add secrets to the application first.</span> <br><br>These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
+			: "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."}
+	/>
+</div>
+<div class="mx-auto max-w-4xl py-10">
 	<div class="flex flex-wrap justify-center space-x-2">
 		{#if containers.length > 0}
 			{#each containers as container}

src/routes/applications/[id]/secrets/_Secret.svelte

@@ -3,14 +3,19 @@
 	export let value = '';
 	export let isBuildSecret = false;
 	export let isNewSecret = false;
+	export let isPRMRSecret = false;
+	export let PRMRSecret = {};
+
+	if (isPRMRSecret) value = PRMRSecret.value;
+
 	import { page } from '$app/stores';
 	import { del, post } from '$lib/api';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { errorNotification } from '$lib/form';
+	import { toast } from '@zerodevx/svelte-toast';
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
-	let nameEl;
-	let valueEl;
 	const { id } = $page.params;
 	async function removeSecret() {
 		try {
@@ -25,24 +30,24 @@
 			return errorNotification(error);
 		}
 	}
-	async function saveSecret() {
-		const nameValid = nameEl.checkValidity();
-		const valueValid = valueEl.checkValidity();
-		if (!nameValid) {
-			return nameEl.reportValidity();
-		}
-		if (!valueValid) {
-			return valueEl.reportValidity();
-		}
-
+	async function saveSecret(isNew = false) {
+		if (!name) return errorNotification('Name is required.');
+		if (!value) return errorNotification('Value is required.');
 		try {
-			await post(`/applications/${id}/secrets.json`, { name, value, isBuildSecret });
+			await post(`/applications/${id}/secrets.json`, {
+				name,
+				value,
+				isBuildSecret,
+				isPRMRSecret,
+				isNew
+			});
 			dispatch('refresh');
 			if (isNewSecret) {
 				name = '';
 				value = '';
 				isBuildSecret = false;
 			}
+			toast.push('Secret saved.');
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -56,8 +61,7 @@
 
 <td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
 	<input
-		id="secretName"
-		bind:this={nameEl}
+		id={isNewSecret ? 'secretName' : 'secretNameNew'}
 		bind:value={name}
 		required
 		placeholder="EXAMPLE_VARIABLE"
@@ -68,16 +72,13 @@
 	/>
 </td>
 <td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
-	<input
-		id="secretValue"
+	<CopyPasswordField
+		id={isNewSecret ? 'secretValue' : 'secretValueNew'}
+		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
+		isPasswordField={true}
 		bind:value
-		bind:this={valueEl}
 		required
 		placeholder="J$#@UIO%HO#$U%H"
-		class="-mx-2 w-64 border-2 border-transparent"
-		class:bg-transparent={!isNewSecret}
-		class:cursor-not-allowed={!isNewSecret}
-		readonly={!isNewSecret}
 	/>
 </td>
 <td class="whitespace-nowrap px-6 py-2 text-center text-sm font-medium text-white">
@@ -132,11 +133,20 @@
 <td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
 	{#if isNewSecret}
 		<div class="flex items-center justify-center">
-			<button class="w-24 bg-green-600 hover:bg-green-500" on:click={saveSecret}>Add</button>
+			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveSecret(true)}>Add</button>
 		</div>
 	{:else}
-		<div class="flex justify-center items-end">
-			<button class="w-24 bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
+		<div class="flex-col space-y-2">
+			<div class="flex items-center justify-center">
+				<button class="w-24 bg-green-600 hover:bg-green-500" on:click={() => saveSecret(false)}
+					>Set</button
+				>
+			</div>
+			{#if !isPRMRSecret}
+				<div class="flex justify-center items-end">
+					<button class="w-24 bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </td>

src/routes/applications/[id]/secrets/index.json.ts

@@ -7,8 +7,9 @@ export const get: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
 	if (status === 401) return { status, body };
 
+	const { id } = event.params;
 	try {
-		const secrets = await db.listSecrets({ applicationId: event.params.id });
+		const secrets = await (await db.listSecrets(id)).filter((secret) => !secret.isPRMRSecret);
 		return {
 			status: 200,
 			body: {
@@ -27,16 +28,22 @@ export const post: RequestHandler = async (event) => {
 	if (status === 401) return { status, body };
 
 	const { id } = event.params;
-	const { name, value, isBuildSecret } = await event.request.json();
-
+	const { name, value, isBuildSecret, isPRMRSecret, isNew } = await event.request.json();
 	try {
-		const found = await db.isSecretExists({ id, name });
-		if (found) {
-			throw {
-				error: `Secret ${name} already exists.`
-			};
+		if (isNew) {
+			const found = await db.isSecretExists({ id, name, isPRMRSecret });
+			if (found) {
+				throw {
+					error: `Secret ${name} already exists.`
+				};
+			} else {
+				await db.createSecret({ id, name, value, isBuildSecret, isPRMRSecret });
+				return {
+					status: 201
+				};
+			}
 		} else {
-			await db.createSecret({ id, name, value, isBuildSecret });
+			await db.updateSecret({ id, name, value, isBuildSecret, isPRMRSecret });
 			return {
 				status: 201
 			};

src/routes/applications/[id]/secrets/index.svelte

@@ -46,32 +46,31 @@
 			<tr>
 				<th
 					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-warmGray-400"
-					>Name</th
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white">Name</th
 				>
 				<th
 					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-warmGray-400"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
 					>Value</th
 				>
 				<th
 					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-warmGray-400"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
 					>Need during buildtime?</th
 				>
 				<th
 					scope="col"
-					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-warmGray-400"
+					class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
 				/>
 			</tr>
 		</thead>
 		<tbody class="">
 			{#each secrets as secret}
 				{#key secret.id}
-					<tr class="hover:bg-coolgray-200">
+					<tr class="h-20 transition duration-100 hover:bg-coolgray-400">
 						<Secret
 							name={secret.name}
-							value={secret.value ? secret.value : 'ENCRYPTED'}
+							value={secret.value}
 							isBuildSecret={secret.isBuildSecret}
 							on:refresh={refreshSecrets}
 						/>

src/routes/applications/[id]/settings.json.ts

@@ -8,10 +8,10 @@ export const post: RequestHandler = async (event) => {
 	if (status === 401) return { status, body };
 
 	const { id } = event.params;
-	const { debug, previews } = await event.request.json();
+	const { debug, previews, dualCerts } = await event.request.json();
 
 	try {
-		await db.setApplicationSettings({ id, debug, previews });
+		await db.setApplicationSettings({ id, debug, previews, dualCerts });
 		return { status: 201 };
 	} catch (error) {
 		return ErrorHandler(error);

src/routes/applications/[id]/stop.json.ts

@@ -16,12 +16,11 @@ export const post: RequestHandler = async (event) => {
 			id,
 			teamId
 		});
-		const domain = getDomain(fqdn);
 		if (destinationDockerId) {
 			const docker = dockerInstance({ destinationDocker });
 			await docker.engine.getContainer(id).stop();
 		}
-		await removeProxyConfiguration({ domain });
+		await removeProxyConfiguration(fqdn);
 		return {
 			status: 200
 		};

src/routes/applications/index.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-	export let applications: Array<Applications>;
+	export let applications: Array<Application>;
 	import { session } from '$app/stores';
 	import Application from './_Application.svelte';
 </script>