mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-23 11:37:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor login components and adjust login API routes (#1678)

Browse source 
* Refactor login components and adjust API routes

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Adjust API /me response and redux state

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Fix moved function

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Update cypress tests

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Adjust mock response

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Integrate new common fields and hook into profile page

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Remove openid

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Fix config mock

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Erik Michelson 2021-12-11 01:32:38 +01:00 • committed by GitHub
parent fe640268c5
commit eab189c3c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 911 additions and 507 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,15 +10,16 @@ import type { ButtonProps } from 'react-bootstrap/Button'
import { Trans, useTranslation } from 'react-i18next'
import { LinkContainer } from 'react-router-bootstrap'
import { ShowIf } from '../../common/show-if/show-if'
import { getApiUrl } from '../../../api/utils'
import { INTERACTIVE_LOGIN_METHODS } from '../../../api/auth'
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { cypressId } from '../../../utils/cypress-attribute'
import { useBackendBaseUrl } from '../../../hooks/common/use-backend-base-url'
export type SignInButtonProps = Omit<ButtonProps, 'href'>
export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
const { t } = useTranslation()
const backendBaseUrl = useBackendBaseUrl()
const authProviders = useApplicationState((state) => state.config.authProviders)
const authEnabled = useMemo(() => Object.values(authProviders).includes(true), [authProviders])
@ -29,10 +30,10 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
const activeOneClickProviders = activeProviders.filter((entry) => !INTERACTIVE_LOGIN_METHODS.includes(entry))
if (activeProviders.length === 1 && activeOneClickProviders.length === 1) {
return `${getApiUrl()}auth/${activeOneClickProviders[0]}`
return `${backendBaseUrl}auth/${activeOneClickProviders[0]}`
}
return '/login'
}, [authProviders])
}, [authProviders, backendBaseUrl])
return (
<ShowIf condition={authEnabled}>

33
src/components/landing-layout/navigation/sign-out-dropdown-button.tsx Normal file
View file

@ -0,0 +1,33 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback } from 'react'
import { clearUser } from '../../../redux/user/methods'
import { cypressId } from '../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { Trans, useTranslation } from 'react-i18next'
import { Dropdown } from 'react-bootstrap'
import { doLogout } from '../../../api/auth'
import { showErrorNotification } from '../../../redux/ui-notifications/methods'
/**
* Renders a sign-out button as a dropdown item for the user-dropdown.
*/
export const SignOutDropdownButton: React.FC = () => {
useTranslation()
const onSignOut = useCallback(() => {
clearUser()
doLogout().catch(showErrorNotification('login.logoutFailed'))
}, [])
return (
<Dropdown.Item dir='auto' onClick={onSignOut} {...cypressId('user-dropdown-sign-out-button')}>
<ForkAwesomeIcon icon='sign-out' fixedWidth={true} className='mx-2' />
<Trans i18nKey='login.signOut' />
</Dropdown.Item>
)
}

14
src/components/landing-layout/navigation/user-dropdown.tsx
View file

@ -8,11 +8,11 @@ import React from 'react'
import { Dropdown } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { LinkContainer } from 'react-router-bootstrap'
import { clearUser } from '../../../redux/user/methods'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { UserAvatar } from '../../common/user-avatar/user-avatar'
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { cypressId } from '../../../utils/cypress-attribute'
import { SignOutDropdownButton } from './sign-out-dropdown-button'
export const UserDropdown: React.FC = () => {
useTranslation()
@ -25,7 +25,7 @@ export const UserDropdown: React.FC = () => {
return (
<Dropdown alignRight>
<Dropdown.Toggle size='sm' variant='dark' {...cypressId('user-dropdown')} className={'d-flex align-items-center'}>
<UserAvatar name={user.name} photo={user.photo} />
<UserAvatar name={user.displayName} photo={user.photo} />
</Dropdown.Toggle>
<Dropdown.Menu className='text-start'>
@ -41,15 +41,7 @@ export const UserDropdown: React.FC = () => {
<Trans i18nKey='profile.userProfile' />
</Dropdown.Item>
</LinkContainer>
<Dropdown.Item
dir='auto'
onClick={() => {
clearUser()
}}
{...cypressId('user-dropdown-sign-out-button')}>
<ForkAwesomeIcon icon='sign-out' fixedWidth={true} className='mx-2' />
<Trans i18nKey='login.signOut' />
</Dropdown.Item>
<SignOutDropdownButton />
</Dropdown.Menu>
</Dropdown>
)