Update login page to support user based oidc icon and name

5 years ago · 005e0a2deb
3 changed files with 28 additions and 9 deletions
--- a/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
@ -1,14 +1,33 @@
 <script>
  import { ActionButton } from "@budibase/bbui"
-  // import { admin } from "stores/portal"
+  import OidcLogo from "assets/oidc-logo.png"
+  import Auth0Logo from "assets/auth0-logo.png"
+  import MicrosoftLogo from "assets/microsoft-logo.png"
+  import OracleLogo from "assets/oracle-logo.png"

-  let show = true
+  import { admin } from "stores/portal"
+
+  export let oidcIcon
+  export let oidcName
+  let show = false
+
+  let preDefinedIcons = {
+    Oidc: OidcLogo,
+    Oracle: OracleLogo,
+    Auth0: Auth0Logo,
+    AD: MicrosoftLogo
+  }
+  $: show = $admin.checklist?.oidc
+  console.log(preDefinedIcons[oidcIcon])
 </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">
-      <p>Sign in with OIDC</p>
+      <img src={preDefinedIcons[oidcIcon] ? preDefinedIcons[oidcIcon] : `/global/oidc_logos/${oidcIcon}` || OidcLogo} alt="oidc icon" />
+      <p>{`Sign in with ${oidcName || 'OIDC'}`}</p>
    </div>
  </ActionButton>
 {/if}
@ -22,11 +41,12 @@
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
-  /* .inner img {
+  .inner img {
    width: 18px;
    margin: 3px 10px 3px 3px;
-  } */
+  }
  .inner p {
    margin: 0;
  }
 </style>
+
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@ -62,7 +62,7 @@
        <Heading>Sign in to {company}</Heading>
      </Layout>
      <GoogleButton />
-      <OIDCButton />
+      <OIDCButton oidcIcon={$organisation.oidcIcon} oidcName={$organisation.oidcName}/>
      <Divider noGrid />
      <Layout gap="XS" noPadding>
        <Body size="S" textAlign="center">Sign in with email</Body>
--- a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
@ -16,7 +16,6 @@
    Input,
    Body,
    Select,
-    Dropzone,
  } from "@budibase/bbui"
  import { onMount } from "svelte"
  import api from "builderStore/api"
@ -55,7 +54,7 @@
  let iconDropdownOptions = [
    {
      label: "Azure AD",
-      value: "Active Directory",
+      value: "AD",
      icon: MicrosoftLogo,
    },
    { label: "Oracle", value: "Oracle", icon: OracleLogo },