wip: trpc
This commit is contained in:
parent
97313e4180
commit
6efb02fa32
@ -3,6 +3,15 @@ import { addToast } from './store';
|
||||
import Cookies from 'js-cookie';
|
||||
export const asyncSleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay));
|
||||
|
||||
export function dashify(str: string, options?: any): string {
|
||||
if (typeof str !== 'string') return str;
|
||||
return str
|
||||
.trim()
|
||||
.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
|
||||
.replace(/^-+|-+$/g, '')
|
||||
.replace(/-{2,}/g, (m) => (options && options.condense ? '-' : m))
|
||||
.toLowerCase();
|
||||
}
|
||||
export function errorNotification(error: any | { message: string }): void {
|
||||
if (error instanceof Error) {
|
||||
console.error(error.message)
|
||||
|
41
apps/client/src/routes/sources/[id]/+layout.svelte
Normal file
41
apps/client/src/routes/sources/[id]/+layout.svelte
Normal file
@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
import type { LayoutData } from './$types';
|
||||
|
||||
export let data: LayoutData;
|
||||
let source = data.source.data;
|
||||
console.log(source)
|
||||
import { page } from '$app/stores';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession, trpc } from '$lib/store';
|
||||
import * as Icons from '$lib/components/icons';
|
||||
import { goto } from '$app/navigation';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
async function deleteSource(name: string) {
|
||||
const sure = confirm('Are you sure you want to delete ' + name + '?');
|
||||
if (sure) {
|
||||
try {
|
||||
await trpc.sources.delete.mutate({ id });
|
||||
await goto('/', { replaceState: true });
|
||||
} catch (error) {
|
||||
errorNotification(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if id !== 'new' && $appSession.teamId === '0'}
|
||||
<nav class="nav-side">
|
||||
<button
|
||||
id="delete"
|
||||
on:click={() => deleteSource(source.name)}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent text-sm"><Icons.Delete /></button
|
||||
>
|
||||
</nav>
|
||||
<Tooltip triggeredBy="#delete">Delete</Tooltip>
|
||||
{/if}
|
||||
<slot />
|
35
apps/client/src/routes/sources/[id]/+layout.ts
Normal file
35
apps/client/src/routes/sources/[id]/+layout.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { trpc } from '$lib/store';
|
||||
import type { LayoutLoad } from './$types';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load: LayoutLoad = async ({ params, url }) => {
|
||||
const { pathname } = new URL(url);
|
||||
const { id } = params;
|
||||
try {
|
||||
const source = await trpc.sources.getSourceById.query({ id });
|
||||
if (!source) {
|
||||
throw redirect(307, '/sources');
|
||||
}
|
||||
|
||||
// if (
|
||||
// configurationPhase &&
|
||||
// pathname !== `/applications/${params.id}/configuration/${configurationPhase}`
|
||||
// ) {
|
||||
// throw redirect(302, `/applications/${params.id}/configuration/${configurationPhase}`);
|
||||
// }
|
||||
return {
|
||||
source
|
||||
};
|
||||
} catch (err) {
|
||||
if (err instanceof Error) {
|
||||
throw error(500, {
|
||||
message: 'An unexpected error occurred, please try again later.' + '<br><br>' + err.message
|
||||
});
|
||||
}
|
||||
|
||||
throw error(500, {
|
||||
message: 'An unexpected error occurred, please try again later.'
|
||||
});
|
||||
}
|
||||
};
|
17
apps/client/src/routes/sources/[id]/+page.svelte
Normal file
17
apps/client/src/routes/sources/[id]/+page.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import type { LayoutData } from './$types';
|
||||
|
||||
export let data: LayoutData;
|
||||
let source = data.source;
|
||||
let settings = data.settings;
|
||||
import { page } from '$app/stores';
|
||||
import Source from './components/Source.svelte';
|
||||
import New from './components/New.svelte';
|
||||
const { id } = $page.params;
|
||||
</script>
|
||||
|
||||
{#if id === 'new'}
|
||||
<New bind:source bind:settings />
|
||||
{:else}
|
||||
<Source bind:source bind:settings />
|
||||
{/if}
|
264
apps/client/src/routes/sources/[id]/components/Github.svelte
Normal file
264
apps/client/src/routes/sources/[id]/components/Github.svelte
Normal file
@ -0,0 +1,264 @@
|
||||
<script lang="ts">
|
||||
export let source: any;
|
||||
export let settings: any;
|
||||
import { page } from '$app/stores';
|
||||
import { dashify, errorNotification, getAPIUrl, getDomain, getWebhookUrl } from '$lib/common';
|
||||
import { addToast, appSession, trpc } from '$lib/store';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
$: selfHosted = source.htmlUrl !== 'https://github.com';
|
||||
|
||||
let loading = false;
|
||||
|
||||
async function handleSubmit() {
|
||||
loading = true;
|
||||
try {
|
||||
await trpc.sources.save.mutate({
|
||||
id: source.id,
|
||||
name: source.name,
|
||||
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
|
||||
apiUrl: source.apiUrl.replace(/\/$/, ''),
|
||||
isSystemWide: source.isSystemWide
|
||||
});
|
||||
|
||||
return addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function newGithubApp() {
|
||||
loading = true;
|
||||
try {
|
||||
const { id } = await trpc.sources.newGitHubApp.mutate({
|
||||
id: source.id,
|
||||
name: source.name,
|
||||
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
|
||||
apiUrl: source.apiUrl.replace(/\/$/, ''),
|
||||
organization: source.organization,
|
||||
customPort: source.customPort,
|
||||
isSystemWide: source.isSystemWide
|
||||
});
|
||||
|
||||
const { organization, htmlUrl } = source;
|
||||
const { fqdn, ipv4, ipv6 } = settings;
|
||||
const host = dev ? getAPIUrl() : fqdn ? fqdn : `http://${ipv4 || ipv6}` || '';
|
||||
const domain = getDomain(fqdn);
|
||||
|
||||
let url = 'settings/apps/new';
|
||||
if (organization) url = `organizations/${organization}/settings/apps/new`;
|
||||
const name = dashify(domain) || 'app';
|
||||
const data = JSON.stringify({
|
||||
name: `coolify-${name}`,
|
||||
url: host,
|
||||
hook_attributes: {
|
||||
url: dev ? getWebhookUrl('github') : `${host}/webhooks/github/events`
|
||||
},
|
||||
redirect_url: `${host}/webhooks/github`,
|
||||
callback_urls: [`${host}/login/github/app`],
|
||||
public: false,
|
||||
request_oauth_on_install: false,
|
||||
setup_url: `${host}/webhooks/github/install?gitSourceId=${id}`,
|
||||
setup_on_update: true,
|
||||
default_permissions: {
|
||||
contents: 'read',
|
||||
metadata: 'read',
|
||||
pull_requests: 'read',
|
||||
emails: 'read'
|
||||
},
|
||||
default_events: ['pull_request', 'push']
|
||||
});
|
||||
const form = document.createElement('form');
|
||||
form.setAttribute('method', 'post');
|
||||
form.setAttribute('action', `${htmlUrl}/${url}?state=${id}`);
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('id', 'manifest');
|
||||
input.setAttribute('name', 'manifest');
|
||||
input.setAttribute('type', 'hidden');
|
||||
input.setAttribute('value', data);
|
||||
form.appendChild(input);
|
||||
document.getElementsByTagName('body')[0].appendChild(form);
|
||||
form.submit();
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
async function changeSettings(name: any, save: boolean) {
|
||||
if ($appSession.teamId === '0') {
|
||||
if (name === 'isSystemWide') {
|
||||
source.isSystemWide = !source.isSystemWide;
|
||||
}
|
||||
if (save) {
|
||||
await handleSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-6xl lg:px-6 px-3">
|
||||
{#if !source.githubAppId}
|
||||
<form on:submit|preventDefault={newGithubApp} class="py-4">
|
||||
<div class="grid gap-1 lg:grid-flow-col pb-7">
|
||||
<h1 class="title">General</h1>
|
||||
{#if !source.githubAppId}
|
||||
<div class="w-full flex flex-rpw justify-end">
|
||||
<button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit"
|
||||
>Save & Redirect to GitHub</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid gap-2 grid-cols-2 auto-rows-max">
|
||||
<label for="name">Name</label>
|
||||
<input class="w-full" name="name" id="name" required bind:value={source.name} />
|
||||
<label for="htmlUrl">HTML URL</label>
|
||||
<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
|
||||
<label for="apiUrl">API URL</label>
|
||||
<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
|
||||
<label for="customPort"
|
||||
>Custom SSH Port <Explainer
|
||||
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
class="w-full"
|
||||
name="customPort"
|
||||
id="customPort"
|
||||
disabled={!selfHosted || source.githubAppId}
|
||||
readonly={!selfHosted || source.githubAppId}
|
||||
required
|
||||
value={source.customPort}
|
||||
/>
|
||||
<label for="organization" class="pt-2"
|
||||
>Organization
|
||||
<Explainer
|
||||
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
class="w-full"
|
||||
name="organization"
|
||||
id="organization"
|
||||
placeholder="eg: coollabsio"
|
||||
bind:value={source.organization}
|
||||
/>
|
||||
<Setting
|
||||
customClass="pt-4"
|
||||
id="autodeploy"
|
||||
isCenter={false}
|
||||
bind:setting={source.isSystemWide}
|
||||
on:click={() => changeSettings('isSystemWide', false)}
|
||||
title="System Wide Git"
|
||||
description="System Wide Git are available to all the users in your Coolify instance. <br><br> <span class='font-bold text-warning'>Use with caution, as it can be a security risk.</span>"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
{:else if source.githubApp?.installationId}
|
||||
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
||||
<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
|
||||
<h1 class="title">General</h1>
|
||||
{#if $appSession.isAdmin && $appSession.teamId === '0'}
|
||||
<div
|
||||
class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-2 lg:space-y-0 w-full"
|
||||
>
|
||||
<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
|
||||
>{loading ? 'Saving...' : 'Save'}</button
|
||||
>
|
||||
<a
|
||||
class="btn btn-sm"
|
||||
href={`${source.htmlUrl}/${
|
||||
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
|
||||
}/${source.githubApp.name}/installations/new`}>"Change GitHub App Settings"</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid gap-2 grid-cols-2 auto-rows-max mt-4">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
class="w-full"
|
||||
name="name"
|
||||
id="name"
|
||||
required
|
||||
bind:value={source.name}
|
||||
disabled={!$appSession.isAdmin}
|
||||
/>
|
||||
<label for="htmlUrl">HTML URL</label>
|
||||
<input
|
||||
class="w-full"
|
||||
name="htmlUrl"
|
||||
id="htmlUrl"
|
||||
disabled={source.githubAppId}
|
||||
readonly={source.githubAppId}
|
||||
required
|
||||
bind:value={source.htmlUrl}
|
||||
/>
|
||||
<label for="apiUrl">API URL</label>
|
||||
<input
|
||||
class="w-full"
|
||||
name="apiUrl"
|
||||
id="apiUrl"
|
||||
required
|
||||
disabled={source.githubAppId}
|
||||
readonly={source.githubAppId}
|
||||
bind:value={source.apiUrl}
|
||||
/>
|
||||
<label for="customPort"
|
||||
>Custom SSH Port <Explainer
|
||||
explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
class="w-full"
|
||||
name="customPort"
|
||||
id="customPort"
|
||||
disabled={!selfHosted}
|
||||
readonly={!selfHosted}
|
||||
required
|
||||
value={source.customPort}
|
||||
/>
|
||||
<label for="organization" class="pt-2">Organization</label>
|
||||
<input
|
||||
class="w-full"
|
||||
readonly
|
||||
disabled
|
||||
name="organization"
|
||||
id="organization"
|
||||
placeholder="eg: coollabsio"
|
||||
bind:value={source.organization}
|
||||
/>
|
||||
{#if $appSession.isAdmin}
|
||||
<Setting
|
||||
customClass="pt-4"
|
||||
id="autodeploy"
|
||||
isCenter={false}
|
||||
disabled={$appSession.teamId !== '0'}
|
||||
bind:setting={source.isSystemWide}
|
||||
on:click={() => changeSettings('isSystemWide', true)}
|
||||
title="System Wide Git Source"
|
||||
description="System Wide Git Sources are available to all the users in your Coolify instance. <br><br> <span class='font-bold text-warning'>Use with caution, as it can be a security risk.</span>"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="text-center">
|
||||
<a
|
||||
href={`${source.htmlUrl}/${
|
||||
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
|
||||
}/${source.githubApp.name}/installations/new`}
|
||||
>
|
||||
<button class="box-selection bg-sources text-xl font-bold">Install Repositories</button></a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
333
apps/client/src/routes/sources/[id]/components/Gitlab.svelte
Normal file
333
apps/client/src/routes/sources/[id]/components/Gitlab.svelte
Normal file
@ -0,0 +1,333 @@
|
||||
<script lang="ts">
|
||||
export let source: any;
|
||||
export let settings: any;
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
|
||||
import { errorNotification, getAPIUrl } from '$lib/common';
|
||||
import { addToast, appSession, trpc } from '$lib/store';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { dev } from '$app/environment';
|
||||
const { id } = $page.params;
|
||||
|
||||
let url = settings.fqdn ? settings.fqdn : window.location.origin;
|
||||
|
||||
if (dev) {
|
||||
url = getAPIUrl();
|
||||
}
|
||||
let loading = false;
|
||||
|
||||
let oauthIdEl: HTMLInputElement;
|
||||
let applicationType: string;
|
||||
if (!source.gitlabAppId) {
|
||||
source.gitlabApp = {
|
||||
oauthId: null,
|
||||
groupName: null,
|
||||
appId: null,
|
||||
appSecret: null
|
||||
};
|
||||
}
|
||||
$: selfHosted = source.htmlUrl !== 'https://gitlab.com';
|
||||
|
||||
onMount(() => {
|
||||
oauthIdEl && oauthIdEl.focus();
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (loading) return;
|
||||
loading = true;
|
||||
if (!source.gitlabAppId) {
|
||||
// New GitLab App
|
||||
try {
|
||||
const { id } = await trpc.sources.newGitLabApp.mutate({
|
||||
id: source.id,
|
||||
type: 'gitlab',
|
||||
name: source.name,
|
||||
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
|
||||
apiUrl: source.apiUrl.replace(/\/$/, ''),
|
||||
oauthId: source.gitlabApp.oauthId,
|
||||
appId: source.gitlabApp.appId,
|
||||
appSecret: source.gitlabApp.appSecret,
|
||||
groupName: source.gitlabApp.groupName,
|
||||
customPort: source.customPort,
|
||||
customUser: source.customUser
|
||||
});
|
||||
|
||||
const from = $page.url.searchParams.get('from');
|
||||
if (from) {
|
||||
return window.location.assign(from);
|
||||
}
|
||||
return window.location.assign(`/sources/${id}`);
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
} else {
|
||||
// Update GitLab App
|
||||
try {
|
||||
await trpc.sources.save.mutate({
|
||||
id,
|
||||
name: source.name,
|
||||
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
|
||||
apiUrl: source.apiUrl.replace(/\/$/, ''),
|
||||
customPort: source.customPort,
|
||||
customUser: source.customUser
|
||||
});
|
||||
|
||||
return addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function changeSettings() {
|
||||
const {
|
||||
htmlUrl,
|
||||
gitlabApp: { oauthId }
|
||||
} = source;
|
||||
const left = screen.width / 2 - 1020 / 2;
|
||||
const top = screen.height / 2 - 1000 / 2;
|
||||
const newWindow = open(
|
||||
`${htmlUrl}/oauth/applications/${oauthId}`,
|
||||
'GitLab',
|
||||
'resizable=1, scrollbars=1, fullscreen=0, height=1000, width=1020,top=' +
|
||||
top +
|
||||
', left=' +
|
||||
left +
|
||||
', toolbar=0, menubar=0, status=0'
|
||||
);
|
||||
const timer = setInterval(() => {
|
||||
if (newWindow?.closed) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
async function checkOauthId() {
|
||||
if (source.gitlabApp?.oauthId) {
|
||||
try {
|
||||
// await post(`/sources/${id}/check`, {
|
||||
// oauthId: source.gitlabApp?.oauthId
|
||||
// });
|
||||
} catch (error) {
|
||||
source.gitlabApp.oauthId = null;
|
||||
oauthIdEl.focus();
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
function newApp() {
|
||||
switch (applicationType) {
|
||||
case 'user':
|
||||
window.open(`${source.htmlUrl}/-/profile/applications`);
|
||||
break;
|
||||
case 'group':
|
||||
if (!source.gitlabApp.groupName) {
|
||||
return addToast({
|
||||
message: 'Please enter a group name first.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
window.open(
|
||||
`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
|
||||
);
|
||||
break;
|
||||
case 'instance':
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
||||
<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
|
||||
<h1 class="title">General</h1>
|
||||
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-2 lg:space-y-0 w-full">
|
||||
{#if $appSession.isAdmin}
|
||||
<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
|
||||
>{loading ? 'Saving...' : 'Save'}</button
|
||||
>
|
||||
{#if source.gitlabAppId}
|
||||
<button class="btn btn-sm" on:click|preventDefault={changeSettings}
|
||||
>"Change GitLab App Settings"</button
|
||||
>
|
||||
{:else}
|
||||
<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
|
||||
>Create new GitLab App manually</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 lg:px-10">
|
||||
{#if !source.gitlabAppId}
|
||||
<a
|
||||
href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
|
||||
class="font-bold "
|
||||
target="_blank noreferrer"
|
||||
rel="noopener noreferrer">Documentation and detailed instructions.</a
|
||||
>
|
||||
<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="lg:w-96 w-full" 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
|
||||
class="w-full"
|
||||
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">
|
||||
<label for="name" class="text-base font-bold text-stone-100">Name</label>
|
||||
<input class="w-full" name="name" id="name" required bind:value={source.name} />
|
||||
</div>
|
||||
</div>
|
||||
{#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
|
||||
class="w-full"
|
||||
name="groupName"
|
||||
id="groupName"
|
||||
disabled={source.gitlabAppId}
|
||||
readonly={source.gitlabAppId}
|
||||
required
|
||||
bind:value={source.gitlabApp.groupName}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
||||
<input
|
||||
class="w-full"
|
||||
name="htmlUrl"
|
||||
id="htmlUrl"
|
||||
required
|
||||
disabled={source.gitlabAppId}
|
||||
readonly={source.gitlabAppId}
|
||||
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
|
||||
class="w-full"
|
||||
name="apiUrl"
|
||||
id="apiUrl"
|
||||
disabled={source.gitlabAppId}
|
||||
readonly={source.gitlabAppId}
|
||||
required
|
||||
bind:value={source.apiUrl}
|
||||
/>
|
||||
</div>
|
||||
{#if selfHosted}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||
>Custom SSH User <Explainer
|
||||
explanation={'If you use a self-hosted version of Git, you can provide a custom SSH user for all the Git related actions.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
class="w-full"
|
||||
name="customUser"
|
||||
id="customUser"
|
||||
disabled={!selfHosted}
|
||||
readonly={!selfHosted}
|
||||
required
|
||||
bind:value={source.customUser}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||
>Custom SSH Port <Explainer
|
||||
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
class="w-full"
|
||||
name="customPort"
|
||||
id="customPort"
|
||||
disabled={!selfHosted}
|
||||
readonly={!selfHosted}
|
||||
required
|
||||
bind:value={source.customPort}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<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
|
||||
{#if !source.gitlabAppId}
|
||||
<Explainer
|
||||
explanation="The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class=' text-settings' >in the URL</span> of your GitLab OAuth Application."
|
||||
/>
|
||||
{/if}</label
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
class="w-full"
|
||||
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
|
||||
class="w-full"
|
||||
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>
|
||||
</div>
|
62
apps/client/src/routes/sources/[id]/components/New.svelte
Normal file
62
apps/client/src/routes/sources/[id]/components/New.svelte
Normal file
@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
export let source: any;
|
||||
export let settings: any;
|
||||
import Github from './Github.svelte';
|
||||
import Gitlab from './Gitlab.svelte';
|
||||
function setPredefined(type: string) {
|
||||
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>
|
||||
|
||||
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
|
||||
<div class="-mb-1 flex-col">
|
||||
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
|
||||
New Git Source
|
||||
</div>
|
||||
</div>
|
||||
</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 git type</div>
|
||||
<div class="flex justify-center space-x-2">
|
||||
<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}
|
||||
<div>
|
||||
{#if source.type === 'github'}
|
||||
<Github bind:source {settings} />
|
||||
{:else if source.type === 'gitlab'}
|
||||
<Gitlab bind:source {settings} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
58
apps/client/src/routes/sources/[id]/components/Source.svelte
Normal file
58
apps/client/src/routes/sources/[id]/components/Source.svelte
Normal file
@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
import Github from './Github.svelte';
|
||||
import Gitlab from './Gitlab.svelte';
|
||||
|
||||
export let source: any;
|
||||
export let settings: any;
|
||||
</script>
|
||||
|
||||
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
|
||||
<div class="-mb-5 flex-col">
|
||||
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
|
||||
Configuration
|
||||
</div>
|
||||
<span class="text-xs">{source.name}</span>
|
||||
</div>
|
||||
{#if source?.type === 'gitlab'}
|
||||
<svg viewBox="0 0 128 128" class="w-8">
|
||||
<path
|
||||
fill="#FC6D26"
|
||||
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
|
||||
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
|
||||
fill="#FC6D26"
|
||||
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
|
||||
/><path
|
||||
fill="#FCA326"
|
||||
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
|
||||
/><path
|
||||
fill="#E24329"
|
||||
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
|
||||
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
|
||||
fill="#FCA326"
|
||||
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
|
||||
/><path
|
||||
fill="#E24329"
|
||||
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
|
||||
/>
|
||||
</svg>
|
||||
{:else if source?.type === 'github'}
|
||||
<svg viewBox="0 0 128 128" class="w-8">
|
||||
<g fill="#ffffff"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
|
||||
/><path
|
||||
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
|
||||
/></g
|
||||
>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
{#if source.type === 'github'}
|
||||
<Github bind:source {settings} />
|
||||
{:else if source.type === 'gitlab'}
|
||||
<Gitlab bind:source {settings} />
|
||||
{/if}
|
||||
</div>
|
@ -7,7 +7,8 @@ import {
|
||||
dashboardRouter,
|
||||
applicationsRouter,
|
||||
servicesRouter,
|
||||
databasesRouter
|
||||
databasesRouter,
|
||||
sourcesRouter
|
||||
} from './routers';
|
||||
|
||||
export const appRouter = router({
|
||||
@ -16,7 +17,8 @@ export const appRouter = router({
|
||||
dashboard: dashboardRouter,
|
||||
applications: applicationsRouter,
|
||||
services: servicesRouter,
|
||||
databases: databasesRouter
|
||||
databases: databasesRouter,
|
||||
sources: sourcesRouter
|
||||
});
|
||||
|
||||
export type AppRouter = typeof appRouter;
|
||||
|
@ -4,3 +4,4 @@ export * from './settings';
|
||||
export * from './applications';
|
||||
export * from './services';
|
||||
export * from './databases';
|
||||
export * from './sources';
|
||||
|
223
apps/server/src/trpc/routers/sources/index.ts
Normal file
223
apps/server/src/trpc/routers/sources/index.ts
Normal file
@ -0,0 +1,223 @@
|
||||
import { z } from 'zod';
|
||||
import { privateProcedure, router } from '../../trpc';
|
||||
import { decrypt, encrypt } from '../../../lib/common';
|
||||
import { prisma } from '../../../prisma';
|
||||
|
||||
import cuid from 'cuid';
|
||||
|
||||
export const sourcesRouter = router({
|
||||
save: privateProcedure
|
||||
.input(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
htmlUrl: z.string(),
|
||||
apiUrl: z.string(),
|
||||
customPort: z.number(),
|
||||
customUser: z.string(),
|
||||
isSystemWide: z.boolean().default(false)
|
||||
})
|
||||
)
|
||||
.mutation(async ({ input, ctx }) => {
|
||||
let { id, name, htmlUrl, apiUrl, customPort, customUser, isSystemWide } = input;
|
||||
if (customPort) customPort = Number(customPort);
|
||||
await prisma.gitSource.update({
|
||||
where: { id },
|
||||
data: { name, htmlUrl, apiUrl, customPort, customUser, isSystemWide }
|
||||
});
|
||||
}),
|
||||
newGitHubApp: privateProcedure
|
||||
.input(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
htmlUrl: z.string(),
|
||||
apiUrl: z.string(),
|
||||
organization: z.string(),
|
||||
customPort: z.number(),
|
||||
isSystemWide: z.boolean().default(false)
|
||||
})
|
||||
)
|
||||
.mutation(async ({ ctx, input }) => {
|
||||
const { teamId } = ctx.user;
|
||||
let { id, name, htmlUrl, apiUrl, organization, customPort, isSystemWide } = input;
|
||||
|
||||
if (customPort) customPort = Number(customPort);
|
||||
if (id === 'new') {
|
||||
const newId = cuid();
|
||||
await prisma.gitSource.create({
|
||||
data: {
|
||||
id: newId,
|
||||
name,
|
||||
htmlUrl,
|
||||
apiUrl,
|
||||
organization,
|
||||
customPort,
|
||||
isSystemWide,
|
||||
type: 'github',
|
||||
teams: { connect: { id: teamId } }
|
||||
}
|
||||
});
|
||||
return {
|
||||
id: newId
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
newGitLabApp: privateProcedure
|
||||
.input(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
type: z.string(),
|
||||
name: z.string(),
|
||||
htmlUrl: z.string(),
|
||||
apiUrl: z.string(),
|
||||
oauthId: z.number(),
|
||||
appId: z.string(),
|
||||
appSecret: z.string(),
|
||||
groupName: z.string().optional().nullable(),
|
||||
customPort: z.number().optional().nullable(),
|
||||
customUser: z.string().optional().nullable()
|
||||
})
|
||||
)
|
||||
.mutation(async ({ input, ctx }) => {
|
||||
const { teamId } = ctx.user;
|
||||
let {
|
||||
id,
|
||||
type,
|
||||
name,
|
||||
htmlUrl,
|
||||
apiUrl,
|
||||
oauthId,
|
||||
appId,
|
||||
appSecret,
|
||||
groupName,
|
||||
customPort,
|
||||
customUser
|
||||
} = input;
|
||||
|
||||
if (oauthId) oauthId = Number(oauthId);
|
||||
if (customPort) customPort = Number(customPort);
|
||||
const encryptedAppSecret = encrypt(appSecret);
|
||||
|
||||
if (id === 'new') {
|
||||
const newId = cuid();
|
||||
await prisma.gitSource.create({
|
||||
data: {
|
||||
id: newId,
|
||||
type,
|
||||
apiUrl,
|
||||
htmlUrl,
|
||||
name,
|
||||
customPort,
|
||||
customUser,
|
||||
teams: { connect: { id: teamId } }
|
||||
}
|
||||
});
|
||||
await prisma.gitlabApp.create({
|
||||
data: {
|
||||
teams: { connect: { id: teamId } },
|
||||
appId,
|
||||
oauthId,
|
||||
groupName,
|
||||
appSecret: encryptedAppSecret,
|
||||
gitSource: { connect: { id: newId } }
|
||||
}
|
||||
});
|
||||
return {
|
||||
status: 201,
|
||||
id: newId
|
||||
};
|
||||
} else {
|
||||
await prisma.gitSource.update({
|
||||
where: { id },
|
||||
data: { type, apiUrl, htmlUrl, name, customPort, customUser }
|
||||
});
|
||||
await prisma.gitlabApp.update({
|
||||
where: { id },
|
||||
data: {
|
||||
appId,
|
||||
oauthId,
|
||||
groupName,
|
||||
appSecret: encryptedAppSecret
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
delete: privateProcedure
|
||||
.input(
|
||||
z.object({
|
||||
id: z.string()
|
||||
})
|
||||
)
|
||||
.mutation(async ({ input, ctx }) => {
|
||||
const { id } = input;
|
||||
const source = await prisma.gitSource.delete({
|
||||
where: { id },
|
||||
include: { githubApp: true, gitlabApp: true }
|
||||
});
|
||||
if (source.githubAppId) {
|
||||
await prisma.githubApp.delete({ where: { id: source.githubAppId } });
|
||||
}
|
||||
if (source.gitlabAppId) {
|
||||
await prisma.gitlabApp.delete({ where: { id: source.gitlabAppId } });
|
||||
}
|
||||
}),
|
||||
getSourceById: privateProcedure
|
||||
.input(
|
||||
z.object({
|
||||
id: z.string()
|
||||
})
|
||||
)
|
||||
.query(async ({ input, ctx }) => {
|
||||
const { id } = input;
|
||||
const { teamId } = ctx.user;
|
||||
const settings = await prisma.setting.findFirst({});
|
||||
|
||||
if (id === 'new') {
|
||||
return {
|
||||
source: {
|
||||
name: null,
|
||||
type: null,
|
||||
htmlUrl: null,
|
||||
apiUrl: null,
|
||||
organization: null,
|
||||
customPort: 22,
|
||||
customUser: 'git'
|
||||
},
|
||||
settings
|
||||
};
|
||||
}
|
||||
|
||||
const source = await prisma.gitSource.findFirst({
|
||||
where: {
|
||||
id,
|
||||
OR: [
|
||||
{ teams: { some: { id: teamId === '0' ? undefined : teamId } } },
|
||||
{ isSystemWide: true }
|
||||
]
|
||||
},
|
||||
include: { githubApp: true, gitlabApp: true }
|
||||
});
|
||||
if (!source) {
|
||||
throw { status: 404, message: 'Source not found.' };
|
||||
}
|
||||
|
||||
if (source?.githubApp?.clientSecret)
|
||||
source.githubApp.clientSecret = decrypt(source.githubApp.clientSecret);
|
||||
if (source?.githubApp?.webhookSecret)
|
||||
source.githubApp.webhookSecret = decrypt(source.githubApp.webhookSecret);
|
||||
if (source?.githubApp?.privateKey)
|
||||
source.githubApp.privateKey = decrypt(source.githubApp.privateKey);
|
||||
if (source?.gitlabApp?.appSecret)
|
||||
source.gitlabApp.appSecret = decrypt(source.gitlabApp.appSecret);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
source,
|
||||
settings
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user