ui: settings view
This commit is contained in:
Andras Bacsai
parent
be507be3a9
commit
7a8fe6d152
@ -3,7 +3,7 @@
|
||||
import { appSession } from '$lib/store';
|
||||
</script>
|
||||
|
||||
<ul class="menu bg-coolgray-200 rounded lg:w-52">
|
||||
<ul class="menu bg-coolgray-200 rounded">
|
||||
{#if $appSession.teamId === '0'}
|
||||
<li
|
||||
class="hover:bg-coollabs duration-150"
|
||||
|
||||
@ -20,12 +20,12 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col lg:flex-row ">
|
||||
<nav class="header flex flex-col w-full lg:w-52">
|
||||
<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 />
|
||||
</nav>
|
||||
<div class="pt-0 lg:pt-24 px-5 lg:px-0 mx-auto">
|
||||
<div class="pt-0 lg:pt-24 px-5 lg:px-0 col-span-0 lg:col-span-3">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -56,16 +56,16 @@
|
||||
</script>
|
||||
|
||||
<div class="title font-bold pb-3">SSL Certificates</div>
|
||||
<div class="w-full lg:w-[50em]">
|
||||
<div class="w-full">
|
||||
{#if certificates.length === 0}
|
||||
<div class="text-sm">No SSL Certificate found</div>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-sm bg-settings text-black mt-6"
|
||||
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-100 rounded border-coolgray-300 border ">
|
||||
<div class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -80,7 +80,7 @@
|
||||
<td>{cert.commonName}</td>
|
||||
<td>{cert.createdAt}</td>
|
||||
<td
|
||||
><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm bg-error"
|
||||
><button on:click={() => deleteCertificate(cert.id)} class="btn btn-error"
|
||||
>Delete</button
|
||||
></td
|
||||
>
|
||||
@ -88,10 +88,8 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-sm bg-settings text-black 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
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
@ -100,7 +98,7 @@
|
||||
{#if isModalActive}
|
||||
<input type="checkbox" id="my-modal" class="modal-toggle" />
|
||||
<div class="modal modal-bottom sm:modal-middle ">
|
||||
<div class="modal-box rounded bg-coolgray-300 max-w-2xl">
|
||||
<div class="modal-box rounded bg-coolgray-300 max-w-2xl">
|
||||
<h3 class="font-bold text-lg">Add a new SSL Certificate</h3>
|
||||
<p class="py-4">
|
||||
SSL Certificates are used to secure your domain and allow you to use HTTPS. <br /><br />Once
|
||||
@ -131,10 +129,10 @@
|
||||
/>
|
||||
</div>
|
||||
<label for="my-modal">
|
||||
<button type="submit" class="btn btn-sm bg-settings text-black mt-4">Upload</button
|
||||
<button type="submit" class="btn btn-primary mt-4">Upload</button
|
||||
></label
|
||||
>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn"
|
||||
>Cancel</button
|
||||
>
|
||||
</form>
|
||||
|
||||
@ -198,23 +198,17 @@
|
||||
|
||||
<div class="title font-bold pb-3">Coolify Settings</div>
|
||||
|
||||
<div class="mx-auto w-full p-4 bg-coolgray-100 rounded border-coolgray-300 border">
|
||||
<div class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl">
|
||||
<div class="flex lg:flex-row flex-col">
|
||||
<!-- <Upload />
|
||||
{#if certificates.length > 0}
|
||||
{#each certificates as cert}
|
||||
<div>{cert.commonName}</div>
|
||||
{/each}
|
||||
{/if} -->
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
|
||||
<div class="grid grid-flow-row gap-2 px-4 pr-5">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div>
|
||||
{$t('application.url_fqdn')}
|
||||
<Explainer position="dropdown-bottom" explanation={$t('setting.ssl_explainer')} />
|
||||
</div>
|
||||
<input
|
||||
class="w-full"
|
||||
class="w-full bg-coolgray-100"
|
||||
bind:value={fqdn}
|
||||
readonly={!$appSession.isAdmin || isFqdnSet}
|
||||
disabled={!$appSession.isAdmin || isFqdnSet}
|
||||
@ -229,13 +223,13 @@
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-success"
|
||||
class="btn 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"
|
||||
class="btn btn-error"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
@ -243,14 +237,14 @@
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-success"
|
||||
class="btn 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"
|
||||
class="btn btn-error"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
@ -279,7 +273,7 @@
|
||||
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<input
|
||||
class=" w-full px-2"
|
||||
class="w-full px-2 bg-coolgray-100"
|
||||
type="number"
|
||||
bind:value={minPort}
|
||||
min="1024"
|
||||
@ -287,7 +281,7 @@
|
||||
/>
|
||||
<p>-</p>
|
||||
<input
|
||||
class="w-full px-2"
|
||||
class="w-full px-2 bg-coolgray-100"
|
||||
type="number"
|
||||
bind:value={maxPort}
|
||||
min={minPort}
|
||||
@ -311,9 +305,13 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
|
||||
<input
|
||||
class="w-full bg-coolgray-100"
|
||||
placeholder="1.1.1.1,8.8.8.8"
|
||||
bind:value={DNSServers}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isRegistrationEnabled"
|
||||
@ -345,38 +343,35 @@
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row flex-wrap items-center space-x-3 justify-center lg:justify-start lg:py-4 px-4 pb-4 lg:pb-4"
|
||||
>
|
||||
<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0 px-6">
|
||||
<button
|
||||
class="btn btn-sm bg-settings text-black"
|
||||
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}
|
||||
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
|
||||
on:click|preventDefault={removeFqdn}
|
||||
disabled={loading.remove}
|
||||
class="btn btn-sm"
|
||||
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</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}
|
||||
<button
|
||||
on:click={restartCoolify}
|
||||
class:loading={loading.restart}
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -58,17 +58,17 @@
|
||||
</script>
|
||||
|
||||
<div class="title font-bold pb-3">SSH Keys</div>
|
||||
<div class="w-full lg:w-[50em]">
|
||||
<div class="w-full">
|
||||
{#if sshKeys.length === 0}
|
||||
<div class="text-sm">No SSH keys found</div>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-sm bg-settings text-black mt-6"
|
||||
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-100 rounded border-coolgray-300 border "
|
||||
class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl"
|
||||
>
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
@ -84,7 +84,7 @@
|
||||
<td>{key.name}</td>
|
||||
<td>{key.createdAt}</td>
|
||||
<td
|
||||
><button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error"
|
||||
><button on:click={() => deleteSSHKey(key.id)} class="btn btn-error"
|
||||
>Delete</button
|
||||
></td
|
||||
>
|
||||
@ -94,7 +94,7 @@
|
||||
</table>
|
||||
<label
|
||||
for="my-modal"
|
||||
class="btn btn-sm bg-settings text-black mt-6"
|
||||
class="btn btn-primary mt-6"
|
||||
on:click={() => (isModalActive = true)}>Add SSH Key</label
|
||||
>
|
||||
</div>
|
||||
@ -132,10 +132,10 @@
|
||||
rows={15}
|
||||
/>
|
||||
<label for="my-modal">
|
||||
<button type="submit" class="btn btn-sm bg-settings text-black mt-4">Save</button
|
||||
<button type="submit" class="btn btn-primary mt-4">Save</button
|
||||
></label
|
||||
>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn"
|
||||
>Cancel</button
|
||||
>
|
||||
</form>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user