ui: fix destination view

This commit is contained in:
Andras Bacsai 2022-09-22 09:09:31 +02:00
parent 9d7745cd9b
commit 657b97f190
4 changed files with 19 additions and 19 deletions

View File

@ -160,7 +160,7 @@
> >
</div> </div>
<div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center"> <div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center">
<label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label> <label for="name">{$t('forms.name')}</label>
<input <input
class="w-full" class="w-full"
name="name" name="name"
@ -169,9 +169,7 @@
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
bind:value={destination.name} bind:value={destination.name}
/> />
<label for="engine" class="text-base font-bold text-stone-100 w-full" <label for="engine">{$t('forms.engine')}</label>
>{$t('forms.engine')}</label
>
<CopyPasswordField <CopyPasswordField
id="engine" id="engine"
readonly readonly
@ -180,7 +178,7 @@
placeholder="{$t('forms.eg')}: /var/run/docker.sock" placeholder="{$t('forms.eg')}: /var/run/docker.sock"
value={destination.engine} value={destination.engine}
/> />
<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label> <label for="network">{$t('forms.network')}</label>
<CopyPasswordField <CopyPasswordField
id="network" id="network"
readonly readonly

View File

@ -69,7 +69,7 @@
loading.proxy = false; loading.proxy = false;
}); });
async function changeProxySetting() { async function changeProxySetting() {
if (!destination.remoteVerified) return if (!destination.remoteVerified) return;
loading.proxy = true; loading.proxy = true;
if (!cannotDisable) { if (!cannotDisable) {
const isProxyActivated = destination.isCoolifyProxyUsed; const isProxyActivated = destination.isCoolifyProxyUsed;
@ -196,9 +196,10 @@
{/if} {/if}
</div> </div>
<div class="grid grid-cols-2 items-center px-10 "> <div class="grid grid-cols-2 items-center px-10 ">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name">{$t('forms.name')}</label>
<input <input
name="name" name="name"
class="w-full"
placeholder={$t('forms.name')} placeholder={$t('forms.name')}
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
@ -206,7 +207,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="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label> <label for="network">{$t('forms.network')}</label>
<CopyPasswordField <CopyPasswordField
id="network" id="network"
readonly readonly
@ -217,7 +218,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="remoteIpAddress" class="text-base font-bold text-stone-100">IP Address</label> <label for="remoteIpAddress">IP Address</label>
<CopyPasswordField <CopyPasswordField
id="remoteIpAddress" id="remoteIpAddress"
readonly readonly
@ -227,7 +228,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="remoteUser" class="text-base font-bold text-stone-100">User</label> <label for="remoteUser">User</label>
<CopyPasswordField <CopyPasswordField
id="remoteUser" id="remoteUser"
readonly readonly
@ -237,7 +238,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="remotePort" class="text-base font-bold text-stone-100">Port</label> <label for="remotePort">Port</label>
<CopyPasswordField <CopyPasswordField
id="remotePort" id="remotePort"
readonly readonly
@ -247,7 +248,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="sshKey" class="text-base font-bold text-stone-100">SSH Key</label> <label for="sshKey">SSH Key</label>
<a <a
href={!isDisabled ? `/destinations/${id}/configuration/sshkey?from=/destinations/${id}` : ''} href={!isDisabled ? `/destinations/${id}/configuration/sshkey?from=/destinations/${id}` : ''}
class="no-underline" class="no-underline"
@ -255,7 +256,7 @@
value={destination.sshKey.name} value={destination.sshKey.name}
readonly readonly
id="sshKey" id="sshKey"
class="cursor-pointer hover:bg-coolgray-500" class="cursor-pointer w-full"
/></a /></a
> >
</div> </div>
@ -267,7 +268,7 @@
bind:setting={destination.isCoolifyProxyUsed} bind:setting={destination.isCoolifyProxyUsed}
on:click={changeProxySetting} on:click={changeProxySetting}
title={$t('destination.use_coolify_proxy')} title={$t('destination.use_coolify_proxy')}
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${ description={`Install & configure a proxy (based on Traefik) on the destination to allow you to access your applications and services without any manual configuration.${
cannotDisable cannotDisable
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>' ? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
: '' : ''

View File

@ -90,8 +90,12 @@
{#if $page.params.id !== 'new'} {#if $page.params.id !== 'new'}
<nav class="header lg:flex-row flex-col-reverse"> <nav class="header lg:flex-row flex-col-reverse">
<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0"> <div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center title">
<div class="title">Configurations</div> {#if $page.url.pathname === `/destinations/${$page.params.id}`}
Configurations
{:else if $page.url.pathname.startsWith(`/destinations/${$page.params.id}/configuration/sshkey`)}
Select a SSH Key
{/if}
</div> </div>
</div> </div>
<div class="lg:block hidden flex-1" /> <div class="lg:block hidden flex-1" />

View File

@ -38,9 +38,6 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Select a SSH Keys</div>
</div>
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row "> <div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
{#if sshKeys.length > 0} {#if sshKeys.length > 0}