ui/fix: Insane amount

This commit is contained in:
Andras Bacsai
2022-04-08 10:35:16 +02:00
parent 76754ded79
commit 0d0715a340
22 changed files with 509 additions and 490 deletions

View File

@@ -73,7 +73,11 @@ export async function removeApplication({ id, teamId }) {
await prisma.build.deleteMany({ where: { applicationId: id } }); await prisma.build.deleteMany({ where: { applicationId: id } });
await prisma.secret.deleteMany({ where: { applicationId: id } }); await prisma.secret.deleteMany({ where: { applicationId: id } });
await prisma.applicationPersistentStorage.deleteMany({ where: { applicationId: id } }); await prisma.applicationPersistentStorage.deleteMany({ where: { applicationId: id } });
if (teamId === '0') {
await prisma.application.deleteMany({ where: { id } });
} else {
await prisma.application.deleteMany({ where: { id, teams: { some: { id: teamId } } } }); await prisma.application.deleteMany({ where: { id, teams: { some: { id: teamId } } } });
}
} }
export async function getApplicationWebhook({ projectId, branch }) { export async function getApplicationWebhook({ projectId, branch }) {

View File

@@ -13,15 +13,11 @@ export async function listSources(teamId) {
}); });
} }
export async function newSource({ name, teamId, type, htmlUrl, apiUrl, organization }) { export async function newSource({ teamId, name }) {
return await prisma.gitSource.create({ return await prisma.gitSource.create({
data: { data: {
teams: { connect: { id: teamId } },
name, name,
type, teams: { connect: { id: teamId } }
htmlUrl,
apiUrl,
organization
} }
}); });
} }
@@ -55,8 +51,29 @@ export async function getSource({ id, teamId }) {
if (body?.gitlabApp?.appSecret) body.gitlabApp.appSecret = decrypt(body.gitlabApp.appSecret); if (body?.gitlabApp?.appSecret) body.gitlabApp.appSecret = decrypt(body.gitlabApp.appSecret);
return body; return body;
} }
export async function addSource({ id, appId, teamId, oauthId, groupName, appSecret }) { export async function addGitHubSource({ id, teamId, type, name, htmlUrl, apiUrl }) {
await prisma.gitSource.update({ where: { id }, data: { type, name, htmlUrl, apiUrl } });
return await prisma.githubApp.create({
data: {
teams: { connect: { id: teamId } },
gitSource: { connect: { id } }
}
});
}
export async function addGitLabSource({
id,
teamId,
type,
name,
htmlUrl,
apiUrl,
oauthId,
appId,
appSecret,
groupName
}) {
const encrptedAppSecret = encrypt(appSecret); const encrptedAppSecret = encrypt(appSecret);
await prisma.gitSource.update({ where: { id }, data: { type, apiUrl, htmlUrl, name } });
return await prisma.gitlabApp.create({ return await prisma.gitlabApp.create({
data: { data: {
teams: { connect: { id: teamId } }, teams: { connect: { id: teamId } },
@@ -75,9 +92,9 @@ export async function configureGitsource({ id, gitSourceId }) {
data: { gitSource: { connect: { id: gitSourceId } } } data: { gitSource: { connect: { id: gitSourceId } } }
}); });
} }
export async function updateGitsource({ id, name }) { export async function updateGitsource({ id, name, htmlUrl, apiUrl }) {
return await prisma.gitSource.update({ return await prisma.gitSource.update({
where: { id }, where: { id },
data: { name } data: { name, htmlUrl, apiUrl }
}); });
} }

View File

@@ -14,6 +14,7 @@ export const del: RequestHandler = async (event) => {
status: 200 status: 200
}; };
} catch (error) { } catch (error) {
console.log(error);
return ErrorHandler(error); return ErrorHandler(error);
} }
}; };

View File

