Add UUID to each oidc config to distinguish each provider

packages/bbui/src/Form/Core/Picker.svelte

@@ -18,7 +18,7 @@
   export let onSelectOption = () => {}
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
-  export let getOptionIcon = option => option
+  export let getOptionIcon = null
   export let open = false
   export let readonly = false
   export let quiet = false
@@ -45,7 +45,7 @@
 >
   {#if fieldIcon}
     <span class="icon-Placeholder-Padding">
-      <img src={fieldIcon} alt="OpenID Icon" width="20" height="15" />
+      <img src={fieldIcon} alt="Picker Icon" width="20" height="15" />
     </span>
   {/if}
 

packages/bbui/src/Form/Core/Select.svelte

@@ -8,10 +8,9 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let callbackOptionValue = null
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
-  export let getOptionIcon = option => option
+  export let getOptionIcon = null
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
@@ -47,7 +46,7 @@
     const index = options.findIndex(
       (option, idx) => getOptionValue(option, idx) === value
     )
-    return index !== -1 ? getOptionIcon(options[index], index) : value
+    return index !== -1 ? getOptionIcon(options[index], index) : null
   }
 
   const selectOption = value => {
@@ -71,7 +70,6 @@
   {getOptionValue}
   {getOptionIcon}
   {fieldIcon}
-  {callbackOptionValue}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}

packages/bbui/src/Form/Select.svelte

@@ -13,7 +13,7 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
-  export let getOptionIcon = option => extractObjectProperty(option, "icon")
+  export let getOptionIcon = option => option?.icon
   export let quiet = false
   export let autoWidth = false
 
@@ -23,12 +23,6 @@
     dispatch("change", e.detail)
   }
 
-  const extractObjectProperty = (value, property) => {
-    if (value && typeof value === "object") {
-      return value[property]
-    }
-  }
-
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
       return value[property]

packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte

@@ -4,10 +4,9 @@
   import Auth0Logo from "assets/auth0-logo.png"
   import MicrosoftLogo from "assets/microsoft-logo.png"
 
-  import { admin } from "stores/portal"
+  import { admin, oidc } from "stores/portal"
+  import { onMount } from "svelte"
 
-  export let oidcIcon
-  export let oidcName
   let show = false
 
   let preDefinedIcons = {
@@ -15,21 +14,22 @@
     Auth0: Auth0Logo,
     Microsoft: MicrosoftLogo,
   }
+
+  onMount(async () => {
+    await oidc.init()
+  })
+
   $: show = $admin.checklist?.oidc
+  $: src = !$oidc.logo
+    ? OidcLogo
+    : preDefinedIcons[$oidc.logo] || `/global/oidc_logos/${$oidc.logo}`
 </script>
 
 {#if show}
-  <ActionButton on:click={() => window.open("/api/admin/auth/oidc", "_blank")}>
+  <ActionButton on:click={() => window.open("/api/admin/auth/oidc/", "_blank")}>
     <div class="inner">
-      <img
-        src={!oidcIcon
-          ? OidcLogo
-          : preDefinedIcons[oidcIcon]
-          ? preDefinedIcons[oidcIcon]
-          : `/global/oidc_logos/${oidcIcon}`}
-        alt="oidc icon"
-      />
-      <p>{`Sign in with ${oidcName || "OIDC"}`}</p>
+      <img {src} alt="oidc icon" />
+      <p>{`Sign in with ${$oidc.name || "OIDC"}`}</p>
     </div>
   </ActionButton>
 {/if}

packages/builder/src/pages/builder/auth/login.svelte

@@ -50,7 +50,6 @@
 
   onMount(async () => {
     await organisation.init()
-    await oidc.init()
   })
 </script>
 

packages/builder/src/pages/builder/portal/manage/auth/index.svelte

@@ -239,7 +239,6 @@
         />
       </div>
       <input
-        style="display:none"
         type="file"
         accept=".jpg, .jpeg, .png"
         on:change={e => onFileSelected(e)}