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

…windmill-labs#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
Pluto-tv · Oct 15, 2024 · 99c5b3e · 99c5b3e
1 parent 9eb1ecc
commit 99c5b3e
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 12 deletions.
diff --git a/backend/ee-repo-ref.txt b/backend/ee-repo-ref.txt
@@ -1 +1 @@
-8e3fbda05392e641c15262924dc0df47cc42d036
+eb79a4e23a2d133a3a964065b354f569e98f1224
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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']} />