@@ -1,70 +0,0 @@
<script lang="ts">
export let application;
import Rust from '$lib/components/svg/applications/Rust.svelte';
import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
import React from '$lib/components/svg/applications/React.svelte';
import Svelte from '$lib/components/svg/applications/Svelte.svelte';
import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
import PHP from '$lib/components/svg/applications/PHP.svelte';
import Python from '$lib/components/svg/applications/Python.svelte';
import Static from '$lib/components/svg/applications/Static.svelte';
import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
import Docker from '$lib/components/svg/applications/Docker.svelte';
import Astro from '$lib/components/svg/applications/Astro.svelte';
import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
import { session } from '$app/stores';
const buildPack = application?.buildPack?.toLowerCase();
</script>
<a href="/applications/{application.id}" class="w-96 p-2 no-underline">
<div class="box-selection group relative hover:bg-green-600">
{#if buildPack === 'rust'}
<Rust />
{:else if buildPack === 'node'}
<Nodejs />
{:else if buildPack === 'react'}
<React />
{:else if buildPack === 'svelte'}
<Svelte />
{:else if buildPack === 'vuejs'}
<Vuejs />
{:else if buildPack === 'php'}
<PHP />
{:else if buildPack === 'python'}
<Python />
{:else if buildPack === 'static'}
<Static />
{:else if buildPack === 'nestjs'}
<Nestjs />
{:else if buildPack === 'nuxtjs'}
<Nuxtjs />
{:else if buildPack === 'nextjs'}
<Nextjs />
{:else if buildPack === 'gatsby'}
<Gatsby />
{:else if buildPack === 'docker'}
<Docker />
{:else if buildPack === 'astro'}
<Astro />
{:else if buildPack === 'eleventy'}
<Eleventy />
{/if}
<div class="truncate text-center text-xl font-bold">{application.name}</div>
{#if $session.teamId === '0'}
<div class="truncate text-center">Team {application.teams[0].name}</div>
{/if}
{#if application.fqdn}
<div class="truncate text-center">{application.fqdn}</div>
{/if}
{#if !application.gitSourceId || !application.destinationDockerId}
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
Configuration missing
</div>
{/if}
</div>
</a>

View File

@@ -1,9 +1,26 @@
<script lang="ts"> <script lang="ts">
export let applications: Array<Application>; export let applications: Array<Application>;
import { session } from '$app/stores'; import { session } from '$app/stores';
import Application from './_Application.svelte';
import { post } from '$lib/api'; import { post } from '$lib/api';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import Rust from '$lib/components/svg/applications/Rust.svelte';
import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
import React from '$lib/components/svg/applications/React.svelte';
import Svelte from '$lib/components/svg/applications/Svelte.svelte';
import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
import PHP from '$lib/components/svg/applications/PHP.svelte';
import Python from '$lib/components/svg/applications/Python.svelte';
import Static from '$lib/components/svg/applications/Static.svelte';
import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
import Docker from '$lib/components/svg/applications/Docker.svelte';
import Astro from '$lib/components/svg/applications/Astro.svelte';
import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
import { getDomain } from '$lib/components/common';
async function newApplication() { async function newApplication() {
const { id } = await post('/applications/new', {}); const { id } = await post('/applications/new', {});
return await goto(`/applications/${id}`, { replaceState: true }); return await goto(`/applications/${id}`, { replaceState: true });
@@ -49,14 +66,108 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-col md:flex-row flex-wrap px-2 justify-center"> <div class="flex flex-col md:flex-row flex-wrap px-2 justify-center">
{#each ownApplications as application} {#each ownApplications as application}
<Application {application} /> <a href="/applications/{application.id}" class="w-96 p-2 no-underline">
<div class="box-selection group relative hover:bg-green-600">
{#if application.buildPack.toLowerCase() === 'rust'}
<Rust />
{:else if application.buildPack.toLowerCase() === 'node'}
<Nodejs />
{:else if application.buildPack.toLowerCase() === 'react'}
<React />
{:else if application.buildPack.toLowerCase() === 'svelte'}
<Svelte />
{:else if application.buildPack.toLowerCase() === 'vuejs'}
<Vuejs />
{:else if application.buildPack.toLowerCase() === 'php'}
<PHP />
{:else if application.buildPack.toLowerCase() === 'python'}
<Python />
{:else if application.buildPack.toLowerCase() === 'static'}
<Static />
{:else if application.buildPack.toLowerCase() === 'nestjs'}
<Nestjs />
{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
<Nuxtjs />
{:else if application.buildPack.toLowerCase() === 'nextjs'}
<Nextjs />
{:else if application.buildPack.toLowerCase() === 'gatsby'}
<Gatsby />
{:else if application.buildPack.toLowerCase() === 'docker'}
<Docker />
{:else if application.buildPack.toLowerCase() === 'astro'}
<Astro />
{:else if application.buildPack.toLowerCase() === 'eleventy'}
<Eleventy />
{/if}
<div class="truncate text-center text-xl font-bold">{application.name}</div>
{#if $session.teamId === '0' && otherApplications.length > 0}
<div class="truncate text-center">Team {application.teams[0].name}</div>
{/if}
{#if application.fqdn}
<div class="truncate text-center">{getDomain(application.fqdn)}</div>
{/if}
{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
Configuration missing
</div>
{/if}
</div>
</a>
{/each} {/each}
</div> </div>
{#if otherApplications.length > 0 && $session.teamId === '0'} {#if otherApplications.length > 0 && $session.teamId === '0'}
<div class="text-xl font-bold pb-5 pt-10 px-6">Other Applications</div> <div class="text-xl font-bold pb-5 pt-10 px-6">Other Applications</div>
<div class="flex flex-col md:flex-row flex-wrap px-2 justify-center"> <div class="flex flex-col md:flex-row flex-wrap px-2 justify-center">
{#each otherApplications as application} {#each otherApplications as application}
<Application {application} /> <a href="/applications/{application.id}" class="w-96 p-2 no-underline">
<div class="box-selection group relative hover:bg-green-600">
{#if application.buildPack.toLowerCase() === 'rust'}
<Rust />
{:else if application.buildPack.toLowerCase() === 'node'}
<Nodejs />
{:else if application.buildPack.toLowerCase() === 'react'}
<React />
{:else if application.buildPack.toLowerCase() === 'svelte'}
<Svelte />
{:else if application.buildPack.toLowerCase() === 'vuejs'}
<Vuejs />
{:else if application.buildPack.toLowerCase() === 'php'}
<PHP />
{:else if application.buildPack.toLowerCase() === 'python'}
<Python />
{:else if application.buildPack.toLowerCase() === 'static'}
<Static />
{:else if application.buildPack.toLowerCase() === 'nestjs'}
<Nestjs />
{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
<Nuxtjs />
{:else if application.buildPack.toLowerCase() === 'nextjs'}
<Nextjs />
{:else if application.buildPack.toLowerCase() === 'gatsby'}
<Gatsby />
{:else if application.buildPack.toLowerCase() === 'docker'}
<Docker />
{:else if application.buildPack.toLowerCase() === 'astro'}
<Astro />
{:else if application.buildPack.toLowerCase() === 'eleventy'}
<Eleventy />
{/if}
<div class="truncate text-center text-xl font-bold">{application.name}</div>
{#if $session.teamId === '0'}
<div class="truncate text-center">Team {application.teams[0].name}</div>
{/if}
{#if application.fqdn}
<div class="truncate text-center">{getDomain(application.fqdn)}</div>
{/if}
{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
Configuration missing
</div>
{/if}
</div>
</a>
{/each} {/each}
</div> </div>
{/if} {/if}

View File

@@ -72,7 +72,7 @@
<div class="font-bold text-xl text-center truncate"> <div class="font-bold text-xl text-center truncate">
{database.name} {database.name}
</div> </div>
{#if $session.teamId === '0'} {#if $session.teamId === '0' && otherDatabases.length > 0}
<div class="text-center truncate">{database.teams[0].name}</div> <div class="text-center truncate">{database.teams[0].name}</div>
{/if} {/if}
{#if !database.type} {#if !database.type}

View File

@@ -68,7 +68,7 @@
<a href="/destinations/{destination.id}" class="no-underline p-2 w-96"> <a href="/destinations/{destination.id}" class="no-underline p-2 w-96">
<div class="box-selection hover:bg-sky-600"> <div class="box-selection hover:bg-sky-600">
<div class="font-bold text-xl text-center truncate">{destination.name}</div> <div class="font-bold text-xl text-center truncate">{destination.name}</div>
{#if $session.teamId === '0'} {#if $session.teamId === '0' && otherDestinations.length > 0}
<div class="text-center truncate">{destination.teams[0].name}</div> <div class="text-center truncate">{destination.teams[0].name}</div>
{/if} {/if}
<div class="text-center truncate">{destination.network}</div> <div class="text-center truncate">{destination.network}</div>

View File

@@ -55,7 +55,7 @@
} }
try { try {
await post(`/iam/password.json`, { id }); await post(`/iam/password.json`, { id });
toast.push('Password reset successfully.'); toast.push('Password reset successfully. Please relogin to reset it.');
} catch ({ error }) { } catch ({ error }) {
return errorNotification(error); return errorNotification(error);
} }
@@ -80,10 +80,7 @@
<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div> <div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
</div> </div>
<!-- <div class="flex items-center px-6"> <div class="mx-auto max-w-4xl px-6 py-4">
<div>{account.email}</div>
</div> -->
<div class="mx-auto max-w-4xl px-6">
{#if $session.teamId === '0' && accounts.length > 0} {#if $session.teamId === '0' && accounts.length > 0}
<div class="title font-bold">Accounts</div> <div class="title font-bold">Accounts</div>
{:else} {:else}

View File

@@ -92,7 +92,7 @@
</a> </a>
<a <a
href="/teams" href="/iam"
sveltekit:prefetch sveltekit:prefetch
class="flex cursor-pointer flex-col rounded p-6 text-center text-cyan-500 no-underline transition duration-150 hover:bg-cyan-500 hover:text-white" class="flex cursor-pointer flex-col rounded p-6 text-center text-cyan-500 no-underline transition duration-150 hover:bg-cyan-500 hover:text-white"
> >

View File

@@ -1,96 +0,0 @@
<script lang="ts">
export let gitSource;
import { goto } from '$app/navigation';
import { post } from '$lib/api';
import Explainer from '$lib/components/Explainer.svelte';
import { errorNotification } from '$lib/form';
import { onMount } from 'svelte';
let nameEl;
let organizationEl;
onMount(() => {
nameEl.focus();
});
async function handleSubmit() {
try {
const { id } = await post(`/new/source.json`, { ...gitSource });
return await goto(`/sources/${id}/`);
} catch ({ error }) {
return errorNotification(error);
}
}
</script>
<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>
<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="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-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-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>
<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"
placeholder="eg: coollabsio"
bind:value={gitSource.organization}
bind:this={organizationEl}
/>
</div>
</form>
</div>
</div>

View File

@@ -1,73 +0,0 @@
<script lang="ts">
export let gitSource;
import { goto } from '$app/navigation';
import { post } from '$lib/api';
import { errorNotification } from '$lib/form';
import { onMount } from 'svelte';
let nameEl;
onMount(() => {
nameEl.focus();
});
async function handleSubmit() {
try {
const { id } = await post(`/new/source.json`, { ...gitSource });
return await goto(`/sources/${id}/`);
} catch ({ error }) {
return errorNotification(error);
}
}
</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-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-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-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-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>

View File

@@ -1,66 +0,0 @@
<script lang="ts">
import Github from './_Github.svelte';
import Gitlab from './_Gitlab.svelte';
let gitSource = {
name: undefined,
type: 'github',
htmlUrl: undefined,
apiUrl: undefined,
organization: undefined
};
function setPredefined(type) {
switch (type) {
case 'github':
gitSource = {
name: 'GitHub.com',
type,
htmlUrl: 'https://github.com',
apiUrl: 'https://api.github.com',
organization: undefined
};
break;
case 'gitlab':
gitSource = {
name: 'GitLab.com',
type,
htmlUrl: 'https://gitlab.com',
apiUrl: 'https://gitlab.com/api',
organization: undefined
};
break;
case 'bitbucket':
gitSource = {
name: 'BitBucket.com',
type,
htmlUrl: 'https://bitbucket.com',
apiUrl: 'https://bitbucket.com',
organization: undefined
};
break;
default:
break;
}
}
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Add New Git Source</div>
</div>
<div class="flex-col space-y-2 pb-10 text-center">
<div class="text-xl font-bold text-white">Official providers</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="w-32" on:click={() => setPredefined('bitbucket')}>Bitbucket.com</button>
</div>
</div>
<div class="px-6">
{#if gitSource.type === 'github'}
<Github {gitSource} />
{:else if gitSource.type === 'gitlab'}
<Gitlab {gitSource} />
{:else if gitSource.type === 'bitbucket'}
<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
{/if}
</div>

View File

@@ -13,6 +13,7 @@
import Ghost from '$lib/components/svg/services/Ghost.svelte'; import Ghost from '$lib/components/svg/services/Ghost.svelte';
import MeiliSearch from '$lib/components/svg/services/MeiliSearch.svelte'; import MeiliSearch from '$lib/components/svg/services/MeiliSearch.svelte';
import { session } from '$app/stores'; import { session } from '$app/stores';
import { getDomain } from '$lib/components/common';
export let services; export let services;
async function newService() { async function newService() {
@@ -87,9 +88,12 @@
<div class="font-bold text-xl text-center truncate"> <div class="font-bold text-xl text-center truncate">
{service.name} {service.name}
</div> </div>
{#if $session.teamId === '0'} {#if $session.teamId === '0' && otherServices.length > 0}
<div class="text-center truncate">{service.teams[0].name}</div> <div class="text-center truncate">{service.teams[0].name}</div>
{/if} {/if}
{#if service.fqdn}
<div class="truncate text-center">{getDomain(service.fqdn)}</div>
{/if}
{#if !service.type || !service.fqdn} {#if !service.type || !service.fqdn}
<div class="font-bold text-center truncate text-red-500 group-hover:text-white"> <div class="font-bold text-center truncate text-red-500 group-hover:text-white">
Configuration missing Configuration missing
@@ -134,6 +138,9 @@
{#if $session.teamId === '0'} {#if $session.teamId === '0'}
<div class="text-center truncate">{service.teams[0].name}</div> <div class="text-center truncate">{service.teams[0].name}</div>
{/if} {/if}
{#if service.fqdn}
<div class="truncate text-center">{getDomain(service.fqdn)}</div>
{/if}
{#if !service.type || !service.fqdn} {#if !service.type || !service.fqdn}
<div class="font-bold text-center truncate text-red-500 group-hover:text-white"> <div class="font-bold text-center truncate text-red-500 group-hover:text-white">
Configuration missing Configuration missing

View File

@@ -3,13 +3,19 @@
import { page, session } from '$app/stores'; import { page, session } from '$app/stores';
import { post } from '$lib/api'; import { post } from '$lib/api';
import { errorNotification } from '$lib/form'; import { errorNotification } from '$lib/form';
import { toast } from '@zerodevx/svelte-toast';
const { id } = $page.params; const { id } = $page.params;
let loading = false; let loading = false;
async function handleSubmit() { async function handleSubmit() {
loading = true; loading = true;
try { try {
return await post(`/sources/${id}.json`, { name: source.name }); await post(`/sources/${id}.json`, {
name: source.name,
htmlUrl: source.htmlUrl,
apiUrl: source.apiUrl
});
toast.push('Settings saved.');
} catch ({ error }) { } catch ({ error }) {
return errorNotification(error); return errorNotification(error);
} finally { } finally {
@@ -38,7 +44,18 @@
}, 100); }, 100);
} }
function newGithubApp() { async function newGithubApp() {
loading = true;
try {
await post(`/sources/${id}/github.json`, {
type: 'github',
name: source.name,
htmlUrl: source.htmlUrl,
apiUrl: source.apiUrl
});
} catch ({ error }) {
return errorNotification(error);
}
const left = screen.width / 2 - 1020 / 2; const left = screen.width / 2 - 1020 / 2;
const top = screen.height / 2 - 618 / 2; const top = screen.height / 2 - 618 / 2;
const newWindow = open( const newWindow = open(
@@ -59,9 +76,35 @@
} }
</script> </script>
{#if !source.githubAppId} <div class="mx-auto max-w-4xl">
<button on:click={newGithubApp}>Create new GitHub App</button> {#if !source.githubAppId}
{:else if source.githubApp?.installationId} <form on:submit|preventDefault={newGithubApp} class="py-4">
<div class="flex space-x-1 pb-5 font-bold">
<div class="title">General</div>
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-flow-row gap-2">
<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>
<div class="grid grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div>
<div class="grid grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div>
</div>
{#if source.apiUrl && source.htmlUrl && source.name}
<div class="text-center">
<button class=" mt-8 bg-orange-600" type="submit">Create new GitHub App</button>
</div>
{/if}
</form>
{:else if source.githubAppId}
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5 font-bold"> <div class="flex space-x-1 pb-5 font-bold">
<div class="title">General</div> <div class="title">General</div>
@@ -78,12 +121,27 @@
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-2 items-center mt-2"> <div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">Name</label> <label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" id="name" required bind:value={source.name} /> <input name="name" id="name" required bind:value={source.name} />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div>
<div class="grid grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div>
</div>
</form> </form>
{:else} {:else}
<button on:click={() => installRepositories(source)}>Install Repositories</button> <div class="text-center">
{/if} <button class=" bg-orange-600 mt-8" on:click={() => installRepositories(source)}
>Install Repositories</button
>
</div>
{/if}
</div>

View File

@@ -1,35 +1,73 @@
<script lang="ts"> <script lang="ts">
export let source; export let source;
export let settings;
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import { enhance, errorNotification } from '$lib/form'; import { errorNotification } from '$lib/form';
import { page, session } from '$app/stores'; import { page, session } from '$app/stores';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { post } from '$lib/api'; import { post } from '$lib/api';
import { browser } from '$app/env'; import { browser } from '$app/env';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { toast } from '@zerodevx/svelte-toast';
const { id } = $page.params; const { id } = $page.params;
let url = browser ? (settings.fqdn ? settings.fqdn : window.location.origin) : '';
let loading = false; let loading = false;
let oauthIdEl; let oauthIdEl;
let payload = { let applicationType;
oauthId: undefined, if (!source.gitlabAppId) {
groupName: undefined, source.gitlabApp = {
appId: undefined, oauthId: null,
appSecret: undefined, groupName: null,
applicationType: 'user' appId: null,
appSecret: null
}; };
}
onMount(() => { onMount(() => {
oauthIdEl && oauthIdEl.focus(); oauthIdEl && oauthIdEl.focus();
}); });
async function handleSubmitSave() {
async function handleSubmit() {
if (loading) return;
loading = true; loading = true;
if (!source.gitlabAppId) {
// New GitLab App
try { try {
return await post(`/sources/${id}.json`, { name: source.name }); await post(`/sources/${id}/gitlab.json`, {
type: 'gitlab',
name: source.name,
htmlUrl: source.htmlUrl,
apiUrl: source.apiUrl,
oauthId: source.gitlabApp.oauthId,
appId: source.gitlabApp.appId,
appSecret: source.gitlabApp.appSecret,
groupName: source.gitlabApp.groupName
});
return window.location.reload();
} catch ({ error }) { } catch ({ error }) {
return errorNotification(error); return errorNotification(error);
} finally { } finally {
loading = false; loading = false;
} }
} else {
// Update GitLab App
try {
await post(`/sources/${id}.json`, {
name: source.name,
htmlUrl: source.htmlUrl,
apiUrl: source.apiUrl
});
} catch ({ error }) {
return errorNotification(error);
} finally {
toast.push('Settings saved.');
loading = false;
} }
}
}
async function changeSettings() { async function changeSettings() {
const { const {
htmlUrl, htmlUrl,
@@ -53,23 +91,27 @@
}, 100); }, 100);
} }
async function checkOauthId() { async function checkOauthId() {
if (payload.oauthId) { if (source.gitlabApp?.oauthId) {
try { try {
await post(`/sources/${id}/check.json`, { oauthId: payload.oauthId }); await post(`/sources/${id}/check.json`, {
oauthId: source.gitlabApp?.oauthId
});
} catch ({ error }) { } catch ({ error }) {
payload.oauthId = null; source.gitlabApp.oauthId = null;
oauthIdEl.focus(); oauthIdEl.focus();
return errorNotification(error); return errorNotification(error);
} }
} }
} }
function newApp() { function newApp() {
switch (payload.applicationType) { switch (applicationType) {
case 'user': case 'user':
window.open(`${source.htmlUrl}/-/profile/applications`); window.open(`${source.htmlUrl}/-/profile/applications`);
break; break;
case 'group': case 'group':
window.open(`${source.htmlUrl}/groups/${payload.groupName}/-/settings/applications`); window.open(
`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
);
break; break;
case 'instance': case 'instance':
break; break;
@@ -77,112 +119,10 @@
break; break;
} }
} }
async function handleSubmit() {
loading = true;
try {
await post(`/sources/${id}/gitlab.json`, { ...payload });
return window.location.reload();
} catch ({ error }) {
return errorNotification(error);
} finally {
loading = false;
}
}
</script> </script>
{#if !source.gitlabApp?.appId} <div class="mx-auto max-w-4xl">
<div> <form on:submit|preventDefault={handleSubmit} class="py-4">
<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}
<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>
<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>
<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-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>
</div>
{: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="flex space-x-1 pb-5 font-bold">
<div class="title">General</div> <div class="title">General</div>
{#if $session.isAdmin} {#if $session.isAdmin}
@@ -192,15 +132,123 @@
class:hover:bg-orange-500={!loading} class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
> >
{#if source.gitlabAppId}
<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button> <button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
{/if} {/if}
{/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
{#if !source.gitlabAppId}
<div class="grid grid-cols-2 items-center">
<label for="type" class="text-base font-bold text-stone-100"
>GitLab Application Type</label
>
<select name="type" id="type" class="w-96" bind:value={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 applicationType === 'group'}
<div class="grid grid-cols-2 items-center">
<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
<input
name="groupName"
id="groupName"
required
bind:value={source.gitlabApp.groupName}
/>
</div>
{/if}
{/if}
<div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">Name</label> <label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" id="name" required bind:value={source.name} /> <input name="name" id="name" required bind:value={source.name} />
</div> </div>
</div> </div>
</form> {#if source.gitlabApp.groupName}
<div class="grid grid-cols-2 items-center">
<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
<input
name="groupName"
id="groupName"
disabled={source.gitlabAppId}
readonly={source.gitlabAppId}
required
bind:value={source.gitlabApp.groupName}
/>
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div>
<div class="grid grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div>
<div class="grid grid-cols-2 items-start">
<div class="flex-col">
<label for="oauthId" class="pt-2 text-base font-bold text-stone-100">OAuth ID</label>
{#if !source.gitlabAppId}
<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."
/>
{/if}
</div>
<input
disabled={source.gitlabAppId}
readonly={source.gitlabAppId}
on:change={checkOauthId}
bind:this={oauthIdEl}
name="oauthId"
id="oauthId"
type="number"
required
bind:value={source.gitlabApp.oauthId}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="appId" class="text-base font-bold text-stone-100">Application ID</label>
<input
name="appId"
id="appId"
disabled={source.gitlabAppId}
readonly={source.gitlabAppId}
required
bind:value={source.gitlabApp.appId}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="appSecret" class="text-base font-bold text-stone-100">Secret</label>
<CopyPasswordField
disabled={source.gitlabAppId}
readonly={source.gitlabAppId}
isPasswordField={true}
name="appSecret"
id="appSecret"
required
bind:value={source.gitlabApp.appSecret}
/>
</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>

View File

@@ -0,0 +1,18 @@
import { getUserDetails } from '$lib/common';
import * as db from '$lib/database';
import { ErrorHandler } from '$lib/database';
import type { RequestHandler } from '@sveltejs/kit';
export const post: RequestHandler = async (event) => {
const { teamId, status, body } = await getUserDetails(event);
if (status === 401) return { status, body };
const { id } = event.params;
try {
let { type, name, htmlUrl, apiUrl } = await event.request.json();
await db.addGitHubSource({ id, teamId, type, name, htmlUrl, apiUrl });
return { status: 201 };
} catch (error) {
return ErrorHandler(error);
}
};

View File

@@ -9,11 +9,23 @@ export const post: RequestHandler = async (event) => {
const { id } = event.params; const { id } = event.params;
try { try {
let { oauthId, groupName, appId, appSecret } = await event.request.json(); let { type, name, htmlUrl, apiUrl, oauthId, appId, appSecret, groupName } =
await event.request.json();
oauthId = Number(oauthId); oauthId = Number(oauthId);
await db.addSource({ id, teamId, oauthId, groupName, appId, appSecret }); await db.addGitLabSource({
id,
teamId,
type,
name,
htmlUrl,
apiUrl,
oauthId,
appId,
appSecret,
groupName
});
return { status: 201 }; return { status: 201 };
} catch (error) { } catch (error) {
return ErrorHandler(error); return ErrorHandler(error);

View File

@@ -43,10 +43,10 @@ export const post: RequestHandler = async (event) => {
const { id } = event.params; const { id } = event.params;
const { name } = await event.request.json(); const { name, htmlUrl, apiUrl } = await event.request.json();
try { try {
await db.updateGitsource({ id, name }); await db.updateGitsource({ id, name, htmlUrl, apiUrl });
return { status: 201 }; return { status: 201 };
} catch (error) { } catch (error) {
return ErrorHandler(error); return ErrorHandler(error);

View File

@@ -29,9 +29,41 @@
<script lang="ts"> <script lang="ts">
export let source: Prisma.GitSource; export let source: Prisma.GitSource;
export let settings;
import type Prisma from '@prisma/client'; import type Prisma from '@prisma/client';
import Github from './_Github.svelte'; import Github from './_Github.svelte';
import Gitlab from './_Gitlab.svelte'; import Gitlab from './_Gitlab.svelte';
function setPredefined(type) {
switch (type) {
case 'github':
source.name = 'Github.com';
source.type = 'github';
source.htmlUrl = 'https://github.com';
source.apiUrl = 'https://api.github.com';
source.organization = undefined;
break;
case 'gitlab':
source.name = 'Gitlab.com';
source.type = 'gitlab';
source.htmlUrl = 'https://gitlab.com';
source.apiUrl = 'https://gitlab.com/api';
source.organization = undefined;
break;
case 'bitbucket':
source.name = 'Bitbucket.com';
source.type = 'bitbucket';
source.htmlUrl = 'https://bitbucket.com';
source.apiUrl = 'https://api.bitbucket.org';
source.organization = undefined;
break;
default:
break;
}
}
</script> </script>
<div class="flex space-x-1 p-6 px-6 text-2xl font-bold"> <div class="flex space-x-1 p-6 px-6 text-2xl font-bold">
@@ -40,10 +72,21 @@
<span class="pr-2">{source.name}</span> <span class="pr-2">{source.name}</span>
</div> </div>
<div class="flex justify-center px-6 pb-8"> <div class="flex flex-col justify-center">
{#if !source.gitlabAppId && !source.githubAppId}
<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="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>
</div>
</div>
{/if}
<div>
{#if source.type === 'github'} {#if source.type === 'github'}
<Github bind:source /> <Github bind:source />
{:else if source.type === 'gitlab'} {:else if source.type === 'gitlab'}
<Gitlab bind:source /> <Gitlab bind:source {settings} />
{/if} {/if}
</div>
</div> </div>

View File

@@ -36,6 +36,7 @@
export let settings; export let settings;
onMount(() => { onMount(() => {
const { organization, id, htmlUrl } = source; const { organization, id, htmlUrl } = source;
console.log(source);
const { fqdn } = settings; const { fqdn } = settings;
const host = dev const host = dev
? 'http://localhost:3000' ? 'http://localhost:3000'

View File

@@ -22,6 +22,9 @@
<script lang="ts"> <script lang="ts">
export let sources; export let sources;
import { session } from '$app/stores'; import { session } from '$app/stores';
import { post } from '$lib/api';
import { goto } from '$app/navigation';
import { getDomain } from '$lib/components/common';
const ownSources = sources.filter((source) => { const ownSources = sources.filter((source) => {
if (source.teams[0].id === $session.teamId) { if (source.teams[0].id === $session.teamId) {
return source; return source;
@@ -32,12 +35,16 @@
return source; return source;
} }
}); });
async function newSource() {
const { id } = await post('/sources/new', {});
return await goto(`/sources/${id}`, { replaceState: true });
}
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Git Sources</div> <div class="mr-4 text-2xl tracking-tight">Git Sources</div>
{#if $session.isAdmin} {#if $session.isAdmin}
<a href="/new/source" sveltekit:prefetch class="add-icon bg-orange-600 hover:bg-orange-500"> <button on:click={newSource} class="add-icon bg-orange-600 hover:bg-orange-500">
<svg <svg
class="w-6" class="w-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +58,7 @@
d="M12 6v6m0 0v6m0-6h6m-6 0H6" d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg /></svg
> >
</a> </button>
{/if} {/if}
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
@@ -71,7 +78,7 @@
class:border-l-4={source.gitlabApp && !source.gitlabAppId} class:border-l-4={source.gitlabApp && !source.gitlabAppId}
> >
<div class="font-bold text-xl text-center truncate">{source.name}</div> <div class="font-bold text-xl text-center truncate">{source.name}</div>
{#if $session.teamId === '0'} {#if $session.teamId === '0' && otherSources.length > 0}
<div class="text-center truncate">{source.teams[0].name}</div> <div class="text-center truncate">{source.teams[0].name}</div>
{/if} {/if}
{#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && !source.githubAppId && !source.githubApp?.installationId)} {#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && !source.githubAppId && !source.githubApp?.installationId)}
@@ -79,7 +86,7 @@
Configuration missing Configuration missing
</div> </div>
{:else} {:else}
<div class="truncate text-center">{source.htmlUrl}</div> <div class="truncate text-center">{getDomain(source.htmlUrl)}</div>
{/if} {/if}
</div> </div>
</a> </a>

View File

@@ -1,4 +1,4 @@
import { getUserDetails } from '$lib/common'; import { getUserDetails, uniqueName } from '$lib/common';
import * as db from '$lib/database'; import * as db from '$lib/database';
import { ErrorHandler } from '$lib/database'; import { ErrorHandler } from '$lib/database';
import type { RequestHandler } from '@sveltejs/kit'; import type { RequestHandler } from '@sveltejs/kit';
@@ -7,9 +7,9 @@ export const post: RequestHandler = async (event) => {
const { teamId, status, body } = await getUserDetails(event); const { teamId, status, body } = await getUserDetails(event);
if (status === 401) return { status, body }; if (status === 401) return { status, body };
const { name, type, htmlUrl, apiUrl, organization } = await event.request.json(); const name = uniqueName();
try { try {
const { id } = await db.newSource({ name, teamId, type, htmlUrl, apiUrl, organization }); const { id } = await db.newSource({ teamId, name });
return { status: 201, body: { id } }; return { status: 201, body: { id } };
} catch (e) { } catch (e) {
return ErrorHandler(e); return ErrorHandler(e);