Fix/email open id separator (#39)

Fix/email open id separator 

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Philip Molares 2020-05-21 21:23:24 +02:00 committed by GitHub
parent 90d9ba5226
commit 4c785b345b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 15 deletions

View file

@ -8,13 +8,18 @@ export const ElementSeparator: React.FC<ElementSeparatorProps> = ({children, sep
return (
<Fragment>
{
React.Children.map(children, (child, index) => {
return <Fragment>
{
(index > 0) ? separator : null
}
{child}
</Fragment>
React.Children
.toArray(children)
.filter(child => child !== null)
.map((child, index) => {
return (
<Fragment>
{
(index > 0 ) ? separator : null
}
{child}
</Fragment>
)
})
}
</Fragment>

View file

@ -8,6 +8,7 @@ import {useSelector} from "react-redux";
import {ApplicationState} from "../../../../redux";
import {ViaOpenId} from "./auth/via-open id";
import "./login.scss";
import {ElementSeparator} from "../../../element-separator/element-separator";
const Login: React.FC = () => {
useTranslation();
@ -16,8 +17,6 @@ const Login: React.FC = () => {
const emailForm = authProviders.email ? <ViaEMail/> : null
const ldapForm = authProviders.ldap ? <ViaLdap/> : null
const openIdForm = authProviders.openid ? <ViaOpenId/> : null
const emailLdapSeparator = authProviders.email && authProviders.ldap ? <hr className="w-100 bg-white"/> : null
const ldapOpenIdSeparator = authProviders.ldap && authProviders.openid ? <hr className="w-100 bg-white"/> : null
const oneClickCustomName: (type: OneClickType) => string | undefined = (type) => {
switch (type) {
@ -35,13 +34,13 @@ const Login: React.FC = () => {
<div className="my-3">
<Row className="h-100 flex justify-content-center">
{
authProviders.email || authProviders.ldap ?
authProviders.email || authProviders.ldap || authProviders.openid ?
<Col xs={12} sm={10} lg={3}>
{emailForm}
{emailLdapSeparator}
{ldapForm}
{ldapOpenIdSeparator}
{openIdForm}
<ElementSeparator separator={<hr className="w-100 bg-white"/>}>
{emailForm}
{ldapForm}
{openIdForm}
</ElementSeparator>
<hr className="w-100 d-lg-none d-block bg-white"/>
</Col>
: null