Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

fix(routes): ui from services page

Browse Source
This commit is contained in:
Kaname 2022-09-07 00:50:34 +00:00
parent cab15055e7
commit d5cfb63f52
19 changed files with 645 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -370,7 +370,7 @@
<!-- 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 justify-between items-center"> <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"
@ -383,6 +383,7 @@
> >
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 lg:px-10"> <div class="grid grid-flow-row gap-2 lg:px-10">
<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>
@ -474,7 +475,7 @@
</label> </label>
<Select <Select
{isDisabled} {isDisabled}
containerClasses={isDisabled && containerClass() || 'bg-neutral border-0'} containerClasses={(isDisabled && containerClass()) || 'bg-neutral border-0'}
id="baseBuildImages" id="baseBuildImages"
showIndicator={!$status.application.isRunning} showIndicator={!$status.application.isRunning}
items={application.baseBuildImages} items={application.baseBuildImages}
@ -492,7 +493,7 @@
> >
<Select <Select
{isDisabled} {isDisabled}
containerClasses={isDisabled && containerClass() || 'bg-neutral border-0'} containerClasses={(isDisabled && containerClass()) || 'bg-neutral border-0'}
id="baseImages" id="baseImages"
showIndicator={!$status.application.isRunning} showIndicator={!$status.application.isRunning}
items={application.baseImages} items={application.baseImages}

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"

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

