Add OIDC icon to login page

5 years ago · 02df5960c2
3 changed files with 42 additions and 0 deletions
--- a/packages/builder/src/pages/builder/auth/_components/OidcButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/OidcButton.svelte
@ -0,0 +1,39 @@
 <script>
    import { ActionButton } from "@budibase/bbui"
    import OidcLogo from "assets/oidc-logo.png"
    import { admin } from "stores/portal"
    let show = false
    $: show = $admin.checklist?.oidc
  </script>
  {#if show}
    <ActionButton
      on:click={() => window.open("/api/admin/auth/oidc", "_blank")}
    >
      <div class="inner">
        <img src={OidcLogo} alt="oidc icon" />
        <p>Sign in with OIDC</p>
      </div>
    </ActionButton>
  {/if}
  <style>
    .inner {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-top: var(--spacing-xs);
      padding-bottom: var(--spacing-xs);
    }
    .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
@ -12,6 +12,7 @@
  import { goto, params } from "@roxi/routify"
  import { auth, organisation } from "stores/portal"
  import GoogleButton from "./_components/GoogleButton.svelte"
  import OidcButton from "./_components/OidcButton.svelte"
  import Logo from "assets/bb-emblem.svg"
  import { onMount } from "svelte"
@ -61,6 +62,7 @@
        <Heading>Sign in to {company}</Heading>
      </Layout>
      <GoogleButton />
      <OidcButton />
      <Divider noGrid />
      <Layout gap="XS" noPadding>
        <Body size="S" textAlign="center">Sign in with email</Body>
--- a/packages/worker/src/api/controllers/admin/configs.js
+++ b/packages/worker/src/api/controllers/admin/configs.js
@ -205,6 +205,7 @@ exports.configChecklist = async function (ctx) {
      smtp: !!smtpConfig,
      adminUser,
      oauth: !!oauthConfig,
      oidc: !!oidcConfig,
    }
  } catch (err) {
    ctx.throw(err.status, err)