From 24f4a7caaafa93f51669dcf44a3dca09d5b228bb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 30 Sep 2024 09:52:03 +0200
Subject: [PATCH] fix: improve allowed domains setting for sso

---
 .../src/lib/components/OAuthSetting.svelte    | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/OAuthSetting.svelte b/frontend/src/lib/components/OAuthSetting.svelte
index 18ff726f6a..9e67ef787c 100644
--- a/frontend/src/lib/components/OAuthSetting.svelte
+++ b/frontend/src/lib/components/OAuthSetting.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { X } from 'lucide-svelte'
 	import CollapseLink from './CollapseLink.svelte'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
@@ -9,8 +10,6 @@
 
 	$: enabled = value != undefined
 
-	let allowed_domains = value?.['allowed_domains']?.join(', ') ?? ''
-
 	let tenant: string = ''
 	$: name == 'microsoft' && changeTenantId(tenant)
 
@@ -67,19 +66,38 @@
 			{:else if login}
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Allowed domains</span>
-					<span class="text-secondary text-xs">Separate domains with commas</span>
-					<input
-						type="text"
-						placeholder="windmill.dev"
-						bind:value={allowed_domains}
-						on:keyup={() => {
-							if (allowed_domains == '') {
-								value['allowed_domains'] = undefined
-							} else {
-								value['allowed_domains'] = allowed_domains.split(',')
-							}
-						}}
-					/>
+					<div class="flex flex-col gap-1">
+						{#each value?.['allowed_domains'] ?? [] as domain}
+							<div class="flex gap-2">
+								<input
+									class="max-w-96 w-full"
+									type="text"
+									bind:value={domain}
+									on:keyup={(e) => {
+										if (domain == '') {
+											value['allowed_domains'] = value['allowed_domains'].filter((d) => d != domain)
+										}
+									}}
+								/>
+								<button
+									class="text-primary text-xs rounded hover:bg-surface-hover"
+									on:click={() => {
+										value['allowed_domains'] = value['allowed_domains'].filter((d) => d != domain)
+									}}
+								>
+									<X size={14} />
+								</button>
+							</div>
+						{/each}
+						<div class="flex gap-2">
+							<button
+								class="text-primary text-sm border rounded p-1"
+								on:click={() => {
+									value['allowed_domains'] = [...(value['allowed_domains'] ?? []), 'mydomain.com']
+								}}>+ Add domain</button
+							>
+						</div>
+					</div>
 				</label>
 			{/if}
 			{#if name == 'google'}