ui/fix: Insane amount

2026-01-01 12:33:45 +00:00 · 2022-04-08 10:35:16 +02:00
parent 76754ded79
commit 0d0715a340
22 changed files with 509 additions and 490 deletions
--- a/src/routes/sources/[id]/_Github.svelte
+++ b/src/routes/sources/[id]/_Github.svelte
@@ -3,13 +3,19 @@
 	import { page, session } from '$app/stores';
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
+	import { toast } from '@zerodevx/svelte-toast';
 	const { id } = $page.params;

 	let loading = false;
 	async function handleSubmit() {
 		loading = true;
 		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 }) {
 			return errorNotification(error);
 		} finally {
@@ -38,7 +44,18 @@
 		}, 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 top = screen.height / 2 - 618 / 2;
 		const newWindow = open(
@@ -59,31 +76,72 @@
 	}
 </script>

-{#if !source.githubAppId}
-	<button on:click={newGithubApp}>Create new GitHub App</button>
-{:else if source.githubApp?.installationId}
-	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-5 font-bold">
-			<div class="title">General</div>
-			{#if $session.isAdmin}
-				<button
-					type="submit"
-					class:bg-orange-600={!loading}
-					class:hover:bg-orange-500={!loading}
-					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
-				>
-				<button on:click|preventDefault={() => installRepositories(source)}
-					>Change GitHub App Settings</button
-				>
-			{/if}
-		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
-			<div class="grid grid-cols-2 items-center mt-2">
-				<label for="name" class="text-base font-bold text-stone-100">Name</label>
-				<input name="name" id="name" required bind:value={source.name} />
+<div class="mx-auto max-w-4xl">
+	{#if !source.githubAppId}
+		<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">
+			<div class="flex space-x-1 pb-5 font-bold">
+				<div class="title">General</div>
+				{#if $session.isAdmin}
+					<button
+						type="submit"
+						class:bg-orange-600={!loading}
+						class:hover:bg-orange-500={!loading}
+						disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
+					>
+					<button on:click|preventDefault={() => installRepositories(source)}
+						>Change GitHub App Settings</button
+					>
+				{/if}
+			</div>
+			<div class="grid grid-flow-row gap-2 px-10">
+				<div class="grid grid-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>
+		</form>
+	{:else}
+		<div class="text-center">
+			<button class=" bg-orange-600 mt-8" on:click={() => installRepositories(source)}
+				>Install Repositories</button
+			>
 		</div>
-	</form>
-{:else}
-	<button on:click={() => installRepositories(source)}>Install Repositories</button>
-{/if}
+	{/if}
+</div>
--- a/src/routes/sources/[id]/_Gitlab.svelte
+++ b/src/routes/sources/[id]/_Gitlab.svelte
@@ -1,35 +1,73 @@
 <script lang="ts">
 	export let source;
+	export let settings;
 	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 { onMount } from 'svelte';
 	import { post } from '$lib/api';
 	import { browser } from '$app/env';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { toast } from '@zerodevx/svelte-toast';
+
 	const { id } = $page.params;
+	let url = browser ? (settings.fqdn ? settings.fqdn : window.location.origin) : '';

 	let loading = false;
+
 	let oauthIdEl;
-	let payload = {
-		oauthId: undefined,
-		groupName: undefined,
-		appId: undefined,
-		appSecret: undefined,
-		applicationType: 'user'
-	};
+	let applicationType;
+	if (!source.gitlabAppId) {
+		source.gitlabApp = {
+			oauthId: null,
+			groupName: null,
+			appId: null,
+			appSecret: null
+		};
+	}
 	onMount(() => {
 		oauthIdEl && oauthIdEl.focus();
 	});
-	async function handleSubmitSave() {
+
+	async function handleSubmit() {
+		if (loading) return;
 		loading = true;
-		try {
-			return await post(`/sources/${id}.json`, { name: source.name });
-		} catch ({ error }) {
-			return errorNotification(error);
-		} finally {
-			loading = false;
+		if (!source.gitlabAppId) {
+			// New GitLab App
+			try {
+				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 }) {
+				return errorNotification(error);
+			} finally {
+				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() {
 		const {
 			htmlUrl,
@@ -53,23 +91,27 @@
 		}, 100);
 	}
 	async function checkOauthId() {
-		if (payload.oauthId) {
+		if (source.gitlabApp?.oauthId) {
 			try {
-				await post(`/sources/${id}/check.json`, { oauthId: payload.oauthId });
+				await post(`/sources/${id}/check.json`, {
+					oauthId: source.gitlabApp?.oauthId
+				});
 			} catch ({ error }) {
-				payload.oauthId = null;
+				source.gitlabApp.oauthId = null;
 				oauthIdEl.focus();
 				return errorNotification(error);
 			}
 		}
 	}
 	function newApp() {
-		switch (payload.applicationType) {
+		switch (applicationType) {
 			case 'user':
 				window.open(`${source.htmlUrl}/-/profile/applications`);
 				break;
 			case 'group':
-				window.open(`${source.htmlUrl}/groups/${payload.groupName}/-/settings/applications`);
+				window.open(
+					`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
+				);
 				break;
 			case 'instance':
 				break;
@@ -77,130 +119,136 @@
 				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>

-{#if !source.gitlabApp?.appId}
-	<div>
-		<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>
+<div class="mx-auto max-w-4xl">
+	<form on:submit|preventDefault={handleSubmit} class="py-4">
+		<div class="flex space-x-1 pb-5 font-bold">
+			<div class="title">General</div>
+			{#if $session.isAdmin}
 				<button
 					type="submit"
 					class:bg-orange-600={!loading}
 					class:hover:bg-orange-500={!loading}
 					disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
 				>
-			</div>
+				{#if source.gitlabAppId}
+					<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
+				{/if}
+			{/if}
+		</div>
+		<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>

-			<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."
+				{#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">
+					<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>
+			{#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>
+			{/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={payload.oauthId}
+					bind:value={source.gitlabApp.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} />
+				<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">Secret</label>
-				<input
+				<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"
-					type="password"
 					required
-					bind:value={payload.appSecret}
+					bind:value={source.gitlabApp.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="title">General</div>
-				{#if $session.isAdmin}
-					<button
-						type="submit"
-						class:bg-orange-600={!loading}
-						class:hover:bg-orange-500={!loading}
-						disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
-					>
-					<button on:click|preventDefault={changeSettings}>Change GitLab App Settings</button>
-				{/if}
-			</div>
-			<div class="grid grid-flow-row gap-2 px-10">
-				<div class="mt-2 grid grid-cols-2 items-center">
-					<label for="name" class="text-base font-bold text-stone-100">Name</label>
-					<input name="name" id="name" required bind:value={source.name} />
-				</div>
-			</div>
-		</form>
-	</div>
-{/if}
+		</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>
--- a/src/routes/sources/[id]/github.json.ts
+++ b/src/routes/sources/[id]/github.json.ts
@@ -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);
+	}
+};
--- a/src/routes/sources/[id]/gitlab.json.ts
+++ b/src/routes/sources/[id]/gitlab.json.ts
@@ -9,11 +9,23 @@ export const post: RequestHandler = async (event) => {
 	const { id } = event.params;

 	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);

-		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 };
 	} catch (error) {
 		return ErrorHandler(error);
--- a/src/routes/sources/[id]/index.json.ts
+++ b/src/routes/sources/[id]/index.json.ts
@@ -43,10 +43,10 @@ export const post: RequestHandler = async (event) => {

 	const { id } = event.params;

-	const { name } = await event.request.json();
+	const { name, htmlUrl, apiUrl } = await event.request.json();

 	try {
-		await db.updateGitsource({ id, name });
+		await db.updateGitsource({ id, name, htmlUrl, apiUrl });
 		return { status: 201 };
 	} catch (error) {
 		return ErrorHandler(error);
--- a/src/routes/sources/[id]/index.svelte
+++ b/src/routes/sources/[id]/index.svelte
@@ -29,9 +29,41 @@

 <script lang="ts">
 	export let source: Prisma.GitSource;
+	export let settings;
 	import type Prisma from '@prisma/client';
 	import Github from './_Github.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>

 <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>
 </div>

-<div class="flex justify-center px-6 pb-8">
-	{#if source.type === 'github'}
-		<Github bind:source />
-	{:else if source.type === 'gitlab'}
-		<Gitlab bind:source />
+<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'}
+			<Github bind:source />
+		{:else if source.type === 'gitlab'}
+			<Gitlab bind:source {settings} />
+		{/if}
+	</div>
 </div>
--- a/src/routes/sources/[id]/newGithubApp.svelte
+++ b/src/routes/sources/[id]/newGithubApp.svelte
@@ -36,6 +36,7 @@
 	export let settings;
 	onMount(() => {
 		const { organization, id, htmlUrl } = source;
+		console.log(source);
 		const { fqdn } = settings;
 		const host = dev
 			? 'http://localhost:3000'
--- a/src/routes/sources/index.svelte
+++ b/src/routes/sources/index.svelte
@@ -22,6 +22,9 @@
 <script lang="ts">
 	export let sources;
 	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) => {
 		if (source.teams[0].id === $session.teamId) {
 			return source;
@@ -32,12 +35,16 @@
 			return source;
 		}
 	});
+	async function newSource() {
+		const { id } = await post('/sources/new', {});
+		return await goto(`/sources/${id}`, { replaceState: true });
+	}
 </script>

 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Git Sources</div>
 	{#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
 				class="w-6"
 				xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +58,7 @@
 					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
 				/></svg
 			>
-		</a>
+		</button>
 	{/if}
 </div>
 <div class="flex justify-center">
@@ -71,7 +78,7 @@
 							class:border-l-4={source.gitlabApp && !source.gitlabAppId}
 						>
 							<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>
 							{/if}
 							{#if (source.type === 'gitlab' && !source.gitlabAppId) || (source.type === 'github' && !source.githubAppId && !source.githubApp?.installationId)}
@@ -79,7 +86,7 @@
 									Configuration missing
 								</div>
 							{:else}
-								<div class="truncate text-center">{source.htmlUrl}</div>
+								<div class="truncate text-center">{getDomain(source.htmlUrl)}</div>
 							{/if}
 						</div>
 					</a>
--- a/src/routes/sources/new.ts
+++ b/src/routes/sources/new.ts
@@ -0,0 +1,17 @@
+import { getUserDetails, uniqueName } 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 name = uniqueName();
+	try {
+		const { id } = await db.newSource({ teamId, name });
+		return { status: 201, body: { id } };
+	} catch (e) {
+		return ErrorHandler(e);
+	}
+};