dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #612 from kaname-png/some-tweaks

Browse Source 
feat(routes): ui for mobile and fixes
This commit is contained in:
Andras Bacsai
2022-09-19 08:54:23 +02:00
committed by GitHub
parent ad80e7f48b 2eda24799b
commit 98e1deec88
65 changed files with 2440 additions and 2376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

570
apps/api/src/lib/common.ts
View File

File diff suppressed because it is too large Load Diff

32
apps/ui/src/lib/api.ts
View File

@@ -3,33 +3,35 @@ import Cookies from 'js-cookie';
export function getAPIUrl() { export function getAPIUrl() {
if (GITPOD_WORKSPACE_URL) { if (GITPOD_WORKSPACE_URL) {
const { href } = new URL(GITPOD_WORKSPACE_URL) const { href } = new URL(GITPOD_WORKSPACE_URL);
const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '') const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
return newURL return newURL;
} }
if (CODESANDBOX_HOST) { if (CODESANDBOX_HOST) {
return `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}` return `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
} }
return dev ? 'http://localhost:3001' : 'http://localhost:3000'; return dev
? 'http://localhost:3001'
: 'http://localhost:3000';
} }
export function getWebhookUrl(type: string) { export function getWebhookUrl(type: string) {
if (GITPOD_WORKSPACE_URL) { if (GITPOD_WORKSPACE_URL) {
const { href } = new URL(GITPOD_WORKSPACE_URL) const { href } = new URL(GITPOD_WORKSPACE_URL);
const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '') const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
if (type === 'github') { if (type === 'github') {
return `${newURL}/webhooks/github/events` return `${newURL}/webhooks/github/events`;
} }
if (type === 'gitlab') { if (type === 'gitlab') {
return `${newURL}/webhooks/gitlab/events` return `${newURL}/webhooks/gitlab/events`;
} }
} }
if (CODESANDBOX_HOST) { if (CODESANDBOX_HOST) {
const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}` const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
if (type === 'github') { if (type === 'github') {
return `${newURL}/webhooks/github/events` return `${newURL}/webhooks/github/events`;
} }
if (type === 'gitlab') { if (type === 'gitlab') {
return `${newURL}/webhooks/gitlab/events` return `${newURL}/webhooks/gitlab/events`;
} }
} }
return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`; return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`;
@@ -103,7 +105,11 @@ async function send({
return {}; return {};
} }
if (!response.ok) { if (!response.ok) {
if (response.status === 401 && !path.startsWith('https://api.github') && !path.includes('/v4/user')) { if (
response.status === 401 &&
!path.startsWith('https://api.github') &&
!path.includes('/v4/user')
) {
Cookies.remove('token'); Cookies.remove('token');
} }

6
apps/ui/src/lib/components/CopyPasswordField.svelte
View File

@@ -13,8 +13,9 @@
export let id: string; export let id: string;
export let name: string; export let name: string;
export let placeholder = ''; export let placeholder = '';
export let inputStyle = '';
let disabledClass = 'bg-coolback disabled:bg-coolblack'; let disabledClass = 'bg-coolback disabled:bg-coolblack w-full';
let isHttps = browser && window.location.protocol === 'https:'; let isHttps = browser && window.location.protocol === 'https:';
function copyToClipboard() { function copyToClipboard() {
@@ -32,6 +33,7 @@
{#if !isPasswordField || showPassword} {#if !isPasswordField || showPassword}
{#if textarea} {#if textarea}
<textarea <textarea
style={inputStyle}
rows="5" rows="5"
class={disabledClass} class={disabledClass}
class:pr-10={true} class:pr-10={true}
@@ -47,6 +49,7 @@
> >
{:else} {:else}
<input <input
style={inputStyle}
class={disabledClass} class={disabledClass}
type="text" type="text"
class:pr-10={true} class:pr-10={true}
@@ -63,6 +66,7 @@
{/if} {/if}
{:else} {:else}
<input <input
style={inputStyle}
class={disabledClass} class={disabledClass}
class:pr-10={true} class:pr-10={true}
class:pr-20={value && isHttps} class:pr-20={value && isHttps}

2
apps/ui/src/lib/components/Usage.svelte
View File

@@ -79,7 +79,7 @@
BETA BETA
</div> </div>
{/if} {/if}
<div class="w-full flex flex-row space-x-4"> <div class="w-full flex flex-col lg:flex-row space-y-4 lg:space-y-0">
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="font-bold text-lg lg:text-xl truncate"> <h1 class="font-bold text-lg lg:text-xl truncate">
{server.name} {server.name}

2
apps/ui/src/routes/_NewResource.svelte
View File

@@ -16,7 +16,7 @@
} }
</script> </script>
<div class="dropdown dropdown-hover"> <div class="dropdown dropdown-left">
<slot> <slot>
<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs"> <label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
<svg <svg

334
apps/ui/src/routes/__layout.svelte
View File

@@ -120,27 +120,210 @@
<PageLoader /> <PageLoader />
</div> </div>
{/if} {/if}
{#if $appSession.userId} <div class="drawer">
<nav class="nav-main"> <input id="main-drawer" type="checkbox" class="drawer-toggle" />
<div class="flex h-screen w-full flex-col items-center transition-all duration-100"> <div class="drawer-content">
{#if !$appSession.whiteLabeled} {#if $appSession.userId}
<div class="mb-2 mt-4 h-10 w-10"> <nav class="nav-main hidden lg:block z-20">
<img src="/favicon.png" alt="coolLabs logo" /> <div class="flex h-screen w-full flex-col items-center transition-all duration-100">
</div> {#if !$appSession.whiteLabeled}
{:else if $appSession.whiteLabeledDetails.icon} <div class="mb-2 mt-4 h-10 w-10">
<div class="mb-2 mt-4 h-10 w-10"> <img src="/favicon.png" alt="coolLabs logo" />
<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" /> </div>
{:else if $appSession.whiteLabeledDetails.icon}
<div class="mb-2 mt-4 h-10 w-10">
<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
</div>
{/if}
<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
<a
id="dashboard"
sveltekit:prefetch
href="/"
class="icons hover:text-white"
class:text-white={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'}
class:bg-coolgray-200={!($page.url.pathname === '/')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9"
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="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"
/>
<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
</svg>
</a>
{#if $appSession.teamId === '0'}
<a
id="servers"
sveltekit:prefetch
href="/servers"
class="icons hover:text-white"
class:text-white={$page.url.pathname === '/servers'}
class:bg-coolgray-500={$page.url.pathname === '/servers'}
class:bg-coolgray-200={!($page.url.pathname === '/servers')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 mx-auto"
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" />
<rect x="3" y="4" width="18" height="8" rx="3" />
<rect x="3" y="12" width="18" height="8" rx="3" />
<line x1="7" y1="8" x2="7" y2="8.01" />
<line x1="7" y1="16" x2="7" y2="16.01" />
</svg>
</a>
{/if}
</div>
<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
<div class="flex-1" />
<UpdateAvailable />
<div class="flex flex-col space-y-2 py-2">
<a
id="iam"
sveltekit:prefetch
href="/iam"
class="icons bg-coolgray-200"
class:text-iam={$page.url.pathname.startsWith('/iam')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="h-9 w-9"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="9" cy="7" r="4" />
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
</svg>
</a>
<a
id="settings"
sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons bg-coolgray-200"
class:text-settings={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="h-9 w-9"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
/>
<circle cx="12" cy="12" r="3" />
</svg>
</a>
<div id="logout" class="icons bg-coolgray-200 hover:text-error" on:click={logout}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="ml-1 h-8 w-8"
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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
/>
<path d="M7 12h14l-3 -3m0 6l3 -3" />
</svg>
</div>
<div
class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
>
<a
class="text-[10px] no-underline"
href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
target="_blank">v{$appSession.version}</a
>
</div>
</div>
</div> </div>
</nav>
{#if $appSession.whiteLabeled}
<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
>
{/if} {/if}
<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}> {/if}
<div
class="navbar bg-neutral-focus lg:hidden space-x-2 flex flex-row items-center"
class:hidden={!$appSession.userId}
>
<label for="main-drawer" class="drawer-button btn btn-square btn-ghost">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="inline-block w-5 h-5 stroke-current"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/></svg
>
</label>
<div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3">
<h3 class="mb-0">Coolify</h3>
<UpdateAvailable />
</div>
</div>
<main>
<div class={$appSession.userId ? 'lg:pl-16' : null}>
<slot />
</div>
</main>
</div>
<div class="drawer-side">
<label for="main-drawer" class="drawer-overlay w-full" />
<ul class="menu bg-base-100 w-80 p-2 rounded-r-lg space-y-3">
<li class="menu-title">
<span>Main</span>
</li>
<li>
<a <a
id="dashboard" class="no-underline"
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class="icons hover:text-white" class:bg-primary={$page.url.pathname === '/'}
class:text-white={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'}
class:bg-coolgray-200={!($page.url.pathname === '/')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -158,50 +341,43 @@
/> />
<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" /> <path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
</svg> </svg>
Dashboard
</a> </a>
{#if $appSession.teamId === '0'} </li>
<a <li class="menu-title">
id="servers" <span>Manage</span>
sveltekit:prefetch </li>
href="/servers" <li>
class="icons hover:text-white"
class:text-white={$page.url.pathname === '/servers'}
class:bg-coolgray-500={$page.url.pathname === '/servers'}
class:bg-coolgray-200={!($page.url.pathname === '/servers')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 mx-auto"
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" />
<rect x="3" y="4" width="18" height="8" rx="3" />
<rect x="3" y="12" width="18" height="8" rx="3" />
<line x1="7" y1="8" x2="7" y2="8.01" />
<line x1="7" y1="16" x2="7" y2="16.01" />
</svg>
</a>
{/if}
</div>
<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
<div class="flex-1" />
<UpdateAvailable />
<div class="flex flex-col space-y-2 py-2">
<a <a
id="iam" class="no-underline"
sveltekit:prefetch sveltekit:prefetch
href="/iam" href="/servers"
class="icons bg-coolgray-200" class:bg-applications={$page.url.pathname.startsWith('/servers')}
class:text-iam={$page.url.pathname.startsWith('/iam')} >
class:bg-coolgray-500={$page.url.pathname === '/iam'} <svg
class:bg-coolgray-200={!($page.url.pathname === '/iam')} xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<rect x="3" y="4" width="18" height="8" rx="3" />
<rect x="3" y="12" width="18" height="8" rx="3" />
<line x1="7" y1="8" x2="7" y2="8.01" />
<line x1="7" y1="16" x2="7" y2="16.01" />
</svg>
Servers
</a>
</li>
<li class="menu-title">
<span>Dashboard settings</span>
</li>
<li>
<a class="no-underline" href="/iam" class:bg-iam={$page.url.pathname.startsWith('/iam')}
><svg ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -218,15 +394,15 @@
<path d="M16 3.13a4 4 0 0 1 0 7.75" /> <path d="M16 3.13a4 4 0 0 1 0 7.75" />
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /> <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
</svg> </svg>
IAM
</a> </a>
</li>
<li>
<a <a
id="settings" class="no-underline"
sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'} href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons bg-coolgray-200" class:bg-settings={$page.url.pathname.startsWith('/settings')}
class:text-settings={$page.url.pathname.startsWith('/settings')} class:text-black={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname === '/settings'}
class:bg-coolgray-200={!($page.url.pathname === '/settings')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -244,9 +420,11 @@
/> />
<circle cx="12" cy="12" r="3" /> <circle cx="12" cy="12" r="3" />
</svg> </svg>
Settings
</a> </a>
</li>
<div id="logout" class="icons bg-coolgray-200 hover:text-error" on:click={logout}> <li>
<div class="no-underline hover:bg-error" on:click={logout}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="ml-1 h-8 w-8" class="ml-1 h-8 w-8"
@@ -263,30 +441,12 @@
/> />
<path d="M7 12h14l-3 -3m0 6l3 -3" /> <path d="M7 12h14l-3 -3m0 6l3 -3" />
</svg> </svg>
Logout
</div> </div>
<div </li>
class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white" </ul>
>
<a
class="text-[10px] no-underline"
href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
target="_blank">v{$appSession.version}</a
>
</div>
</div>
</div>
</nav>
{#if $appSession.whiteLabeled}
<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
>
{/if}
{/if}
<main>
<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
<slot />
</div> </div>
</main> </div>
<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip> <Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
<Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip <Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip

2
apps/ui/src/routes/applications/[id]/_Secret.svelte
View File

@@ -93,6 +93,7 @@
<td> <td>
<input <input
style="min-width: 350px !important;"
id={isNewSecret ? 'secretName' : 'secretNameNew'} id={isNewSecret ? 'secretName' : 'secretNameNew'}
bind:value={name} bind:value={name}
required required
@@ -110,6 +111,7 @@
bind:value bind:value
required required
placeholder="J$#@UIO%HO#$U%H" placeholder="J$#@UIO%HO#$U%H"
inputStyle="min-width: 350px; !important"
/> />
</td> </td>
<td class="text-center"> <td class="text-center">

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

@@ -190,159 +190,167 @@
}); });
</script> </script>
<nav class="nav-side"> <nav class="header">
{#if $location} <div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<a <div class="flex flex-col">
id="open" <div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
href={$location} Configuration
target="_blank" </div>
class="icons flex items-center bg-transparent text-sm" <span class="text-xs">{application.name}</span>
><svg </div>
xmlns="http://www.w3.org/2000/svg" {#if application.gitSource?.htmlUrl && application.repository && application.branch}
class="h-6 w-6" <a
viewBox="0 0 24 24" id="git"
stroke-width="1.5" href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
stroke="currentColor" target="_blank"
fill="none" class="w-10"
stroke-linecap="round"
stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> {#if application.gitSource?.type === 'gitlab'}
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> <svg viewBox="0 0 128 128" class="icons">
<line x1="10" y1="14" x2="20" y2="4" /> <path
<polyline points="15 4 20 4 20 9" /> fill="#FC6D26"
</svg></a d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
> /><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
<Tooltip triggeredBy="#open">Open</Tooltip> fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
<Tooltip triggeredBy="#git">Open on Git</Tooltip>
{/if}
</div>
<div
class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0"
>
{#if $location}
<a
id="open"
href={$location}
target="_blank"
class="icons flex items-center bg-transparent text-sm mt-3"
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg></a
>
<Tooltip triggeredBy="#open">Open</Tooltip>
<div class="border border-coolgray-500 h-8" /> <div class="border border-coolgray-500 h-8" />
{/if} {/if}
{#if $status.application.isExited || $status.application.isRestarting}
{#if $status.application.isExited || $status.application.isRestarting} <a
<a id="applicationerror"
id="applicationerror" href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
href={$isDeploymentEnabled ? `/applications/${id}/logs` : null} class="icons bg-transparent text-sm flex items-center text-error"
class="icons bg-transparent text-sm flex items-center text-error" sveltekit:prefetch
sveltekit:prefetch
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" /> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" class="w-6 h-6"
/> viewBox="0 0 24 24"
<line x1="12" y1="8" x2="12" y2="12" /> stroke-width="1.5"
<line x1="12" y1="16" x2="12.01" y2="16" /> stroke="currentcolor"
</svg> fill="none"
</a> stroke-linecap="round"
<Tooltip triggeredBy="#applicationerror">Application exited or restarting!</Tooltip> stroke-linejoin="round"
<button >
id="stop" <path stroke="none" d="M0 0h24v24H0z" fill="none" />
on:click={stopApplication} <path
type="submit" d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
disabled={!$isDeploymentEnabled} />
class="icons bg-transparent text-sm flex items-center space-x-2 text-error" <line x1="12" y1="8" x2="12" y2="12" />
> <line x1="12" y1="16" x2="12.01" y2="16" />
<svg </svg>
xmlns="http://www.w3.org/2000/svg" </a>
class="w-6 h-6" <Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip>
viewBox="0 0 24 24" {/if}
stroke-width="1.5" {#if $status.application.initialLoading}
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="6" y="5" width="4" height="14" rx="1" />
<rect x="14" y="5" width="4" height="14" rx="1" />
</svg>
</button>
<Tooltip triggeredBy="#stop">Stop</Tooltip>
{/if}
{#if $status.application.initialLoading}
<button
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
<line x1="11" y1="19.94" x2="11" y2="19.95" />
</svg>
</button>
{:else if $status.application.isRunning}
<button
id="stop"
on:click={stopApplication}
type="submit"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<rect x="6" y="5" width="4" height="14" rx="1" />
<rect x="14" y="5" width="4" height="14" rx="1" />
</svg>
</button>
<Tooltip triggeredBy="#stop">Stop</Tooltip>
<button
id="restart"
on:click={restartApplication}
type="submit"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
</svg>
</button>
<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
<button <button
id="forceredeploy" class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
<line x1="11" y1="19.94" x2="11" y2="19.95" />
</svg>
</button>
{:else if $status.application.isRunning}
<button
id="stop"
on:click={stopApplication}
type="submit"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<rect x="6" y="5" width="4" height="14" rx="1" />
<rect x="14" y="5" width="4" height="14" rx="1" />
</svg>
</button>
<Tooltip triggeredBy="#stop">Stop</Tooltip>
<button
id="restart"
on:click={restartApplication}
type="submit" type="submit"
disabled={!$isDeploymentEnabled} disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2" class="icons bg-transparent text-sm flex items-center space-x-2"
@@ -358,148 +366,80 @@
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82" <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
transform="rotate(-45 12 12)"
/>
</svg> </svg>
</button> </button>
<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip> <Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
</form>
{:else} <form on:submit|preventDefault={() => handleDeploySubmit(true)}>
<form on:submit|preventDefault={() => handleDeploySubmit(false)}> <button
<button id="forceredeploy"
id="deploy" type="submit"
type="submit" disabled={!$isDeploymentEnabled}
disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm flex items-center space-x-2"
class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" /> <svg
<path d="M7 4v16l13 -8z" /> xmlns="http://www.w3.org/2000/svg"
</svg> class="w-6 h-6"
</button> viewBox="0 0 24 24"
<Tooltip triggeredBy="#deploy">Deploy</Tooltip> stroke-width="1.5"
</form> stroke="currentColor"
{/if} fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
transform="rotate(-45 12 12)"
/>
</svg>
</button>
<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
</form>
{:else}
<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
<button
id="deploy"
type="submit"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M7 4v16l13 -8z" />
</svg>
</button>
<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
</form>
{/if}
<div class="border border-coolgray-500 h-8" /> <div class="border border-coolgray-500 h-8" />
<a
href={$isDeploymentEnabled ? `/applications/${id}` : null}
sveltekit:prefetch
class="hover:text-yellow-500 rounded"
class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
>
<button
disabled={!$isDeploymentEnabled}
id="configurations"
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg></button
></a
>
<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
<a
href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
>
<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
/>
<circle cx="12" cy="11" r="1" />
<line x1="12" y1="12" x2="12" y2="14.5" />
</svg></button
></a
>
<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
<a
href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
>
<button
id="persistentstorages"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<ellipse cx="12" cy="6" rx="8" ry="3" />
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
</svg>
</button></a
>
<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
{#if !application.settings.isBot}
<a <a
href={$isDeploymentEnabled ? `/applications/${id}/previews` : null} href={$isDeploymentEnabled ? `/applications/${id}` : null}
sveltekit:prefetch sveltekit:prefetch
class="hover:text-orange-500 rounded" class="hover:text-yellow-500 rounded"
class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`} class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`} class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
> >
<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm"> <button
disabled={!$isDeploymentEnabled}
id="configurations"
class="icons bg-transparent text-sm"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6" class="h-6 w-6"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
@@ -508,107 +448,202 @@
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="7" cy="18" r="2" /> <rect x="4" y="8" width="4" height="4" />
<circle cx="7" cy="6" r="2" /> <line x1="6" y1="4" x2="6" y2="8" />
<circle cx="17" cy="12" r="2" /> <line x1="6" y1="12" x2="6" y2="20" />
<line x1="7" y1="8" x2="7" y2="16" /> <rect x="10" y="14" width="4" height="4" />
<path d="M7 8a4 4 0 0 0 4 4h4" /> <line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg></button </svg></button
></a ></a
> >
<Tooltip triggeredBy="#previews">Previews</Tooltip>
{/if}
<div class="border border-coolgray-500 h-8" />
<a
href={$isDeploymentEnabled && $status.application.isRunning ? `/applications/${id}/logs` : null}
sveltekit:prefetch
class="hover:text-sky-500 rounded"
class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
>
<button
id="applicationlogs"
disabled={!$isDeploymentEnabled || !$status.application.isRunning}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
<line x1="3" y1="6" x2="3" y2="19" />
<line x1="12" y1="6" x2="12" y2="19" />
<line x1="21" y1="6" x2="21" y2="19" />
</svg>
</button></a
>
<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
<a
href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
sveltekit:prefetch
class="hover:text-red-500 rounded"
class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
>
<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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" />
<circle cx="19" cy="13" r="2" />
<circle cx="4" cy="17" r="2" />
<circle cx="13" cy="17" r="2" />
<line x1="13" y1="19" x2="4" y2="19" />
<line x1="4" y1="15" x2="13" y2="15" />
<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
<path d="M19 11v-7l-6 7" />
</svg>
</button></a
>
<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
<div class="border border-coolgray-500 h-8" />
{#if forceDelete} <Tooltip triggeredBy="#configurations">Configurations</Tooltip>
<button <a
id="forcedelete" href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
on:click={() => deleteApplication(application.name, true)} sveltekit:prefetch
type="submit" class="hover:text-pink-500 rounded"
disabled={!$appSession.isAdmin} class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
class:bg-red-600={$appSession.isAdmin} class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
class:hover:bg-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"
> >
Force Delete <button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
</button> <svg
<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip> xmlns="http://www.w3.org/2000/svg"
{:else} class="w-6 h-6"
<button viewBox="0 0 24 24"
id="delete" stroke-width="1.5"
on:click={() => deleteApplication(application.name, false)} stroke="currentColor"
type="submit" fill="none"
disabled={!$appSession.isAdmin} stroke-linecap="round"
class:hover:text-red-500={$appSession.isAdmin} stroke-linejoin="round"
class="icons bg-transparent text-sm" >
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
/>
<circle cx="12" cy="11" r="1" />
<line x1="12" y1="12" x2="12" y2="14.5" />
</svg></button
></a
> >
<DeleteIcon /> <Tooltip triggeredBy="#secrets">Secrets</Tooltip>
</button> <a
<Tooltip triggeredBy="#delete">Delete</Tooltip> href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
{/if} sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
>
<button
id="persistentstorages"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<ellipse cx="12" cy="6" rx="8" ry="3" />
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
</svg>
</button></a
>
<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
{#if !application.settings.isBot}
<a
href={$isDeploymentEnabled ? `/applications/${id}/previews` : null}
sveltekit:prefetch
class="hover:text-orange-500 rounded"
class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
>
<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<circle cx="7" cy="18" r="2" />
<circle cx="7" cy="6" r="2" />
<circle cx="17" cy="12" r="2" />
<line x1="7" y1="8" x2="7" y2="16" />
<path d="M7 8a4 4 0 0 0 4 4h4" />
</svg></button
></a
>
<Tooltip triggeredBy="#previews">Previews</Tooltip>
{/if}
<div class="border border-coolgray-500 h-8" />
<a
href={$isDeploymentEnabled && $status.application.isRunning
? `/applications/${id}/logs`
: null}
sveltekit:prefetch
class="hover:text-sky-500 rounded"
class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
>
<button
id="applicationlogs"
disabled={!$isDeploymentEnabled || !$status.application.isRunning}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
<line x1="3" y1="6" x2="3" y2="19" />
<line x1="12" y1="6" x2="12" y2="19" />
<line x1="21" y1="6" x2="21" y2="19" />
</svg>
</button></a
>
<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
<a
href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
sveltekit:prefetch
class="hover:text-red-500 rounded"
class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
>
<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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" />
<circle cx="19" cy="13" r="2" />
<circle cx="4" cy="17" r="2" />
<circle cx="13" cy="17" r="2" />
<line x1="13" y1="19" x2="4" y2="19" />
<line x1="4" y1="15" x2="13" y2="15" />
<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
<path d="M19 11v-7l-6 7" />
</svg>
</button></a
>
<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
<div class="border border-coolgray-500 h-8" />
{#if forceDelete}
<button
id="forcedelete"
on:click={() => deleteApplication(application.name, true)}
type="submit"
disabled={!$appSession.isAdmin}
class:bg-red-600={$appSession.isAdmin}
class:hover:bg-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"
>
Force Delete
</button>
<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip>
{:else}
<button
id="delete"
on:click={() => deleteApplication(application.name, false)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"
>
<DeleteIcon />
</button>
<Tooltip triggeredBy="#delete">Delete</Tooltip>
{/if}
</div>
</nav> </nav>
<slot /> <slot />

2
apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
View File

@@ -413,7 +413,7 @@
>{loading.save ? $t('forms.saving') : $t('forms.save')}</button >{loading.save ? $t('forms.saving') : $t('forms.save')}</button
> >
{#if tryAgain} {#if tryAgain}
<div> <div class="p-5">
An error occured during authenticating with GitLab. Please check your GitLab Source An error occured during authenticating with GitLab. Please check your GitLab Source
configuration <a href={`/sources/${application.gitSource.id}`}>here.</a> configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
</div> </div>

61
apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
View File

@@ -157,39 +157,38 @@
</script> </script>
<div class="mx-auto max-w-5xl"> <div class="mx-auto max-w-5xl">
<div class="grid grid-flow-row gap-2 px-10"> <form
<div class="flex"> class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 lg:items-center"
<form class="flex" on:submit|preventDefault={loadBranches}> on:submit|preventDefault={loadBranches}
<div class="space-y-4"> >
<input <div class="space-y-4 w-full">
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main" <input
bind:value={publicRepositoryLink} class="w-full"
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
bind:value={publicRepositoryLink}
/>
{#if branchSelectOptions.length > 0}
<div class="custom-select-wrapper">
<Select
placeholder={loading.branches
? $t('application.configuration.loading_branches')
: !publicRepositoryLink
? $t('application.configuration.select_a_repository_first')
: $t('application.configuration.select_a_branch')}
isWaiting={loading.branches}
showIndicator={!!publicRepositoryLink && !loading.branches}
id="branches"
on:select={saveRepository}
items={branchSelectOptions}
isDisabled={loading.branches || !!!publicRepositoryLink}
isClearable={false}
/> />
{#if branchSelectOptions.length > 0}
<div class="custom-select-wrapper">
<Select
placeholder={loading.branches
? $t('application.configuration.loading_branches')
: !publicRepositoryLink
? $t('application.configuration.select_a_repository_first')
: $t('application.configuration.select_a_branch')}
isWaiting={loading.branches}
showIndicator={!!publicRepositoryLink && !loading.branches}
id="branches"
on:select={saveRepository}
items={branchSelectOptions}
isDisabled={loading.branches || !!!publicRepositoryLink}
isClearable={false}
/>
</div>
{/if}
</div> </div>
{/if}
<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit"
>Load Repository</button
>
</form>
</div> </div>
</div>
<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
Load Repository
</button>
</form>
</div> </div>

4
apps/ui/src/routes/applications/[id]/configuration/source.svelte
View File

@@ -73,7 +73,7 @@
{$t('application.configuration.select_a_git_source')} {$t('application.configuration.select_a_git_source')}
</div> </div>
</div> </div>
<div class="max-w-5xl mx-auto "> <div class="max-w-5xl mx-auto px-5">
<div class="title pb-8">Git App</div> <div class="title pb-8">Git App</div>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
{#if !filteredSources || ownSources.length === 0} {#if !filteredSources || ownSources.length === 0}
@@ -192,7 +192,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="flex items-center"> <div class="flex flex-row items-center">
<div class="title py-4">Public Repository</div> <div class="title py-4">Public Repository</div>
<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" /> <DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
</div> </div>

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

@@ -94,7 +94,7 @@
} }
]; ];
function containerClass() { function containerClass() {
return 'text-white bg-transparent font-thin px-0'; return 'text-white bg-transparent font-thin px-0 w-full';
} }
async function getUsage() { async function getUsage() {
@@ -294,8 +294,8 @@
} }
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold"> <div class="flex items-center space-x-2 p-5 px-6 font-bold lg:hidden">
<div class="-mb-5 flex-col"> <div class="flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block"> <div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration Configuration
</div> </div>
@@ -348,7 +348,7 @@
{/if} {/if}
</div> </div>
<div class="mx-auto max-w-4xl px-6 py-4"> <div class="mx-auto max-w-4xl px-6 pt-4">
<div class="text-2xl font-bold">Application Usage</div> <div class="text-2xl font-bold">Application Usage</div>
<div class="text-center"> <div class="text-center">
<div class="stat w-64"> <div class="stat w-64">
@@ -370,8 +370,8 @@
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-4xl px-6">
<!-- svelte-ignore missing-declaration --> <!-- svelte-ignore missing-declaration -->
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5"> <div class="flex space-x-1 pb-5 justify-between items-center">
<div class="title">{$t('general')}</div> <h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
class="btn btn-sm" class="btn btn-sm"
@@ -384,7 +384,8 @@
> >
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-flow-row gap-2 lg:px-10 pr-5">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input name="name" id="name" bind:value={application.name} required /> <input name="name" id="name" bind:value={application.name} required />
@@ -459,7 +460,7 @@
value={application.destinationDocker.name} value={application.destinationDocker.name}
id="destination" id="destination"
disabled disabled
class="bg-transparent" class="bg-transparent w-full"
/> />
</div> </div>
</div> </div>
@@ -473,19 +474,16 @@
: 'Image that will be used during the build process.'} : 'Image that will be used during the build process.'}
/> />
</label> </label>
<Select
<div class="custom-select-wrapper"> {isDisabled}
<Select containerClasses={(isDisabled && containerClass()) || 'bg-neutral border-0 w-full'}
{isDisabled} id="baseBuildImages"
containerClasses={isDisabled && containerClass()} showIndicator={!$status.application.isRunning}
id="baseBuildImages" items={application.baseBuildImages}
showIndicator={!$status.application.isRunning} on:select={selectBaseBuildImage}
items={application.baseBuildImages} value={application.baseBuildImage}
on:select={selectBaseBuildImage} isClearable={false}
value={application.baseBuildImage} />
isClearable={false}
/>
</div>
</div> </div>
{/if} {/if}
{#if application.buildPack !== 'docker'} {#if application.buildPack !== 'docker'}
@@ -494,18 +492,16 @@
>{$t('application.base_image')} >{$t('application.base_image')}
<Explainer explanation={'Image that will be used for the deployment.'} /></label <Explainer explanation={'Image that will be used for the deployment.'} /></label
> >
<div class="custom-select-wrapper"> <Select
<Select {isDisabled}
{isDisabled} containerClasses={(isDisabled && containerClass()) || 'bg-neutral border-0'}
containerClasses={isDisabled && containerClass()} id="baseImages"
id="baseImages" showIndicator={!$status.application.isRunning}
showIndicator={!$status.application.isRunning} items={application.baseImages}
items={application.baseImages} on:select={selectBaseImage}
on:select={selectBaseImage} value={application.baseImage}
value={application.baseImage} isClearable={false}
isClearable={false} />
/>
</div>
</div> </div>
{/if} {/if}
{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')} {#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
@@ -574,7 +570,7 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">{$t('application.application')}</div> <div class="title">{$t('application.application')}</div>
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 lg:px-10 pr-5">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<Setting <Setting
id="isBot" id="isBot"
@@ -866,7 +862,7 @@
<div class="flex space-x-1 pb-5 font-bold"> <div class="flex space-x-1 pb-5 font-bold">
<div class="title">{$t('application.features')}</div> <div class="title">{$t('application.features')}</div>
</div> </div>
<div class="px-10 pb-10"> <div class="lg:px-10 lg:pb-10 pb-6">
{#if !application.settings.isPublicRepository} {#if !application.settings.isPublicRepository}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<Setting <Setting
@@ -891,7 +887,7 @@
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center w-full">
<Setting <Setting
id="debug" id="debug"
isCenter={false} isCenter={false}

15
apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
View File

@@ -154,20 +154,15 @@
{/if} {/if}
</div> </div>
{#if logs.length > 0} {#if logs.length > 0}
<div <div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
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} {#each logs as log}
<div>{log.line + '\n'}</div> <p>{log.line + '\n'}</p>
{/each} {/each}
</div> </div>
{:else} {:else}
<div <div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
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" No logs found.
> </div>
No logs found.
</div>
{/if} {/if}
{/if} {/if}
</div> </div>

14
apps/ui/src/routes/applications/[id]/logs/index.svelte
View File

@@ -177,16 +177,10 @@
</button> </button>
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip> <Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
</div> </div>
<div <div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
class="font-mono w-full 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" {#each logs as log}
bind:this={logsEl} <p>{log + '\n'}</p>
on:scroll={detect} {/each}
>
<div class="px-2 pr-14">
{#each logs as log}
{log + '\n'}
{/each}
</div>
</div> </div>
</div> </div>
{/if} {/if}

56
apps/ui/src/routes/applications/[id]/previews.svelte
View File

@@ -89,62 +89,14 @@
}); });
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Preview Deployments
</div>
<span class="text-xs">{application?.name}</span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
{/if}
</div>
{#if loading.init} {#if loading.init}
<Loading /> <Loading />
{:else} {:else}
<div class="mx-auto max-w-6xl px-6 pt-4"> <div class="mx-auto max-w-6xl px-6 pt-4">
<div class="flex justify-center py-4 text-center"> <div class="flex flex-col justify-center py-4 text-center">
<h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
Preview Deployments
</h1>
<SimpleExplainer <SimpleExplainer
customClass="w-full" customClass="w-full"
text={applicationSecrets.length === 0 text={applicationSecrets.length === 0

114
apps/ui/src/routes/applications/[id]/secrets.svelte
View File

@@ -67,87 +67,41 @@
} }
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
{$t('application.secret')}
</div>
<span class="text-xs">{application.name} </span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
{/if}
</div>
<div class="mx-auto max-w-6xl px-6 pt-4"> <div class="mx-auto max-w-6xl px-6 pt-4">
<table class="mx-auto border-separate text-left"> <h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
<thead> Secrets
<tr class="h-12"> </h1>
<th scope="col">{$t('forms.name')}</th> <div class="overflow-x-auto">
<th scope="col">{$t('forms.value')}</th> <table class="mx-auto border-separate text-left">
<th scope="col" class="w-64 text-center" <thead>
>{$t('application.preview.need_during_buildtime')}</th <tr class="h-12">
> <th scope="col">{$t('forms.name')}</th>
<th scope="col" class="w-96 text-center">{$t('forms.action')}</th> <th scope="col">{$t('forms.value')}</th>
</tr> <th scope="col" class="w-64 text-center"
</thead> >{$t('application.preview.need_during_buildtime')}</th
<tbody> >
{#each secrets as secret} <th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
{#key secret.id} </tr>
<tr> </thead>
<Secret <tbody>
name={secret.name} {#each secrets as secret}
value={secret.value} {#key secret.id}
isBuildSecret={secret.isBuildSecret} <tr>
on:refresh={refreshSecrets} <Secret
/> name={secret.name}
</tr> value={secret.value}
{/key} isBuildSecret={secret.isBuildSecret}
{/each} on:refresh={refreshSecrets}
<tr> />
<Secret isNewSecret on:refresh={refreshSecrets} /> </tr>
</tr> {/key}
</tbody> {/each}
</table> <tr>
<Secret isNewSecret on:refresh={refreshSecrets} />
</tr>
</tbody>
</table>
</div>
<h2 class="title my-6 font-bold">Paste .env file</h2> <h2 class="title my-6 font-bold">Paste .env file</h2>
<form on:submit|preventDefault={getValues} class="mb-12 w-full"> <form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" /> <textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />

58
apps/ui/src/routes/applications/[id]/storages.svelte
View File

@@ -34,60 +34,12 @@
} }
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Persistent Storage
</div>
<span class="text-xs">{application.name} </span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
{/if}
</div>
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4"> <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
<div class="flex justify-center py-4 text-center">
<div class="flex flex-col justify-center py-4 text-center">
<h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
Persistent Storage
</h1>
<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} /> <SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
</div> </div>
<table class="mx-auto border-separate text-left"> <table class="mx-auto border-separate text-left">

9
apps/ui/src/routes/applications/_index.svelte
View File

@@ -44,8 +44,8 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header">
<div class="mr-4 text-2xl">{$t('index.applications')}</div> <h1 class="mr-4 text-2xl font-bold">{$t('index.applications')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button on:click={newApplication} class="btn btn-square btn-sm bg-applications"> <button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
<svg <svg
@@ -63,8 +63,9 @@
> >
</button> </button>
{/if} {/if}
</div> </nav>
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16"> <br />
<div class="flex flex-col justify-center mt-10 pb-12 lg:pt-16 sm:pb-16">
{#if !applications || ownApplications.length === 0} {#if !applications || ownApplications.length === 0}
<div class="flex-col"> <div class="flex-col">
<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div> <div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>

4
apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
View File

@@ -5,9 +5,9 @@
</script> </script>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">CouchDB</div> <h1 class="title">CouchDB</h1>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label >{$t('database.default_database')}</label

230
apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
View File

@@ -107,120 +107,106 @@
} }
</script> </script>
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-4xl p-4">
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5"> <div class="flex flex-col lg:flex-row justify-between lg:space-x-1 space-y-3 pb-5 lg:items-center items-start">
<div class="title">{$t('general')}</div> <h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
type="submit" type="submit"
class="btn btn-sm" class="btn btn-sm w-full lg:w-auto"
class:loading class:loading
class:bg-databases={!loading} class:bg-databases={!loading}
disabled={loading}>{$t('forms.save')}</button disabled={loading}>{$t('forms.save')}</button
> >
{/if} {/if}
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10">
<div class="grid grid-flow-row gap-2 px-10"> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<div class="grid grid-cols-2 items-center"> <input
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> class="w-full"
<input readonly={!$appSession.isAdmin}
readonly={!$appSession.isAdmin} name="name"
name="name" id="name"
id="name" bind:value={database.name}
bind:value={database.name} required
required />
/> <label for="destination" class="text-base font-bold text-stone-100"
</div> >{$t('application.destination')}</label
<div class="grid grid-cols-2 items-center"> >
<label for="destination" class="text-base font-bold text-stone-100" {#if database.destinationDockerId}
>{$t('application.destination')}</label <div class="no-underline">
>
{#if database.destinationDockerId}
<div class="no-underline">
<input
value={database.destinationDocker.name}
id="destination"
disabled
readonly
class="bg-transparent "
/>
</div>
{/if}
</div>
<div class="grid grid-cols-2 items-center">
<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
<a
href={$appSession.isAdmin && !$status.database.isRunning
? `/databases/${id}/configuration/version?from=/databases/${id}`
: ''}
class="no-underline"
>
<input <input
value={database.version} value={database.destinationDocker.name}
id="destination"
disabled
readonly readonly
disabled={$status.database.isRunning || $status.database.initialLoading} class="bg-transparent w-full"
class:cursor-pointer={!$status.database.isRunning} />
/></a
>
</div>
</div>
<div class="grid grid-flow-row gap-2 px-10 pt-2">
<div class="grid grid-cols-2 items-center">
<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label>
<CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField={false}
readonly
disabled
id="host"
name="host"
value={database.id}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label
>
<CopyPasswordField
placeholder={$t('database.generated_automatically_after_set_to_public')}
id="publicPort"
readonly
disabled
name="publicPort"
value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort}
/>
</div>
</div>
<div class="grid grid-flow-row gap-2">
{#if database.type === 'mysql'}
<MySql bind:database />
{:else if database.type === 'postgresql'}
<PostgreSql bind:database />
{:else if database.type === 'mongodb'}
<MongoDb bind:database />
{:else if database.type === 'mariadb'}
<MariaDb bind:database />
{:else if database.type === 'redis'}
<Redis bind:database />
{:else if database.type === 'couchdb'}
<CouchDb {database} />
{:else if database.type === 'edgedb'}
<EdgeDB {database} />
{/if}
<div class="grid grid-cols-2 items-center px-10 pb-8">
<div>
<label for="url" class="text-base font-bold text-stone-100"
>{$t('database.connection_string')}
{#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
<Explainer
explanation="You can only access the database with this URL if your application is deployed to the same Destination."
/>
{/if}</label
>
</div> </div>
{/if}
<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
<a
href={$appSession.isAdmin && !$status.database.isRunning
? `/databases/${id}/configuration/version?from=/databases/${id}`
: ''}
class="no-underline"
>
<input
class="w-full"
value={database.version}
readonly
disabled={$status.database.isRunning || $status.database.initialLoading}
class:cursor-pointer={!$status.database.isRunning}
/></a
>
<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label>
<CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField={false}
readonly
disabled
id="host"
name="host"
value={database.id}
/>
<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
<CopyPasswordField
placeholder={$t('database.generated_automatically_after_set_to_public')}
id="publicPort"
readonly
disabled
name="publicPort"
value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort}
/>
</div>
{#if database.type === 'mysql'}
<MySql bind:database />
{:else if database.type === 'postgresql'}
<PostgreSql bind:database />
{:else if database.type === 'mongodb'}
<MongoDb bind:database />
{:else if database.type === 'mariadb'}
<MariaDb bind:database />
{:else if database.type === 'redis'}
<Redis bind:database />
{:else if database.type === 'couchdb'}
<CouchDb {database} />
{:else if database.type === 'edgedb'}
<EdgeDB {database} />
{/if}
<div class="flex flex-col space-y-3 mt-5">
<div>
<label for="url" class="text-base font-bold text-stone-100"
>{$t('database.connection_string')}
{#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
<Explainer
explanation="You can only access the database with this URL if your application is deployed to the same Destination."
/>
{/if}</label
>
</div>
<div class="lg:px-10">
<CopyPasswordField <CopyPasswordField
textarea={true} textarea={true}
placeholder={$t('forms.generated_automatically_after_start')} placeholder={$t('forms.generated_automatically_after_start')}
@@ -235,31 +221,27 @@
</div> </div>
</form> </form>
<div class="flex space-x-1 pb-5 font-bold"> <div class="flex space-x-1 pb-5 font-bold">
<div class="title">{$t('application.features')}</div> <h1 class="title">{$t('application.features')}</h1>
</div> </div>
<div class="px-10 pb-10"> <div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10">
<div class="grid grid-cols-2 items-center"> <Setting
<Setting id="isPublic"
id="isPublic" loading={publicLoading}
loading={publicLoading} bind:setting={$status.database.isPublic}
bind:setting={$status.database.isPublic} on:click={() => changeSettings('isPublic')}
on:click={() => changeSettings('isPublic')} title={$t('database.set_public')}
title={$t('database.set_public')} description={$t('database.warning_database_public')}
description={$t('database.warning_database_public')} disabled={!$status.database.isRunning}
disabled={!$status.database.isRunning} />
/>
</div>
{#if database.type === 'redis'} {#if database.type === 'redis'}
<div class="grid grid-cols-2 items-center"> <Setting
<Setting id="appendOnly"
id="appendOnly" loading={publicLoading}
loading={publicLoading} bind:setting={appendOnly}
bind:setting={appendOnly} on:click={() => changeSettings('appendOnly')}
on:click={() => changeSettings('appendOnly')} title={$t('database.change_append_only_mode')}
title={$t('database.change_append_only_mode')} description={$t('database.warning_append_only')}
description={$t('database.warning_append_only')} />
/>
</div>
{/if} {/if}
</div> </div>
</div> </div>

7
apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
View File

@@ -7,9 +7,9 @@
</script> </script>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MariaDB</div> <h1 class="title">MariaDB</h1>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label >{$t('database.default_database')}</label
@@ -63,7 +63,8 @@
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100" <label for="rootUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label >{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
> >
<CopyPasswordField <CopyPasswordField
disabled={!$status.database.isRunning} disabled={!$status.database.isRunning}

4
apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
View File

@@ -7,9 +7,9 @@
</script> </script>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MongoDB</div> <h1 class="title">MongoDB</h1>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label> <label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
<CopyPasswordField <CopyPasswordField

4
apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
View File

@@ -7,9 +7,9 @@
</script> </script>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MySQL</div> <h1 class="title">MySQL</h1>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label >{$t('database.default_database')}</label

4
apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
View File

@@ -7,9 +7,9 @@
</script> </script>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">PostgreSQL</div> <h1 class="title">PostgreSQL</h1>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label >{$t('database.default_database')}</label

4
apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
View File

@@ -7,9 +7,9 @@
</script> </script>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Redis</div> <h1 class="title">Redis</h1>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100" <label for="dbUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.password')} >{$t('forms.password')}

275
apps/ui/src/routes/databases/[id]/__layout.svelte
View File

@@ -62,6 +62,7 @@
import DeleteIcon from '$lib/components/DeleteIcon.svelte'; import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import DatabaseLinks from './_DatabaseLinks.svelte';
const { id } = $page.params; const { id } = $page.params;
$status.database.isPublic = database.settings.isPublic || false; $status.database.isPublic = database.settings.isPublic || false;
@@ -149,104 +150,117 @@
</script> </script>
{#if id !== 'new'} {#if id !== 'new'}
<nav class="nav-side"> <nav class="header justify-center lg:justify-between">
{#if database.type && database.destinationDockerId && database.version} <div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
{#if $status.database.isExited} <div class="flex flex-col">
<a <div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
id="exited" Configuration
href={!$status.database.isRunning ? `/databases/${id}/logs` : null} </div>
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error" <span class="text-xs">{database.name}</span>
sveltekit:prefetch </div>
> <DatabaseLinks {database} />
<svg </div>
xmlns="http://www.w3.org/2000/svg" <div
class="w-6 h-6" class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0"
viewBox="0 0 24 24" >
stroke-width="1.5" {#if database.type && database.destinationDockerId && database.version}
stroke="currentcolor" {#if $status.database.isExited}
fill="none" <a
stroke-linecap="round" id="exited"
stroke-linejoin="round" href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
sveltekit:prefetch
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" class="w-6 h-6"
/> viewBox="0 0 24 24"
<line x1="12" y1="8" x2="12" y2="12" /> stroke-width="1.5"
<line x1="12" y1="16" x2="12.01" y2="16" /> stroke="currentcolor"
</svg> fill="none"
</a> stroke-linecap="round"
<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip> stroke-linejoin="round"
{/if} >
{#if $status.database.initialLoading} <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<button <path
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent" d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
> />
<svg <line x1="12" y1="8" x2="12" y2="12" />
xmlns="http://www.w3.org/2000/svg" <line x1="12" y1="16" x2="12.01" y2="16" />
class="h-6 w-6" </svg>
viewBox="0 0 24 24" </a>
stroke-width="1.5" <Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
stroke="currentColor" {/if}
fill="none" {#if $status.database.initialLoading}
stroke-linecap="round" <button
stroke-linejoin="round" class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <svg
<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" /> xmlns="http://www.w3.org/2000/svg"
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" /> class="h-6 w-6"
<line x1="4.06" y1="11" x2="4.06" y2="11.01" /> viewBox="0 0 24 24"
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" /> stroke-width="1.5"
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" /> stroke="currentColor"
<line x1="11" y1="19.94" x2="11" y2="19.95" /> fill="none"
</svg> stroke-linecap="round"
</button> stroke-linejoin="round"
{:else if $status.database.isRunning} >
<button <path stroke="none" d="M0 0h24v24H0z" fill="none" />
id="stop" <path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
on:click={stopDatabase} <line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
type="submit" <line x1="4.06" y1="11" x2="4.06" y2="11.01" />
disabled={!$appSession.isAdmin} <line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500" <line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
> <line x1="11" y1="19.94" x2="11" y2="19.95" />
<svg </svg>
xmlns="http://www.w3.org/2000/svg" </button>
class="w-6 h-6" {:else if $status.database.isRunning}
viewBox="0 0 24 24" <button
stroke-width="1.5" id="stop"
stroke="currentColor" on:click={stopDatabase}
fill="none" type="submit"
stroke-linecap="round" disabled={!$appSession.isAdmin}
stroke-linejoin="round" class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500 mt-3"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <svg
<rect x="6" y="5" width="4" height="14" rx="1" /> xmlns="http://www.w3.org/2000/svg"
<rect x="14" y="5" width="4" height="14" rx="1" /> class="w-6 h-6"
</svg> viewBox="0 0 24 24"
</button> stroke-width="1.5"
<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip> stroke="currentColor"
{:else} fill="none"
<button stroke-linecap="round"
id="start" stroke-linejoin="round"
on:click={startDatabase} >
type="submit" <path stroke="none" d="M0 0h24v24H0z" fill="none" />
disabled={!$appSession.isAdmin} <rect x="6" y="5" width="4" height="14" rx="1" />
class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500" <rect x="14" y="5" width="4" height="14" rx="1" />
><svg </svg>
xmlns="http://www.w3.org/2000/svg" </button>
class="w-6 h-6" <Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
viewBox="0 0 24 24" {:else}
stroke-width="1.5" <button
stroke="currentColor" id="start"
fill="none" on:click={startDatabase}
stroke-linecap="round" type="submit"
stroke-linejoin="round" disabled={!$appSession.isAdmin}
> class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> ><svg
<path d="M7 4v16l13 -8z" /> xmlns="http://www.w3.org/2000/svg"
</svg> class="w-6 h-6"
</button> viewBox="0 0 24 24"
<Tooltip triggeredBy="#start">{'Start'}</Tooltip> stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" />
</svg>
</button>
<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
{/if}
{/if} {/if}
<div class="border border-stone-700 h-8" /> <div class="border border-stone-700 h-8" />
<a <a
@@ -282,34 +296,6 @@
></a ></a
> >
<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip> <Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
<a
href="/databases/{id}/secrets"
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/databases/${id}/secrets`}
class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/secrets`}
>
<button id="secrets" disabled={$isDeploymentEnabled} class="icons bg-transparent text-sm ">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
/>
<circle cx="12" cy="11" r="1" />
<line x1="12" y1="12" x2="12" y2="14.5" />
</svg></button
></a
>
<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
<div class="border border-stone-700 h-8" /> <div class="border border-stone-700 h-8" />
<a <a
id="databaselogs" id="databaselogs"
@@ -340,29 +326,28 @@
></a ></a
> >
<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip> <Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
{/if} {#if forceDelete}
<button
on:click={() => deleteDatabase(true)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"
>
Force Delete</button
>{:else}
<button
id="delete"
on:click={() => deleteDatabase(false)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button
>
{/if}
{#if forceDelete} <Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
<button </div>
on:click={() => deleteDatabase(true)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"
>
Force Delete</button
>{:else}
<button
id="delete"
on:click={() => deleteDatabase(false)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button
>
{/if}
<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
</nav> </nav>
{/if} {/if}
<slot /> <slot />

6
apps/ui/src/routes/databases/[id]/index.svelte
View File

@@ -48,8 +48,8 @@
}); });
</script> </script>
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold"> <div class="flex items-center space-x-2 p-5 font-bold lg:hidden">
<div class="-mb-5 flex-col"> <div class="flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block"> <div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration Configuration
</div> </div>
@@ -58,7 +58,7 @@
<DatabaseLinks {database} /> <DatabaseLinks {database} />
</div> </div>
<div class="mx-auto max-w-4xl px-6 py-4"> <div class="mx-auto max-w-4xl p-5">
<div class="text-2xl font-bold">Database Usage</div> <div class="text-2xl font-bold">Database Usage</div>
<div class="text-center"> <div class="text-center">
<div class="stat w-64"> <div class="stat w-64">

9
apps/ui/src/routes/databases/[id]/logs/index.svelte
View File

@@ -134,7 +134,12 @@
</button> </button>
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip> <Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
</div> </div>
<div <div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
{#each logs as log}
<p>{log + '\n'}</p>
{/each}
</div>
<!-- <div
class="font-mono w-full 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" class="font-mono w-full 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} bind:this={logsEl}
on:scroll={detect} on:scroll={detect}
@@ -144,7 +149,7 @@
{log + '\n'} {log + '\n'}
{/each} {/each}
</div> </div>
</div> </div> -->
</div> </div>
{/if} {/if}
</div> </div>

10
apps/ui/src/routes/databases/_index.svelte
View File

@@ -42,8 +42,8 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header">
<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div> <h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases"> <button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
<svg <svg
@@ -61,9 +61,9 @@
> >
</button> </button>
{/if} {/if}
</div> </nav>
<br />
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16"> <div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
{#if !databases || ownDatabases.length === 0} {#if !databases || ownDatabases.length === 0}
<div class="flex-col"> <div class="flex-col">
<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div> <div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>

59
apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
View File

@@ -141,40 +141,37 @@
} }
</script> </script>
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5"> <div class="grid gap-4 grid-cols-2 grid-rows-1">
<div class="title">{$t('forms.configuration')}</div> <button
{#if $appSession.isAdmin} type="submit"
<button class="btn btn-sm w-full"
type="submit" class:bg-destinations={!loading.save}
class="btn btn-sm" class:loading={loading.save}
class:bg-destinations={!loading.save} disabled={loading.save}
class:loading={loading.save} >{$t('forms.save')}
disabled={loading.save} </button>
>{$t('forms.save')} <button
</button> class="btn btn-sm w-full"
<button class:loading={loading.restart}
class="btn btn-sm" class:bg-error={!loading.restart}
class:loading={loading.restart} disabled={loading.restart}
class:bg-error={!loading.restart} on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
disabled={loading.restart} >
on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
>
{/if}
</div> </div>
<div class="grid lg:grid-cols-2 items-center px-10 "> <div class="grid gap-4 grid-cols-2 auto-rows-max mt-10 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label>
<input <input
class="w-full"
name="name" name="name"
placeholder={$t('forms.name')} placeholder={$t('forms.name')}
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
bind:value={destination.name} bind:value={destination.name}
/> />
</div> <label for="engine" class="text-base font-bold text-stone-100 w-full"
>{$t('forms.engine')}</label
<div class="grid lg:grid-cols-2 items-center px-10"> >
<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
<CopyPasswordField <CopyPasswordField
id="engine" id="engine"
readonly readonly
@@ -183,8 +180,6 @@
placeholder="{$t('forms.eg')}: /var/run/docker.sock" placeholder="{$t('forms.eg')}: /var/run/docker.sock"
value={destination.engine} value={destination.engine}
/> />
</div>
<div class="grid lg:grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label> <label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
<CopyPasswordField <CopyPasswordField
id="network" id="network"
@@ -194,9 +189,7 @@
placeholder="{$t('forms.default')}: coolify" placeholder="{$t('forms.default')}: coolify"
value={destination.network} value={destination.network}
/> />
</div> {#if $appSession.teamId === '0'}
{#if $appSession.teamId === '0'}
<div class="grid lg:grid-cols-2 items-center px-10">
<Setting <Setting
id="changeProxySetting" id="changeProxySetting"
loading={loading.proxy} loading={loading.proxy}
@@ -210,6 +203,6 @@
: '' : ''
}`} }`}
/> />
</div> {/if}
{/if} </div>
</form> </form>

12
apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
View File

@@ -31,9 +31,9 @@
<div class="flex justify-center px-6 pb-8"> <div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex items-center space-x-2 pb-5"> <div class="flex items-start lg:items-center space-x-0 lg:space-x-4 pb-5 flex-col space-y-4 lg:space-y-0">
<div class="title font-bold">{$t('forms.configuration')}</div> <div class="title font-bold">{$t('forms.configuration')}</div>
<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading} <button type="submit" class="btn btn-sm bg-destinations w-full lg:w-fit" class:loading disabled={loading}
>{loading >{loading
? payload.isCoolifyProxyUsed ? payload.isCoolifyProxyUsed
? $t('destination.new.saving_and_configuring_proxy') ? $t('destination.new.saving_and_configuring_proxy')
@@ -41,12 +41,12 @@
: $t('forms.save')}</button : $t('forms.save')}</button
> >
</div> </div>
<div class="mt-2 grid grid-cols-2 items-center px-10"> <div class="mt-2 grid grid-cols-2 items-center lg:pl-10">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} /> <input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label> <label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
<input <input
required required
@@ -55,7 +55,7 @@
bind:value={payload.engine} bind:value={payload.engine}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label> <label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
<input <input
required required
@@ -65,7 +65,7 @@
/> />
</div> </div>
{#if $appSession.teamId === '0'} {#if $appSession.teamId === '0'}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<Setting <Setting
id="changeProxySetting" id="changeProxySetting"
bind:setting={payload.isCoolifyProxyUsed} bind:setting={payload.isCoolifyProxyUsed}

16
apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
View File

@@ -38,9 +38,9 @@
</div> </div>
<div class="flex justify-center px-6 pb-8"> <div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex items-center space-x-2 pb-5"> <div class="flex items-start lg:items-center space-x-0 lg:space-x-4 pb-5 flex-col lg:flex-row space-y-4 lg:space-y-0">
<div class="title font-bold">{$t('forms.configuration')}</div> <div class="title font-bold">{$t('forms.configuration')}</div>
<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading} <button type="submit" class="btn btn-sm bg-destinations w-full lg:w-fit" class:loading disabled={loading}
>{loading >{loading
? payload.isCoolifyProxyUsed ? payload.isCoolifyProxyUsed
? $t('destination.new.saving_and_configuring_proxy') ? $t('destination.new.saving_and_configuring_proxy')
@@ -48,12 +48,12 @@
: $t('forms.save')}</button : $t('forms.save')}</button
> >
</div> </div>
<div class="mt-2 grid grid-cols-2 items-center px-10"> <div class="mt-2 grid grid-cols-2 items-center lg:pl-10">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} /> <input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<label for="remoteIpAddress" class="text-base font-bold text-stone-100" <label for="remoteIpAddress" class="text-base font-bold text-stone-100"
>{$t('forms.ip_address')}</label >{$t('forms.ip_address')}</label
> >
@@ -65,7 +65,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<label for="remoteUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label> <label for="remoteUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
<input <input
required required
@@ -75,7 +75,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<label for="remotePort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label> <label for="remotePort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
<input <input
required required
@@ -84,7 +84,7 @@
bind:value={payload.remotePort} bind:value={payload.remotePort}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label> <label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
<input <input
required required
@@ -93,7 +93,7 @@
bind:value={payload.network} bind:value={payload.network}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:pl-10">
<Setting <Setting
id="isCoolifyProxyUsed" id="isCoolifyProxyUsed"
bind:setting={payload.isCoolifyProxyUsed} bind:setting={payload.isCoolifyProxyUsed}

9
apps/ui/src/routes/destinations/_index.svelte
View File

@@ -36,8 +36,8 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header">
<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div> <h1 class="mr-4 text-2xl font-bold">{$t('index.destinations')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations"> <a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
<svg <svg
@@ -55,8 +55,9 @@
> >
</a> </a>
{/if} {/if}
</div> </nav>
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16"> <br />
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
{#if !destinations || ownDestinations.length === 0} {#if !destinations || ownDestinations.length === 0}
<div class="flex-col"> <div class="flex-col">
<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div> <div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>

7
apps/ui/src/routes/iam/index.svelte
View File

@@ -106,8 +106,8 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header">
<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div> <h1 class="mr-4 text-2xl tracking-tight font-bold">Identity and Access Management</h1>
<button on:click={newTeam} class="btn btn-square btn-sm bg-iam"> <button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
<svg <svg
class="h-6 w-6" class="h-6 w-6"
@@ -123,7 +123,8 @@
/></svg /></svg
> >
</button> </button>
</div> </nav>
<br />
{#if invitations.length > 0} {#if invitations.length > 0}
<div class="mx-auto max-w-4xl px-6 py-4"> <div class="mx-auto max-w-4xl px-6 py-4">

13
apps/ui/src/routes/index.svelte
View File

@@ -276,14 +276,13 @@
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header p-7">
<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div> <h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)} {#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
<NewResource /> <NewResource />
{/if} {/if}
</nav>
</div> <div class="container lg:mx-auto lg:p-0 px-8 pt-5">
<div class="container lg:mx-auto lg:p-0 px-8 p-5">
<!-- {#if $appSession.teamId === '0'} <!-- {#if $appSession.teamId === '0'}
<Usage /> <Usage />
{/if} --> {/if} -->
@@ -319,8 +318,8 @@
on:input={() => doSearch()} on:input={() => doSearch()}
/> />
</div> </div>
<label for="search" class="label w-full"> <label for="search" class="label w-full mt-3">
<span class="label-text text-xs flex flex-wrap gap-2 items-center"> <span class="label-text text-xs flex flex-wrap gap-2 items-center">
<button <button
class:bg-coollabs={$search === '!notmine'} class:bg-coollabs={$search === '!notmine'}
class="badge badge-lg text-white text-xs rounded" class="badge badge-lg text-white text-xs rounded"

6
apps/ui/src/routes/servers/index.svelte
View File

@@ -29,10 +29,10 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <div class="header">
<div class="mr-4 text-2xl tracking-tight">Servers</div> <h1 class="text-2xl font-bold">Servers</h1>
</div> </div>
<div class="container lg:mx-auto lg:p-0 px-8 p-5"> <div class="container lg:mx-auto lg:p-0 px-8 p-5 lg:pt-20">
{#if servers.length > 0} {#if servers.length > 0}
<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 p-4"> <div class="grid grid-col gap-8 auto-cols-max grid-cols-1 p-4">
{#each servers as server} {#each servers as server}

3
apps/ui/src/routes/services/[id]/_Secret.svelte
View File

@@ -50,6 +50,8 @@
<td> <td>
<input <input
style="min-width: 350px !important;"
id={isNewSecret ? 'secretName' : 'secretNameNew'} id={isNewSecret ? 'secretName' : 'secretNameNew'}
bind:value={name} bind:value={name}
required required
@@ -67,6 +69,7 @@
bind:value bind:value
required required
placeholder="J$#@UIO%HO#$U%H" placeholder="J$#@UIO%HO#$U%H"
inputStyle="min-width: 350px; !important"
/> />
</td> </td>

24
apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
View File

@@ -10,8 +10,8 @@
<div class="title">Appwrite</div> <div class="title">Appwrite</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="opensslKeyV1">Encryption Key</label> <label class="text-base font-bold text-stone-100" for="opensslKeyV1">Encryption Key</label>
<CopyPasswordField <CopyPasswordField
name="opensslKeyV1" name="opensslKeyV1"
id="opensslKeyV1" id="opensslKeyV1"
@@ -21,8 +21,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="executorSecret">Executor Secret</label> <label class="text-base font-bold text-stone-100" for="executorSecret">Executor Secret</label>
<CopyPasswordField <CopyPasswordField
name="executorSecret" name="executorSecret"
id="executorSecret" id="executorSecret"
@@ -37,7 +37,7 @@
<div class="title">Redis</div> <div class="title">Redis</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="redisPassword">Password</label> <label class="text-base font-bold text-stone-100" for="redisPassword">Password</label>
<CopyPasswordField <CopyPasswordField
name="redisPassword" name="redisPassword"
id="redisPassword" id="redisPassword"
@@ -53,7 +53,7 @@
</div> </div>
<!-- <div class="grid grid-cols-2 items-center px-10"> <!-- <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbHost">MariaDB Host</label> <label class="text-base font-bold text-stone-100" for="mariadbHost">MariaDB Host</label>
<CopyPasswordField <CopyPasswordField
name="mariadbHost" name="mariadbHost"
id="mariadbHost" id="mariadbHost"
@@ -63,7 +63,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbPort">MariaDB Port</label> <label class="text-base font-bold text-stone-100" for="mariadbPort">MariaDB Port</label>
<CopyPasswordField <CopyPasswordField
name="mariadbPort" name="mariadbPort"
id="mariadbPort" id="mariadbPort"
@@ -73,7 +73,7 @@
/> />
</div> --> </div> -->
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="mariadbUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbUser" name="mariadbUser"
id="mariadbUser" id="mariadbUser"
@@ -83,7 +83,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="mariadbPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbPassword" id="mariadbPassword"
isPasswordField isPasswordField
@@ -94,7 +94,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbRootUser">Root User</label> <label class="text-base font-bold text-stone-100" for="mariadbRootUser">Root User</label>
<CopyPasswordField <CopyPasswordField
name="mariadbRootUser" name="mariadbRootUser"
id="mariadbRootUser" id="mariadbRootUser"
@@ -104,7 +104,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbRootUserPassword">Root Password</label> <label class="text-base font-bold text-stone-100" for="mariadbRootUserPassword">Root Password</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUserPassword" id="mariadbRootUserPassword"
isPasswordField isPasswordField
@@ -115,7 +115,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center px-10">
<label for="mariadbDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="mariadbDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbDatabase" name="mariadbDatabase"
id="mariadbDatabase" id="mariadbDatabase"

60
apps/ui/src/routes/services/[id]/_Services/_Fider.svelte
View File

@@ -21,8 +21,8 @@
<div class="title">Fider</div> <div class="title">Fider</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="jwtSecret">JWT Secret</label> <label class="text-base font-bold text-stone-100" for="jwtSecret">JWT Secret</label>
<CopyPasswordField <CopyPasswordField
name="jwtSecret" name="jwtSecret"
id="jwtSecret" id="jwtSecret"
@@ -33,9 +33,10 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailNoreply">Noreply Email</label> <label class="text-base font-bold text-stone-100" for="emailNoreply">Noreply Email</label>
<input <input
class="w-full"
name="emailNoreply" name="emailNoreply"
id="emailNoreply" id="emailNoreply"
type="email" type="email"
@@ -49,8 +50,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Email</div> <div class="title">Email</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailMailgunApiKey">Mailgun API Key</label> <label class="text-base font-bold text-stone-100" for="emailMailgunApiKey">Mailgun API Key</label>
<CopyPasswordField <CopyPasswordField
name="emailMailgunApiKey" name="emailMailgunApiKey"
id="emailMailgunApiKey" id="emailMailgunApiKey"
@@ -62,9 +63,10 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailMailgunDomain">Mailgun Domain</label> <label class="text-base font-bold text-stone-100" for="emailMailgunDomain">Mailgun Domain</label>
<input <input
class="w-full"
name="emailMailgunDomain" name="emailMailgunDomain"
id="emailMailgunDomain" id="emailMailgunDomain"
readonly={readOnly} readonly={readOnly}
@@ -73,8 +75,8 @@
placeholder="{$t('forms.eg')}: yourdomain.com" placeholder="{$t('forms.eg')}: yourdomain.com"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailMailgunRegion">Mailgun Region</label> <label class="text-base font-bold text-stone-100" for="emailMailgunRegion">Mailgun Region</label>
<div class="custom-select-wrapper"> <div class="custom-select-wrapper">
<Select <Select
id="baseBuildImages" id="baseBuildImages"
@@ -87,12 +89,13 @@
</div> </div>
</div> </div>
<div class="flex space-x-1 py-5 px-10 font-bold"> <div class="flex space-x-1 py-5 lg:px-10 font-bold">
<div class="text-lg">Or</div> <div class="text-lg">Or</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpHost">SMTP Host</label> <label class="text-base font-bold text-stone-100" for="emailSmtpHost">SMTP Host</label>
<input <input
class="w-full"
name="emailSmtpHost" name="emailSmtpHost"
id="emailSmtpHost" id="emailSmtpHost"
readonly={readOnly} readonly={readOnly}
@@ -101,9 +104,10 @@
placeholder="{$t('forms.eg')}: smtp.yourdomain.com" placeholder="{$t('forms.eg')}: smtp.yourdomain.com"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpPort">SMTP Port</label> <label class="text-base font-bold text-stone-100" for="emailSmtpPort">SMTP Port</label>
<input <input
class="w-full"
name="emailSmtpPort" name="emailSmtpPort"
id="emailSmtpPort" id="emailSmtpPort"
readonly={readOnly} readonly={readOnly}
@@ -112,9 +116,10 @@
placeholder="{$t('forms.eg')}: 587" placeholder="{$t('forms.eg')}: 587"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpUser">SMTP User</label> <label class="text-base font-bold text-stone-100" for="emailSmtpUser">SMTP User</label>
<input <input
class="w-full"
name="emailSmtpUser" name="emailSmtpUser"
id="emailSmtpUser" id="emailSmtpUser"
readonly={readOnly} readonly={readOnly}
@@ -123,8 +128,8 @@
placeholder="{$t('forms.eg')}: user@yourdomain.com" placeholder="{$t('forms.eg')}: user@yourdomain.com"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpPassword">SMTP Password</label> <label class="text-base font-bold text-stone-100" for="emailSmtpPassword">SMTP Password</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpPassword" name="emailSmtpPassword"
id="emailSmtpPassword" id="emailSmtpPassword"
@@ -135,9 +140,10 @@
placeholder="{$t('forms.eg')}: s0m3p4ssw0rd" placeholder="{$t('forms.eg')}: s0m3p4ssw0rd"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpEnableStartTls">SMTP Start TLS</label> <label class="text-base font-bold text-stone-100" for="emailSmtpEnableStartTls">SMTP Start TLS</label>
<input <input
class="w-full"
name="emailSmtpEnableStartTls" name="emailSmtpEnableStartTls"
id="emailSmtpEnableStartTls" id="emailSmtpEnableStartTls"
readonly={readOnly} readonly={readOnly}
@@ -150,8 +156,8 @@
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -160,8 +166,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -171,8 +177,8 @@
value={service.fider.postgresqlPassword} value={service.fider.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"

30
apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
View File

@@ -11,9 +11,10 @@
Ghost <Explainer explanation="You can change these values in the Ghost admin panel." /> Ghost <Explainer explanation="You can change these values in the Ghost admin panel." />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="email">{$t('forms.default_email_address')}</label> <label class="text-base font-bold text-stone-100" for="email">{$t('forms.default_email_address')}</label>
<input <input
class="w-full"
name="email" name="email"
id="email" id="email"
disabled disabled
@@ -23,8 +24,8 @@
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultPassword">{$t('forms.default_password')}</label> <label class="text-base font-bold text-stone-100" for="defaultPassword">{$t('forms.default_password')}</label>
<CopyPasswordField <CopyPasswordField
id="defaultPassword" id="defaultPassword"
isPasswordField isPasswordField
@@ -37,8 +38,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MariaDB</div> <div class="title">MariaDB</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="mariadbUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbUser" name="mariadbUser"
id="mariadbUser" id="mariadbUser"
@@ -47,8 +48,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="mariadbPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbPassword" id="mariadbPassword"
isPasswordField isPasswordField
@@ -58,9 +59,10 @@
value={service.ghost.mariadbPassword} value={service.ghost.mariadbPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="mariadbDatabase">{$t('index.database')}</label>
<input <input
class="w-full"
name="mariadbDatabase" name="mariadbDatabase"
id="mariadbDatabase" id="mariadbDatabase"
required required
@@ -70,8 +72,8 @@
placeholder="{$t('forms.eg')}: ghost_db" placeholder="{$t('forms.eg')}: ghost_db"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbRootUser">{$t('forms.root_db_user')}</label> <label class="text-base font-bold text-stone-100" for="mariadbRootUser">{$t('forms.root_db_user')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUser" id="mariadbRootUser"
readonly readonly
@@ -80,8 +82,8 @@
value={service.ghost.mariadbRootUser} value={service.ghost.mariadbRootUser}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label> <label class="text-base font-bold text-stone-100" for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUserPassword" id="mariadbRootUserPassword"
isPasswordField isPasswordField

62
apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
View File

@@ -53,7 +53,7 @@
<div class="title">GlitchTip</div> <div class="title">GlitchTip</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<Setting <Setting
id="enableOpenUserRegistration" id="enableOpenUserRegistration"
bind:setting={service.glitchTip.enableOpenUserRegistration} bind:setting={service.glitchTip.enableOpenUserRegistration}
@@ -74,7 +74,7 @@
<div class="flex space-x-1 py-2 font-bold"> <div class="flex space-x-1 py-2 font-bold">
<div class="subtitle">Email settings</div> <div class="subtitle">Email settings</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<Setting <Setting
id="emailSmtpUseTls" id="emailSmtpUseTls"
bind:setting={service.glitchTip.emailSmtpUseTls} bind:setting={service.glitchTip.emailSmtpUseTls}
@@ -86,7 +86,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<Setting <Setting
id="emailSmtpUseSsl" id="emailSmtpUseSsl"
bind:setting={service.glitchTip.emailSmtpUseSsl} bind:setting={service.glitchTip.emailSmtpUseSsl}
@@ -97,8 +97,8 @@
description={''} description={''}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultEmailFrom">Default Email From</label> <label class="text-base font-bold text-stone-100" for="defaultEmailFrom">Default Email From</label>
<CopyPasswordField <CopyPasswordField
required required
name="defaultEmailFrom" name="defaultEmailFrom"
@@ -107,8 +107,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpHost">SMTP Host</label> <label class="text-base font-bold text-stone-100" for="emailSmtpHost">SMTP Host</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpHost" name="emailSmtpHost"
id="emailSmtpHost" id="emailSmtpHost"
@@ -116,8 +116,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpPort">SMTP Port</label> <label class="text-base font-bold text-stone-100" for="emailSmtpPort">SMTP Port</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpPort" name="emailSmtpPort"
id="emailSmtpPort" id="emailSmtpPort"
@@ -125,8 +125,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpUser">SMTP User</label> <label class="text-base font-bold text-stone-100" for="emailSmtpUser">SMTP User</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpUser" name="emailSmtpUser"
id="emailSmtpUser" id="emailSmtpUser"
@@ -134,8 +134,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailSmtpPassword">SMTP Password</label> <label class="text-base font-bold text-stone-100" for="emailSmtpPassword">SMTP Password</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpPassword" name="emailSmtpPassword"
id="emailSmtpPassword" id="emailSmtpPassword"
@@ -144,8 +144,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="emailBackend">Email Backend</label> <label class="text-base font-bold text-stone-100" for="emailBackend">Email Backend</label>
<CopyPasswordField <CopyPasswordField
name="emailBackend" name="emailBackend"
id="emailBackend" id="emailBackend"
@@ -153,8 +153,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mailgunApiKey">Mailgun API Key</label> <label class="text-base font-bold text-stone-100" for="mailgunApiKey">Mailgun API Key</label>
<CopyPasswordField <CopyPasswordField
name="mailgunApiKey" name="mailgunApiKey"
id="mailgunApiKey" id="mailgunApiKey"
@@ -162,8 +162,8 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="sendgridApiKey">SendGrid API Key</label> <label class="text-base font-bold text-stone-100" for="sendgridApiKey">SendGrid API Key</label>
<CopyPasswordField <CopyPasswordField
name="sendgridApiKey" name="sendgridApiKey"
id="sendgridApiKey" id="sendgridApiKey"
@@ -175,8 +175,8 @@
<div class="subtitle">Default User & Superuser</div> <div class="subtitle">Default User & Superuser</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultEmail">{$t('forms.email')}</label> <label class="text-base font-bold text-stone-100" for="defaultEmail">{$t('forms.email')}</label>
<CopyPasswordField <CopyPasswordField
name="defaultEmail" name="defaultEmail"
id="defaultEmail" id="defaultEmail"
@@ -185,8 +185,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultUsername">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="defaultUsername">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="defaultUsername" name="defaultUsername"
id="defaultUsername" id="defaultUsername"
@@ -195,8 +195,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="defaultPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
name="defaultPassword" name="defaultPassword"
id="defaultPassword" id="defaultPassword"
@@ -211,8 +211,8 @@
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -221,8 +221,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -232,8 +232,8 @@
bind:value={service.glitchTip.postgresqlPassword} bind:value={service.glitchTip.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"

16
apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte
View File

@@ -8,8 +8,8 @@
<div class="title">Hasura</div> <div class="title">Hasura</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="graphQLAdminPassword">GraphQL Admin Password</label> <label class="text-base font-bold text-stone-100" for="graphQLAdminPassword">GraphQL Admin Password</label>
<CopyPasswordField <CopyPasswordField
name="graphQLAdminPassword" name="graphQLAdminPassword"
id="graphQLAdminPassword" id="graphQLAdminPassword"
@@ -24,8 +24,8 @@
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -34,8 +34,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -45,8 +45,8 @@
value={service.hasura.postgresqlPassword} value={service.hasura.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"

4
apps/ui/src/routes/services/[id]/_Services/_MeiliSearch.svelte
View File

@@ -7,8 +7,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MeiliSearch</div> <div class="title">MeiliSearch</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="masterKey">{$t('forms.admin_api_key')}</label> <label class="text-base font-bold text-stone-100" for="masterKey">{$t('forms.admin_api_key')}</label>
<CopyPasswordField <CopyPasswordField
id="masterKey" id="masterKey"
isPasswordField isPasswordField

13
apps/ui/src/routes/services/[id]/_Services/_MinIO.svelte
View File

@@ -8,9 +8,10 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MinIO</div> <div class="title">MinIO</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="rootUser">{$t('forms.root_user')}</label> <label class="text-base font-bold text-stone-100" for="rootUser">{$t('forms.root_user')}</label>
<input <input
class="w-full"
name="rootUser" name="rootUser"
id="rootUser" id="rootUser"
placeholder={$t('forms.username')} placeholder={$t('forms.username')}
@@ -19,8 +20,8 @@
readonly readonly
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="rootUserPassword">{$t('forms.roots_password')}</label> <label class="text-base font-bold text-stone-100" for="rootUserPassword">{$t('forms.roots_password')}</label>
<CopyPasswordField <CopyPasswordField
id="rootUserPassword" id="rootUserPassword"
isPasswordField isPasswordField
@@ -31,8 +32,8 @@
/> />
</div> </div>
{#if !service.minio.apiFqdn} {#if !service.minio.apiFqdn}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="publicPort">{$t('forms.api_port')}</label> <label class="text-base font-bold text-stone-100" for="publicPort">{$t('forms.api_port')}</label>
<input <input
name="publicPort" name="publicPort"
id="publicPort" id="publicPort"

34
apps/ui/src/routes/services/[id]/_Services/_Moodle.svelte
View File

@@ -8,9 +8,10 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Moodle</div> <div class="title">Moodle</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="email">{$t('forms.default_email_address')}</label> <label class="text-base font-bold text-stone-100" for="email">{$t('forms.default_email_address')}</label>
<input <input
class="w-full"
name="email" name="email"
id="email" id="email"
required required
@@ -20,8 +21,8 @@
value={service.moodle.defaultEmail} value={service.moodle.defaultEmail}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultUsername">Default Username</label> <label class="text-base font-bold text-stone-100" for="defaultUsername">Default Username</label>
<CopyPasswordField <CopyPasswordField
id="defaultUsername" id="defaultUsername"
required required
@@ -31,8 +32,8 @@
value={service.moodle.defaultUsername} value={service.moodle.defaultUsername}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="defaultPassword">{$t('forms.default_password')}</label> <label class="text-base font-bold text-stone-100" for="defaultPassword">{$t('forms.default_password')}</label>
<CopyPasswordField <CopyPasswordField
id="defaultPassword" id="defaultPassword"
isPasswordField isPasswordField
@@ -46,8 +47,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MariaDB</div> <div class="title">MariaDB</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="mariadbUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbUser" name="mariadbUser"
id="mariadbUser" id="mariadbUser"
@@ -56,8 +57,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="mariadbPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbPassword" id="mariadbPassword"
isPasswordField isPasswordField
@@ -67,9 +68,10 @@
value={service.moodle.mariadbPassword} value={service.moodle.mariadbPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="mariadbDatabase">{$t('index.database')}</label>
<input <input
class="w-full"
name="mariadbDatabase" name="mariadbDatabase"
id="mariadbDatabase" id="mariadbDatabase"
required required
@@ -79,8 +81,8 @@
placeholder="{$t('forms.eg')}: moodle_db" placeholder="{$t('forms.eg')}: moodle_db"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbRootUser">{$t('forms.root_db_user')}</label> <label class="text-base font-bold text-stone-100" for="mariadbRootUser">{$t('forms.root_db_user')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUser" id="mariadbRootUser"
readonly readonly
@@ -89,8 +91,8 @@
value={service.moodle.mariadbRootUser} value={service.moodle.mariadbRootUser}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label> <label class="text-base font-bold text-stone-100" for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUserPassword" id="mariadbRootUserPassword"
isPasswordField isPasswordField

30
apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
View File

@@ -10,13 +10,14 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Plausible Analytics</div> <div class="title">Plausible Analytics</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="scriptName" <label class="text-base font-bold text-stone-100" for="scriptName"
>Script Name <Explainer >Script Name <Explainer
explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers." explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
/></label /></label
> >
<input <input
class="w-full"
name="scriptName" name="scriptName"
id="scriptName" id="scriptName"
readonly={!$appSession.isAdmin && !$status.service.isRunning} readonly={!$appSession.isAdmin && !$status.service.isRunning}
@@ -26,9 +27,10 @@
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="email">{$t('forms.email')}</label> <label class="text-base font-bold text-stone-100" for="email">{$t('forms.email')}</label>
<input <input
class="w-full"
name="email" name="email"
id="email" id="email"
disabled={readOnly} disabled={readOnly}
@@ -38,8 +40,8 @@
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="username">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="username">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="username" name="username"
id="username" id="username"
@@ -50,8 +52,8 @@
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="password">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="password">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="password" id="password"
isPasswordField isPasswordField
@@ -64,8 +66,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlUser">{$t('forms.username')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -74,8 +76,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -85,8 +87,8 @@
value={service.plausibleAnalytics.postgresqlPassword} value={service.plausibleAnalytics.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"

8
apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
View File

@@ -8,8 +8,8 @@
<div class="title">SearXNG</div> <div class="title">SearXNG</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="secretKey">Secret Key</label> <label class="text-base font-bold text-stone-100" for="secretKey">Secret Key</label>
<CopyPasswordField <CopyPasswordField
name="secretKey" name="secretKey"
id="secretKey" id="secretKey"
@@ -23,8 +23,8 @@
<div class="title">Redis</div> <div class="title">Redis</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="redisPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="redisPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
name="redisPassword" name="redisPassword"
id="redisPassword" id="redisPassword"

374
apps/ui/src/routes/services/[id]/_Services/_Services.svelte
View File

@@ -180,9 +180,10 @@
<div class="mx-auto max-w-4xl px-6 pb-12"> <div class="mx-auto max-w-4xl px-6 pb-12">
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5"> <div class="flex flex-col lg:flex-row justify-between lg:space-x-1 space-y-3 pb-5 items-center">
<div class="title">{$t('general')}</div> <div class="title">{$t('general')}</div>
{#if $appSession.isAdmin} <div class="flex flex-row space-y-3 items-center">
{#if $appSession.isAdmin}
<button <button
type="submit" type="submit"
class="btn btn-sm" class="btn btn-sm"
@@ -215,213 +216,194 @@
class:loading={loading.cleanup}>Cleanup Unnecessary Database Logs</button class:loading={loading.cleanup}>Cleanup Unnecessary Database Logs</button
> >
{/if} {/if}
</div>
</div> </div>
<div class="grid grid-flow-row gap-2"> {#if service.type === 'minio' && !service.minio.apiFqdn && $status.service.isRunning}
{#if service.type === 'minio' && !service.minio.apiFqdn && $status.service.isRunning} <div class="py-5">
<div class="text-center"> <span class="font-bold text-red-500">IMPORTANT!</span> There was a small modification with Minio
<span class="font-bold text-red-500">IMPORTANT!</span> There was a small modification with in the latest version of Coolify. Now you can separate the Console URL from the API URL, so you
Minio in the latest version of Coolify. Now you can separate the Console URL from the API URL, could use both through SSL. But this proccess cannot be done automatically, so you have to stop
so you could use both through SSL. But this proccess cannot be done automatically, so you have your Minio instance, configure the new domain and start it back. Sorry for any inconvenience.
to stop your Minio instance, configure the new domain and start it back. Sorry for any inconvenience.
</div>
{/if}
<div class="mt-2 grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<div>
<input
readonly={!$appSession.isAdmin}
name="name"
id="name"
bind:value={service.name}
required
/>
</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> {/if}
<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
<a
href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading
? `/services/${id}/configuration/version?from=/services/${id}`
: ''}
class="no-underline"
>
<input
value={service.version}
id="service"
readonly
disabled={$status.service.isRunning || $status.service.initialLoading}
class:cursor-pointer={!$status.service.isRunning}
/></a
>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="destination" class="text-base font-bold text-stone-100"
>{$t('application.destination')}</label
>
<div>
{#if service.destinationDockerId}
<div class="no-underline">
<input
value={service.destinationDocker.name}
id="destination"
disabled
class="bg-transparent "
/>
</div>
{/if}
</div>
</div>
{#if service.type === 'minio'}
<div class="grid grid-cols-2 px-10">
<div class="flex-col ">
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Console URL</label>
</div>
<CopyPasswordField <div class="grid gap-4 grid-cols-2 grid-rows-1 lg:px-10">
placeholder="eg: https://console.min.io" <label class="text-base font-bold text-stone-100" for="name" >{$t('forms.name')}</label>
readonly={isDisabled} <div>
disabled={isDisabled} <input
name="fqdn" readonly={!$appSession.isAdmin}
id="fqdn" name="name"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$" id="name"
bind:value={service.fqdn} bind:value={service.name}
required required
/>
</div>
<div class="grid grid-cols-2 px-10">
<div class="flex-col ">
<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
>API URL <Explainer explanation={$t('application.https_explainer')} /></label
>
</div>
<CopyPasswordField
placeholder="eg: https://min.io"
readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={isDisabled}
name="apiFqdn"
id="apiFqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
bind:value={service.minio.apiFqdn}
required
/>
</div>
{:else}
<div class="grid grid-cols-2 px-10">
<div class="flex-col ">
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
>{$t('application.url_fqdn')}
<Explainer explanation={$t('application.https_explainer')} />
</label>
</div>
<CopyPasswordField
placeholder="eg: https://analytics.coollabs.io"
readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={!$appSession.isAdmin ||
$status.service.isRunning ||
$status.service.initialLoading}
name="fqdn"
id="fqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
bind:value={service.fqdn}
required
/>
</div>
{/if}
{#if forceSave}
<div class="flex-col space-y-2 pt-4 text-center">
{#if isNonWWWDomainOK}
<button
class="btn btn-sm bg-green-600 hover:bg-green-500"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
>
{:else}
<button
class="btn btn-sm bg-red-600 hover:bg-red-500"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
>
{/if}
{#if dualCerts}
{#if isWWWDomainOK}
<button
class="btn btn-sm bg-green-600 hover:bg-green-500"
on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
>
{:else}
<button
class="btn btn-sm bg-red-600 hover:bg-red-500"
on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
>
{/if}
{/if}
</div>
{/if}
<div class="grid grid-cols-2 items-center px-10">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <label class="text-base font-bold text-stone-100" for="version">Version / Tag</label>
<label for="exposePort" class="text-base font-bold text-stone-100" <a
>Exposed Port <Explainer href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'} ? `/services/${id}/configuration/version?from=/services/${id}`
/></label : ''}
> class="no-underline"
>
<input <input
value={service.version}
id="service"
readonly
disabled={$status.service.isRunning || $status.service.initialLoading}
class:cursor-pointer={!$status.service.isRunning}
/></a
>
<label class="text-base font-bold text-stone-100" for="destination"
>{$t('application.destination')}</label
>
<div>
{#if service.destinationDockerId}
<div class="no-underline">
<input
value={service.destinationDocker.name}
id="destination"
disabled
class="bg-transparent "
/>
</div>
{/if}
</div>
{#if service.type === 'minio'}
<label class="text-base font-bold text-stone-100" for="fqdn">Console URL</label>
<CopyPasswordField
placeholder="eg: https://console.min.io"
readonly={isDisabled}
disabled={isDisabled}
name="fqdn"
id="fqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
bind:value={service.fqdn}
required
/>
<label class="text-base font-bold text-stone-100" for="apiFqdn"
>API URL <Explainer explanation={$t('application.https_explainer')} /></label
>
<CopyPasswordField
placeholder="eg: https://min.io"
readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={isDisabled}
name="apiFqdn"
id="apiFqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
bind:value={service.minio.apiFqdn}
required
/>
{:else}
<label class="text-base font-bold text-stone-100" for="fqdn"
>{$t('application.url_fqdn')}
<Explainer explanation={$t('application.https_explainer')} />
</label>
<CopyPasswordField
placeholder="eg: https://analytics.coollabs.io"
readonly={!$appSession.isAdmin && !$status.service.isRunning} readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={!$appSession.isAdmin || disabled={!$appSession.isAdmin ||
$status.service.isRunning || $status.service.isRunning ||
$status.service.initialLoading} $status.service.initialLoading}
name="exposePort" name="fqdn"
id="exposePort" id="fqdn"
bind:value={service.exposePort} pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
placeholder="12345" bind:value={service.fqdn}
required
/> />
</div>
{#if service.type === 'plausibleanalytics'}
<PlausibleAnalytics bind:service {readOnly} />
{:else if service.type === 'minio'}
<MinIo {service} />
{:else if service.type === 'vscodeserver'}
<VsCodeServer {service} />
{:else if service.type === 'wordpress'}
<Wordpress bind:service {readOnly} {settings} />
{:else if service.type === 'ghost'}
<Ghost bind:service {readOnly} />
{:else if service.type === 'meilisearch'}
<MeiliSearch bind:service />
{:else if service.type === 'umami'}
<Umami bind:service />
{:else if service.type === 'hasura'}
<Hasura bind:service />
{:else if service.type === 'fider'}
<Fider bind:service {readOnly} />
{:else if service.type === 'appwrite'}
<Appwrite bind:service {readOnly} />
{:else if service.type === 'moodle'}
<Moodle bind:service {readOnly} />
{:else if service.type === 'glitchTip'}
<GlitchTip bind:service />
{:else if service.type === 'searxng'}
<Searxng bind:service />
{:else if service.type === 'weblate'}
<Weblate bind:service />
{:else if service.type === 'taiga'}
<Taiga bind:service />
{/if} {/if}
</div> </div>
{#if forceSave}
<div class="flex-col space-y-2 pt-4 text-center">
{#if isNonWWWDomainOK}
<button
class="btn btn-sm bg-green-600 hover:bg-green-500"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
>
{:else}
<button
class="btn btn-sm bg-red-600 hover:bg-red-500"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
>
{/if}
{#if dualCerts}
{#if isWWWDomainOK}
<button
class="btn btn-sm bg-green-600 hover:bg-green-500"
on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
>
{:else}
<button
class="btn btn-sm bg-red-600 hover:bg-red-500"
on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
>
{/if}
{/if}
</div>
{/if}
<div class="grid gap-4 grid-cols-2 grid-rows-1 lg:px-10">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
<label class="text-base font-bold text-stone-100" for="exposePort"
>Exposed Port <Explainer
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
/></label
>
<input
readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={!$appSession.isAdmin ||
$status.service.isRunning ||
$status.service.initialLoading}
name="exposePort"
id="exposePort"
bind:value={service.exposePort}
placeholder="12345"
/>
</div>
{#if service.type === 'plausibleanalytics'}
<PlausibleAnalytics bind:service {readOnly} />
{:else if service.type === 'minio'}
<MinIo {service} />
{:else if service.type === 'vscodeserver'}
<VsCodeServer {service} />
{:else if service.type === 'wordpress'}
<Wordpress bind:service {readOnly} {settings} />
{:else if service.type === 'ghost'}
<Ghost bind:service {readOnly} />
{:else if service.type === 'meilisearch'}
<MeiliSearch bind:service />
{:else if service.type === 'umami'}
<Umami bind:service />
{:else if service.type === 'hasura'}
<Hasura bind:service />
{:else if service.type === 'fider'}
<Fider bind:service {readOnly} />
{:else if service.type === 'appwrite'}
<Appwrite bind:service {readOnly} />
{:else if service.type === 'moodle'}
<Moodle bind:service {readOnly} />
{:else if service.type === 'glitchTip'}
<GlitchTip bind:service />
{:else if service.type === 'searxng'}
<Searxng bind:service />
{:else if service.type === 'weblate'}
<Weblate bind:service />
{:else if service.type === 'taiga'}
<Taiga bind:service />
{/if}
</form> </form>
</div> </div>

36
apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte
View File

@@ -8,8 +8,8 @@
<div class="title">Taiga</div> <div class="title">Taiga</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="secretKey">Secret Key</label> <label class="text-base font-bold text-stone-100" for="secretKey">Secret Key</label>
<CopyPasswordField <CopyPasswordField
name="secretKey" name="secretKey"
id="secretKey" id="secretKey"
@@ -24,8 +24,8 @@
<div class="title">Django</div> <div class="title">Django</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="djangoAdminUser">Admin User</label> <label class="text-base font-bold text-stone-100" for="djangoAdminUser">Admin User</label>
<CopyPasswordField <CopyPasswordField
name="djangoAdminUser" name="djangoAdminUser"
id="djangoAdminUser" id="djangoAdminUser"
@@ -34,8 +34,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="djangoAdminPassword">Admin Password</label> <label class="text-base font-bold text-stone-100" for="djangoAdminPassword">Admin Password</label>
<CopyPasswordField <CopyPasswordField
name="djangoAdminPassword" name="djangoAdminPassword"
id="djangoAdminPassword" id="djangoAdminPassword"
@@ -49,8 +49,8 @@
<div class="title">RabbitMQ</div> <div class="title">RabbitMQ</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="rabbitMQUser">User</label> <label class="text-base font-bold text-stone-100" for="rabbitMQUser">User</label>
<CopyPasswordField <CopyPasswordField
name="rabbitMQUser" name="rabbitMQUser"
id="rabbitMQUser" id="rabbitMQUser"
@@ -59,8 +59,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="rabbitMQPassword">Password</label> <label class="text-base font-bold text-stone-100" for="rabbitMQPassword">Password</label>
<CopyPasswordField <CopyPasswordField
name="rabbitMQPassword" name="rabbitMQPassword"
id="rabbitMQPassword" id="rabbitMQPassword"
@@ -75,8 +75,8 @@
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlHost">PostgreSQL Host</label> <label class="text-base font-bold text-stone-100" for="postgresqlHost">PostgreSQL Host</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlHost" name="postgresqlHost"
id="postgresqlHost" id="postgresqlHost"
@@ -85,8 +85,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPort">PostgreSQL Port</label> <label class="text-base font-bold text-stone-100" for="postgresqlPort">PostgreSQL Port</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlPort" name="postgresqlPort"
id="postgresqlPort" id="postgresqlPort"
@@ -95,8 +95,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlUser">PostgreSQL User</label> <label class="text-base font-bold text-stone-100" for="postgresqlUser">PostgreSQL User</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -105,8 +105,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPassword">PostgreSQL Password</label> <label class="text-base font-bold text-stone-100" for="postgresqlPassword">PostgreSQL Password</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlPassword" name="postgresqlPassword"
id="postgresqlPassword" id="postgresqlPassword"

8
apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
View File

@@ -7,12 +7,12 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Umami</div> <div class="title">Umami</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="adminUser">Admin User</label> <label class="text-base font-bold text-stone-100" for="adminUser">Admin User</label>
<input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly /> <input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="umamiAdminPassword" <label class="text-base font-bold text-stone-100" for="umamiAdminPassword"
>Initial Admin Password <Explainer >Initial Admin Password <Explainer
explanation="It could be changed in Umami. <br>This is just the password set initially after the first start." explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
/></label /></label

4
apps/ui/src/routes/services/[id]/_Services/_VSCodeServer.svelte
View File

@@ -8,8 +8,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">VSCode Server</div> <div class="title">VSCode Server</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="password">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="password">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="password" id="password"
isPasswordField isPasswordField

20
apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
View File

@@ -7,8 +7,8 @@
<div class="title">Weblate</div> <div class="title">Weblate</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="adminPassword">Admin password</label> <label class="text-base font-bold text-stone-100" for="adminPassword">Admin password</label>
<CopyPasswordField <CopyPasswordField
name="adminPassword" name="adminPassword"
id="adminPassword" id="adminPassword"
@@ -23,8 +23,8 @@
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlHost">PostgreSQL Host</label> <label class="text-base font-bold text-stone-100" for="postgresqlHost">PostgreSQL Host</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlHost" name="postgresqlHost"
id="postgresqlHost" id="postgresqlHost"
@@ -33,8 +33,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPort">PostgreSQL Port</label> <label class="text-base font-bold text-stone-100" for="postgresqlPort">PostgreSQL Port</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlPort" name="postgresqlPort"
id="postgresqlPort" id="postgresqlPort"
@@ -43,8 +43,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlUser">PostgreSQL User</label> <label class="text-base font-bold text-stone-100" for="postgresqlUser">PostgreSQL User</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -53,8 +53,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="postgresqlPassword">PostgreSQL Password</label> <label class="text-base font-bold text-stone-100" for="postgresqlPassword">PostgreSQL Password</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlPassword" name="postgresqlPassword"
id="postgresqlPassword" id="postgresqlPassword"

50
apps/ui/src/routes/services/[id]/_Services/_Wordpress.svelte
View File

@@ -72,8 +72,8 @@
<div class="title">Wordpress</div> <div class="title">Wordpress</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="extraConfig">{$t('forms.extra_config')}</label> <label class="text-base font-bold text-stone-100" for="extraConfig">{$t('forms.extra_config')}</label>
<textarea <textarea
bind:value={service.wordpress.extraConfig} bind:value={service.wordpress.extraConfig}
disabled={$status.service.isRunning || $status.service.initialLoading} disabled={$status.service.isRunning || $status.service.initialLoading}
@@ -91,7 +91,7 @@ define('SUBDOMAIN_INSTALL', false);`
: 'N/A'} : 'N/A'}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<Setting <Setting
id="ftpEnabled" id="ftpEnabled"
bind:setting={service.wordpress.ftpEnabled} bind:setting={service.wordpress.ftpEnabled}
@@ -103,16 +103,16 @@ define('SUBDOMAIN_INSTALL', false);`
/> />
</div> </div>
{#if service.wordpress.ftpEnabled} {#if service.wordpress.ftpEnabled}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="ftpUrl">sFTP Connection URI</label> <label class="text-base font-bold text-stone-100" for="ftpUrl">sFTP Connection URI</label>
<CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} /> <CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="ftpUser">User</label> <label class="text-base font-bold text-stone-100" for="ftpUser">User</label>
<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} /> <CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="ftpPassword">Password</label> <label class="text-base font-bold text-stone-100" for="ftpPassword">Password</label>
<CopyPasswordField <CopyPasswordField
id="ftpPassword" id="ftpPassword"
isPasswordField isPasswordField
@@ -126,7 +126,7 @@ define('SUBDOMAIN_INSTALL', false);`
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MySQL</div> <div class="title">MySQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<Setting <Setting
id="ownMysql" id="ownMysql"
dataTooltip={$t('forms.must_be_stopped_to_modify')} dataTooltip={$t('forms.must_be_stopped_to_modify')}
@@ -138,8 +138,8 @@ define('SUBDOMAIN_INSTALL', false);`
/> />
</div> </div>
{#if service.wordpress.ownMysql} {#if service.wordpress.ownMysql}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlHost">Host</label> <label class="text-base font-bold text-stone-100" for="mysqlHost">Host</label>
<input <input
name="mysqlHost" name="mysqlHost"
id="mysqlHost" id="mysqlHost"
@@ -150,8 +150,8 @@ define('SUBDOMAIN_INSTALL', false);`
placeholder="{$t('forms.eg')}: db.coolify.io" placeholder="{$t('forms.eg')}: db.coolify.io"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlPort">Port</label> <label class="text-base font-bold text-stone-100" for="mysqlPort">Port</label>
<input <input
name="mysqlPort" name="mysqlPort"
id="mysqlPort" id="mysqlPort"
@@ -163,9 +163,10 @@ define('SUBDOMAIN_INSTALL', false);`
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlDatabase">{$t('index.database')}</label> <label class="text-base font-bold text-stone-100" for="mysqlDatabase">{$t('index.database')}</label>
<input <input
class="w-full"
name="mysqlDatabase" name="mysqlDatabase"
id="mysqlDatabase" id="mysqlDatabase"
required required
@@ -176,8 +177,8 @@ define('SUBDOMAIN_INSTALL', false);`
/> />
</div> </div>
{#if !service.wordpress.ownMysql} {#if !service.wordpress.ownMysql}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlRootUser">{$t('forms.root_user')}</label> <label class="text-base font-bold text-stone-100" for="mysqlRootUser">{$t('forms.root_user')}</label>
<input <input
name="mysqlRootUser" name="mysqlRootUser"
id="mysqlRootUser" id="mysqlRootUser"
@@ -187,8 +188,8 @@ define('SUBDOMAIN_INSTALL', false);`
disabled={$status.service.isRunning || !service.wordpress.ownMysql} disabled={$status.service.isRunning || !service.wordpress.ownMysql}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label> <label class="text-base font-bold text-stone-100" for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
<CopyPasswordField <CopyPasswordField
id="mysqlRootUserPassword" id="mysqlRootUserPassword"
isPasswordField isPasswordField
@@ -199,9 +200,10 @@ define('SUBDOMAIN_INSTALL', false);`
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlUser">{$t('forms.user')}</label> <label class="text-base font-bold text-stone-100" for="mysqlUser">{$t('forms.user')}</label>
<input <input
class="w-full"
name="mysqlUser" name="mysqlUser"
id="mysqlUser" id="mysqlUser"
bind:value={service.wordpress.mysqlUser} bind:value={service.wordpress.mysqlUser}
@@ -209,8 +211,8 @@ define('SUBDOMAIN_INSTALL', false);`
disabled={$status.service.isRunning || !service.wordpress.ownMysql} disabled={$status.service.isRunning || !service.wordpress.ownMysql}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10">
<label for="mysqlPassword">{$t('forms.password')}</label> <label class="text-base font-bold text-stone-100" for="mysqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mysqlPassword" id="mysqlPassword"
isPasswordField isPasswordField

442
apps/ui/src/routes/services/[id]/__layout.svelte
View File

@@ -69,6 +69,7 @@
} from '$lib/store'; } from '$lib/store';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import ServiceLinks from './_ServiceLinks.svelte';
const { id } = $page.params; const { id } = $page.params;
export let service: any; export let service: any;
@@ -155,144 +156,26 @@
}); });
</script> </script>
<nav class="nav-side"> <nav class="header">
{#if $location} <div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<a <div class="flex flex-col">
id="open" <div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
href={$location} Configuration
target="_blank" </div>
class="icons flex items-center bg-transparent text-sm" <span class="text-xs">{service.name}</span>
><svg </div>
xmlns="http://www.w3.org/2000/svg" <ServiceLinks {service} />
class="h-6 w-6" </div>
viewBox="0 0 24 24" <div
stroke-width="1.5" class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0"
stroke="currentColor" >
fill="none" {#if $location}
stroke-linecap="round" <a
stroke-linejoin="round" id="open"
> href={$location}
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> target="_blank"
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> class="icons flex items-center bg-transparent text-sm"
<line x1="10" y1="14" x2="20" y2="4" /> ><svg
<polyline points="15 4 20 4 20 9" />
</svg></a
>
<Tooltip triggeredBy="#open">Open</Tooltip>
<div class="border border-stone-700 h-8" />
{/if}
{#if $status.service.isExited}
<a
id="error"
href={$isDeploymentEnabled ? `/services/${id}/logs` : null}
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
sveltekit:prefetch
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
/>
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</a>
<Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
{/if}
{#if $status.service.initialLoading}
<button
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
<line x1="11" y1="19.94" x2="11" y2="19.95" />
</svg>
</button>
{:else if $status.service.isRunning}
<button
id="stop"
on:click={stopService}
type="submit"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<rect x="6" y="5" width="4" height="14" rx="1" />
<rect x="14" y="5" width="4" height="14" rx="1" />
</svg>
</button>
<Tooltip triggeredBy="#stop">Stop</Tooltip>
{:else}
<button
id="start"
on:click={startService}
type="submit"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
><svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M7 4v16l13 -8z" />
</svg>
</button>
<Tooltip triggeredBy="#start">Start</Tooltip>
{/if}
<div class="border border-stone-700 h-8" />
{#if service.type && service.destinationDockerId && service.version}
<a
href="/services/{id}"
sveltekit:prefetch
class="hover:text-yellow-500 rounded"
class:text-yellow-500={$page.url.pathname === `/services/${id}`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
>
<button
id="configuration"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -303,62 +186,71 @@
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="8" width="4" height="4" /> <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="6" y1="4" x2="6" y2="8" /> <line x1="10" y1="14" x2="20" y2="4" />
<line x1="6" y1="12" x2="6" y2="20" /> <polyline points="15 4 20 4 20 9" />
<rect x="10" y="14" width="4" height="4" /> </svg></a
<line x1="12" y1="4" x2="12" y2="14" /> >
<line x1="12" y1="18" x2="12" y2="20" /> <Tooltip triggeredBy="#open">Open</Tooltip>
<rect x="16" y="5" width="4" height="4" /> <div class="border border-stone-700 h-8" />
<line x1="18" y1="4" x2="18" y2="5" /> {/if}
<line x1="18" y1="9" x2="18" y2="20" /> {#if $status.service.isExited}
</svg></button <a
></a id="error"
> href={$isDeploymentEnabled ? `/services/${id}/logs` : null}
<Tooltip triggeredBy="#configuration">Configuration</Tooltip> class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
<a sveltekit:prefetch
href="/services/{id}/secrets"
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
>
<button
id="secrets"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm "
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6" class="w-6 h-6"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentcolor"
fill="none" fill="none"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path <path
d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
/> />
<circle cx="12" cy="11" r="1" /> <line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="12" x2="12" y2="14.5" /> <line x1="12" y1="16" x2="12.01" y2="16" />
</svg></button </svg>
></a </a>
> <Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
<Tooltip triggeredBy="#secrets">Secrets</Tooltip> {/if}
<a {#if $status.service.initialLoading}
href="/services/{id}/storages"
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
>
<button <button
id="persistentstorage" class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
<line x1="11" y1="19.94" x2="11" y2="19.95" />
</svg>
</button>
{:else if $status.service.isRunning}
<button
id="stop"
on:click={stopService}
type="submit"
disabled={!$isDeploymentEnabled} disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm" class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -371,25 +263,21 @@
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<ellipse cx="12" cy="6" rx="8" ry="3" /> <rect x="6" y="5" width="4" height="14" rx="1" />
<path d="M4 6v6a8 3 0 0 0 16 0v-6" /> <rect x="14" y="5" width="4" height="14" rx="1" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
</svg> </svg>
</button></a </button>
> <Tooltip triggeredBy="#stop">Stop</Tooltip>
<Tooltip triggeredBy="#persistentstorage">Persistent Storage</Tooltip> {:else}
<div class="border border-stone-700 h-8" /> <button
<a id="start"
href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null} on:click={startService}
sveltekit:prefetch type="submit"
class="hover:text-pink-500 rounded" disabled={!$isDeploymentEnabled}
class:text-pink-500={$page.url.pathname === `/services/${id}/logs`} class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`} ><svg
>
<button id="logs" disabled={!$status.service.isRunning} class="icons bg-transparent text-sm">
<svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="w-6 h-6"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
@@ -398,24 +286,150 @@
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /> <path d="M7 4v16l13 -8z" />
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /> </svg>
<line x1="3" y1="6" x2="3" y2="19" /> </button>
<line x1="12" y1="6" x2="12" y2="19" /> <Tooltip triggeredBy="#start">Start</Tooltip>
<line x1="21" y1="6" x2="21" y2="19" /> {/if}
</svg></button <div class="border border-stone-700 h-8" />
></a {#if service.type && service.destinationDockerId && service.version}
<a
href="/services/{id}"
sveltekit:prefetch
class="hover:text-yellow-500 rounded"
class:text-yellow-500={$page.url.pathname === `/services/${id}`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
>
<button
id="configuration"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg></button
></a
>
<Tooltip triggeredBy="#configuration">Configuration</Tooltip>
<a
href="/services/{id}/secrets"
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
>
<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm ">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
/>
<circle cx="12" cy="11" r="1" />
<line x1="12" y1="12" x2="12" y2="14.5" />
</svg></button
></a
>
<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
<a
href="/services/{id}/storages"
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
>
<button
id="persistentstorage"
disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
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" />
<ellipse cx="12" cy="6" rx="8" ry="3" />
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
</svg>
</button></a
>
<Tooltip triggeredBy="#persistentstorage">Persistent Storage</Tooltip>
<div class="border border-stone-700 h-8" />
<a
href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null}
sveltekit:prefetch
class="hover:text-pink-500 rounded"
class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`}
>
<button
id="logs"
disabled={!$status.service.isRunning}
class="icons bg-transparent text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
<line x1="3" y1="6" x2="3" y2="19" />
<line x1="12" y1="6" x2="12" y2="19" />
<line x1="21" y1="6" x2="21" y2="19" />
</svg></button
></a
>
<Tooltip triggeredBy="#logs">Logs</Tooltip>
{/if}
<button
id="delete"
on:click={deleteService}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button
> >
<Tooltip triggeredBy="#logs">Logs</Tooltip> <Tooltip triggeredBy="#delete">Delete</Tooltip>
{/if} </div>
<button
id="delete"
on:click={deleteService}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button
>
<Tooltip triggeredBy="#delete">Delete</Tooltip>
</nav> </nav>
<slot /> <slot />

4
apps/ui/src/routes/services/[id]/index.svelte
View File

@@ -50,8 +50,8 @@
}); });
</script> </script>
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold"> <div class="flex items-center space-x-2 p-5 px-6 font-bold lg:hidden">
<div class="-mb-5 flex-col"> <div class="flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block"> <div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration Configuration
</div> </div>

14
apps/ui/src/routes/services/[id]/logs/index.svelte
View File

@@ -150,16 +150,10 @@
</button> </button>
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip> <Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
</div> </div>
<div <div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
class="font-mono w-full 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" {#each logs as log}
bind:this={logsEl} <p>{log.line + '\n'}</p>
on:scroll={detect} {/each}
>
<div class="px-2 pr-14">
{#each logs as log}
{log + '\n'}
{/each}
</div>
</div> </div>
</div> </div>
{/if} {/if}

83
apps/ui/src/routes/services/[id]/secrets.svelte
View File

@@ -68,64 +68,33 @@
} }
</script> </script>
<div
class="flex items-center space-x-2 p-5 px-6 font-bold"
class:p-5={service.fqdn}
class:p-6={!service.fqdn}
>
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
{$t('application.secret')}
</div>
<span class="text-xs">{service.name}</span>
</div>
{#if service.fqdn}
<a
href={service.fqdn}
target="_blank"
class="icons tooltip-bottom flex items-center bg-transparent text-sm"
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg></a
>
{/if}
<ServiceLinks {service} />
</div>
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4"> <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
<table class="mx-auto border-separate text-left"> <h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
<thead> Secrets
<tr class="h-12"> </h1>
<th scope="col">{$t('forms.name')}</th> <div class="overflow-x-auto">
<th scope="col">{$t('forms.value')}</th> <table class="w-full border-separate text-left">
<th scope="col" class="w-96 text-center">{$t('forms.action')}</th> <thead>
</tr> <tr class="h-12">
</thead> <th scope="col">{$t('forms.name')}</th>
<tbody> <th scope="col">{$t('forms.value')}</th>
{#each secrets as secret} <th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
{#key secret.id} </tr>
<tr> </thead>
<Secret name={secret.name} value={secret.value} on:refresh={refreshSecrets} /> <tbody>
</tr> {#each secrets as secret}
{/key} {#key secret.id}
{/each} <tr>
<tr> <Secret name={secret.name} value={secret.value} on:refresh={refreshSecrets} />
<Secret isNewSecret on:refresh={refreshSecrets} /> </tr>
</tr> {/key}
</tbody> {/each}
</table> <tr>
<Secret isNewSecret on:refresh={refreshSecrets} />
</tr>
</tbody>
</table>
</div>
<h2 class="title my-6 font-bold">Paste .env file</h2> <h2 class="title my-6 font-bold">Paste .env file</h2>
<form on:submit|preventDefault={getValues} class="mb-12 w-full"> <form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" /> <textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />

42
apps/ui/src/routes/services/_index.svelte
View File

@@ -43,28 +43,26 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header">
<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div> <h1 class="mr-4 text-2xl font-bold">{$t('index.services')}</h1>
{#if $appSession.isAdmin} <button on:click={newService} class="btn btn-square btn-sm bg-services">
<button on:click={newService} class="btn btn-square btn-sm bg-services"> <svg
<svg class="h-6 w-6"
class="h-6 w-6" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" fill="none"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" stroke="currentColor"
stroke="currentColor" ><path
><path stroke-linecap="round"
stroke-linecap="round" stroke-linejoin="round"
stroke-linejoin="round" stroke-width="2"
stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg
/></svg >
> </button>
</button> </nav>
{/if} <br />
</div> <div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
{#if !services || ownServices.length === 0} {#if !services || ownServices.length === 0}
<div class="flex-col"> <div class="flex-col">
<div class="text-center text-xl font-bold">{$t('service.no_service')}</div> <div class="text-center text-xl font-bold">{$t('service.no_service')}</div>

4
apps/ui/src/routes/settings/_Menu.svelte
View File

@@ -7,7 +7,7 @@
{#if $appSession.teamId === '0'} {#if $appSession.teamId === '0'}
<a <a
href="/settings/global" href="/settings/global"
class="sub-menu no-underline" class="sub-menu no-underline w-full"
class:sub-menu-active={$page.routeId === 'settings/global'} class:sub-menu-active={$page.routeId === 'settings/global'}
> >
Global Settings Global Settings
@@ -15,7 +15,7 @@
{/if} {/if}
<a <a
href="/settings/ssh-keys" href="/settings/ssh-keys"
class="sub-menu no-underline" class="sub-menu no-underline w-full"
class:sub-menu-active={$page.routeId === 'settings/ssh-keys'}>SSH Keys</a class:sub-menu-active={$page.routeId === 'settings/ssh-keys'}>SSH Keys</a
> >
</div> </div>

289
apps/ui/src/routes/settings/global.svelte
View File

@@ -198,171 +198,152 @@
<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div> <div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
</div> </div>
<div class="mx-auto w-full"> <div class="mx-auto w-full">
<div class="flex flex-row"> <div class="flex lg:flex-row flex-col">
<Menu /> <Menu />
<div> <div class="mt-5">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <form on:submit|preventDefault={handleSubmit}>
<div class="flex space-x-1 pb-6"> <div
class="flex flex-col space-y-4 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
>
<div class="title font-bold">{$t('index.global_settings')}</div> <div class="title font-bold">{$t('index.global_settings')}</div>
<button <div class="flex lg:flex-row lg:space-x-4 flex-col space-y-4 lg:space-y-0">
class="btn btn-sm bg-settings text-black"
type="submit"
class:bg-orange-600={forceSave}
class:hover:bg-orange-400={forceSave}
disabled={loading.save}
>{loading.save
? $t('forms.saving')
: forceSave
? $t('forms.confirm_continue')
: $t('forms.save')}</button
>
{#if isFqdnSet}
<button <button
on:click|preventDefault={removeFqdn} class="btn btn-sm bg-settings text-black"
disabled={loading.remove} type="submit"
class="btn btn-sm" class:bg-orange-600={forceSave}
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button class:hover:bg-orange-400={forceSave}
disabled={loading.save}
>{loading.save
? $t('forms.saving')
: forceSave
? $t('forms.confirm_continue')
: $t('forms.save')}</button
> >
{/if}
<button
on:click={restartCoolify}
class:loading={loading.restart}
class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
>
</div>
<div class="grid grid-flow-row gap-2 px-10">
<!-- <Language /> -->
<div class="grid grid-cols-2 items-start">
<div class="flex-col">
<div class="pt-2 text-base font-bold text-stone-100">
{$t('application.url_fqdn')}
<Explainer explanation={$t('setting.ssl_explainer')} />
</div>
</div>
<div class="justify-start text-left">
<input
bind:value={fqdn}
readonly={!$appSession.isAdmin || isFqdnSet}
disabled={!$appSession.isAdmin || isFqdnSet}
on:input={resetView}
name="fqdn"
id="fqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
placeholder="{$t('forms.eg')}: https://coolify.io"
/>
{#if forceSave} {#if isFqdnSet}
<div class="flex-col space-y-2 pt-4 text-center"> <button
{#if isNonWWWDomainOK} on:click|preventDefault={removeFqdn}
<button disabled={loading.remove}
class="btn btn-sm bg-success" class="btn btn-sm"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)} >{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button >
> {/if}
{:else} <button
<button on:click={restartCoolify}
class="btn btn-sm bg-error" class:loading={loading.restart}
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)} class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button >
> </div>
{/if} </div>
{#if dualCerts} <div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 p-6">
{#if isWWWDomainOK} <div class="pt-2 text-base font-bold text-stone-100">
<button {$t('application.url_fqdn')}
class="btn btn-sm bg-success" <Explainer explanation={$t('setting.ssl_explainer')} />
on:click|preventDefault={() => </div>
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)} <input
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button class="w-full"
> bind:value={fqdn}
{:else} readonly={!$appSession.isAdmin || isFqdnSet}
<button disabled={!$appSession.isAdmin || isFqdnSet}
class="btn btn-sm bg-error" on:input={resetView}
on:click|preventDefault={() => name="fqdn"
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)} id="fqdn"
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
> placeholder="{$t('forms.eg')}: https://coolify.io"
{/if} />
{/if}
</div> {#if forceSave}
<div class="flex-col space-y-2 pt-4 text-center">
{#if isNonWWWDomainOK}
<button
class="btn btn-sm bg-success"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
>
{:else}
<button
class="btn btn-sm bg-error"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
>
{/if}
{#if dualCerts}
{#if isWWWDomainOK}
<button
class="btn btn-sm bg-success"
on:click|preventDefault={() =>
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
>
{:else}
<button
class="btn btn-sm bg-error"
on:click|preventDefault={() =>
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
>
{/if}
{/if} {/if}
</div> </div>
{/if}
<div class="pt-2 text-base font-bold text-stone-100">
{$t('forms.public_port_range')}
<Explainer explanation={$t('forms.public_port_range_explainer')} />
</div> </div>
<div class="grid grid-cols-2 items-start py-6"> <div class="flex flex-row items-center space-x-2">
<div class="flex-col"> <input
<div class="pt-2 text-base font-bold text-stone-100"> class="h-8 w-full px-2"
{$t('forms.public_port_range')} type="number"
<Explainer explanation={$t('forms.public_port_range_explainer')} /> bind:value={minPort}
</div> min="1024"
</div> max={maxPort}
<div class="mx-auto flex-row items-center justify-center space-y-2"> />
<input <p>-</p>
class="h-8 w-20 px-2" <input
type="number" class="h-8 w-full px-2"
bind:value={minPort} type="number"
min="1024" bind:value={maxPort}
max={maxPort} min={minPort}
/> max="65543"
-
<input
class="h-8 w-20 px-2"
type="number"
bind:value={maxPort}
min={minPort}
max="65543"
/>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<Setting
id="isDNSCheckEnabled"
bind:setting={isDNSCheckEnabled}
title={$t('setting.is_dns_check_enabled')}
description={$t('setting.is_dns_check_enabled_explainer')}
on:click={() => changeSettings('isDNSCheckEnabled')}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <Setting
<div class="text-base font-bold text-stone-100"> id="isDNSCheckEnabled"
Custom DNS servers <Explainer bind:setting={isDNSCheckEnabled}
explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used." title={$t('setting.is_dns_check_enabled')}
/> description={$t('setting.is_dns_check_enabled_explainer')}
</div> on:click={() => changeSettings('isDNSCheckEnabled')}
/>
<div class="flex-row items-center justify-center"> <div class="text-base font-bold text-stone-100">
<input placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} /> Custom DNS servers <Explainer
</div> explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used."
</div>
<div class="grid grid-cols-2 items-center">
<Setting
id="dualCerts"
dataTooltip={$t('setting.must_remove_domain_before_changing')}
disabled={isFqdnSet}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('setting.generate_www_non_www_ssl')}
on:click={() => !isFqdnSet && changeSettings('dualCerts')}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
<Setting <Setting
id="isRegistrationEnabled" id="dualCerts"
bind:setting={isRegistrationEnabled} dataTooltip={$t('setting.must_remove_domain_before_changing')}
title={$t('setting.registration_allowed')} disabled={isFqdnSet}
description={$t('setting.registration_allowed_explainer')} bind:setting={dualCerts}
on:click={() => changeSettings('isRegistrationEnabled')} title={$t('application.ssl_www_and_non_www')}
/> description={$t('setting.generate_www_non_www_ssl')}
</div> on:click={() => !isFqdnSet && changeSettings('dualCerts')}
<div class="grid grid-cols-2 items-center"> />
<Setting <Setting
id="isAPIDebuggingEnabled" id="isRegistrationEnabled"
bind:setting={isAPIDebuggingEnabled} bind:setting={isRegistrationEnabled}
title="API Debugging" title={$t('setting.registration_allowed')}
description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect." description={$t('setting.registration_allowed_explainer')}
on:click={() => changeSettings('isAPIDebuggingEnabled')} on:click={() => changeSettings('isRegistrationEnabled')}
/> />
</div> <Setting
<div class="grid grid-cols-2 items-center"> id="isAPIDebuggingEnabled"
bind:setting={isAPIDebuggingEnabled}
title="API Debugging"
description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
on:click={() => changeSettings('isAPIDebuggingEnabled')}
/>
{#if browser && $features.beta}
<Setting <Setting
id="isAutoUpdateEnabled" id="isAutoUpdateEnabled"
bind:setting={isAutoUpdateEnabled} bind:setting={isAutoUpdateEnabled}
@@ -370,7 +351,7 @@
description={$t('setting.auto_update_enabled_explainer')} description={$t('setting.auto_update_enabled_explainer')}
on:click={() => changeSettings('isAutoUpdateEnabled')} on:click={() => changeSettings('isAutoUpdateEnabled')}
/> />
</div> {/if}
</div> </div>
</form> </form>
</div> </div>

11
apps/ui/src/routes/settings/ssh-keys.svelte
View File

@@ -61,10 +61,13 @@
<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div> <div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
</div> </div>
<div class="mx-auto w-full"> <div class="mx-auto w-full">
<div class="flex flex-row"> <div class="flex lg:flex-row flex-col">
<Menu /> <Menu />
<div class="grid grid-flow-row gap-2 py-4"> <div class="flex flex-col mt-5">
<div class="flex space-x-1 pb-6"> <div
class="flex flex-col space-y-4 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
style="min-width: 83vw"
>
<div class="title font-bold">SSH Keys</div> <div class="title font-bold">SSH Keys</div>
<button <button
on:click={() => (isModalActive = true)} on:click={() => (isModalActive = true)}
@@ -72,7 +75,7 @@
disabled={loading.save}>New SSH Key</button disabled={loading.save}>New SSH Key</button
> >
</div> </div>
<div class="grid grid-flow-col gap-2 px-10"> <div class="grid grid-flow-col gap-2 lg:px-10 px-6">
{#if sshKeys.length === 0} {#if sshKeys.length === 0}
<div class="text-sm ">No SSH keys found</div> <div class="text-sm ">No SSH keys found</div>
{:else} {:else}

227
apps/ui/src/routes/sources/[id]/_Github.svelte
View File

@@ -90,142 +90,123 @@
} }
</script> </script>
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-4xl lg:px-6 px-3">
{#if !source.githubAppId} {#if !source.githubAppId}
<form on:submit|preventDefault={newGithubApp} class="py-4"> <form on:submit|preventDefault={newGithubApp} class="py-4">
<div class="grid gap-1 lg:grid-flow-col pb-7"> <div class="grid gap-1 lg:grid-flow-col pb-7">
<div class="title">General</div> <h1 class="title">General</h1>
{#if !source.githubAppId} {#if !source.githubAppId}
<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button> <div class="w-full flex flex-rpw justify-end">
{/if} <button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit"
</div> >Save & Redirect to GitHub</button
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-flow-row gap-2">
<div class="mt-2 grid lg:grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" id="name" required bind:value={source.name} />
</div>
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="customPort" class="text-base font-bold text-stone-100"
>Custom SSH Port <Explainer
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
/></label
>
<input
name="customPort"
id="customPort"
disabled={!selfHosted || source.githubAppId}
readonly={!selfHosted || source.githubAppId}
required
value={source.customPort}
/>
</div>
<div class="grid lg:grid-cols-2">
<div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization
<Explainer
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
/></label
> >
</div> </div>
<input {/if}
name="organization" </div>
id="organization" <div class="grid gap-4 grid-cols-2 auto-rows-max">
placeholder="eg: coollabsio" <label for="name" class="text-base font-bold text-stone-100">Name</label>
bind:value={source.organization} <input class="w-full" name="name" id="name" required bind:value={source.name} />
/> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
</div> <input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
<label for="customPort" class="text-base font-bold text-stone-100"
>Custom SSH Port <Explainer
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
/></label
>
<input
class="w-full"
name="customPort"
id="customPort"
disabled={!selfHosted || source.githubAppId}
readonly={!selfHosted || source.githubAppId}
required
value={source.customPort}
/>
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization
<Explainer
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
/></label
>
<input
class="w-full"
name="organization"
id="organization"
placeholder="eg: coollabsio"
bind:value={source.organization}
/>
</div> </div>
</form> </form>
{:else if source.githubApp?.installationId} {:else if source.githubApp?.installationId}
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5"> <div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
<div class="title">{$t('general')}</div> <h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button class="btn btn-sm bg-sources" type="submit" disabled={loading} <div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
>{loading ? 'Saving...' : 'Save'}</button <button class="btn btn-sm bg-sources" type="submit" disabled={loading}
> >{loading ? 'Saving...' : 'Save'}</button
<a >
class="btn btn-sm" <a
href={`${source.htmlUrl}/${ class="btn btn-sm"
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps' href={`${source.htmlUrl}/${
}/${source.githubApp.name}/installations/new`} source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
>{$t('source.change_app_settings', { name: 'GitHub' })}</a }/${source.githubApp.name}/installations/new`}
> >{$t('source.change_app_settings', { name: 'GitHub' })}</a
>
</div>
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid gap-4 grid-cols-2 auto-rows-max mt-4">
<div class="grid grid-flow-row gap-2"> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<div class="mt-2 grid lg:grid-cols-2 items-center"> <input class="w-full" name="name" id="name" required bind:value={source.name} />
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input name="name" id="name" required bind:value={source.name} /> <input
</div> class="w-full"
</div> name="htmlUrl"
<div class="grid lg:grid-cols-2 items-center"> id="htmlUrl"
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label> disabled={source.githubAppId}
<input readonly={source.githubAppId}
name="htmlUrl" required
id="htmlUrl" bind:value={source.htmlUrl}
disabled={source.githubAppId} />
readonly={source.githubAppId} <label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
required <input
bind:value={source.htmlUrl} class="w-full"
/> name="apiUrl"
</div> id="apiUrl"
<div class="grid lg:grid-cols-2 items-center"> required
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label> disabled={source.githubAppId}
<input readonly={source.githubAppId}
name="apiUrl" bind:value={source.apiUrl}
id="apiUrl" />
required <label for="customPort" class="text-base font-bold text-stone-100"
disabled={source.githubAppId} >Custom SSH Port <Explainer
readonly={source.githubAppId} explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
bind:value={source.apiUrl} /></label
/> >
</div> <input
{#if selfHosted} class="w-full"
<div class="grid lg:grid-cols-2 items-center"> name="customPort"
<label for="customPort" class="text-base font-bold text-stone-100" id="customPort"
>Custom SSH Port <Explainer disabled={!selfHosted}
explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions." readonly={!selfHosted}
/></label required
> value={source.customPort}
<input />
name="customPort" <label for="organization" class="pt-2 text-base font-bold text-stone-100"
id="customPort" >Organization</label
disabled={!selfHosted} >
readonly={!selfHosted} <input
required class="w-full"
value={source.customPort} readonly
/> disabled
</div> name="organization"
{/if} id="organization"
<div class="grid lg:grid-cols-2"> placeholder="eg: coollabsio"
<div class="flex flex-col"> bind:value={source.organization}
<label for="organization" class="pt-2 text-base font-bold text-stone-100" />
>Organization</label
>
</div>
<input
readonly
disabled
name="organization"
id="organization"
placeholder="eg: coollabsio"
bind:value={source.organization}
/>
</div>
</div> </div>
</form> </form>
{:else} {:else}

58
apps/ui/src/routes/sources/[id]/_Gitlab.svelte
View File

@@ -145,24 +145,26 @@
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-4xl px-6">
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-7"> <div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
<div class="title">General</div> <h1 class="title">General</h1>
{#if $appSession.isAdmin} <div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
<button type="submit" class="btn btn-sm bg-sources" disabled={loading} {#if $appSession.isAdmin}
>{loading ? $t('forms.saving') : $t('forms.save')}</button <button type="submit" class="btn btn-sm bg-sources" disabled={loading}
> >{loading ? $t('forms.saving') : $t('forms.save')}</button
{#if source.gitlabAppId}
<button class="btn btn-sm" on:click|preventDefault={changeSettings}
>{$t('source.change_app_settings', { name: 'GitLab' })}</button
>
{:else}
<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
>Create new GitLab App manually</button
> >
{#if source.gitlabAppId}
<button class="btn btn-sm" on:click|preventDefault={changeSettings}
>{$t('source.change_app_settings', { name: 'GitLab' })}</button
>
{:else}
<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
>Create new GitLab App manually</button
>
{/if}
{/if} {/if}
{/if} </div>
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 lg:px-10">
{#if !source.gitlabAppId} {#if !source.gitlabAppId}
<a <a
href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab" href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
@@ -172,7 +174,7 @@
> >
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="type" class="text-base font-bold text-stone-100">Application Type</label> <label for="type" class="text-base font-bold text-stone-100">Application Type</label>
<select name="type" id="type" class="w-96" bind:value={applicationType}> <select name="type" id="type" class="lg:w-96 w-full" bind:value={applicationType}>
<option value="user">{$t('source.gitlab.user_owned')}</option> <option value="user">{$t('source.gitlab.user_owned')}</option>
<option value="group">{$t('source.gitlab.group_owned')}</option> <option value="group">{$t('source.gitlab.group_owned')}</option>
{#if source.htmlUrl !== 'https://gitlab.com'} {#if source.htmlUrl !== 'https://gitlab.com'}
@@ -185,6 +187,7 @@
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label> <label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
<input <input
class="w-full"
name="groupName" name="groupName"
id="groupName" id="groupName"
required required
@@ -197,12 +200,29 @@
<div class="grid grid-flow-row gap-2"> <div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input name="name" id="name" required bind:value={source.name} /> <input class="w-full" name="name" id="name" required bind:value={source.name} />
</div> </div>
</div> </div>
{#if source.gitlabApp.groupName}
<div class="grid grid-cols-2 items-center">
<label for="groupName" class="text-base font-bold text-stone-100"
>{$t('source.group_name')}</label
>
<input
class="w-full"
name="groupName"
id="groupName"
disabled={source.gitlabAppId}
readonly={source.gitlabAppId}
required
bind:value={source.gitlabApp.groupName}
/>
</div>
{/if}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input <input
class="w-full"
name="htmlUrl" name="htmlUrl"
id="htmlUrl" id="htmlUrl"
required required
@@ -214,6 +234,7 @@
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label> <label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input <input
class="w-full"
name="apiUrl" name="apiUrl"
id="apiUrl" id="apiUrl"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}
@@ -230,6 +251,7 @@
/></label /></label
> >
<input <input
class="w-full"
name="customPort" name="customPort"
id="customPort" id="customPort"
disabled={!selfHosted} disabled={!selfHosted}
@@ -249,6 +271,7 @@
> >
</div> </div>
<input <input
class="w-full"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}
readonly={source.gitlabAppId} readonly={source.gitlabAppId}
on:change={checkOauthId} on:change={checkOauthId}
@@ -266,6 +289,7 @@
>{$t('source.application_id')}</label >{$t('source.application_id')}</label
> >
<input <input
class="w-full"
name="appId" name="appId"
id="appId" id="appId"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}

9
apps/ui/src/routes/sources/_index.svelte
View File

@@ -36,8 +36,8 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <nav class="header">
<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div> <h1 class="mr-4 text-2xl font-bold">{$t('index.git_sources')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<a href="/sources/new" class="btn btn-square btn-sm bg-sources"> <a href="/sources/new" class="btn btn-square btn-sm bg-sources">
<svg <svg
@@ -55,8 +55,9 @@
> >
</a> </a>
{/if} {/if}
</div> </nav>
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16"> <br />
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
{#if !sources || ownSources.length === 0} {#if !sources || ownSources.length === 0}
<div class="flex-col"> <div class="flex-col">
<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div> <div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>

6
apps/ui/src/tailwind.css
View File

@@ -97,7 +97,7 @@ a {
} }
.title { .title {
@apply mr-4 text-base tracking-tight md:text-2xl font-bold; @apply mr-4 tracking-tight text-2xl font-bold;
} }
.nav-main { .nav-main {
@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible; @apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
@@ -200,3 +200,7 @@ a {
input { input {
@apply w-48 lg:w-96; @apply w-48 lg:w-96;
} }
.header {
@apply flex flex-row px-4 justify-between items-center bg-neutral-focus z-10 w-full mb-10;
}