github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-28 18:20:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
This commit is contained in:
Erik Michelson 2020-06-04 23:38:21 +02:00 committed by GitHub
parent 2b4c3c76ba
commit b051b109e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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')}>
<Button
variant={variant || 'success'}
{...props}
>
<Trans i18nKey="login.signIn"/>
</Button>
</LinkContainer>
<ShowIf condition={Object.values(authProviders).includes(true)}>
<LinkContainer to="/login" title={t('login.signIn')}>
<Button
variant={variant || 'success'}
{...props}
>
<Trans i18nKey="login.signIn"/>
</Button>
</LinkContainer>
</ShowIf>
)
}

12
src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx
View file

@ -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"
/>
<span className="m-2">
<Trans i18nKey="common.or"/>
</span>
<ShowIf condition={Object.values(authProviders).includes(true)}>
<span className="m-2">
<Trans i18nKey="common.or"/>
</span>
</ShowIf>
<Link to="/features">
<Button
className="cover-button"

70
src/components/landing/pages/login/login.tsx
View file

@ -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">
{
authProviders.email || authProviders.ldap || authProviders.openid
? <Col xs={12} sm={10} lg={4}>
{emailForm}
{ldapForm}
{openIdForm}
</Col>
: null
}
<Col xs={12} sm={10} lg={4}>
<Card className="bg-dark mb-4">
<Card.Body>
<Card.Title>
<Trans i18nKey="login.signInVia" values={{ service: '' }}/>
</Card.Title>
{
Object.values(OneClickType)
.filter((value) => authProviders[value])
.map((value) => (
<div
className="p-2 d-flex flex-column social-button-container"
key={value}
>
<ViaOneClick
oneClickType={value}
optionalName={oneClickCustomName(value)}
/>
</div>
))
}
</Card.Body>
</Card>
</Col>
<ShowIf condition={authProviders.email || authProviders.ldap || authProviders.openid}>
<Col xs={12} sm={10} lg={4}>
{emailForm}
{ldapForm}
{openIdForm}
</Col>
</ShowIf>
<ShowIf condition={oneClickProviders.includes(true)}>
<Col xs={12} sm={10} lg={4}>
<Card className="bg-dark mb-4">
<Card.Body>
<Card.Title>
<Trans i18nKey="login.signInVia" values={{ service: '' }}/>
</Card.Title>
{
Object.values(OneClickType)
.filter((value) => authProviders[value])
.map((value) => (
<div
className="p-2 d-flex flex-column social-button-container"
key={value}
>
<ViaOneClick
oneClickType={value}
optionalName={oneClickCustomName(value)}
/>
</div>
))
}
</Card.Body>
</Card>
</Col>
</ShowIf>
</Row>
</div>
)