Show login-buttons and boxes only if providers are configured (#122)

* Hide "Sign-in via ..." box if no provider is enabled

* Show sign-in buttons only if auth-providers exist

* Rebase fixes

* Replaced ternary operators with ShowIf

* Added ShowIf on two other code positions

src/components/landing/layout/navigation/sign-in-button.tsx

@@ -2,7 +2,10 @@ import React from 'react'
 import { Button } from 'react-bootstrap'
 import { ButtonProps } from 'react-bootstrap/Button'
 import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
+import { ApplicationState } from '../../../../redux'
+import { ShowIf } from '../../../common/show-if'
 
 type SignInButtonProps = {
   className?: string
@@ -10,8 +13,9 @@ type SignInButtonProps = {
 
 export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
   const { t } = useTranslation()
-
+  const authProviders = useSelector((state: ApplicationState) => state.backendConfig.authProviders)
   return (
+    <ShowIf condition={Object.values(authProviders).includes(true)}>
       <LinkContainer to="/login" title={t('login.signIn')}>
         <Button
           variant={variant || 'success'}
@@ -20,5 +24,6 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
           <Trans i18nKey="login.signIn"/>
         </Button>
       </LinkContainer>
+    </ShowIf>
   )
 }

src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx

@@ -4,12 +4,14 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../../../redux'
+import { ShowIf } from '../../../../common/show-if'
 import { SignInButton } from '../../../layout/navigation/sign-in-button'
 import './cover-buttons.scss'
 
 export const CoverButtons: React.FC = () => {
   useTranslation()
   const user = useSelector((state: ApplicationState) => state.user)
+  const authProviders = useSelector((state: ApplicationState) => state.backendConfig.authProviders)
 
   if (user) {
     return null
@@ -22,11 +24,11 @@ export const CoverButtons: React.FC = () => {
         variant="success"
         size="lg"
       />
-
+      <ShowIf condition={Object.values(authProviders).includes(true)}>
         <span className="m-2">
           <Trans i18nKey="common.or"/>
         </span>
-
+      </ShowIf>
       <Link to="/features">
         <Button
           className="cover-button"

src/components/landing/pages/login/login.tsx

@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Redirect } from 'react-router'
 import { ApplicationState } from '../../../../redux'
+import { ShowIf } from '../../../common/show-if'
 import { ViaEMail } from './auth/via-email'
 import { ViaLdap } from './auth/via-ldap'
 import { OneClickType, ViaOneClick } from './auth/via-one-click'
@@ -18,6 +19,9 @@ export const Login: React.FC = () => {
   const ldapForm = authProviders.ldap ? <ViaLdap/> : null
   const openIdForm = authProviders.openid ? <ViaOpenId/> : null
 
+  const oneClickProviders = [authProviders.dropbox, authProviders.facebook, authProviders.github, authProviders.gitlab,
+    authProviders.google, authProviders.oauth2, authProviders.saml, authProviders.twitter]
+
   const oneClickCustomName: (type: OneClickType) => string | undefined = (type) => {
     switch (type) {
       case OneClickType.SAML:
@@ -39,15 +43,14 @@ export const Login: React.FC = () => {
   return (
     <div className="my-3">
       <Row className="h-100 flex justify-content-center">
-        {
-          authProviders.email || authProviders.ldap || authProviders.openid
-            ? <Col xs={12} sm={10} lg={4}>
+        <ShowIf condition={authProviders.email || authProviders.ldap || authProviders.openid}>
+          <Col xs={12} sm={10} lg={4}>
             {emailForm}
             {ldapForm}
             {openIdForm}
           </Col>
-            : null
-        }
+        </ShowIf>
+        <ShowIf condition={oneClickProviders.includes(true)}>
           <Col xs={12} sm={10} lg={4}>
             <Card className="bg-dark mb-4">
               <Card.Body>
@@ -72,6 +75,7 @@ export const Login: React.FC = () => {
               </Card.Body>
             </Card>
           </Col>
+        </ShowIf>
       </Row>
     </div>
   )