From 3bf4d4f43e4fbb0ec98073a201a67d6035660ab9 Mon Sep 17 00:00:00 2001
From: Alexander Petric <alpetric@users.noreply.github.com>
Date: Tue, 15 Oct 2024 11:32:39 -0400
Subject: [PATCH] feat(sso): adding the ability to define a custom display name
 for sso (#4529)

* feat(sso): adding the ability to define a custom display name for sso

* adding openapi-deref.json

* make the display_name field optional

* Update ee-repo-ref.txt
---
 backend/ee-repo-ref.txt                       |  2 +-
 backend/windmill-api/openapi-deref.json       | 14 +++++++++--
 backend/windmill-api/openapi.yaml             |  9 ++++++-
 .../src/lib/components/AutheliaSetting.svelte |  4 ++++
 .../lib/components/AuthentikSetting.svelte    |  4 ++++
 .../lib/components/InstanceSettings.svelte    |  4 ++++
 .../src/lib/components/KanidmSetting.svelte   |  4 ++++
 .../src/lib/components/KeycloakSetting.svelte |  4 ++++
 frontend/src/lib/components/Login.svelte      | 24 ++++++++++++-------
 .../src/lib/components/OAuthSetting.svelte    |  4 ++++
 .../src/lib/components/OktaSetting.svelte     |  4 ++++
 .../src/lib/components/ZitadelSetting.svelte  |  4 ++++
 12 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/backend/ee-repo-ref.txt b/backend/ee-repo-ref.txt
index 5912afd498..b5c09c8e5e 100644
--- a/backend/ee-repo-ref.txt
+++ b/backend/ee-repo-ref.txt
@@ -1 +1 @@
-8e3fbda05392e641c15262924dc0df47cc42d036
\ No newline at end of file
+eb79a4e23a2d133a3a964065b354f569e98f1224
diff --git a/backend/windmill-api/openapi-deref.json b/backend/windmill-api/openapi-deref.json
index 23e8f019df..328f3f70f5 100644
--- a/backend/windmill-api/openapi-deref.json
+++ b/backend/windmill-api/openapi-deref.json
@@ -3932,8 +3932,18 @@
                     "oauth": {
                       "type": "array",
                       "items": {
-                        "type": "string"
-                      }
+                        "type": "object",
+                        "properties": {
+                          "type": {
+                            "type": "string"
+                          },
+                          "display_name": {
+                            "type": "string"
+                          }
+                        },
+                        "required": [
+                          "type"
+                        ]
                     },
                     "saml": {
                       "type": "string"
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 4fe7c8d630..67a02029cf 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -2789,7 +2789,14 @@ paths:
                   oauth:
                     type: array
                     items:
-                      type: string
+                      type: object
+                      properties:
+                        type:
+                          type: string
+                        display_name:
+                          type: string
+                      required:
+                        - type
                   saml:
                     type: string
                 required:
diff --git a/frontend/src/lib/components/AutheliaSetting.svelte b/frontend/src/lib/components/AutheliaSetting.svelte
index d97b54c7e7..3392b056b6 100644
--- a/frontend/src/lib/components/AutheliaSetting.svelte
+++ b/frontend/src/lib/components/AutheliaSetting.svelte
@@ -52,6 +52,10 @@
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
diff --git a/frontend/src/lib/components/AuthentikSetting.svelte b/frontend/src/lib/components/AuthentikSetting.svelte
index 116eee2648..8936905a16 100644
--- a/frontend/src/lib/components/AuthentikSetting.svelte
+++ b/frontend/src/lib/components/AuthentikSetting.svelte
@@ -52,6 +52,10 @@
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index a1ece19bf8..ac0aabd161 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -372,6 +372,10 @@
 														/>
 													</div>
 													<div class="p-2 border rounded">
+														<label class="block pb-2">
+															<span class="text-primary font-semibold text-sm">Custom Name</span>
+															<input type="text" placeholder="Custom Name" bind:value={oauths[k]['display_name']} />
+														</label>
 														<label class="block pb-2">
 															<span class="text-primary font-semibold text-sm">Client Id</span>
 															<input
diff --git a/frontend/src/lib/components/KanidmSetting.svelte b/frontend/src/lib/components/KanidmSetting.svelte
index 4dae1733c9..c15ab6e022 100644
--- a/frontend/src/lib/components/KanidmSetting.svelte
+++ b/frontend/src/lib/components/KanidmSetting.svelte
@@ -61,6 +61,10 @@
 				>
 				<input type="text" placeholder="Base URL" bind:value={baseUrl} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
diff --git a/frontend/src/lib/components/KeycloakSetting.svelte b/frontend/src/lib/components/KeycloakSetting.svelte
index dcc347bb2d..214b26d288 100644
--- a/frontend/src/lib/components/KeycloakSetting.svelte
+++ b/frontend/src/lib/components/KeycloakSetting.svelte
@@ -52,6 +52,10 @@
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
diff --git a/frontend/src/lib/components/Login.svelte b/frontend/src/lib/components/Login.svelte
index 7b5699b93f..515470ca54 100644
--- a/frontend/src/lib/components/Login.svelte
+++ b/frontend/src/lib/components/Login.svelte
@@ -55,9 +55,14 @@
 	const providersType = providers.map((p) => p.type as string)
 
 	let showPassword = false
-	let logins: string[] | undefined = undefined
+	let logins: OAuthLogin[] | undefined = undefined
 	let saml: string | undefined = undefined
 
+	type OAuthLogin = {
+		type: string
+		displayName: string
+	}
+
 	async function login(): Promise<void> {
 		if (!email || !password) {
 			sendUserToast('Please fill in both email and password', true)
@@ -144,7 +149,10 @@
 
 	async function loadLogins() {
 		const allLogins = await OauthService.listOauthLogins()
-		logins = allLogins.oauth
+		logins = allLogins.oauth.map(login => ({
+			type: login.type,
+			displayName: login.display_name || login.type
+		}))
 		saml = allLogins.saml
 
 		showPassword = (logins.length == 0 && !saml) || (email != undefined && email.length > 0)
@@ -205,26 +213,26 @@
 				<Skeleton layout={[0.5, [2.375]]} />
 			{/each}
 		{:else}
-			{#each providers as { type, icon, name }}
-				{#if logins?.includes(type)}
+			{#each providers as { type, icon }}
+				{#if logins?.some(login => login.type === type)}
 					<Button
 						color="light"
 						variant="border"
 						startIcon={{ icon, classes: 'h-4' }}
 						on:click={() => storeRedirect(type)}
 					>
-						{name}
+						{logins.find(login => login.type === type)?.displayName}
 					</Button>
 				{/if}
 			{/each}
-			{#each logins.filter((x) => !providersType?.includes(x)) as login}
+			{#each logins.filter((login) => !providersType?.includes(login.type)) as login}
 				<Button
 					color="dark"
 					variant="border"
 					btnClasses="mt-2 w-full !border-gray-300"
-					on:click={() => storeRedirect(login)}
+					on:click={() => storeRedirect(login.type)}
 				>
-					{login}
+					{login.displayName}
 				</Button>
 			{/each}
 		{/if}
diff --git a/frontend/src/lib/components/OAuthSetting.svelte b/frontend/src/lib/components/OAuthSetting.svelte
index 4e84f796ce..505db1c36a 100644
--- a/frontend/src/lib/components/OAuthSetting.svelte
+++ b/frontend/src/lib/components/OAuthSetting.svelte
@@ -50,6 +50,10 @@
 	>
 	{#if enabled}
 		<div class="p-2 rounded border">
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
diff --git a/frontend/src/lib/components/OktaSetting.svelte b/frontend/src/lib/components/OktaSetting.svelte
index 1b01f14173..437a24db64 100644
--- a/frontend/src/lib/components/OktaSetting.svelte
+++ b/frontend/src/lib/components/OktaSetting.svelte
@@ -66,6 +66,10 @@
 					</div>
 				</div>
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm"
 					>Client Id <Tooltip
diff --git a/frontend/src/lib/components/ZitadelSetting.svelte b/frontend/src/lib/components/ZitadelSetting.svelte
index 4481f55004..16e15a6070 100644
--- a/frontend/src/lib/components/ZitadelSetting.svelte
+++ b/frontend/src/lib/components/ZitadelSetting.svelte
@@ -52,6 +52,10 @@
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />