ui: fixes

This commit is contained in:
Andras Bacsai 2022-08-10 08:54:26 +00:00
parent a19803e08a
commit 91d135bff8
43 changed files with 559 additions and 893 deletions

View File

@ -1,10 +1,3 @@
- Destination/new is not working?
- Check GitLab new repo
- Services new empty secret errors
- Services new empty storage errors
- New SSH key modal redesign
- Change license every package.json
- Login page redesign
- Registration redesign
- Global Settings -> Remove domain redesign
- Color hover on buttons

View File

@ -1,7 +1,7 @@
{
"name": "api",
"description": "Coolify's Fastify API",
"license": "AGPL-3.0",
"license": "Apache-2.0",
"scripts": {
"db:push": "prisma db push && prisma generate",
"db:seed": "prisma db seed",
@ -15,54 +15,54 @@
},
"dependencies": {
"@breejs/ts-worker": "2.0.0",
"@fastify/autoload": "5.1.0",
"@fastify/autoload": "5.2.0",
"@fastify/cookie": "7.3.1",
"@fastify/cors": "8.0.0",
"@fastify/env": "4.0.0",
"@fastify/jwt": "6.3.1",
"@fastify/static": "6.4.1",
"@fastify/cors": "8.1.0",
"@fastify/env": "4.1.0",
"@fastify/jwt": "6.3.2",
"@fastify/static": "6.5.0",
"@iarna/toml": "2.2.5",
"@prisma/client": "3.15.2",
"axios": "0.27.2",
"bcryptjs": "2.4.3",
"bree": "9.1.1",
"bree": "9.1.2",
"cabin": "9.1.2",
"compare-versions": "4.1.3",
"cuid": "2.1.8",
"dayjs": "1.11.4",
"dockerode": "3.3.2",
"dockerode": "3.3.3",
"dotenv-extended": "2.9.0",
"fastify": "4.3.0",
"fastify-plugin": "4.0.0",
"fastify": "4.4.0",
"fastify-plugin": "4.1.0",
"generate-password": "1.7.0",
"get-port": "6.1.2",
"got": "12.2.0",
"got": "12.3.1",
"is-ip": "5.0.0",
"is-port-reachable": "4.0.0",
"js-yaml": "4.1.0",
"jsonwebtoken": "8.5.1",
"node-forge": "1.3.1",
"node-os-utils": "1.3.7",
"p-queue": "7.2.0",
"p-queue": "7.3.0",
"public-ip": "6.0.1",
"ssh-config": "4.1.6",
"strip-ansi": "7.0.1",
"unique-names-generator": "4.7.1"
},
"devDependencies": {
"@types/node": "18.6.1",
"@types/node": "18.6.5",
"@types/node-os-utils": "1.3.0",
"@typescript-eslint/eslint-plugin": "5.31.0",
"@typescript-eslint/parser": "5.31.0",
"esbuild": "0.14.50",
"eslint": "8.20.0",
"@typescript-eslint/eslint-plugin": "5.33.0",
"@typescript-eslint/parser": "5.33.0",
"esbuild": "0.15.0",
"eslint": "8.21.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-prettier": "4.2.1",
"nodemon": "2.0.19",
"prettier": "2.7.1",
"prisma": "3.15.2",
"rimraf": "3.0.2",
"tsconfig-paths": "4.0.0",
"tsconfig-paths": "4.1.0",
"typescript": "4.7.4"
},
"prisma": {

View File

@ -1,13 +1,12 @@
{
"name": "ui",
"description": "Coolify's SvelteKit UI",
"license": "AGPL-3.0",
"license": "Apache-2.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"prepare": "svelte-kit sync",
"test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
@ -15,31 +14,30 @@
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"@playwright/test": "1.23.4",
"@sveltejs/kit": "1.0.0-next.377",
"@playwright/test": "1.24.2",
"@sveltejs/kit": "1.0.0-next.405",
"@types/js-cookie": "3.0.2",
"@typescript-eslint/eslint-plugin": "5.30.6",
"@typescript-eslint/parser": "5.30.6",
"autoprefixer": "10.4.7",
"eslint": "8.20.0",
"@typescript-eslint/eslint-plugin": "5.33.0",
"@typescript-eslint/parser": "5.33.0",
"autoprefixer": "10.4.8",
"eslint": "8.21.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-svelte3": "4.0.0",
"postcss": "8.4.14",
"postcss": "8.4.16",
"prettier": "2.7.1",
"prettier-plugin-svelte": "2.7.0",
"svelte": "3.49.0",
"svelte-check": "2.8.0",
"svelte-preprocess": "4.10.7",
"tailwindcss": "3.1.6",
"tailwindcss": "3.1.8",
"tailwindcss-scrollbar": "0.1.0",
"tslib": "2.4.0",
"typescript": "4.7.4",
"vite": "3.0.1"
"vite": "3.0.5"
},
"type": "module",
"dependencies": {
"@sveltejs/adapter-static": "1.0.0-next.37",
"@zerodevx/svelte-toast": "0.7.2",
"@sveltejs/adapter-static": "1.0.0-next.39",
"cuid": "2.1.8",
"daisyui": "2.22.0",
"js-cookie": "3.0.1",

View File

@ -1,7 +1,6 @@
<script lang="ts">
import { browser } from '$app/env';
import { addToast } from '$lib/store';
import { toast } from '@zerodevx/svelte-toast';
import { addToast } from '$lib/store';
let showPassword = false;
export let value: string;
@ -10,7 +9,7 @@ import { addToast } from '$lib/store';
export let readonly = false;
export let textarea = false;
export let required = false;
export let pattern: string|null|undefined = null;
export let pattern: string | null | undefined = null;
export let id: string;
export let name: string;
export let placeholder = '';
@ -23,7 +22,7 @@ import { addToast } from '$lib/store';
navigator.clipboard.writeText(value);
addToast({
message: 'Copied to clipboard.',
type: 'success',
type: 'success'
});
}
}

View File

@ -17,9 +17,10 @@
</div>
</div>
<div
class:tooltip-right={dataTooltip}
class:tooltip={dataTooltip}
class:text-center={isCenter}
data-tooltip={dataTooltip}
data-tip={dataTooltip}
class="flex justify-center"
>
<div

View File

@ -8,7 +8,7 @@
class:alert-error={type === 'error'}
class:alert-info={type === 'info'}
>
{#if type === 'success'}
<!-- {#if type === 'success'}
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current flex-shrink-0 h-6 w-6"
@ -47,6 +47,6 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/></svg
>
{/if}
{/if} -->
<slot />
</div>

View File

@ -2,7 +2,6 @@
import { dev } from '$app/env';
import { get, post } from '$lib/api';
import { addToast, appSession, features } from '$lib/store';
import { toast } from '@zerodevx/svelte-toast';
import { asyncSleep, errorNotification } from '$lib/common';
import { onMount } from 'svelte';

View File

@ -78,7 +78,6 @@
import '../tailwind.css';
import Cookies from 'js-cookie';
import { fade } from 'svelte/transition';
import { SvelteToast } from '@zerodevx/svelte-toast';
import { navigating, page } from '$app/stores';
import { get } from '$lib/api';
@ -112,7 +111,6 @@
{/if}
</svelte:head>
<Toasts />
<!-- <SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} /> -->
{#if $navigating}
<div out:fade={{ delay: 100 }}>
<PageLoader />
@ -128,10 +126,10 @@
<a
sveltekit:prefetch
href="/"
class="icons tooltip-right bg-coolgray-200 hover:text-white"
class="icons tooltip tooltip-right bg-coolgray-200 hover:text-white"
class:text-white={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'}
data-tooltip="Dashboard"
data-tip="Dashboard"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -155,12 +153,12 @@
<a
sveltekit:prefetch
href="/applications"
class="icons tooltip-green-500 tooltip-right bg-coolgray-200 hover:text-green-500"
class:text-green-500={$page.url.pathname.startsWith('/applications') ||
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-applications={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')}
data-tooltip="Applications"
data-tip="Applications"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -183,12 +181,12 @@
<a
sveltekit:prefetch
href="/sources"
class="icons tooltip-orange-500 tooltip-right bg-coolgray-200 hover:text-orange-500"
class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-sources={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')}
data-tooltip="Git Sources"
data-tip="Git Sources"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -212,12 +210,12 @@
<a
sveltekit:prefetch
href="/destinations"
class="icons tooltip-sky-500 tooltip-right bg-coolgray-200 hover:text-sky-500"
class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')}
data-tooltip="Destinations"
data-tip="Destinations"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -247,12 +245,12 @@
<a
sveltekit:prefetch
href="/databases"
class="icons tooltip-purple-500 tooltip-right bg-coolgray-200 hover:text-purple-500"
class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-databases={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')}
data-tooltip="Databases"
data-tip="Databases"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -273,12 +271,12 @@
<a
sveltekit:prefetch
href="/services"
class="icons tooltip-pink-500 tooltip-right bg-coolgray-200 hover:text-pink-500"
class:text-pink-500={$page.url.pathname.startsWith('/services') ||
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-services={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')}
data-tooltip="Services"
data-tip="Services"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -302,10 +300,10 @@
<a
sveltekit:prefetch
href="/iam"
class="icons tooltip-fuchsia-500 tooltip-right bg-coolgray-200 hover:text-fuchsia-500"
class:text-fuchsia-500={$page.url.pathname.startsWith('/iam')}
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-iam={$page.url.pathname.startsWith('/iam')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
data-tooltip="IAM"
data-tip="IAM"
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
@ -326,10 +324,10 @@
<a
sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
class="icons tooltip tooltip-right bg-coolgray-200"
class:text-settings={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
data-tooltip="Settings"
data-tip="Settings"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -350,8 +348,8 @@
</a>
<div
class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500"
data-tooltip="Logout"
class="icons tooltip tooltip-right bg-coolgray-200 hover:text-error"
data-tip="Logout"
on:click={logout}
>
<svg

View File

@ -93,7 +93,6 @@
bind:value={name}
required
placeholder="EXAMPLE_VARIABLE"
class=" border border-dashed border-coolgray-300"
readonly={!isNewSecret}
class:bg-transparent={!isNewSecret}
class:cursor-not-allowed={!isNewSecret}

View File

@ -19,7 +19,7 @@
<div
class:tooltip={dataTooltip}
class:text-center={isCenter}
data-tooltip={dataTooltip}
data-tip={dataTooltip}
class="flex justify-center"
>
<div

View File

@ -8,7 +8,6 @@
import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
@ -65,7 +64,6 @@
bind:value={storage.path}
required
placeholder="eg: /sqlite.db"
class=" border border-dashed border-coolgray-300"
/>
</td>
<td>

View File

@ -57,7 +57,6 @@
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import { del, get, post } from '$lib/api';
import { goto } from '$app/navigation';
import { toast } from '@zerodevx/svelte-toast';
import { onDestroy, onMount } from 'svelte';
import { t } from '$lib/translations';
import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
@ -180,8 +179,8 @@
{#if $status.application.isExited}
<a
href={!$disabledButton ? `/applications/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
data-tooltip="Application exited with an error!"
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-error"
data-tip="Application exited with an error!"
sveltekit:prefetch
>
<svg
@ -232,8 +231,8 @@
title="Stop application"
type="submit"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-error"
data-tip={$appSession.isAdmin
? $t('application.stop_application')
: $t('application.permission_denied_stop_application')}
>
@ -258,8 +257,8 @@
type="submit"
disabled={$disabledButton || !isQueueActive}
class:hover:text-green-500={isQueueActive}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2"
data-tip={$appSession.isAdmin
? isQueueActive
? 'Rebuild application'
: 'Autoupdate inprogress. Cannot rebuild application.'
@ -289,8 +288,8 @@
title="Build and start application"
type="submit"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-success"
data-tip={$appSession.isAdmin
? 'Build and start application'
: 'You do not have permission to Build and start application.'}
>
@ -322,8 +321,8 @@
<button
title="Configurations"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Configurations"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Configurations"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -358,8 +357,8 @@
<button
title="Secret"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Secret"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Secret"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -390,8 +389,8 @@
<button
title="Persistent Storages"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Persistent Storages"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Persistent Storages"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -420,8 +419,8 @@
<button
title="Previews"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Previews"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Previews"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -453,8 +452,8 @@
<button
title={$t('application.logs')}
disabled={$disabledButton || !$status.application.isRunning}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$t('application.logs')}
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$t('application.logs')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -485,8 +484,8 @@
<button
title="Build Logs"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Build Logs"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Build Logs"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -518,8 +517,8 @@
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$appSession.isAdmin
? $t('application.delete_application')
: $t('application.permission_denied_delete_application')}
>

View File

@ -31,7 +31,6 @@
import Select from 'svelte-select';
import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { get, post } from '$lib/api';
import cuid from 'cuid';
import { browser } from '$app/env';
@ -81,7 +80,7 @@
}
];
function containerClass() {
return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0';
return 'text-white bg-transparent font-thin px-0';
}
async function getUsage() {

View File

@ -109,8 +109,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1">
<button
on:click={followBuild}
class="bg-transparent hover:text-green-500 hover:bg-coolgray-500"
data-tooltip="Follow logs"
class="bg-transparent tooltip tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
data-tip="Follow logs"
class:text-green-500={followingBuild}
>
<svg
@ -134,8 +134,8 @@
<button
on:click={cancelBuild}
class:animation-spin={cancelInprogress}
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500"
data-tooltip="Cancel build"
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-bottom"
data-tip="Cancel build"
>
{#if cancelInprogress}
Cancelling...

View File

@ -137,13 +137,13 @@
<div class="top-4 md:sticky">
{#each builds as build, index (build.id)}
<div
data-tooltip={new Intl.DateTimeFormat('default', dateOptions).format(
data-tip={new Intl.DateTimeFormat('default', dateOptions).format(
new Date(build.createdAt)
) + `\n${build.status}`}
on:click={() => loadBuild(build.id)}
class:rounded-tr={index === 0}
class:rounded-br={index === builds.length - 1}
class="tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl "
class="tooltip tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
class:bg-coolgray-400={buildId === build.id}
class:border-red-500={build.status === 'failed'}
class:border-green-500={build.status === 'success'}

View File

@ -147,8 +147,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1">
<button
on:click={followBuild}
class="bg-transparent"
data-tooltip="Follow logs"
class="bg-transparent tooltip tooltip-bottom"
data-tip="Follow logs"
class:text-green-500={followingLogs}
>
<svg

View File

@ -22,13 +22,12 @@
import { get, post } from '$lib/api';
import { page } from '$app/stores';
import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { goto } from '$app/navigation';
import { errorNotification, getDomain } from '$lib/common';
import { onMount } from 'svelte';
import Loading from '$lib/components/Loading.svelte';
import { addToast } from '$lib/store';
import { addToast } from '$lib/store';
const { id } = $page.params;
@ -61,9 +60,9 @@ import { addToast } from '$lib/store';
branch: container.branch
});
addToast({
message: 'Deployment queued',
type: 'success'
});
message: 'Deployment queued',
type: 'success'
});
if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
} else {

View File

@ -27,8 +27,7 @@
import { t } from '$lib/translations';
import { get } from '$lib/api';
import { saveSecret } from './utils';
import { toast } from '@zerodevx/svelte-toast';
import { addToast } from '$lib/store';
import { addToast } from '$lib/store';
const limit = pLimit(1);
const { id } = $page.params;
@ -61,9 +60,9 @@ import { addToast } from '$lib/store';
batchSecrets = '';
await refreshSecrets();
addToast({
message: 'Secrets saved.',
type: 'success'
});
message: 'Secrets saved.',
type: 'success'
});
}
</script>
@ -151,9 +150,6 @@ import { addToast } from '$lib/store';
<h2 class="title my-6 font-bold">Paste .env file</h2>
<form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
<button
class="btn btn-sm bg-applications"
type="submit">Batch add secrets</button
>
<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
</form>
</div>

View File

@ -1,4 +1,3 @@
import { toast } from '@zerodevx/svelte-toast';
import { post } from '$lib/api';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';

View File

@ -13,7 +13,6 @@
import Redis from './_Redis.svelte';
import CouchDb from './_CouchDb.svelte';
import { post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast, appSession, status } from '$lib/store';

View File

@ -144,8 +144,8 @@
{#if $status.database.isExited}
<a
href={!$disabledButton ? `/databases/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
data-tooltip="Service exited with an error!"
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
data-tip="Service exited with an error!"
sveltekit:prefetch
>
<svg
@ -196,8 +196,8 @@
title={$t('database.stop_database')}
type="submit"
disabled={!$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tip={$appSession.isAdmin
? $t('database.stop_database')
: $t('database.permission_denied_stop_database')}
>
@ -222,8 +222,8 @@
title={$t('database.start_database')}
type="submit"
disabled={!$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tip={$appSession.isAdmin
? $t('database.start_database')
: $t('database.permission_denied_start_database')}
><svg
@ -252,8 +252,8 @@
>
<button
title={$t('application.configurations')}
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
data-tooltip={$t('application.configurations')}
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tip={$t('application.configurations')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -289,8 +289,8 @@
<button
title={$t('database.logs')}
disabled={!$status.database.isRunning}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$t('database.logs')}
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$t('database.logs')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -317,8 +317,8 @@
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$appSession.isAdmin
? $t('database.delete_database')
: $t('database.permission_denied_delete_database')}><DeleteIcon /></button
>

View File

@ -130,8 +130,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1">
<button
on:click={followBuild}
class="bg-transparent"
data-tooltip="Follow logs"
class="bg-transparent tooltip tooltip-bottom"
data-tip="Follow logs"
class:text-green-500={followingLogs}
>
<svg

View File

@ -2,7 +2,6 @@
export let destination: any;
export let settings: any;
import { toast } from '@zerodevx/svelte-toast';
import { page } from '$app/stores';
import { get, post } from '$lib/api';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';

View File

@ -2,8 +2,7 @@
export let destination: any;
export let settings: any;
import { toast } from '@zerodevx/svelte-toast';
import { page, session } from '$app/stores';
import { page } from '$app/stores';
import Setting from '$lib/components/Setting.svelte';
import { get, post } from '$lib/api';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';

View File

@ -92,9 +92,9 @@
type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons tooltip-bottom bg-transparent text-sm"
class="icons tooltip tooltip-bottom bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable}
data-tooltip={deletable()}><DeleteIcon /></button
data-tip={deletable()}><DeleteIcon /></button
>
</nav>
{/if}

View File

@ -24,9 +24,7 @@
export let ownTeams: any;
export let allTeams: any;
import { page } from '$app/stores';
import { del, get, post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common';
import { addToast, appSession } from '$lib/store';
import { goto } from '$app/navigation';

View File

@ -53,8 +53,8 @@
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons tooltip-bottom bg-transparent text-sm"
data-tooltip={$appSession.isAdmin
class="icons tooltip tooltip-bottom bg-transparent text-sm"
data-tip={$appSession.isAdmin
? 'Delete Team'
: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
>

View File

@ -82,16 +82,15 @@
<button
type="submit"
disabled={loading}
class="hover:opacity-90 text-white"
class:bg-transparent={loading}
class:text-stone-600={loading}
class="btn btn-sm"
class:loading={loading}
class:bg-coollabs={!loading}
>{loading ? $t('login.authenticating') : $t('login.login')}</button
>
<button
on:click|preventDefault={gotoRegister}
class="bg-transparent hover:bg-coolgray-300 text-white ">{$t('register.register')}</button
class="btn btn-sm">{$t('register.register')}</button
>
</div>
</form>

View File

@ -121,11 +121,11 @@
<div class="flex space-x-2 h-8 items-center justify-center pt-8">
<button
type="submit"
class="text-white"
class="btn btn-sm"
disabled={loading}
class:hover:bg-coollabs-100={!loading}
class:bg-transparent={loading}
class:bg-coollabs={!loading}
class:loading={loading}
>{loading ? $t('register.registering') : $t('register.register')}</button
>
</div>

View File

@ -7,8 +7,7 @@
import { del, post } from '$lib/api';
import { errorNotification } from '$lib/common';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { addToast } from '$lib/store';
import { toast } from '@zerodevx/svelte-toast';
import { addToast } from '$lib/store';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
@ -26,8 +25,8 @@ import { addToast } from '$lib/store';
}
}
async function saveSecret(isNew = false) {
if (!name) return errorNotification('Name is required.');
if (!value) return errorNotification('Value is required.');
if (!name) return errorNotification({ message: 'Name is required.' });
if (!value) return errorNotification({ message: 'Value is required.' });
try {
await post(`/services/${id}/secrets`, {
name,
@ -55,7 +54,6 @@ import { addToast } from '$lib/store';
bind:value={name}
required
placeholder="EXAMPLE_VARIABLE"
class=" border border-dashed border-coolgray-300"
readonly={!isNewSecret}
class:bg-transparent={!isNewSecret}
class:cursor-not-allowed={!isNewSecret}

View File

@ -8,7 +8,6 @@
import { browser } from '$app/env';
import { page } from '$app/stores';
import { toast } from '@zerodevx/svelte-toast';
import { get, post } from '$lib/api';
import { errorNotification, getDomain } from '$lib/common';

View File

@ -8,7 +8,6 @@
import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte';
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
const { id } = $page.params;
@ -16,7 +15,7 @@
const dispatch = createEventDispatcher();
async function saveStorage(newStorage = false) {
try {
if (!storage.path) return errorNotification('Path is required.');
if (!storage.path) return errorNotification({message: "Path is required!"});
storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`;
storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path;
storage.path.replace(/\/\//g, '/');
@ -65,7 +64,6 @@
bind:value={storage.path}
required
placeholder="eg: /data"
class=" border border-dashed border-coolgray-300"
/>
</form>
</td>

View File

@ -177,8 +177,8 @@
{#if $status.service.isExited}
<a
href={!$disabledButton ? `/services/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
data-tooltip="Service exited with an error!"
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
data-tip="Service exited with an error!"
sveltekit:prefetch
>
<svg
@ -229,8 +229,8 @@
title={$t('service.stop_service')}
type="submit"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tip={$appSession.isAdmin
? $t('service.stop_service')
: $t('service.permission_denied_stop_service')}
>
@ -255,8 +255,8 @@
title={$t('service.start_service')}
type="submit"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tip={$appSession.isAdmin
? $t('service.start_service')
: $t('service.permission_denied_start_service')}
><svg
@ -286,8 +286,8 @@
>
<button
title={$t('application.configurations')}
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
data-tooltip={$t('application.configurations')}
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tip={$t('application.configurations')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -321,8 +321,8 @@
>
<button
title={$t('application.secret')}
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
data-tooltip={$t('application.secret')}
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tip={$t('application.secret')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -352,8 +352,8 @@
>
<button
title="Persistent Storage"
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
data-tooltip="Persistent Storage"
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tip="Persistent Storage"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -383,8 +383,8 @@
<button
title={$t('service.logs')}
disabled={!$status.service.isRunning}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$t('service.logs')}
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$t('service.logs')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -412,8 +412,8 @@
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$appSession.isAdmin
? $t('service.delete_service')
: $t('service.permission_denied_delete_service')}><DeleteIcon /></button
>

View File

@ -127,8 +127,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1">
<button
on:click={followBuild}
class="bg-transparent"
data-tooltip="Follow logs"
class="bg-transparent tooltip tooltip-bottom"
data-tip="Follow logs"
class:text-green-500={followingLogs}
>
<svg

View File

@ -3,7 +3,7 @@
import { appSession } from '$lib/store';
</script>
<div class="flex flex-col pt-4 space-y-6 w-96 px-20">
<div class="flex flex-col pt-4 space-y-6 px-10">
{#if $appSession.teamId === '0'}
<a
href="/settings/global"

View File

@ -22,7 +22,6 @@
import Explainer from '$lib/components/Explainer.svelte';
import { del, get, post } from '$lib/api';
import { browser } from '$app/env';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { addToast, appSession, features } from '$lib/store';
import { errorNotification, getDomain } from '$lib/common';
@ -111,7 +110,7 @@
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
} catch (error: any) {
if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) {
forceSave = true;
if (dualCerts) {
@ -136,7 +135,7 @@
try {
await get(`/settings/check?domain=${domain}`);
addToast({
message:'DNS configuration is valid.',
message: 'DNS configuration is valid.',
type: 'success'
});
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
@ -163,7 +162,7 @@
<div class="flex space-x-1 pb-6">
<div class="title font-bold">{$t('index.global_settings')}</div>
<button
class="btn btn-sm bg-settings text-black"
class="btn btn-sm bg-settings text-black"
type="submit"
class:bg-orange-600={forceSave}
class:hover:bg-orange-400={forceSave}
@ -179,6 +178,7 @@
<button
on:click|preventDefault={removeFqdn}
disabled={loading.remove}
class="btn btn-sm"
class:bg-red-600={!loading.remove}
class:hover:bg-red-500={!loading.remove}
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
@ -210,13 +210,13 @@
<div class="flex-col space-y-2 pt-4 text-center">
{#if isNonWWWDomainOK}
<button
class="bg-green-600 hover:bg-green-500"
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="bg-red-600 hover:bg-red-500"
class="btn btn-sm bg-error"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
>
@ -224,14 +224,14 @@
{#if dualCerts}
{#if isWWWDomainOK}
<button
class="bg-green-600 hover:bg-green-500"
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="bg-red-600 hover:bg-red-500"
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

View File

@ -19,7 +19,6 @@
<script lang="ts">
export let sshKeys: any;
import { del, post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import Menu from './_Menu.svelte';
@ -81,7 +80,9 @@
<div class="box-selection group relative">
<div class="text-xl font-bold">{key.name}</div>
<div class="py-3 text-stone-600">Added on {key.createdAt}</div>
<button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error">Delete</button>
<button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error"
>Delete</button
>
</div>
{/each}
{/if}
@ -90,7 +91,7 @@
</div>
</div>
{#if isModalActive}
<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-coolgray-500 bg-opacity-75 transition-opacity" />
<div class="fixed z-10 inset-0 overflow-y-auto text-white">
<div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
@ -139,8 +140,10 @@
</div>
</div>
<div class="mt-5 flex space-x-4 justify-end">
<button type="submit" class="bg-green-600 hover:bg-green-500">Save</button>
<button on:click={() => (isModalActive = false)} type="button" class="">Cancel</button>
<button type="submit" class="btn btn-sm bg-success">Save</button>
<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
>Cancel</button
>
</div>
</form>
</div>

View File

@ -4,7 +4,6 @@
import { page } from '$app/stores';
import { getAPIUrl, getWebhookUrl, post } from '$lib/api';
import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { dashify, errorNotification, getDomain } from '$lib/common';
import { addToast, appSession } from '$lib/store';

View File

@ -7,7 +7,6 @@
import { getAPIUrl, post } from '$lib/api';
import { dev } from '$app/env';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';

View File

@ -60,8 +60,8 @@
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons tooltip-bottom bg-transparent text-sm"
data-tooltip={$appSession.isAdmin
class="icons tooltip tooltip-bottom bg-transparent text-sm"
data-tip={$appSession.isAdmin
? $t('source.delete_git_source')
: $t('source.permission_denied')}><DeleteIcon /></button
>

View File

@ -160,220 +160,11 @@ a {
);
border-image-slice: 1;
}
/**
* Tooltip Styles
*/
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
position: relative;
cursor: pointer;
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
opacity: 1;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: '';
}
/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 8px;
color: #fff;
content: attr(data-tooltip);
@apply min-w-[100px] rounded text-center font-normal;
}
/* Base colours for tooltips */
/* coollabs - default */
.tooltip:after,
[data-tooltip]:after {
@apply bg-coollabs;
}
/* Green 500 */
.tooltip-green-500:after {
@apply bg-green-500;
}
/* Orange 500 */
.tooltip-orange-500:after {
@apply bg-orange-500;
}
/* Sky 500 */
.tooltip-sky-500:after {
@apply bg-sky-500;
}
/* Purple 500 */
.tooltip-purple-500:after {
@apply bg-purple-500;
}
/* Pink 500 */
.tooltip-pink-500:after {
@apply bg-pink-500;
}
/* Fuchsia 500 */
.tooltip-fuchsia-500:after {
@apply bg-fuchsia-500;
}
/* Yellow 500 */
.tooltip-yellow-500:after {
@apply bg-yellow-500;
}
/* Red-500 */
.tooltip-red-500:after {
@apply bg-red-500;
}
/* Directions */
/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
bottom: 100%;
left: 50%;
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
margin-left: -80px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
transform: translateY(-12px);
}
/* Left */
.tooltip-left:before,
.tooltip-left:after {
right: 100%;
bottom: 50%;
left: auto;
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
transform: translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
top: 100%;
bottom: auto;
left: 50%;
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
transform: translateY(12px);
}
/* Right */
.tooltip-right:before,
.tooltip-right:after {
bottom: 50%;
left: 100%;
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
transform: translateX(12px);
}
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
top: 12px;
}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
margin-left: 0;
margin-bottom: -16px;
}
.box-selection {
@apply min-w-[16rem] max-w-[24rem] justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400;
}
._toastBar {
@apply hidden !important;
}
._toastMsg {
@apply text-xs !important;
}
._toastBtn {
@apply text-xs !important;
}
._toastItem {
@apply bg-coollabs bg-opacity-80 !important;
}
.lds-heart {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@ -399,7 +190,7 @@ a {
}
.sub-menu {
@apply text-xl font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer;
@apply w-48 text-base font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer;
}
.sub-menu-active {

View File

@ -2,7 +2,7 @@
"name": "coolify",
"description": "An open-source & self-hostable Heroku / Netlify alternative.",
"version": "3.2.0",
"license": "AGPL-3.0",
"license": "Apache-2.0",
"repository": "github:coollabsio/coolify",
"scripts": {
"oc": "opencollective-setup",

872
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff