feat: custom port for git instances

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

@@ -11,7 +11,11 @@
 	import { dev } from '$app/env';
 
 	const { id } = $page.params;
+
+	$: selfHosted = source.htmlUrl !== 'https://github.com';
+
 	let loading = false;
+
 	async function handleSubmit() {
 		loading = true;
 		try {
@@ -57,7 +61,8 @@
 				name: source.name,
 				htmlUrl: source.htmlUrl.replace(/\/$/, ''),
 				apiUrl: source.apiUrl.replace(/\/$/, ''),
-				organization: source.organization
+				organization: source.organization,
+				customPort: source.customPort
 			});
 			const { organization, htmlUrl } = source;
 			const { fqdn } = settings;
@@ -113,8 +118,11 @@
 <div class="mx-auto max-w-4xl px-6">
 	{#if !source.githubAppId}
 		<form on:submit|preventDefault={newGithubApp} class="py-4">
-			<div class="flex space-x-1 pb-5 font-bold">
+			<div class="flex space-x-1 pb-7 font-bold">
 				<div class="title">General</div>
+				{#if !source.githubAppId}
+					<button class="bg-orange-600" type="submit">Save</button>
+				{/if}
 			</div>
 			<div class="grid grid-flow-row gap-2 px-10">
 				<div class="grid grid-flow-row gap-2">
@@ -131,6 +139,20 @@
 					<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-center">
+					<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
+					<input
+						name="customPort"
+						id="customPort"
+						disabled={!selfHosted || source.githubAppId}
+						readonly={!selfHosted || source.githubAppId}
+						required
+						value={source.customPort}
+					/>
+					<Explainer
+						text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
+					/>
+				</div>
 				<div class="grid grid-cols-2">
 					<div class="flex flex-col">
 						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
@@ -148,11 +170,6 @@
 					/>
 				</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.githubApp?.installationId}
 		<form on:submit|preventDefault={handleSubmit} class="py-4">
@@ -181,11 +198,39 @@
 				</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} />
+					<input
+						name="htmlUrl"
+						id="htmlUrl"
+						disabled={source.githubAppId}
+						readonly={source.githubAppId}
+						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} />
+					<input
+						name="apiUrl"
+						id="apiUrl"
+						required
+						disabled={source.githubAppId}
+						readonly={source.githubAppId}
+						bind:value={source.apiUrl}
+					/>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
+					<input
+						name="customPort"
+						id="customPort"
+						disabled={!selfHosted}
+						readonly={!selfHosted}
+						required
+						value={source.customPort}
+					/>
+					<Explainer
+						text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
+					/>
 				</div>
 				<div class="grid grid-cols-2">
 					<div class="flex flex-col">
@@ -207,7 +252,9 @@
 	{:else}
 		<div class="text-center">
 			<a href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}>
-				<button class=" bg-orange-600 hover:bg-orange-500 mt-8">Install Repositories</button></a
+				<button class="box-selection bg-orange-600 hover:bg-orange-500 text-xl"
+					>Install Repositories</button
+				></a
 			>
 		</div>
 	{/if}

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

@@ -12,8 +12,8 @@
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
-	import { goto } from '$app/navigation';
 	const { id } = $page.params;
+
 	let url = settings.fqdn ? settings.fqdn : window.location.origin;
 
 	if (dev) {
@@ -31,6 +31,8 @@
 			appSecret: null
 		};
 	}
+	$: selfHosted = source.htmlUrl !== 'https://gitlab.com' ;
+
 	onMount(() => {
 		oauthIdEl && oauthIdEl.focus();
 	});
@@ -49,7 +51,8 @@
 					oauthId: source.gitlabApp.oauthId,
 					appId: source.gitlabApp.appId,
 					appSecret: source.gitlabApp.appSecret,
-					groupName: source.gitlabApp.groupName
+					groupName: source.gitlabApp.groupName,
+					customPort: source.customPort
 				});
 				const from = $page.url.searchParams.get('from');
 				if (from) {
@@ -67,7 +70,8 @@
 				await post(`/sources/${id}`, {
 					name: source.name,
 					htmlUrl: source.htmlUrl.replace(/\/$/, ''),
-					apiUrl: source.apiUrl.replace(/\/$/, '')
+					apiUrl: source.apiUrl.replace(/\/$/, ''),
+					customPort: source.customPort
 				});
 				toast.push('Configuration saved.');
 			} catch (error) {
@@ -119,6 +123,10 @@
 				window.open(`${source.htmlUrl}/-/profile/applications`);
 				break;
 			case 'group':
+				if (!source.gitlabApp.groupName) {
+					toast.push('Please enter a group name first.');
+					return;
+				}
 				window.open(
 					`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
 				);
@@ -146,6 +154,8 @@
 					<button on:click|preventDefault={changeSettings}
 						>{$t('source.change_app_settings', { name: 'GitLab' })}</button
 					>
+				{:else}
+					<button on:click|preventDefault|stopPropagation={newApp}>Create new GitLab App</button>
 				{/if}
 			{/if}
 		</div>
@@ -204,7 +214,7 @@
 					required
 					disabled={source.gitlabAppId}
 					readonly={source.gitlabAppId}
-					value={source.htmlUrl}
+					bind:value={source.htmlUrl}
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center">
@@ -218,6 +228,20 @@
 					value={source.apiUrl}
 				/>
 			</div>
+			<div class="grid grid-cols-2 items-center">
+				<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
+				<input
+					name="customPort"
+					id="customPort"
+					disabled={!selfHosted}
+					readonly={!selfHosted}
+					required
+					bind:value={source.customPort}
+				/>
+				<Explainer
+					text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
+				/>
+			</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"