1
0
Fork 0
mirror of synced 2024-07-05 14:31:17 +12:00

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

View file

@ -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>

View file

@ -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>

View file

@ -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 },