Add one-click login if possible (#1043)

This commit is contained in:
Erik Michelson 2021-03-09 23:00:14 +01:00 committed by GitHub
parent a6c80ac1f0
commit 6d2dde477c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 216 additions and 53 deletions

View file

@ -4,7 +4,8 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import equal from 'fast-deep-equal'
import React, { useMemo } from 'react'
import { Button } from 'react-bootstrap'
import { ButtonProps } from 'react-bootstrap/Button'
import { Trans, useTranslation } from 'react-i18next'
@ -12,16 +13,31 @@ import { useSelector } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
import { ApplicationState } from '../../../redux'
import { ShowIf } from '../../common/show-if/show-if'
import { getApiUrl } from '../../../api/utils'
import { INTERACTIVE_LOGIN_METHODS } from '../../../api/auth'
export type SignInButtonProps = Omit<ButtonProps, 'href'>
export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
const { t } = useTranslation()
const anyAuthProviderActive = useSelector((state: ApplicationState) => Object.values(state.config.authProviders)
.includes(true))
const authProviders = useSelector((state: ApplicationState) => state.config.authProviders, equal)
const authEnabled = useMemo(() => Object.values(authProviders).includes(true), [authProviders])
const loginLink = useMemo(() => {
const activeProviders = Object.entries(authProviders)
.filter((entry: [string, boolean]) => entry[1])
.map(entry => entry[0])
const activeOneClickProviders = activeProviders.filter(entry => !INTERACTIVE_LOGIN_METHODS.includes(entry))
if (activeProviders.length === 1 && activeOneClickProviders.length === 1) {
return `${ getApiUrl() }/auth/${ activeOneClickProviders[0] }`
}
return '/login'
}, [authProviders])
return (
<ShowIf condition={ anyAuthProviderActive }>
<LinkContainer to="/login" title={ t('login.signIn') }>
<ShowIf condition={ authEnabled }>
<LinkContainer to={ loginLink } title={ t('login.signIn') }>
<Button
data-cy={ 'sign-in-button' }
variant={ variant || 'success' }