@ -173,8 +173,9 @@
<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>
<div class="flex flex-row space-y-3 items-center">
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
type="submit" type="submit"
@ -209,18 +210,19 @@
> >
{/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="text-center"> <div class="py-5">
<span class="font-bold text-red-500">IMPORTANT!</span> There was a small modification with <span class="font-bold text-red-500">IMPORTANT!</span> There was a small modification with Minio
Minio in the latest version of Coolify. Now you can separate the Console URL from the API URL, in the latest version of Coolify. Now you can separate the Console URL from the API URL, so you
so you could use both through SSL. But this proccess cannot be done automatically, so you have could use both through SSL. But this proccess cannot be done automatically, so you have to stop
to stop your Minio instance, configure the new domain and start it back. Sorry for any inconvenience. your Minio instance, configure the new domain and start it back. Sorry for any inconvenience.
</div> </div>
{/if} {/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 class="grid gap-4 grid-cols-2 grid-rows-1 lg:px-10">
<label class="text-base font-bold text-stone-100" for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<div> <div>
<input <input
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
@ -230,9 +232,7 @@
required required
/> />
</div> </div>
</div> <label class="text-base font-bold text-stone-100" for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
<div class="grid grid-cols-2 items-center px-10">
<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
<a <a
href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading
? `/services/${id}/configuration/version?from=/services/${id}` ? `/services/${id}/configuration/version?from=/services/${id}`
@ -247,9 +247,7 @@
class:cursor-pointer={!$status.service.isRunning} class:cursor-pointer={!$status.service.isRunning}
/></a /></a
> >
</div> <label class="text-base font-bold text-stone-100" for="destination" class="text-base font-bold text-stone-100"
<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 >{$t('application.destination')}</label
> >
<div> <div>
@ -264,12 +262,9 @@
</div> </div>
{/if} {/if}
</div> </div>
</div>
{#if service.type === 'minio'} {#if service.type === 'minio'}
<div class="grid grid-cols-2 px-10"> <label class="text-base font-bold text-stone-100" for="fqdn" class="pt-2 text-base font-bold text-stone-100">Console URL</label>
<div class="flex-col ">
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Console URL</label>
</div>
<CopyPasswordField <CopyPasswordField
placeholder="eg: https://console.min.io" placeholder="eg: https://console.min.io"
@ -281,14 +276,9 @@
bind:value={service.fqdn} bind:value={service.fqdn}
required required
/> />
</div> <label class="text-base font-bold text-stone-100" for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
<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 >API URL <Explainer explanation={$t('application.https_explainer')} /></label
> >
</div>
<CopyPasswordField <CopyPasswordField
placeholder="eg: https://min.io" placeholder="eg: https://min.io"
readonly={!$appSession.isAdmin && !$status.service.isRunning} readonly={!$appSession.isAdmin && !$status.service.isRunning}
@ -299,16 +289,11 @@
bind:value={service.minio.apiFqdn} bind:value={service.minio.apiFqdn}
required required
/> />
</div>
{:else} {:else}
<div class="grid grid-cols-2 px-10"> <label class="text-base font-bold text-stone-100" for="fqdn" class="pt-2 text-base font-bold text-stone-100"
<div class="flex-col ">
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
>{$t('application.url_fqdn')} >{$t('application.url_fqdn')}
<Explainer explanation={$t('application.https_explainer')} /> <Explainer explanation={$t('application.https_explainer')} />
</label> </label>
</div>
<CopyPasswordField <CopyPasswordField
placeholder="eg: https://analytics.coollabs.io" placeholder="eg: https://analytics.coollabs.io"
readonly={!$appSession.isAdmin && !$status.service.isRunning} readonly={!$appSession.isAdmin && !$status.service.isRunning}
@ -321,8 +306,8 @@
bind:value={service.fqdn} bind:value={service.fqdn}
required required
/> />
</div>
{/if} {/if}
</div>
{#if forceSave} {#if forceSave}
<div class="flex-col space-y-2 pt-4 text-center"> <div class="flex-col space-y-2 pt-4 text-center">
{#if isNonWWWDomainOK} {#if isNonWWWDomainOK}
@ -355,7 +340,8 @@
{/if} {/if}
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center px-10">
<div class="grid gap-4 grid-cols-2 grid-rows-1 lg:px-10">
<Setting <Setting
id="dualCerts" id="dualCerts"
disabled={$status.service.isRunning} disabled={$status.service.isRunning}
@ -365,9 +351,7 @@
description={$t('services.generate_www_non_www_ssl')} description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')} on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/> />
</div> <label class="text-base font-bold text-stone-100" for="exposePort" class="text-base font-bold text-stone-100"
<div class="grid grid-cols-2 items-center px-10">
<label for="exposePort" class="text-base font-bold text-stone-100"
>Exposed Port <Explainer >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.'} 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 /></label
@ -383,7 +367,6 @@
placeholder="12345" placeholder="12345"
/> />
</div> </div>
{#if service.type === 'plausibleanalytics'} {#if service.type === 'plausibleanalytics'}
<PlausibleAnalytics bind:service {readOnly} /> <PlausibleAnalytics bind:service {readOnly} />
{:else if service.type === 'minio'} {:else if service.type === 'minio'}
@ -415,6 +398,5 @@
{:else if service.type === 'taiga'} {:else if service.type === 'taiga'}
<Taiga bind:service /> <Taiga bind:service />
{/if} {/if}
</div>
</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

30
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;
@ -152,7 +153,21 @@
}); });
</script> </script>
<nav class="nav-side"> <nav
class="flex flex-row px-3 justify-center lg:justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-16"
>
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<div class="flex flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{service.name}</span>
</div>
<ServiceLinks {service} />
</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} {#if $location}
<a <a
id="open" id="open"
@ -320,11 +335,7 @@
class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`} class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`} class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
> >
<button <button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm ">
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"
@ -383,7 +394,11 @@
class:text-pink-500={$page.url.pathname === `/services/${id}/logs`} class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
class:bg-coolgray-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"> <button
id="logs"
disabled={!$status.service.isRunning}
class="icons bg-transparent text-sm"
>
<svg <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"
@ -414,5 +429,6 @@
class="icons bg-transparent text-sm"><DeleteIcon /></button class="icons bg-transparent text-sm"><DeleteIcon /></button
> >
<Tooltip triggeredBy="#delete">Delete</Tooltip> <Tooltip triggeredBy="#delete">Delete</Tooltip>
</div>
</nav> </nav>
<slot /> <slot />

6
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>
@ -59,7 +59,7 @@
</div> </div>
<ServiceLinks {service} /> <ServiceLinks {service} />
</div> </div>
<div class="mx-auto max-w-4xl px-6 py-4"> <div class="mx-auto max-w-4xl px-6 py-4 lg:pt-32">
<div class="text-2xl font-bold">Service Usage</div> <div class="text-2xl font-bold">Service Usage</div>
<div class="text-center"> <div class="text-center">
<div class="stat w-64"> <div class="stat w-64">