ui: redesign applications & settings
fix: follow logs
This commit is contained in:
Andras Bacsai
@@ -3,29 +3,22 @@
|
||||
import { appSession } from '$lib/store';
|
||||
</script>
|
||||
|
||||
<ul class="menu bg-coolgray-200 rounded">
|
||||
<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2">
|
||||
<li class="menu-title">
|
||||
<span>General</span>
|
||||
</li>
|
||||
{#if $appSession.teamId === '0'}
|
||||
<li
|
||||
class="hover:bg-coollabs duration-150"
|
||||
class:bordered={$page.url.pathname === '/settings/coolify'}
|
||||
class:bg-coolgray-500={$page.url.pathname === '/settings/coolify'}
|
||||
>
|
||||
<a href="/settings/coolify" class="no-underline w-full">Coolify Settings</a>
|
||||
<li class="rounded" class:bg-coollabs={$page.url.pathname === `/settings/coolify`}>
|
||||
<a href={`/settings/coolify`} class="no-underline w-full">Coolify Settings</a>
|
||||
</li>
|
||||
{/if}
|
||||
|
||||
<li
|
||||
class="hover:bg-coollabs duration-150"
|
||||
class:bordered={$page.url.pathname === '/settings/ssh'}
|
||||
class:bg-coolgray-500={$page.url.pathname === '/settings/ssh'}
|
||||
>
|
||||
<a href="/settings/ssh" class="no-underline w-full">SSH Keys</a>
|
||||
<li class="menu-title">
|
||||
<span>Keys & Certificates</span>
|
||||
</li>
|
||||
<li
|
||||
class="hover:bg-coollabs duration-150"
|
||||
class:bordered={$page.url.pathname === '/settings/certificates'}
|
||||
class:bg-coolgray-400={$page.url.pathname === '/settings/certificates'}
|
||||
>
|
||||
<a href="/settings/certificates" class="no-underline w-full">SSL Certificates</a>
|
||||
<li class="rounded" class:bg-coollabs={$page.url.pathname === `/settings/ssh`}>
|
||||
<a href={`/settings/ssh`} class="no-underline w-full">SSH Keys</a>
|
||||
</li>
|
||||
<li class="rounded" class:bg-coollabs={$page.url.pathname === `/settings/certificates`}>
|
||||
<a href={`/settings/certificates`} class="no-underline w-full">SSL Certificates</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -20,12 +20,14 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-6xl px-6 grid grid-cols-1 lg:grid-cols-4">
|
||||
<nav class="header flex flex-col">
|
||||
<div class="title pb-10">Settings</div>
|
||||
<Menu />
|
||||
<div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-4">
|
||||
<nav class="header flex flex-col px-0">
|
||||
<div class="title pb-[3.7rem]">Settings</div>
|
||||
<div class="px-4">
|
||||
<Menu />
|
||||
</div>
|
||||
</nav>
|
||||
<div class="pt-0 lg:pt-24 px-5 lg:px-0 col-span-0 lg:col-span-3">
|
||||
<div class="pt-0 lg:pt-[7rem] px-4 lg:px-7 col-span-0 lg:col-span-3">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,17 +55,20 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="title font-bold pb-3">SSL Certificates</div>
|
||||
<div class="w-full">
|
||||
{#if certificates.length === 0}
|
||||
<div class="text-sm">No SSL Certificate found</div>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-primary mt-6"
|
||||
on:click={() => (isModalActive = true)}>Add SSL Certificate</label
|
||||
<label for="my-modal" class="btn btn-primary mt-6" on:click={() => (isModalActive = true)}
|
||||
>Add SSL Certificate</label
|
||||
>
|
||||
{:else}
|
||||
<div class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="flex border-b border-coolgray-500 mb-6">
|
||||
<div class="title font-bold pb-3 pr-4">SSL Certificates</div>
|
||||
<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
|
||||
>Add SSL Certificate</label
|
||||
>
|
||||
</div>
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -80,7 +83,7 @@
|
||||
<td>{cert.commonName}</td>
|
||||
<td>{cert.createdAt}</td>
|
||||
<td
|
||||
><button on:click={() => deleteCertificate(cert.id)} class="btn btn-error"
|
||||
><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm btn-error"
|
||||
>Delete</button
|
||||
></td
|
||||
>
|
||||
@@ -88,9 +91,6 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<label for="my-modal" class="btn btn-primary mt-6" on:click={() => (isModalActive = true)}
|
||||
>Add SSL Certificate</label
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -129,12 +129,9 @@
|
||||
/>
|
||||
</div>
|
||||
<label for="my-modal">
|
||||
<button type="submit" class="btn btn-primary mt-4">Upload</button
|
||||
></label
|
||||
>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn"
|
||||
>Cancel</button
|
||||
<button type="submit" class="btn btn-sm btn-primary mt-4">Upload</button></label
|
||||
>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm btn-error">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -196,11 +196,38 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="title font-bold pb-3">Coolify Settings</div>
|
||||
<div class="mx-auto w-full">
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="flex flex-row border-b border-coolgray-500 mb-6">
|
||||
<div class="title font-bold pb-3 pr-4">Coolify Settings</div>
|
||||
<div class="flex flex-row space-x-2">
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
type="submit"
|
||||
class:bg-orange-600={forceSave}
|
||||
class:hover:bg-orange-400={forceSave}
|
||||
class:loading={loading.save}
|
||||
disabled={loading.save}
|
||||
>{loading.save
|
||||
? $t('forms.saving')
|
||||
: forceSave
|
||||
? $t('forms.confirm_continue')
|
||||
: $t('forms.save')}</button
|
||||
>
|
||||
|
||||
<div class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl">
|
||||
<div class="flex lg:flex-row flex-col">
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
{#if isFqdnSet}
|
||||
<button on:click|preventDefault={removeFqdn} disabled={loading.remove} class="btn"
|
||||
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
on:click={restartCoolify}
|
||||
class:loading={loading.restart}
|
||||
class="btn btn-sm btn-error">Restart Coolify</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:flex-row flex-col">
|
||||
<div class="grid grid-flow-row gap-2 px-4 pr-5">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div>
|
||||
@@ -208,7 +235,7 @@
|
||||
<Explainer position="dropdown-bottom" explanation={$t('setting.ssl_explainer')} />
|
||||
</div>
|
||||
<input
|
||||
class="w-full bg-coolgray-100"
|
||||
class="w-full"
|
||||
bind:value={fqdn}
|
||||
readonly={!$appSession.isAdmin || isFqdnSet}
|
||||
disabled={!$appSession.isAdmin || isFqdnSet}
|
||||
@@ -273,7 +300,7 @@
|
||||
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<input
|
||||
class="w-full px-2 bg-coolgray-100"
|
||||
class="w-full px-2 "
|
||||
type="number"
|
||||
bind:value={minPort}
|
||||
min="1024"
|
||||
@@ -281,7 +308,7 @@
|
||||
/>
|
||||
<p>-</p>
|
||||
<input
|
||||
class="w-full px-2 bg-coolgray-100"
|
||||
class="w-full px-2 "
|
||||
type="number"
|
||||
bind:value={maxPort}
|
||||
min={minPort}
|
||||
@@ -306,7 +333,7 @@
|
||||
</div>
|
||||
|
||||
<input
|
||||
class="w-full bg-coolgray-100"
|
||||
class="w-full "
|
||||
placeholder="1.1.1.1,8.8.8.8"
|
||||
bind:value={DNSServers}
|
||||
/>
|
||||
@@ -342,36 +369,6 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row flex-wrap items-center space-x-3 justify-center lg:justify-start pt-8"
|
||||
>
|
||||
<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
class:bg-orange-600={forceSave}
|
||||
class:hover:bg-orange-400={forceSave}
|
||||
class:loading={loading.save}
|
||||
disabled={loading.save}
|
||||
>{loading.save
|
||||
? $t('forms.saving')
|
||||
: forceSave
|
||||
? $t('forms.confirm_continue')
|
||||
: $t('forms.save')}</button
|
||||
>
|
||||
|
||||
{#if isFqdnSet}
|
||||
<button on:click|preventDefault={removeFqdn} disabled={loading.remove} class="btn"
|
||||
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
on:click={restartCoolify}
|
||||
class:loading={loading.restart}
|
||||
class="btn bg-red-600 hover:bg-red-700">Restart Coolify</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -57,19 +57,20 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="title font-bold pb-3">SSH Keys</div>
|
||||
<div class="w-full">
|
||||
{#if sshKeys.length === 0}
|
||||
<div class="text-sm">No SSH keys found</div>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-primary mt-6"
|
||||
on:click={() => (isModalActive = true)}>Add SSH Key</label
|
||||
>
|
||||
{:else}
|
||||
<div
|
||||
class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl"
|
||||
<label for="my-modal" class="btn btn-primary mt-6" on:click={() => (isModalActive = true)}
|
||||
>Add SSH Key</label
|
||||
>
|
||||
{:else}
|
||||
<div class="mx-auto w-full">
|
||||
<div class="flex border-b border-coolgray-500 mb-6">
|
||||
<div class="title font-bold pb-3 pr-4">SSH Keys</div>
|
||||
<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
|
||||
>Add SSH Key</label
|
||||
>
|
||||
</div>
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -84,7 +85,7 @@
|
||||
<td>{key.name}</td>
|
||||
<td>{key.createdAt}</td>
|
||||
<td
|
||||
><button on:click={() => deleteSSHKey(key.id)} class="btn btn-error"
|
||||
><button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm btn-error"
|
||||
>Delete</button
|
||||
></td
|
||||
>
|
||||
@@ -92,11 +93,6 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-primary mt-6"
|
||||
on:click={() => (isModalActive = true)}>Add SSH Key</label
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -116,12 +112,7 @@
|
||||
<div class="modal-action">
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<label for="name" class="">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
required
|
||||
bind:value={newSSHKey.name}
|
||||
class="w-full bg-coolgray-100"
|
||||
/>
|
||||
<input id="name" required bind:value={newSSHKey.name} class="w-full bg-coolgray-100" />
|
||||
<label for="privateKey" class="pt-4">Private Key</label>
|
||||
<textarea
|
||||
id="privateKey"
|
||||
@@ -132,11 +123,12 @@
|
||||
rows={15}
|
||||
/>
|
||||
<label for="my-modal">
|
||||
<button type="submit" class="btn btn-primary mt-4">Save</button
|
||||
></label
|
||||
<button type="submit" class="btn btn-sm btn-primary mt-4">Save</button></label
|
||||
>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn"
|
||||
>Cancel</button
|
||||
<button
|
||||
on:click={() => (isModalActive = false)}
|
||||
type="button"
|
||||
class="btn btn-sm btn-error">Cancel</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user