From b31be35307ca19a9cde419796a218d8e678c27bf Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 13 Jul 2021 17:30:59 +0100
Subject: [PATCH] Add UUID to each oidc config to distinguish each provider

---
 packages/bbui/src/Form/Core/Picker.svelte     |  4 +--
 packages/bbui/src/Form/Core/Select.svelte     |  6 ++---
 packages/bbui/src/Form/Select.svelte          |  8 +-----
 .../auth/_components/OIDCButton.svelte        | 26 +++++++++----------
 .../src/pages/builder/auth/login.svelte       |  1 -
 .../builder/portal/manage/auth/index.svelte   |  1 -
 6 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 4705f6f0d8..e7de91a7ab 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/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}
 
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 91a11aa6a4..8847163cb7 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/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}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index b0e7cbe355..eecc719a9a 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/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]
diff --git a/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte b/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
index f3f28402a5..61d9bc80aa 100644
--- a/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
+++ b/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}
diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte
index 0b726fb08d..8ce27b98bb 100644
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@@ -50,7 +50,6 @@
 
   onMount(async () => {
     await organisation.init()
-    await oidc.init()
   })
 </script>
 
diff --git a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte b/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
index 9d77e90190..90e7ddca29 100644
--- a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
+++ b/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)}