From 0ccf706fa28ba615b887ae9c930089be45f14b13 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 10 Nov 2023 00:11:59 +0100
Subject: [PATCH] feat: add support for custom sso logins

---
 .../src/lib/components/CustomOauth.svelte     |  4 +
 frontend/src/lib/components/CustomSso.svelte  | 90 +++++++++++++++++++
 .../lib/components/InstanceSettings.svelte    | 60 ++++++++++++-
 3 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/components/CustomSso.svelte

diff --git a/frontend/src/lib/components/CustomOauth.svelte b/frontend/src/lib/components/CustomOauth.svelte
index 88c3087c1b..16338efc1e 100644
--- a/frontend/src/lib/components/CustomOauth.svelte
+++ b/frontend/src/lib/components/CustomOauth.svelte
@@ -41,10 +41,12 @@
 		bind:value={connect_config.token_url}
 	/>
 </label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm">Scopes</span>
 	<OauthScopes bind:scopes={connect_config.scopes} />
 </label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -54,12 +56,14 @@
 	>
 	<OauthExtraParams bind:extra_params={connect_config.extra_params} />
 </label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={connect_config.extra_params_callback} />
 </label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Payload <Tooltip
diff --git a/frontend/src/lib/components/CustomSso.svelte b/frontend/src/lib/components/CustomSso.svelte
new file mode 100644
index 0000000000..fda6d54e15
--- /dev/null
+++ b/frontend/src/lib/components/CustomSso.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import OauthExtraParams from './OauthExtraParams.svelte'
+	import OauthScopes from './OauthScopes.svelte'
+	import Toggle from './Toggle.svelte'
+	import Tooltip from './Tooltip.svelte'
+
+	export let login_config = {
+		scopes: [],
+		auth_url: '',
+		token_url: '',
+		userinfo_url: '',
+		req_body_auth: false,
+		extra_params: {},
+		extra_params_callback: {}
+	}
+
+	$: if (!login_config) {
+		login_config = {
+			scopes: [],
+			auth_url: '',
+			token_url: '',
+			userinfo_url: '',
+			req_body_auth: false,
+			extra_params: {},
+			extra_params_callback: {}
+		}
+	}
+</script>
+
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm">Auth URL</span>
+	<input
+		type="text"
+		placeholder="https://github.com/login/oauth/authorize"
+		bind:value={login_config.auth_url}
+	/>
+</label>
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm">Token URL</span>
+	<input
+		type="text"
+		placeholder="https://github.com/login/oauth/access_token"
+		bind:value={login_config.token_url}
+	/>
+</label>
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm">Userinfo URL</span>
+	<input
+		type="text"
+		placeholder="https://github.com/login/oauth/userinfo"
+		bind:value={login_config.userinfo_url}
+	/>
+</label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm">Scopes</span>
+	<OauthScopes bind:scopes={login_config.scopes} />
+</label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm"
+		>Extra Query Args for Authorize Request&nbsp;<Tooltip
+			>Not needed in most cases. Examples of uses: google apis require the 2 extra args
+			"access_type=offline&prompt=consent"</Tooltip
+		></span
+	>
+	<OauthExtraParams bind:extra_params={login_config.extra_params} />
+</label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm"
+		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
+	>
+	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
+</label>
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label class="block pb-2">
+	<span class="text-primary font-semibold text-sm"
+		>Payload <Tooltip
+			>Auth is passed in query most commonly. LinkedIn is an example of OAuth using
+			x-www-form-urlencoded
+		</Tooltip></span
+	>
+	<div>
+		<Toggle
+			options={{ left: 'in query args', right: 'in body x-www-form-urlencoded' }}
+			bind:checked={login_config.req_body_auth}
+		/></div
+	>
+</label>
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index 3c92cdfa87..2affceab24 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -18,6 +18,7 @@
 	import { enterpriseLicense } from '$lib/stores'
 	import CustomOauth from './CustomOauth.svelte'
 	import { AlertTriangle } from 'lucide-svelte'
+	import CustomSso from './CustomSso.svelte'
 
 	export let tab: string = 'Core'
 	export let hideTabs: boolean = false
@@ -148,6 +149,8 @@
 		await SettingService.sendStats()
 		sendUserToast('Usage sent')
 	}
+
+	let clientName = ''
 </script>
 
 <div class="pb-8">
@@ -209,6 +212,61 @@
 								<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
 								<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
 								<KeycloakSetting bind:value={oauths['keycloak']} />
+								{#each Object.keys(oauths) as k}
+									{#if !['google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && 'login_config' in oauths[k]}
+										{#if oauths[k]}
+											<div class="flex flex-col gap-2 pb-4">
+												<div class="flex flex-row items-center gap-2">
+													<label class="text-md font-medium text-primary">{k}</label>
+													<CloseButton
+														on:close={() => {
+															delete oauths[k]
+															oauths = { ...oauths }
+														}}
+													/>
+												</div>
+												<div class="p-2 border rounded">
+													<label class="block pb-2">
+														<span class="text-primary font-semibold text-sm">Client Id</span>
+														<input
+															type="text"
+															placeholder="Client Id"
+															bind:value={oauths[k]['id']}
+														/>
+													</label>
+													<label class="block pb-2">
+														<span class="text-primary font-semibold text-sm">Client Secret</span>
+														<input
+															type="text"
+															placeholder="Client Secret"
+															bind:value={oauths[k]['secret']}
+														/>
+													</label>
+													{#if !windmillBuiltins.includes(k) && k != 'slack'}
+														<CustomSso bind:login_config={oauths[k]['login_config']} />
+													{/if}
+												</div>
+											</div>
+										{/if}
+									{/if}
+								{/each}
+							</div>
+							<div class="flex gap-2">
+								<input type="text" placeholder="client_id" bind:value={clientName} />
+								<Button
+									variant="border"
+									color="blue"
+									hover="yo"
+									size="sm"
+									endIcon={{ icon: faPlus }}
+									disabled={clientName == ''}
+									on:click={() => {
+										oauths[clientName] = { id: '', secret: '', login_config: {} }
+										clientName = ''
+									}}
+								>
+									Add custom SSO client {!$enterpriseLicense ? '(require ee)' : ''}
+								</Button>
 							</div>
 							<h4 class="py-4">OAuth</h4>
 							<Alert type="info" title="Require a corresponding resource type">
@@ -220,7 +278,7 @@
 							<div class="py-1" />
 
 							{#each Object.keys(oauths) as k}
-								{#if !['google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k)}
+								{#if !['google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack'].includes(k) && !('login_config' in oauths[k])}
 									{#if oauths[k]}
 										<div class="flex flex-col gap-2 pb-4">
 											<div class="flex flex-row items-center gap-2">