fix(routes): ui from settings page
This commit is contained in:
Kaname
@@ -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>
|
||||||
|
|||||||
@@ -198,180 +198,159 @@
|
|||||||
<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">
|
||||||
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 class="grid grid-cols-2 items-center">
|
|
||||||
<Setting
|
|
||||||
id="isRegistrationEnabled"
|
|
||||||
bind:setting={isRegistrationEnabled}
|
|
||||||
title={$t('setting.registration_allowed')}
|
|
||||||
description={$t('setting.registration_allowed_explainer')}
|
|
||||||
on:click={() => changeSettings('isRegistrationEnabled')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 items-center">
|
|
||||||
<Setting
|
|
||||||
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')}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
|
||||||
|
<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')}
|
||||||
|
/>
|
||||||
|
<Setting
|
||||||
|
id="isRegistrationEnabled"
|
||||||
|
bind:setting={isRegistrationEnabled}
|
||||||
|
title={$t('setting.registration_allowed')}
|
||||||
|
description={$t('setting.registration_allowed_explainer')}
|
||||||
|
on:click={() => changeSettings('isRegistrationEnabled')}
|
||||||
|
/>
|
||||||
|
<Setting
|
||||||
|
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}
|
{#if browser && $features.beta}
|
||||||
<div class="grid grid-cols-2 items-center">
|
<Setting
|
||||||
<Setting
|
id="isAutoUpdateEnabled"
|
||||||
id="isAutoUpdateEnabled"
|
bind:setting={isAutoUpdateEnabled}
|
||||||
bind:setting={isAutoUpdateEnabled}
|
title={$t('setting.auto_update_enabled')}
|
||||||
title={$t('setting.auto_update_enabled')}
|
description={$t('setting.auto_update_enabled_explainer')}
|
||||||
description={$t('setting.auto_update_enabled_explainer')}
|
on:click={() => changeSettings('isAutoUpdateEnabled')}
|
||||||
on:click={() => changeSettings('isAutoUpdateEnabled')}
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user