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,15 +13,17 @@ type SignInButtonProps = {
 
 export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
   const { t } = useTranslation()
-
+  const authProviders = useSelector((state: ApplicationState) => state.backendConfig.authProviders)
   return (
-    <LinkContainer to="/login" title={t('login.signIn')}>
+    <ShowIf condition={Object.values(authProviders).includes(true)}>
-      <Button
+      <LinkContainer to="/login" title={t('login.signIn')}>
-        variant={variant || 'success'}
+        <Button
-        {...props}
+          variant={variant || 'success'}
-      >
+          {...props}
-        <Trans i18nKey="login.signIn"/>
+        >
-      </Button>
+          <Trans i18nKey="login.signIn"/>
-    </LinkContainer>
+        </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">
+        <span className="m-2">
-        <Trans i18nKey="common.or"/>
+          <Trans i18nKey="common.or"/>
-      </span>
+        </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,39 +43,39 @@ export const Login: React.FC = () => {
   return (
     <div className="my-3">
       <Row className="h-100 flex justify-content-center">
-        {
+        <ShowIf condition={authProviders.email || authProviders.ldap || authProviders.openid}>
-          authProviders.email || authProviders.ldap || authProviders.openid
+          <Col xs={12} sm={10} lg={4}>
-            ? <Col xs={12} sm={10} lg={4}>
+            {emailForm}
-              {emailForm}
+            {ldapForm}
-              {ldapForm}
+            {openIdForm}
-              {openIdForm}
+          </Col>
-            </Col>
+        </ShowIf>
-            : null
+        <ShowIf condition={oneClickProviders.includes(true)}>
-        }
+          <Col xs={12} sm={10} lg={4}>
-        <Col xs={12} sm={10} lg={4}>
+            <Card className="bg-dark mb-4">
-          <Card className="bg-dark mb-4">
+              <Card.Body>
-            <Card.Body>
+                <Card.Title>
-              <Card.Title>
+                  <Trans i18nKey="login.signInVia" values={{ service: '' }}/>
-                <Trans i18nKey="login.signInVia" values={{ service: '' }}/>
+                </Card.Title>
-              </Card.Title>
+                {
-              {
+                  Object.values(OneClickType)
-                Object.values(OneClickType)
+                    .filter((value) => authProviders[value])
-                  .filter((value) => authProviders[value])
+                    .map((value) => (
-                  .map((value) => (
+                      <div
-                    <div
+                        className="p-2 d-flex flex-column social-button-container"
-                      className="p-2 d-flex flex-column social-button-container"
+                        key={value}
-                      key={value}
+                      >
-                    >
+                        <ViaOneClick
-                      <ViaOneClick
+                          oneClickType={value}
-                        oneClickType={value}
+                          optionalName={oneClickCustomName(value)}
-                        optionalName={oneClickCustomName(value)}
+                        />
-                      />
+                      </div>
-                    </div>
+                    ))
-                  ))
+                }
-              }
+              </Card.Body>
-            </Card.Body>
+            </Card>
-          </Card>
+          </Col>
-        </Col>
+        </ShowIf>
       </Row>
     </div>
   )