MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update login page to support user based oidc icon and name

This commit is contained in:
Peter Clement 2021-07-09 09:49:34 +01:00
parent bcfbca0f08
commit 005e0a2deb
3 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
View File

@ -1,14 +1,33 @@
<script> <script>
import { ActionButton } from "@budibase/bbui" 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> </script>
{#if show} {#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"> <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> </div>
</ActionButton> </ActionButton>
{/if} {/if}
@ -22,11 +41,12 @@
padding-top: var(--spacing-xs); padding-top: var(--spacing-xs);
padding-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs);
} }
/* .inner img { .inner img {
width: 18px; width: 18px;
margin: 3px 10px 3px 3px; margin: 3px 10px 3px 3px;
} */ }
.inner p { .inner p {
margin: 0; margin: 0;
} }
</style> </style>

2
packages/builder/src/pages/builder/auth/login.svelte
View File

@ -62,7 +62,7 @@
<Heading>Sign in to {company}</Heading> <Heading>Sign in to {company}</Heading>
</Layout> </Layout>
<GoogleButton /> <GoogleButton />
<OIDCButton /> <OIDCButton oidcIcon={$organisation.oidcIcon} oidcName={$organisation.oidcName}/>
<Divider noGrid /> <Divider noGrid />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Body size="S" textAlign="center">Sign in with email</Body> <Body size="S" textAlign="center">Sign in with email</Body>

3
packages/builder/src/pages/builder/portal/manage/auth/index.svelte
View File

@ -16,7 +16,6 @@
Input, Input,
Body, Body,
Select, Select,
Dropzone,
} from "@budibase/bbui" } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount } from "svelte"
import api from "builderStore/api" import api from "builderStore/api"
@ -55,7 +54,7 @@
let iconDropdownOptions = [ let iconDropdownOptions = [
{ {
label: "Azure AD", label: "Azure AD",
value: "Active Directory", value: "AD",
icon: MicrosoftLogo, icon: MicrosoftLogo,
}, },
{ label: "Oracle", value: "Oracle", icon: OracleLogo }, { label: "Oracle", value: "Oracle", icon: OracleLogo },