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

Design day!

Browse Source
This commit is contained in:
Andras Bacsai 2022-02-22 12:56:58 +01:00
parent 0c2e028b38
commit df18b93809
24 changed files with 418 additions and 482 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/CopyPasswordField.svelte
View File

@ -29,7 +29,7 @@
{#if !isPasswordField || showPassword}
{#if textarea}
<textarea
rows="3"
rows="5"
class={disabledClass}
{placeholder}
type="text"

2
src/lib/components/Explainer.svelte
View File

@ -3,4 +3,4 @@
export let customClass = 'max-w-[24rem]';
</script>
<div class="py-1 text-xs text-stone-400 {customClass}">{@html text}</div>
<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>

19
src/routes/__layout.svelte
View File

@ -444,7 +444,8 @@
</button>
{/if}
{/if}
</div>
<div class="flex flex-col space-y-4 py-2">
<a
sveltekit:prefetch
href="/teams"
@ -519,15 +520,15 @@
<path d="M7 12h14l-3 -3m0 6l3 -3" />
</svg>
</div>
</div>
<div
class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
>
<a
class="text-[10px] no-underline"
href={`https://github.com/coollabsio/coolify/releases/tag/v${$session.version}`}
target="_blank">v{$session.version}</a
<div
class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
>
<a
class="text-[10px] no-underline"
href={`https://github.com/coollabsio/coolify/releases/tag/v${$session.version}`}
target="_blank">v{$session.version}</a
>
</div>
</div>
</div>
</nav>

51
src/routes/applications/[id]/index.svelte
View File

@ -174,7 +174,7 @@
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-2 items-center">
<label for="name">Name</label>
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
readonly={!$session.isAdmin}
name="name"
@ -184,7 +184,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="gitSource">Git Source</label>
<label for="gitSource" class="text-base font-bold text-stone-100">Git Source</label>
<a
href={$session.isAdmin
? `/applications/${id}/configuration/source?from=/applications/${id}`
@ -199,7 +199,7 @@
>
</div>
<div class="grid grid-cols-2 items-center">
<label for="repository">Git Repository</label>
<label for="repository" class="text-base font-bold text-stone-100">Git Repository</label>
<a
href={$session.isAdmin
? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
@ -214,7 +214,7 @@
>
</div>
<div class="grid grid-cols-2 items-center">
<label for="buildPack">Build Pack</label>
<label for="buildPack" class="text-base font-bold text-stone-100">Build Pack</label>
<a
href={$session.isAdmin
? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
@ -230,7 +230,7 @@
>
</div>
<div class="grid grid-cols-2 items-center pb-8">
<label for="destination">Destination</label>
<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
<div class="no-underline">
<input
value={application.destinationDocker.name}
@ -247,7 +247,7 @@
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-2">
<div class="flex-col">
<label for="fqdn" class="relative pt-2">Domain (FQDN)</label>
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Domain (FQDN)</label>
<Explainer
text="If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
/>
@ -277,7 +277,7 @@
</div>
{#if !staticDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2 items-center">
<label for="port">Port</label>
<label for="port" class="text-base font-bold text-stone-100">Port</label>
<input
readonly={!$session.isAdmin}
name="port"
@ -290,7 +290,9 @@
{#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2 items-center">
<label for="installCommand">Install Command</label>
<label for="installCommand" class="text-base font-bold text-stone-100"
>Install Command</label
>
<input
readonly={!$session.isAdmin}
name="installCommand"
@ -300,7 +302,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="buildCommand">Build Command</label>
<label for="buildCommand" class="text-base font-bold text-stone-100">Build Command</label>
<input
readonly={!$session.isAdmin}
name="buildCommand"
@ -310,7 +312,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="startCommand" class="">Start Command</label>
<label for="startCommand" class="text-base font-bold text-stone-100">Start Command</label>
<input
readonly={!$session.isAdmin}
name="startCommand"
@ -322,7 +324,14 @@
{/if}
<div class="grid grid-cols-2 items-center">
<label for="baseDirectory" class="pt-2">Base Directory</label>
<div class="flex-col">
<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
>Base Directory</label
>
<Explainer
text="Directory to use as the base for all commands.<br>Could be useful with <span class='text-green-500 font-bold'>monorepos</span>."
/>
</div>
<input
readonly={!$session.isAdmin}
name="baseDirectory"
@ -330,13 +339,18 @@
bind:value={application.baseDirectory}
placeholder="default: /"
/>
<Explainer
text="Directory to use as the base of all commands. <br> Could be useful with monorepos."
/>
</div>
{#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2">
<label for="publishDirectory" class="pt-2">Publish Directory</label>
<div class="grid grid-cols-2 items-center">
<div class="flex-col">
<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
>Publish Directory</label
>
<Explainer
text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-500 font-bold'>dist</span>,<span class='text-green-500 font-bold'>_site</span> or <span class='text-green-500 font-bold'>public</span>."
/>
</div>
<input
readonly={!$session.isAdmin}
name="publishDirectory"
@ -344,9 +358,6 @@
bind:value={application.publishDirectory}
placeholder=" default: /"
/>
<Explainer
text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-600 font-bold'>dist</span>,<span class='text-green-600 font-bold'>_site</span> or <span class='text-green-600 font-bold'>public</span>."
/>
</div>
{/if}
</div>
@ -378,7 +389,7 @@
bind:setting={debug}
on:click={() => changeSettings('debug')}
title="Debug Logs"
description="Enable debug logs during build phase. <br>(<span class='text-red-500'>sensitive information</span> could be visible in logs)"
description="Enable debug logs during build phase.<br><span class='text-red-500 font-bold'>Sensitive information</span> could be visible and saved in logs."
/>
</div>
</div>

18
src/routes/applications/[id]/secrets/_Secret.svelte
View File

@ -59,19 +59,19 @@
}
</script>
<td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
<td>
<input
id={isNewSecret ? 'secretName' : 'secretNameNew'}
bind:value={name}
required
placeholder="EXAMPLE_VARIABLE"
class="-mx-2 w-64 border-2 border-transparent"
class=" border border-dashed border-coolgray-300"
readonly={!isNewSecret}
class:bg-transparent={!isNewSecret}
class:cursor-not-allowed={!isNewSecret}
/>
</td>
<td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
<td>
<CopyPasswordField
id={isNewSecret ? 'secretValue' : 'secretValueNew'}
name={isNewSecret ? 'secretValue' : 'secretValueNew'}
@ -81,7 +81,7 @@
placeholder="J$#@UIO%HO#$U%H"
/>
</td>
<td class="whitespace-nowrap px-6 py-2 text-center text-sm font-medium text-white">
<td class="text-center">
<div
type="button"
on:click={setSecretValue}
@ -130,21 +130,19 @@
</span>
</div>
</td>
<td class="whitespace-nowrap px-6 py-2 text-sm font-medium text-white">
<td>
{#if isNewSecret}
<div class="flex items-center justify-center">
<button class="bg-green-600 hover:bg-green-500" on:click={() => saveSecret(true)}>Add</button>
</div>
{:else}
<div class="flex-col space-y-2">
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="w-24 bg-green-600 hover:bg-green-500" on:click={() => saveSecret(false)}
>Set</button
>
<button class="" on:click={() => saveSecret(false)}>Set</button>
</div>
{#if !isPRMRSecret}
<div class="flex justify-center items-end">
<button class="w-24 bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
</div>
{/if}
</div>

32
src/routes/applications/[id]/secrets/index.svelte
View File

@ -41,33 +41,19 @@
</div>
</div>
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
<table class="mx-auto">
<thead class=" rounded-xl border-b border-coolgray-500">
<tr>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white">Name</th
>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
>Value</th
>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
>Need during buildtime?</th
>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-white"
/>
<table class="mx-auto border-separate text-left">
<thead>
<tr class="h-12">
<th scope="col">Name</th>
<th scope="col">Value</th>
<th scope="col" class="w-64 text-center">Need during buildtime?</th>
<th scope="col" class="w-96 text-center">Action</th>
</tr>
</thead>
<tbody class="">
<tbody>
{#each secrets as secret}
{#key secret.id}
<tr class="h-20 transition duration-100 hover:bg-coolgray-400">
<tr>
<Secret
name={secret.name}
value={secret.value}

10
src/routes/databases/[id]/_Databases/_CouchDb.svelte
View File

@ -8,7 +8,7 @@
</div>
<div class="space-y-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">Default Database</label>
<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@ -20,7 +20,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser">User</label>
<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
<CopyPasswordField
readonly
disabled
@ -31,7 +31,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword">Password</label>
<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
<CopyPasswordField
readonly
disabled
@ -43,7 +43,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser">Root User</label>
<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
<CopyPasswordField
readonly
disabled
@ -54,7 +54,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword">Root's Password</label>
<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
<CopyPasswordField
readonly
disabled

12
src/routes/databases/[id]/_Databases/_Databases.svelte
View File

@ -91,7 +91,7 @@
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="name">Name</label>
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
readonly={!$session.isAdmin}
name="name"
@ -101,7 +101,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="destination">Destination</label>
<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
{#if database.destinationDockerId}
<div class="no-underline">
<input
@ -116,14 +116,14 @@
</div>
<div class="grid grid-cols-2 items-center">
<label for="version">Version</label>
<label for="version" class="text-base font-bold text-stone-100">Version</label>
<input value={database.version} readonly disabled class="bg-transparent " />
</div>
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="host">Host</label>
<label for="host" class="text-base font-bold text-stone-100">Host</label>
<CopyPasswordField
placeholder="Generated automatically after start"
isPasswordField={false}
@ -135,7 +135,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="publicPort">Port</label>
<label for="publicPort" class="text-base font-bold text-stone-100">Port</label>
<CopyPasswordField
placeholder="Generated automatically after set to public"
id="publicPort"
@ -159,7 +159,7 @@
<CouchDb bind:database />
{/if}
<div class="grid grid-cols-2 items-center px-10 pb-8">
<label for="url">Connection String</label>
<label for="url" class="text-base font-bold text-stone-100">Connection String</label>
<CopyPasswordField
textarea={true}
placeholder="Generated automatically after start"

4
src/routes/databases/[id]/_Databases/_MongoDB.svelte
View File

@ -8,7 +8,7 @@
</div>
<div class="space-y-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="rootUser">Root User</label>
<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
<CopyPasswordField
placeholder="Generated automatically after start"
id="rootUser"
@ -19,7 +19,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword">Root's Password</label>
<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
<CopyPasswordField
placeholder="Generated automatically after start"
isPasswordField={true}

10
src/routes/databases/[id]/_Databases/_MySQL.svelte
View File

@ -8,7 +8,7 @@
</div>
<div class="space-y-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">Default Database</label>
<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@ -20,7 +20,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser">User</label>
<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
<CopyPasswordField
readonly
disabled
@ -31,7 +31,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword">Password</label>
<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
<CopyPasswordField
readonly
disabled
@ -43,7 +43,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser">Root User</label>
<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
<CopyPasswordField
readonly
disabled
@ -54,7 +54,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword">Root's Password</label>
<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
<CopyPasswordField
readonly
disabled

6
src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
View File

@ -8,7 +8,7 @@
</div>
<div class="space-y-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">Default Database</label>
<label for="defaultDatabase" class="text-base font-bold text-stone-100">Default Database</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@ -20,7 +20,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser">User</label>
<label for="dbUser" class="text-base font-bold text-stone-100">User</label>
<CopyPasswordField
readonly
disabled
@ -31,7 +31,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword">Password</label>
<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
<CopyPasswordField
readonly
disabled

2
src/routes/databases/[id]/_Databases/_Redis.svelte
View File

@ -8,7 +8,7 @@
</div>
<div class="space-y-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword">Password</label>
<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
<CopyPasswordField
disabled
readonly

128
src/routes/destinations/[id]/_LocalDocker.svelte
View File

@ -122,80 +122,72 @@
}
</script>
<div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button
type="submit"
class="bg-sky-600 hover:bg-sky-500"
class:bg-sky-600={!loading}
class:hover:bg-sky-500={!loading}
disabled={loading}
>{loading ? 'Saving...' : 'Save'}
</button>
<button
class={restarting ? '' : 'bg-red-600 hover:bg-red-500'}
disabled={restarting}
on:click|preventDefault={forceRestartProxy}
>{restarting ? 'Restarting... please wait...' : 'Force restart proxy'}</button
>
<!-- <button type="button" class="bg-coollabs hover:bg-coollabs-100" on:click={scanApps}
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex space-x-1 pb-5">
<div class="title font-bold">Configuration</div>
<button
type="submit"
class="bg-sky-600 hover:bg-sky-500"
class:bg-sky-600={!loading}
class:hover:bg-sky-500={!loading}
disabled={loading}
>{loading ? 'Saving...' : 'Save'}
</button>
<button
class={restarting ? '' : 'bg-red-600 hover:bg-red-500'}
disabled={restarting}
on:click|preventDefault={forceRestartProxy}
>{restarting ? 'Restarting... please wait...' : 'Force restart proxy'}</button
>
<!-- <button type="button" class="bg-coollabs hover:bg-coollabs-100" on:click={scanApps}
>Scan for applications</button
> -->
</div>
<div class="grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2">
<input name="name" placeholder="name" bind:value={destination.name} />
</div>
</div>
</div>
<div class="grid grid-cols-2 items-center px-10 ">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" placeholder="name" bind:value={destination.name} />
</div>
<div class="grid grid-cols-3 items-center">
<label for="engine">Engine</label>
<div class="col-span-2">
<CopyPasswordField
id="engine"
readonly
disabled
name="engine"
placeholder="eg: /var/run/docker.sock"
value={destination.engine}
/>
</div>
</div>
<!-- <div class="flex items-center">
<div class="grid grid-cols-2 items-center px-10">
<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
<CopyPasswordField
id="engine"
readonly
disabled
name="engine"
placeholder="eg: /var/run/docker.sock"
value={destination.engine}
/>
</div>
<!-- <div class="flex items-center">
<label for="remoteEngine">Remote Engine?</label>
<input name="remoteEngine" type="checkbox" bind:checked={payload.remoteEngine} />
</div> -->
<div class="grid grid-cols-3 items-center">
<label for="network">Network</label>
<div class="col-span-2">
<CopyPasswordField
id="network"
readonly
disabled
name="network"
placeholder="default: coolify"
value={destination.network}
/>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<Setting
disabled={cannotDisable}
bind:setting={destination.isCoolifyProxyUsed}
on:click={changeProxySetting}
title="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. Databases will have their own proxy. <br><br>${
cannotDisable
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
: ''
}`}
/>
</div>
</form>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">Network</label>
<CopyPasswordField
id="network"
readonly
disabled
name="network"
placeholder="default: coolify"
value={destination.network}
/>
</div>
<div class="grid grid-cols-2 items-center">
<Setting
disabled={cannotDisable}
bind:setting={destination.isCoolifyProxyUsed}
on:click={changeProxySetting}
title="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. Databases will have their own proxy. <br><br>${
cannotDisable
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
: ''
}`}
/>
</div>
</form>
<!-- <div class="flex justify-center">
{#if payload.isCoolifyProxyUsed}
{#if state}

5
src/routes/destinations/[id]/index.svelte
View File

@ -42,5 +42,6 @@
<span class="arrow-right-applications px-1">></span>
<span class="pr-2">{destination.name}</span>
</div>
<LocalDocker bind:destination {settings} {state} />
<div class="mx-auto max-w-4xl px-6">
<LocalDocker bind:destination {settings} {state} />
</div>

64
src/routes/new/destination/_Docker.svelte
View File

@ -5,7 +5,7 @@
import { post } from '$lib/api';
import Setting from '$lib/components/Setting.svelte';
import { enhance, errorNotification } from '$lib/form';
import { errorNotification } from '$lib/form';
let loading = false;
@ -24,8 +24,8 @@
<div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<div class="flex items-center space-x-2 pb-5">
<div class="title font-bold">Configuration</div>
<button
type="submit"
class:bg-sky-600={!loading}
@ -38,24 +38,20 @@
: 'Save'}</button
>
</div>
<div class="grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2">
<input required name="name" placeholder="name" bind:value={payload.name} />
</div>
<div class="mt-2 grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input required name="name" placeholder="name" bind:value={payload.name} />
</div>
<div class="grid grid-cols-3 items-center">
<label for="engine">Engine</label>
<div class="col-span-2">
<input
required
name="engine"
placeholder="eg: /var/run/docker.sock"
bind:value={payload.engine}
/>
<!-- <Explainer text="You can use remote Docker Engine with over SSH." /> -->
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
<input
required
name="engine"
placeholder="eg: /var/run/docker.sock"
bind:value={payload.engine}
/>
<!-- <Explainer text="You can use remote Docker Engine with over SSH." /> -->
</div>
<!-- <div class="flex items-center">
<label for="remoteEngine">Remote Docker Engine?</label>
@ -75,27 +71,17 @@
</div>
</div>
{/if} -->
<div class="grid grid-cols-3 items-center">
<label for="network">Network</label>
<div class="col-span-2">
<input
required
name="network"
placeholder="default: coolify"
bind:value={payload.network}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">Network</label>
<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
</div>
<div class="flex justify-start">
<ul class="mt-2 divide-y divide-stone-800">
<Setting
bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
isPadding={false}
title="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 (recommended for Docker). Databases will have their own proxy."
/>
</ul>
<div class="grid grid-cols-2 items-center">
<Setting
bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title="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 (recommended for Docker).<br><br>Databases will have their own proxy."
/>
</div>
</form>
</div>

57
src/routes/new/source/_Github.svelte
View File

@ -24,26 +24,24 @@
}
</script>
<div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-3 items-center">
<label for="type">Type</label>
<div class="mx-auto max-w-4xl px-6">
<div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="type" class="text-base font-bold text-stone-100">Type</label>
<div class="col-span-2">
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option>
<option value="gitlab">GitLab</option>
<option value="bitbucket">BitBucket</option>
</select>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2">
<div class="grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
name="name"
id="name"
@ -53,11 +51,9 @@
bind:value={gitSource.name}
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="htmlUrl">HTML URL</label>
<div class="col-span-2">
<div class="grid grid-cols-2 items-center px-10">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input
type="url"
name="htmlUrl"
@ -67,10 +63,8 @@
bind:value={gitSource.htmlUrl}
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="apiUrl">API URL</label>
<div class="col-span-2">
<div class="grid grid-cols-2 items-center px-10">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input
name="apiUrl"
type="url"
@ -80,10 +74,15 @@
bind:value={gitSource.apiUrl}
/>
</div>
</div>
<div class="grid grid-cols-3">
<label for="organization" class="pt-2">Organization</label>
<div class="col-span-2">
<div class="grid grid-cols-2 px-10">
<div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label
>
<Explainer
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
/>
</div>
<input
name="organization"
id="organization"
@ -91,11 +90,7 @@
bind:value={gitSource.organization}
bind:this={organizationEl}
/>
<Explainer
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your
user will be used."
/>
</div>
</div>
</form>
</form>
</div>
</div>

83
src/routes/new/source/_Gitlab.svelte
View File

@ -27,56 +27,47 @@
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-3 items-center">
<label for="type">Type</label>
<div class="col-span-2">
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option>
<option value="gitlab">GitLab</option>
<option value="bitbucket">BitBucket</option>
</select>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="type" class="text-base font-bold text-stone-100">Type</label>
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option>
<option value="gitlab">GitLab</option>
<option value="bitbucket">BitBucket</option>
</select>
</div>
<div class="grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2">
<input
name="name"
id="name"
placeholder="GitHub.com"
required
bind:this={nameEl}
bind:value={gitSource.name}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
name="name"
id="name"
placeholder="GitHub.com"
required
bind:this={nameEl}
bind:value={gitSource.name}
/>
</div>
<div class="grid grid-cols-3 items-center">
<label for="htmlUrl">HTML URL</label>
<div class="col-span-2">
<input
type="url"
name="htmlUrl"
id="htmlUrl"
placeholder="eg: https://github.com"
required
bind:value={gitSource.htmlUrl}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input
type="url"
name="htmlUrl"
id="htmlUrl"
placeholder="eg: https://github.com"
required
bind:value={gitSource.htmlUrl}
/>
</div>
<div class="grid grid-cols-3 items-center">
<label for="apiUrl">API URL</label>
<div class="col-span-2">
<input
name="apiUrl"
type="url"
id="apiUrl"
placeholder="eg: https://api.github.com"
required
bind:value={gitSource.apiUrl}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input
name="apiUrl"
type="url"
id="apiUrl"
placeholder="eg: https://api.github.com"
required
bind:value={gitSource.apiUrl}
/>
</div>
</form>
</div>

35
src/routes/services/[id]/_Services/_Services.svelte
View File

@ -70,11 +70,7 @@
>
{/if}
{#if service.type === 'plausibleanalytics' && isRunning}
<button
on:click|preventDefault={setEmailsToVerified}
class:bg-pink-600={!loadingVerification}
class:hover:bg-pink-500={!loadingVerification}
disabled={loadingVerification}
<button on:click|preventDefault={setEmailsToVerified} disabled={loadingVerification}
>{loadingVerification ? 'Verifying' : 'Verify emails without SMTP'}</button
>
{/if}
@ -82,7 +78,7 @@
<div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center px-10">
<label for="name">Name</label>
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<div>
<input
readonly={!$session.isAdmin}
@ -95,7 +91,7 @@
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="destination">Destination</label>
<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
<div>
{#if service.destinationDockerId}
<div class="no-underline">
@ -110,22 +106,23 @@
</div>
</div>
<div class="grid grid-cols-2 px-10">
<label for="fqdn" class="pt-2">Domain (FQDN)</label>
<div>
<CopyPasswordField
placeholder="eg: https://analytics.coollabs.io"
readonly={!$session.isAdmin && !isRunning}
disabled={!$session.isAdmin || isRunning}
name="fqdn"
id="fqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
bind:value={service.fqdn}
required
/>
<div class="flex-col ">
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Domain (FQDN)</label>
<Explainer
text="If you specify <span class='text-pink-600 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-pink-600 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
/>
</div>
<CopyPasswordField
placeholder="eg: https://analytics.coollabs.io"
readonly={!$session.isAdmin && !isRunning}
disabled={!$session.isAdmin || isRunning}
name="fqdn"
id="fqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
bind:value={service.fqdn}
required
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<Setting

6
src/routes/settings/index.svelte
View File

@ -97,9 +97,9 @@
</div>
{#if $session.teamId === '0'}
<div class="mx-auto max-w-4xl px-6">
<form on:submit|preventDefault={handleSubmit}>
<div class="flex space-x-1 py-6 font-bold">
<div class="title">Global Settings</div>
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex space-x-1 py-6">
<div class="title font-bold">Global Settings</div>
<button
type="submit"
disabled={loading.save}

46
src/routes/sources/[id]/_Github.svelte
View File

@ -62,32 +62,28 @@
{#if !source.githubAppId}
<button on:click={newGithubApp}>Create new GitHub App</button>
{:else if source.githubApp?.installationId}
<div class="mx-auto max-w-4xl px-6">
<form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5 font-bold">
<div class="title">General</div>
{#if $session.isAdmin}
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
<button on:click|preventDefault={() => installRepositories(source)}
>Change GitHub App Settings</button
>
{/if}
<form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5 font-bold">
<div class="title">General</div>
{#if $session.isAdmin}
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
<button on:click|preventDefault={() => installRepositories(source)}
>Change GitHub App Settings</button
>
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-2 items-center mt-2">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" id="name" required bind:value={source.name} />
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2 ">
<input name="name" id="name" required bind:value={source.name} />
</div>
</div>
</div>
</form>
</div>
</div>
</form>
{:else}
<button on:click={() => installRepositories(source)}>Install Repositories</button>
{/if}

216
src/routes/sources/[id]/_Gitlab.svelte
View File

@ -90,129 +90,115 @@
}
</script>
<div class="flex flex-col justify-center">
{#if !source.gitlabApp?.appId}
<form class="grid grid-flow-row gap-2 py-4" on:submit|preventDefault={newApp}>
<div class="grid grid-cols-3 items-center">
<label for="type">GitLab Application Type</label>
<div class="col-span-2">
<select name="type" id="type" class="w-96" bind:value={payload.applicationType}>
<option value="user">User owned application</option>
<option value="group">Group owned application</option>
{#if source.htmlUrl !== 'https://gitlab.com'}
<option value="instance">Instance-wide application (self-hosted)</option>
{/if}
</select>
</div>
{#if !source.gitlabApp?.appId}
<form class="grid grid-flow-row gap-2 py-4" on:submit|preventDefault={newApp}>
<div class="grid grid-cols-2 items-center">
<label for="type">GitLab Application Type</label>
<select name="type" id="type" class="w-96" bind:value={payload.applicationType}>
<option value="user">User owned application</option>
<option value="group">Group owned application</option>
{#if source.htmlUrl !== 'https://gitlab.com'}
<option value="instance">Instance-wide application (self-hosted)</option>
{/if}
</select>
</div>
{#if payload.applicationType === 'group'}
<div class="grid grid-cols-2 items-center">
<label for="groupName">Group Name</label>
<input name="groupName" id="groupName" required bind:value={payload.groupName} />
</div>
{#if payload.applicationType === 'group'}
<div class="grid grid-cols-3 items-center">
<label for="groupName">Group Name</label>
<div class="col-span-2">
<input name="groupName" id="groupName" required bind:value={payload.groupName} />
</div>
</div>
{/if}
{/if}
<div class="w-full pt-10 text-center">
<button class="w-96 bg-orange-600 hover:bg-orange-500" type="submit"
>Register new OAuth application on GitLab</button
>
</div>
<div class="w-full pt-10 text-center">
<button class="w-96 bg-orange-600 hover:bg-orange-500" type="submit"
>Register new OAuth application on GitLab</button
>
</div>
<Explainer
customClass="w-full"
text="<span class='font-bold text-base text-white'>Scopes required:</span>
<Explainer
customClass="w-full"
text="<span class='font-bold text-base text-white'>Scopes required:</span>
<br>- <span class='text-orange-500 font-bold'>api</span> (Access the authenticated user's API)
<br>- <span class='text-orange-500 font-bold'>read_repository</span> (Allows read-only access to the repository)
<br>- <span class='text-orange-500 font-bold'>email</span> (Allows read-only access to the user's primary email address using OpenID Connect)
<br>
<br>For extra security, you can set Expire access tokens!
<br><br>Webhook URL: <span class='text-orange-500 font-bold'>{browser
? window.location.origin
: ''}/webhooks/gitlab</span>
? window.location.origin
: ''}/webhooks/gitlab</span>
<br>But if you will set a custom domain name for Coolify, use that instead."
/>
</form>
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4 pt-10">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
</div>
<div class="grid grid-cols-3 items-start">
<label for="oauthId" class="pt-2">OAuth ID</label>
<div class="col-span-2">
<input
on:change={checkOauthId}
bind:this={oauthIdEl}
name="oauthId"
id="oauthId"
type="number"
required
bind:value={payload.oauthId}
/>
<Explainer
text="The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application."
/>
</div>
</div>
{#if payload.applicationType === 'group'}
<div class="grid grid-cols-3 items-center">
<label for="groupName">Group Name</label>
<div class="col-span-2">
<input name="groupName" id="groupName" required bind:value={payload.groupName} />
</div>
</div>
{/if}
<div class="grid grid-cols-3 items-center">
<label for="appId">Application ID</label>
<div class="col-span-2">
<input name="appId" id="appId" required bind:value={payload.appId} />
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="appSecret">Secret</label>
<div class="col-span-2">
<input
name="appSecret"
id="appSecret"
type="password"
required
bind:value={payload.appSecret}
/>
</div>
</div>
</form>
{:else}
<div class="mx-auto max-w-4xl px-6">
<form on:submit|preventDefault={handleSubmitSave} class="py-4">
<div class="flex space-x-1 pb-5 font-bold">
<div class="title">General</div>
{#if $session.isAdmin}
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2 ">
<input name="name" id="name" required bind:value={source.name} />
</div>
</div>
</div>
</form>
/>
</form>
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4 pt-10">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
</div>
{/if}
</div>
<div class="grid grid-cols-2 items-start">
<div class="flex-col">
<label for="oauthId" class="pt-2">OAuth ID</label>
<Explainer
text="The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application."
/>
</div>
<input
on:change={checkOauthId}
bind:this={oauthIdEl}
name="oauthId"
id="oauthId"
type="number"
required
bind:value={payload.oauthId}
/>
</div>
{#if payload.applicationType === 'group'}
<div class="grid grid-cols-2 items-center">
<label for="groupName">Group Name</label>
<input name="groupName" id="groupName" required bind:value={payload.groupName} />
</div>
{/if}
<div class="grid grid-cols-2 items-center">
<label for="appId">Application ID</label>
<input name="appId" id="appId" required bind:value={payload.appId} />
</div>
<div class="grid grid-cols-2 items-center">
<label for="appSecret">Secret</label>
<input
name="appSecret"
id="appSecret"
type="password"
required
bind:value={payload.appSecret}
/>
</div>
</form>
{:else}
<div class="mx-auto max-w-4xl px-6">
<form on:submit|preventDefault={handleSubmitSave} class="py-4">
<div class="flex space-x-1 pb-5 font-bold">
<div class="title">General</div>
{#if $session.isAdmin}
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" id="name" required bind:value={source.name} />
</div>
</div>
</form>
</div>
{/if}

2
src/routes/sources/[id]/index.svelte
View File

@ -40,7 +40,7 @@
<span class="pr-2">{source.name}</span>
</div>
<div class="flex justify-center space-x-2 px-6 py-3">
<div class="flex justify-center px-6 pb-8">
{#if source.type === 'github'}
<Github bind:source />
{:else if source.type === 'gitlab'}

86
src/routes/teams/[id]/index.svelte
View File

@ -98,39 +98,40 @@
<span class="arrow-right-applications px-1 text-cyan-500">></span>
<span class="pr-2">{team.name}</span>
</div>
<div class="mx-auto max-w-4xl">
<form on:submit|preventDefault={handleSubmit}>
<div class="flex space-x-1 p-6 font-bold">
<div class="title">Settings</div>
<div class="text-center">
<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Save</button>
<div class="mx-auto max-w-4xl px-6">
<form on:submit|preventDefault={handleSubmit} class=" py-4">
<div class="flex space-x-1 pb-5">
<div class="title font-bold">Settings</div>
<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Save</button>
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-2">
<div class="flex-col">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
{#if team.id === '0'}
<Explainer
customClass="w-full"
text="This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux)."
/>
{/if}
</div>
<input id="name" name="name" placeholder="name" bind:value={team.name} />
</div>
</div>
<div class="mx-2 flex items-center space-x-2 px-4 sm:px-6">
<label for="name">Name</label>
<input id="name" name="name" placeholder="name" bind:value={team.name} />
</div>
{#if team.id === '0'}
<div class="px-8 pt-4 text-left">
<Explainer
customClass="w-full"
text="This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux)."
/>
</div>
{/if}
</form>
<div class="flex space-x-1 py-5 px-6 pt-10 font-bold">
<div class="flex space-x-1 py-5 pt-10 font-bold">
<div class="title">Members</div>
</div>
<div class="px-4 sm:px-6">
<table class="mx-2 w-full table-auto text-left">
<tr class="h-8 border-b border-coolgray-400">
<th scope="col">Email</th>
<th scope="col">Permission</th>
<th scope="col" class="text-center">Actions</th>
</tr>
<table class="w-full border-separate text-left">
<thead>
<tr class="h-8 border-b border-coolgray-400">
<th scope="col">Email</th>
<th scope="col">Permission</th>
<th scope="col" class="text-center">Actions</th>
</tr>
</thead>
{#each permissions as permission}
<tr class="text-xs">
<td class="py-4"
@ -176,25 +177,18 @@
{/each}
</table>
</div>
</div>
{#if $session.isAdmin}
<div class="mx-auto max-w-4xl pt-8">
<form on:submit|preventDefault={sendInvitation}>
<div class="flex space-x-1 p-6">
<div>
{#if $session.isAdmin}
<form on:submit|preventDefault={sendInvitation} class="py-5 pt-10">
<div class="flex space-x-1">
<div class="flex space-x-1">
<div class="title font-bold">Invite new member</div>
<div class="text-left">
<Explainer
customClass="w-56"
text="You can only invite registered users at the moment - will be extended soon."
/>
</div>
</div>
<div class="pt-1 text-center">
<button class="bg-cyan-600 hover:bg-cyan-500" type="submit">Send invitation</button>
</div>
</div>
<div class="flex-col space-y-2 px-4 sm:px-6">
<Explainer
text="You can only invite registered users at the moment - will be extended soon."
/>
<div class="flex-col space-y-2 px-4 pt-5 sm:px-6">
<div class="flex space-x-0">
<input
bind:value={invitation.email}
@ -205,18 +199,20 @@
<div class="flex-1" />
<button
on:click={() => (invitation.permission = 'read')}
class="rounded-none rounded-l"
class="rounded-none rounded-l border border-dashed border-transparent"
type="button"
class:border-coolgray-300={invitation.permission !== 'read'}
class:bg-pink-500={invitation.permission === 'read'}>Read</button
>
<button
on:click={() => (invitation.permission = 'admin')}
class="rounded-none rounded-r"
class="rounded-none rounded-r border border-dashed border-transparent"
type="button"
class:border-coolgray-300={invitation.permission !== 'admin'}
class:bg-red-500={invitation.permission === 'admin'}>Admin</button
>
</div>
</div>
</form>
</div>
{/if}
{/if}
</div>

4
src/tailwind.css
View File

@ -38,11 +38,11 @@ input {
@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 pr-20 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
}
textarea {
@apply w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 pr-20 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 pr-20 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
}
select {
@apply rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
@apply h-12 w-96 rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
}
label {