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

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

46
src/components/profile-page/settings/profile-display-name.tsx
View file

@ -4,33 +4,26 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ChangeEvent, FormEvent } from 'react'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import type { FormEvent } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { Button, Card, Form } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { updateDisplayName } from '../../../api/me'
import { fetchAndSetUser } from '../../login-page/auth/utils'
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { showErrorNotification } from '../../../redux/ui-notifications/methods'
import { DisplayNameField } from '../../common/fields/display-name-field'
import { useOnInputChange } from '../../../hooks/common/use-on-input-change'
/**
* Profile page section for changing the current display name.
*/
export const ProfileDisplayName: React.FC = () => {
const { t } = useTranslation()
const userName = useApplicationState((state) => state.user?.name)
const [displayName, setDisplayName] = useState('')
useEffect(() => {
if (userName !== undefined) {
setDisplayName(userName)
}
}, [userName])
const onChangeDisplayName = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setDisplayName(event.target.value)
}, [])
useTranslation()
const userName = useApplicationState((state) => state.user?.displayName)
const [displayName, setDisplayName] = useState(userName ?? '')
const onChangeDisplayName = useOnInputChange(setDisplayName)
const onSubmitNameChange = useCallback(
(event: FormEvent) => {
event.preventDefault()
@ -42,8 +35,8 @@ export const ProfileDisplayName: React.FC = () => {
)
const formSubmittable = useMemo(() => {
return displayName.trim() !== ''
}, [displayName])
return displayName.trim() !== '' && displayName !== userName
}, [displayName, userName])
return (
<Card className='bg-dark mb-4'>
@ -52,24 +45,7 @@ export const ProfileDisplayName: React.FC = () => {
<Trans i18nKey='profile.userProfile' />
</Card.Title>
<Form onSubmit={onSubmitNameChange} className='text-left'>
<Form.Group controlId='displayName'>
<Form.Label>
<Trans i18nKey='profile.displayName' />
</Form.Label>
<Form.Control
type='text'
size='sm'
placeholder={t('profile.displayName')}
value={displayName}
className='bg-dark text-light'
onChange={onChangeDisplayName}
isValid={formSubmittable}
required
/>
<Form.Text>
<Trans i18nKey='profile.displayNameInfo' />
</Form.Text>
</Form.Group>
<DisplayNameField onChange={onChangeDisplayName} value={displayName} initialValue={userName} />
<Button type='submit' variant='primary' disabled={!formSubmittable}>
<Trans i18nKey='common.save' />