dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

ui: redesign a lot

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-09 15:28:26 +00:00
parent 839e8179fe
commit 4049af6220
46 changed files with 625 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ui/src/routes/__layout.svelte
View File

@@ -86,6 +86,7 @@
import PageLoader from '$lib/components/PageLoader.svelte';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import Toasts from '$lib/components/Toasts.svelte';
if (userId) $appSession.userId = userId;
if (teamId) $appSession.teamId = teamId;
@@ -110,7 +111,8 @@
<link rel="icon" href={$appSession.whiteLabeledDetails.icon} />
{/if}
</svelte:head>
<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
<Toasts />
<!-- <SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} /> -->
{#if $navigating}
<div out:fade={{ delay: 100 }}>
<PageLoader />

33
apps/ui/src/routes/applications/[id]/_Secret.svelte
View File

@@ -12,8 +12,8 @@
import { del } from '$lib/api';
import { errorNotification } from '$lib/common';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { addToast } from '$lib/store';
import { t } from '$lib/translations';
import { toast } from '@zerodevx/svelte-toast';
import { createEventDispatcher } from 'svelte';
import { saveSecret } from './utils';
@@ -28,7 +28,10 @@
value = '';
isBuildSecret = false;
}
toast.push('Secret removed.');
addToast({
message: 'Secret removed.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -36,6 +39,7 @@
async function createSecret(isNew: any) {
try {
if (!name || !value) return
await saveSecret({
isNew,
name,
@@ -51,9 +55,12 @@
isBuildSecret = false;
}
dispatch('refresh');
toast.push('Secret saved.');
addToast({
message: 'Secret removed.',
type: 'success'
});
} catch (error) {
console.log(error)
console.log(error);
return errorNotification(error);
}
}
@@ -71,7 +78,10 @@
isNewSecret,
applicationId: id
});
toast.push('Secret saved.');
addToast({
message: 'Secret removed.',
type: 'success'
});
}
}
}
@@ -100,8 +110,7 @@
/>
</td>
<td class="text-center">
<div
type="button"
<button
on:click={setSecretValue}
aria-pressed="false"
class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
@@ -146,23 +155,25 @@
</svg>
</span>
</span>
</div>
</button>
</td>
<td>
{#if isNewSecret}
<div class="flex items-center justify-center">
<button class="bg-green-600 hover:bg-green-500" on:click={() => createSecret(true)}
<button class="btn bg-applications btn-sm" on:click={() => createSecret(true)}
>{$t('forms.add')}</button
>
</div>
{:else}
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="" on:click={() => createSecret(false)}>{$t('forms.set')}</button>
<button class="btn bg-application btn-sm" on:click={() => createSecret(false)}
>{$t('forms.set')}</button
>
</div>
{#if !isPRMRSecret}
<div class="flex justify-center items-end">
<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}
<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
>{$t('forms.remove')}</button
>
</div>

27
apps/ui/src/routes/applications/[id]/_Storage.svelte
View File

@@ -11,6 +11,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
const { id } = $page.params;
const dispatch = createEventDispatcher();
@@ -30,8 +31,17 @@
storage.path = null;
storage.id = null;
}
if (newStorage) toast.push($t('application.storage.storage_saved'));
else toast.push($t('application.storage.storage_updated'));
if (newStorage) {
addToast({
message: $t('application.storage.storage_saved'),
type: 'success'
});
} else {
addToast({
message: $t('application.storage.storage_updated'),
type: 'success'
});
}
} catch (error) {
return errorNotification(error);
}
@@ -40,7 +50,10 @@
try {
await del(`/applications/${id}/storages`, { path: storage.path });
dispatch('refresh');
toast.push($t('application.storage.storage_deleted'));
addToast({
message: $t('application.storage.storage_deleted'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -58,17 +71,19 @@
<td>
{#if isNew}
<div class="flex items-center justify-center">
<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}
<button class="btn btn-sm bg-applications" on:click={() => saveStorage(true)}
>{$t('forms.add')}</button
>
</div>
{:else}
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="" on:click={() => saveStorage(false)}>{$t('forms.set')}</button>
<button class="btn btn-sm bg-applications" on:click={() => saveStorage(false)}
>{$t('forms.set')}</button
>
</div>
<div class="flex justify-center items-end">
<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}
<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeStorage}
>{$t('forms.remove')}</button
>
</div>

7
apps/ui/src/routes/applications/[id]/__layout.svelte
View File

@@ -60,7 +60,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { onDestroy, onMount } from 'svelte';
import { t } from '$lib/translations';
import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
import Loading from '$lib/components/Loading.svelte';
@@ -80,7 +80,10 @@
async function handleDeploySubmit() {
try {
const { buildId } = await post(`/applications/${id}/deploy`, { ...application });
toast.push($t('application.deployment_queued'));
addToast({
message: $t('application.deployment_queued'),
type: 'success'
});
if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
} else {

6
apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
View File

@@ -190,11 +190,11 @@
</div>
<div class="pt-5 flex-col flex justify-center items-center space-y-4">
<button
class="w-40"
class="btn btn-wide"
type="submit"
disabled={!showSave}
class:bg-orange-600={showSave}
class:hover:bg-orange-500={showSave}>{$t('forms.save')}</button
class:bg-applications={showSave}
>{$t('forms.save')}</button
>
</div>
</form>

5
apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
View File

@@ -413,11 +413,10 @@
<div class="flex flex-col items-center justify-center space-y-4 pt-5">
<button
on:click|preventDefault={save}
class="w-40"
class="btn btn-wide"
type="submit"
disabled={!showSave || loading.save}
class:bg-orange-600={showSave && !loading.save}
class:hover:bg-orange-500={showSave && !loading.save}
class:bg-applications={showSave && !loading.save}
>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
>
{#if tryAgain}

40
apps/ui/src/routes/applications/[id]/index.svelte
View File

@@ -35,13 +35,14 @@
import { get, post } from '$lib/api';
import cuid from 'cuid';
import { browser } from '$app/env';
import { appSession, disabledButton, setLocation, status } from '$lib/store';
import { addToast, appSession, disabledButton, setLocation, status } from '$lib/store';
import { t } from '$lib/translations';
import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
import Setting from './_Setting.svelte';
const { id } = $page.params;
$: isDisabled = !$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
$: isDisabled =
!$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
let domainEl: HTMLInputElement;
@@ -138,7 +139,10 @@
branch: application.branch,
projectId: application.projectId
});
return toast.push($t('application.settings_saved'));
return addToast({
message: $t('application.settings_saved'),
type: 'success'
});
} catch (error) {
if (name === 'debug') {
debug = !debug;
@@ -169,10 +173,13 @@
exposePort: application.exposePort
});
await post(`/applications/${id}`, { ...application });
setLocation(application)
setLocation(application);
$disabledButton = false;
forceSave = false;
return toast.push('Configurations saved.');
addToast({
message: 'Configuration saved.',
type: 'success',
});
} catch (error) {
console.log(error);
//@ts-ignore
@@ -215,7 +222,10 @@
async function isDNSValid(domain: any, isWWW: any) {
try {
await get(`/applications/${id}/check?domain=${domain}`);
toast.push('DNS configuration is valid.');
addToast({
message: 'DNS configuration is valid.',
type: 'success'
});
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
return true;
} catch (error) {
@@ -312,29 +322,21 @@
<div class="title">{$t('general')}</div>
{#if $appSession.isAdmin}
<button
class="btn btn-sm"
type="submit"
class:bg-green-600={!loading}
class:bg-applications={!loading}
class:loading={loading}
class:bg-orange-600={forceSave}
class:hover:bg-green-500={!loading}
class:hover:bg-orange-400={forceSave}
disabled={loading}
>{loading
? $t('forms.saving')
: forceSave
? $t('forms.confirm_continue')
: $t('forms.save')}</button
>{$t('forms.save')}</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">{$t('forms.name')}</label>
<input
name="name"
id="name"
bind:value={application.name}
required
/>
<input name="name" id="name" bind:value={application.name} required />
</div>
<div class="grid grid-cols-2 items-center">
<label for="gitSource" class="text-base font-bold text-stone-100"

6
apps/ui/src/routes/applications/[id]/previews.svelte
View File

@@ -28,6 +28,7 @@
import { errorNotification, getDomain } from '$lib/common';
import { onMount } from 'svelte';
import Loading from '$lib/components/Loading.svelte';
import { addToast } from '$lib/store';
const { id } = $page.params;
@@ -59,7 +60,10 @@
pullmergeRequestId: container.pullmergeRequestId,
branch: container.branch
});
toast.push('Deployment queued');
addToast({
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 {

8
apps/ui/src/routes/applications/[id]/secrets.svelte
View File

@@ -28,6 +28,7 @@
import { get } from '$lib/api';
import { saveSecret } from './utils';
import { toast } from '@zerodevx/svelte-toast';
import { addToast } from '$lib/store';
const limit = pLimit(1);
const { id } = $page.params;
@@ -59,7 +60,10 @@
);
batchSecrets = '';
await refreshSecrets();
toast.push('Secrets saved.');
addToast({
message: 'Secrets saved.',
type: 'success'
});
}
</script>
@@ -148,7 +152,7 @@
<form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
<button
class="bg-green-600 hover:bg-green-500 disabled:text-white disabled:opacity-40"
class="btn btn-sm bg-applications"
type="submit">Batch add secrets</button
>
</form>

6
apps/ui/src/routes/applications/index.svelte
View File

@@ -61,14 +61,14 @@
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl ">{$t('index.applications')}</div>
<div class="mr-4 text-2xl">{$t('index.applications')}</div>
{#if $appSession.isAdmin}
<button
on:click={newApplication}
class="add-icon cursor-pointer bg-green-600 hover:bg-green-500"
class="btn btn-square btn-sm bg-applications"
>
<svg
class="w-6"
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"

14
apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
View File

@@ -16,7 +16,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { appSession, status } from '$lib/store';
import { addToast, appSession, status } from '$lib/store';
import Explainer from '$lib/components/Explainer.svelte';
const { id } = $page.params;
@@ -92,7 +92,10 @@
loading = true;
await post(`/databases/${id}`, { ...database, isRunning: $status.database.isRunning });
generateDbDetails();
toast.push('Configuration saved.');
addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -108,9 +111,10 @@
{#if $appSession.isAdmin}
<button
type="submit"
class:bg-purple-600={!loading}
class:hover:bg-purple-500={!loading}
disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
class="btn btn-sm"
class:loading={loading}
class:bg-databases={!loading}
disabled={loading}>{$t('forms.save')}</button
>
{/if}
</div>

31
apps/ui/src/routes/databases/index.svelte
View File

@@ -50,21 +50,24 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
<div on:click={newDatabase} class="add-icon cursor-pointer bg-purple-600 hover:bg-purple-500">
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
<button
on:click={newDatabase}
class="btn btn-square btn-sm bg-databases"
>
</div>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
</button>
</div>
<div class="flex-col justify-center">

39
apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
View File

@@ -9,7 +9,7 @@
import { onMount } from 'svelte';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
import Setting from '$lib/components/Setting.svelte';
const { id } = $page.params;
@@ -24,7 +24,10 @@
loading.save = true;
try {
await post(`/destinations/${id}`, { ...destination });
toast.push('Configuration saved.');
addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -96,7 +99,10 @@
async function stopProxy() {
try {
await post(`/destinations/${id}/stop`, { engine: destination.engine });
return toast.push($t('destination.coolify_proxy_stopped'));
return addToast({
message: $t('destination.coolify_proxy_stopped'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -104,7 +110,10 @@
async function startProxy() {
try {
await post(`/destinations/${id}/start`, { engine: destination.engine });
return toast.push($t('destination.coolify_proxy_started'));
return addToast({
message: $t('destination.coolify_proxy_started'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -114,7 +123,10 @@
if (sure) {
try {
loading.restart = true;
toast.push($t('destination.coolify_proxy_restarting'));
addToast({
message: $t('destination.coolify_proxy_restarting'),
type: 'success'
});
await post(`/destinations/${id}/restart`, {
engine: destination.engine,
fqdn: settings.fqdn
@@ -136,19 +148,18 @@
{#if $appSession.isAdmin}
<button
type="submit"
class="bg-sky-600 hover:bg-sky-500"
class:bg-sky-600={!loading.save}
class:hover:bg-sky-500={!loading.save}
class="btn btn-sm"
class:bg-destinations={!loading.save}
class:loading={loading.save}
disabled={loading.save}
>{loading.save ? $t('forms.saving') : $t('forms.save')}
>{$t('forms.save')}
</button>
<button
class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
class="btn btn-sm"
class:loading={loading.restart}
class:bg-error={!loading.restart}
disabled={loading.restart}
on:click|preventDefault={forceRestartProxy}
>{loading.restart
? $t('destination.restarting_please_wait')
: $t('destination.force_restart_proxy')}</button
on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
>
{/if}
</div>

4
apps/ui/src/routes/destinations/[id]/_New.svelte
View File

@@ -40,10 +40,10 @@
<div class="flex-col space-y-2 pb-10 text-center">
<div class="text-xl font-bold text-white">{$t('destination.new.predefined_destinations')}</div>
<div class="flex justify-center space-x-2">
<button class="w-32" on:click={() => setPredefined('localDocker')}
<button class="btn btn-sm" on:click={() => setPredefined('localDocker')}
>{$t('sources.local_docker')}</button
>
<button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
<button class="btn btn-sm" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
<!-- <button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button> -->
</div>
</div>

48
apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
View File

@@ -10,7 +10,7 @@
import { onMount } from 'svelte';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
const { id } = $page.params;
@@ -28,7 +28,10 @@
loading.save = true;
try {
await post(`/destinations/${id}`, { ...destination });
toast.push('Configuration saved.');
addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -103,7 +106,10 @@
async function stopProxy() {
try {
await post(`/destinations/${id}/stop`, { engine: destination.engine });
return toast.push($t('destination.coolify_proxy_stopped'));
return addToast({
message: $t('destination.coolify_proxy_stopped'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -111,7 +117,10 @@
async function startProxy() {
try {
await post(`/destinations/${id}/start`, { engine: destination.engine });
return toast.push($t('destination.coolify_proxy_started'));
return addToast({
message: $t('destination.coolify_proxy_started'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -121,7 +130,10 @@
if (sure) {
try {
loading.restart = true;
toast.push($t('destination.coolify_proxy_restarting'));
addToast({
message: $t('destination.coolify_proxy_restarting'),
type: 'success'
});
await post(`/destinations/${id}/restart`, {
engine: destination.engine,
fqdn: settings.fqdn
@@ -140,8 +152,10 @@
loading.verify = true;
await post(`/destinations/${id}/verify`, {});
destination.remoteVerified = true;
toast.push('Remote Docker Engine verified!');
return;
return addToast({
message: 'Remote Docker Engine verified!',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -156,26 +170,28 @@
{#if $appSession.isAdmin}
<button
type="submit"
class="bg-sky-600 hover:bg-sky-500"
class:bg-sky-600={!loading.save}
class:hover:bg-sky-500={!loading.save}
class="btn btn-sm"
class:loading={loading.save}
class:bg-destinations={!loading.save}
disabled={loading.save}
>{loading.save ? $t('forms.saving') : $t('forms.save')}
>{$t('forms.save')}
</button>
{#if !destination.remoteVerified}
<button
disabled={loading.verify}
class="btn btn-sm"
class:loading={loading.verify}
on:click|preventDefault|stopPropagation={verifyRemoteDocker}
>{loading.verify ? 'Verifying...' : 'Verify Remote Docker Engine'}</button
>Verify Remote Docker Engine</button
>
{:else}
<button
class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
class="btn btn-sm"
class:loading={loading.restart}
class:bg-error={!loading.restart}
disabled={loading.restart}
on:click|preventDefault={forceRestartProxy}
>{loading.restart
? $t('destination.restarting_please_wait')
: $t('destination.force_restart_proxy')}</button
>{$t('destination.force_restart_proxy')}</button
>
{/if}
{/if}

4
apps/ui/src/routes/destinations/index.svelte
View File

@@ -39,9 +39,9 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
{#if $appSession.isAdmin}
<a href="/destinations/new" class="add-icon bg-sky-600 hover:bg-sky-500">
<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
<svg
class="w-6"
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"

51
apps/ui/src/routes/iam/index.svelte
View File

@@ -28,7 +28,7 @@
import { del, get, post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
import { goto } from '$app/navigation';
import Cookies from 'js-cookie';
if (accounts.length === 0) {
@@ -42,7 +42,10 @@
}
try {
await post(`/iam/user/password`, { id });
toast.push('Password reset successfully. Please relogin to reset it.');
return addToast({
message: 'Password reset successfully. Please relogin to reset it.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -54,7 +57,10 @@
}
try {
await del(`/iam/user/remove`, { id });
toast.push('Account deleted.');
addToast({
message: 'Account deleted.',
type: 'success'
});
const data = await get('/iam');
accounts = data.accounts;
} catch (error) {
@@ -104,21 +110,24 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
<div on:click={newTeam} class="add-icon cursor-pointer bg-fuchsia-600 hover:bg-fuchsia-500">
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
<button
on:click={newTeam}
class="btn btn-square btn-sm bg-iam"
>
</div>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
</button>
</div>
{#if invitations.length > 0}
@@ -132,11 +141,11 @@
<span class="font-bold text-rose-600">{invitation.permission}</span> permission.
</div>
<button
class="hover:bg-green-500"
class="btn btn-sm btn-success"
on:click={() => acceptInvitation(invitation.id, invitation.teamId)}>Accept</button
>
<button
class="hover:bg-red-600"
class="btn btn-sm btn-error"
on:click={() => revokeInvitation(invitation.id, invitation.teamId)}>Delete</button
>
</div>
@@ -168,14 +177,14 @@
<td class="flex space-x-2">
<form on:submit|preventDefault={() => resetPassword(account.id)}>
<button
class="mx-auto my-4 w-32 bg-fuchsia-600 hover:bg-fuchsia-500 disabled:bg-coolgray-200"
class="my-4 btn btn-sm bg-iam"
>Reset Password</button
>
</form>
<form on:submit|preventDefault={() => deleteUser(account.id)}>
<button
disabled={account.id === $appSession.userId}
class="mx-auto my-4 w-32 bg-red-600 hover:bg-red-500 disabled:bg-coolgray-200"
class="my-4 btn btn-sm"
type="submit">Delete User</button
>
</form>

14
apps/ui/src/routes/iam/team/[id]/index.svelte
View File

@@ -91,7 +91,7 @@
<form on:submit|preventDefault={handleSubmit} class=" py-4">
<div class="flex space-x-1 pb-5">
<div class="title font-bold">{$t('index.settings')}</div>
<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit">{$t('forms.save')}</button>
<button class="btn btn-sm bg-iam" type="submit">{$t('forms.save')}</button>
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-2">
@@ -130,11 +130,11 @@
{#if $appSession.isAdmin && permission.user.id !== $appSession.userId && permission.permission !== 'owner'}
<td class="flex flex-col items-center justify-center space-y-2 py-4 text-center">
<button
class="w-52 bg-red-600 hover:bg-red-500"
class="btn btn-sm btn-error"
on:click={() => removeFromTeam(permission.user.id)}>{$t('forms.remove')}</button
>
<button
class="w-52"
class="btn btn-sm"
on:click={() =>
changePermission(permission.user.id, permission.id, permission.permission)}
>{$t('team.promote_to', {
@@ -157,7 +157,7 @@
{#if isAdmin(team.permissions[0].permission)}
<td class="flex-col space-y-2 py-4 text-center">
<button
class="w-52 bg-red-600 hover:bg-red-500"
class="btn btn-sm btn-error"
on:click={() => revokeInvitation(invitation.id)}
>{$t('team.revoke_invitation')}</button
>
@@ -174,7 +174,7 @@
<div class="flex space-x-1">
<div class="flex space-x-1">
<div class="title font-bold">{$t('team.invite_new_member')}</div>
<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit"
<button class="btn btn-sm bg-iam" type="submit"
>{$t('team.send_invitation')}</button
>
</div>
@@ -191,14 +191,14 @@
<div class="flex-1" />
<button
on:click={() => (invitation.permission = 'read')}
class="rounded-none rounded-l border border-dashed border-transparent"
class="px-2 rounded-none rounded-l border border-dashed border-transparent"
type="button"
class:border-coolgray-300={invitation.permission !== 'read'}
class:bg-fuchsia-500={invitation.permission === 'read'}>{$t('team.read')}</button
>
<button
on:click={() => (invitation.permission = 'admin')}
class="rounded-none rounded-r border border-dashed border-transparent"
class="px-2 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'}>{$t('team.admin')}</button

13
apps/ui/src/routes/services/[id]/_Secret.svelte
View File

@@ -7,6 +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 { createEventDispatcher } from 'svelte';
@@ -31,7 +32,6 @@
await post(`/services/${id}/secrets`, {
name,
value,
isNew
});
dispatch('refresh');
@@ -39,7 +39,10 @@
name = '';
value = '';
}
toast.push('Secret saved.');
addToast({
message: 'Secret saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -72,15 +75,15 @@
<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>
<button class="btn btn-sm bg-success" on:click={() => saveSecret(true)}>Add</button>
</div>
{:else}
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="" on:click={() => saveSecret(false)}>Set</button>
<button class="btn btn-sm bg-success" on:click={() => saveSecret(false)}>Set</button>
</div>
<div class="flex justify-center items-end">
<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
<button class="btn btn-sm bg-error" on:click={removeSecret}>Remove</button>
</div>
</div>
{/if}

29
apps/ui/src/routes/services/[id]/_Services/_Services.svelte
View File

@@ -13,7 +13,7 @@
import { get, post } from '$lib/api';
import { errorNotification, getDomain } from '$lib/common';
import { t } from '$lib/translations';
import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import Setting from '$lib/components/Setting.svelte';
@@ -45,7 +45,10 @@
async function isDNSValid(domain: any, isWWW: any) {
try {
await get(`/services/${id}/check?domain=${domain}`);
toast.push('DNS configuration is valid.');
addToast({
message: 'DNS configuration is valid.',
type: 'success'
});
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
return true;
} catch (error) {
@@ -70,7 +73,10 @@
setLocation(service);
$disabledButton = false;
forceSave = false;
toast.push('Configuration saved.');
return addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
//@ts-ignore
if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
@@ -96,7 +102,10 @@
loadingVerification = true;
try {
await post(`/services/${id}/${service.type}/activate`, { id: service.id });
toast.push(t.get('services.all_email_verified'));
return addToast({
message: t.get('services.all_email_verified'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -109,7 +118,10 @@
dualCerts = !dualCerts;
}
await post(`/services/${id}/settings`, { dualCerts });
return toast.push(t.get('application.settings_saved'));
return addToast({
message: t.get('application.settings_saved'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -145,13 +157,14 @@
{#if $appSession.isAdmin}
<button
type="submit"
class:bg-pink-600={!loading}
class="btn btn-sm"
class:bg-orange-600={forceSave}
class:hover:bg-pink-500={!loading}
class:hover:bg-orange-400={forceSave}
class:loading={loading}
class:bg-services={!loading}
disabled={loading}
>{loading
? $t('forms.saving')
? $t('forms.save')
: forceSave
? $t('forms.confirm_continue')
: $t('forms.save')}</button

22
apps/ui/src/routes/services/[id]/_Storage.svelte
View File

@@ -10,6 +10,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
const { id } = $page.params;
const dispatch = createEventDispatcher();
@@ -29,8 +30,10 @@
storage.path = null;
storage.id = null;
}
if (newStorage) toast.push('Storage saved.');
else toast.push('Storage updated.');
addToast({
message: 'Storage saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -39,16 +42,19 @@
try {
await del(`/services/${id}/storages`, { path: storage.path });
dispatch('refresh');
toast.push('Storage deleted.');
return addToast({
message: 'Storage deleted.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
}
async function handleSubmit() {
if (isNew) {
await saveStorage(true)
await saveStorage(true);
} else {
await saveStorage(false)
await saveStorage(false);
}
}
</script>
@@ -66,16 +72,16 @@
<td>
{#if isNew}
<div class="flex items-center justify-center">
<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}>Add</button
<button class="btn btn-sm btn-success" on:click={() => saveStorage(true)}>Add</button
>
</div>
{:else}
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="" on:click={() => saveStorage(false)}>Set</button>
<button class="btn btn-sm btn-success" on:click={() => saveStorage(false)}>Set</button>
</div>
<div class="flex justify-center items-end">
<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}>Remove</button>
<button class="btn btn-sm btn-error" on:click={removeStorage}>Remove</button>
</div>
</div>
{/if}

31
apps/ui/src/routes/services/index.svelte
View File

@@ -46,21 +46,24 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
<div on:click={newService} class="add-icon cursor-pointer bg-pink-600 hover:bg-pink-500">
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
<button
on:click={newService}
class="btn btn-square btn-sm bg-services"
>
</div>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
</button>
</div>
<div class="flex-col justify-center">

20
apps/ui/src/routes/settings/global.svelte
View File

@@ -24,7 +24,7 @@
import { browser } from '$app/env';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { appSession, features } from '$lib/store';
import { addToast, appSession, features } from '$lib/store';
import { errorNotification, getDomain } from '$lib/common';
import Menu from './_Menu.svelte';
@@ -83,7 +83,10 @@
isAutoUpdateEnabled,
isDNSCheckEnabled
});
return toast.push(t.get('application.settings_saved'));
return addToast({
message: t.get('application.settings_saved'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -104,7 +107,10 @@
settings.maxPort = maxPort;
}
forceSave = false;
toast.push('Configuration saved.');
return addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) {
forceSave = true;
@@ -129,7 +135,10 @@
async function isDNSValid(domain: any, isWWW: any) {
try {
await get(`/settings/check?domain=${domain}`);
toast.push('DNS configuration is valid.');
addToast({
message:'DNS configuration is valid.',
type: 'success'
});
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
return true;
} catch (error) {
@@ -154,10 +163,9 @@
<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"
type="submit"
class:bg-yellow-500={!loading.save}
class:bg-orange-600={forceSave}
class:hover:bg-yellow-500={!loading.save}
class:hover:bg-orange-400={forceSave}
disabled={loading.save}
>{loading.save

7
apps/ui/src/routes/settings/ssh-keys.svelte
View File

@@ -69,8 +69,7 @@
<div class="title font-bold">SSH Keys</div>
<button
on:click={() => (isModalActive = true)}
class:bg-yellow-500={!loading.save}
class:hover:bg-yellow-400={!loading.save}
class="btn btn-sm bg-settings text-black"
disabled={loading.save}>New SSH Key</button
>
</div>
@@ -82,7 +81,7 @@
<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="bg-red-500">Delete</button>
<button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error">Delete</button>
</div>
{/each}
{/if}
@@ -91,7 +90,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">

16
apps/ui/src/routes/sources/[id]/_Github.svelte
View File

@@ -7,7 +7,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { dashify, errorNotification, getDomain } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
import { dev } from '$app/env';
const { id } = $page.params;
@@ -24,7 +24,10 @@
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
apiUrl: source.apiUrl.replace(/\/$/, '')
});
toast.push('Configuration saved.');
return addToast({
message:'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -115,7 +118,7 @@
<div class="flex space-x-1 pb-7">
<div class="title">General</div>
{#if !source.githubAppId}
<button class="bg-orange-600 font-normal" type="submit">Save</button>
<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
@@ -171,13 +174,12 @@
<div class="title">{$t('general')}</div>
{#if $appSession.isAdmin}
<button
class="btn btn-sm bg-sources"
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
<a
class="no-underline button justify-center flex items-center"
class="btn btn-sm"
href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}
>{$t('source.change_app_settings', { name: 'GitHub' })}</a
>
@@ -250,7 +252,7 @@
{:else}
<div class="text-center">
<a href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}>
<button class="box-selection bg-orange-600 hover:bg-orange-500 text-xl"
<button class="box-selection bg-sources text-xl"
>Install Repositories</button
></a
>

44
apps/ui/src/routes/sources/[id]/_Gitlab.svelte
View File

@@ -11,7 +11,7 @@
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
const { id } = $page.params;
let url = settings.fqdn ? settings.fqdn : window.location.origin;
@@ -73,7 +73,10 @@
apiUrl: source.apiUrl.replace(/\/$/, ''),
customPort: source.customPort
});
toast.push('Configuration saved.');
return addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -124,8 +127,10 @@
break;
case 'group':
if (!source.gitlabApp.groupName) {
toast.push('Please enter a group name first.');
return;
return addToast({
message: 'Please enter a group name first.',
type: 'error'
});
}
window.open(
`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
@@ -146,21 +151,32 @@
{#if $appSession.isAdmin}
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
class="btn btn-sm bg-sources"
disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
>
{#if source.gitlabAppId}
<button on:click|preventDefault={changeSettings}
<button class="btn btn-sm" on:click|preventDefault={changeSettings}
>{$t('source.change_app_settings', { name: 'GitLab' })}</button
>
{:else}
<button on:click|preventDefault|stopPropagation={newApp}>Create new GitLab App</button>
<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
>Create new GitLab App manually</button
>
{/if}
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
{#if !source.gitlabAppId}
<Explainer
customClass="w-full"
text="<span class='font-bold text-base text-white'>Scopes required:</span>
<br>- <span class='text-sources font-bold'>api</span> (Access the authenticated user's API)
<br>- <span class='text-sources font-bold'>read_repository</span> (Allows read-only access to the repository)
<br>- <span class='text-sources 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 <span class='text-sources font-bold'>Expire Access Tokens</span>
<br><br>Webhook URL: <span class='text-sources font-bold'>{url}/webhooks/gitlab</span>"
/>
<div class="grid grid-cols-2 items-center">
<label for="type" class="text-base font-bold text-stone-100">Application Type</label>
<select name="type" id="type" class="w-96" bind:value={applicationType}>
@@ -295,16 +311,4 @@
</div>
</div>
</form>
{#if !source.gitlabAppId}
<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 <span class='text-orange-500 font-bold'>Expire Access Tokens</span>
<br><br>Webhook URL: <span class='text-orange-500 font-bold'>{url}/webhooks/gitlab</span>"
/>
{/if}
</div>

6
apps/ui/src/routes/sources/[id]/_New.svelte
View File

@@ -44,10 +44,10 @@
</div>
<div class="flex flex-col justify-center">
<div class="flex-col space-y-2 pb-10 text-center">
<div class="text-xl font-bold text-white">Select a provider</div>
<div class="text-xl font-bold text-white">Select a git type</div>
<div class="flex justify-center space-x-2">
<button class="w-32" on:click={() => setPredefined('github')}>GitHub.com</button>
<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
<button class="btn btn-sm" on:click={() => setPredefined('github')}>GitHub</button>
<button class="btn btn-sm" on:click={() => setPredefined('gitlab')}>GitLab</button>
</div>
</div>
{#if source?.type}

4
apps/ui/src/routes/sources/index.svelte
View File

@@ -39,9 +39,9 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
{#if $appSession.isAdmin}
<a href="/sources/new" class="add-icon bg-orange-600 hover:bg-orange-500">
<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
<svg
class="w-6"
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"