mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-17 16:44:49 -04:00
User profile page (#102)
* Added mock profile page * Added translations * Modularized page, added LoginProvider, started validation * Re-adding profile route after router refactoring * Added API calls for password and name change * Added user deletion modal * Refactored translations in profile-page to match new locales * Fixed merge-conflicted locales/de.json * Removed values for password fields * Fixed capitalization of LoginProvider * Fixed codestyle method declarations * Fix names of methods and started countdown * Fix countdown Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Erik Michelson
GitHub
parent
515cf1f34d
commit
747d9686fa
13 changed files with 356 additions and 13 deletions
|
|
@ -9,7 +9,7 @@ import { Trans, useTranslation } from 'react-i18next'
|
|||
import { UserAvatar } from '../../user-avatar/user-avatar'
|
||||
|
||||
export const UserDropdown: React.FC = () => {
|
||||
useTranslation();
|
||||
useTranslation()
|
||||
const user = useSelector((state: ApplicationState) => state.user)
|
||||
|
||||
return (
|
||||
|
|
@ -25,16 +25,12 @@ export const UserDropdown: React.FC = () => {
|
|||
<Trans i18nKey="editor.help.documents.features"/>
|
||||
</Dropdown.Item>
|
||||
</LinkContainer>
|
||||
<LinkContainer to={'/me/export'}>
|
||||
<LinkContainer to={'/profile'}>
|
||||
<Dropdown.Item>
|
||||
<FontAwesomeIcon icon="cloud-download-alt" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.exportUserData"/>
|
||||
<FontAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.userProfile"/>
|
||||
</Dropdown.Item>
|
||||
</LinkContainer>
|
||||
<Dropdown.Item href="#">
|
||||
<FontAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.deleteUser"/>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
onClick={() => {
|
||||
clearUser()
|
||||
|
|
|
|||
31
src/components/landing/pages/profile/profile.tsx
Normal file
31
src/components/landing/pages/profile/profile.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react'
|
||||
import { Col, Row } from 'react-bootstrap'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { Redirect } from 'react-router'
|
||||
import { ApplicationState } from '../../../../redux'
|
||||
import { LoginProvider, LoginStatus } from '../../../../redux/user/types'
|
||||
import { ProfileAccountManagement } from './settings/profile-account-management'
|
||||
import { ProfileChangePassword } from './settings/profile-change-password'
|
||||
import { ProfileDisplayName } from './settings/profile-display-name'
|
||||
|
||||
export const Profile: React.FC = () => {
|
||||
const user = useSelector((state: ApplicationState) => state.user)
|
||||
|
||||
if (user.status === LoginStatus.forbidden) {
|
||||
return (
|
||||
<Redirect to={'/login'} />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="my-3">
|
||||
<Row className="h-100 flex justify-content-center">
|
||||
<Col lg={6}>
|
||||
<ProfileDisplayName/>
|
||||
{ user.provider === LoginProvider.EMAIL ? <ProfileChangePassword/> : null }
|
||||
<ProfileAccountManagement/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react'
|
||||
import { Button, Card, Modal } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { deleteUser } from '../../../../../api/user'
|
||||
import { clearUser } from '../../../../../redux/user/methods'
|
||||
import { getBackendUrl } from '../../../../../utils/apiUtils'
|
||||
|
||||
export const ProfileAccountManagement: React.FC = () => {
|
||||
useTranslation()
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [deletionButtonActive, setDeletionButtonActive] = useState(false)
|
||||
const [countdown, setCountdown] = useState(0)
|
||||
const interval = useRef<NodeJS.Timeout>()
|
||||
|
||||
const stopCountdown = ():void => {
|
||||
if (interval.current) {
|
||||
clearTimeout(interval.current)
|
||||
}
|
||||
}
|
||||
|
||||
const startCountdown = ():void => {
|
||||
interval.current = setInterval(() => {
|
||||
setCountdown((oldValue) => oldValue - 1)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const handleModalClose = () => {
|
||||
setShowDeleteModal(false)
|
||||
stopCountdown()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!showDeleteModal) {
|
||||
return
|
||||
}
|
||||
if (countdown === 0) {
|
||||
setDeletionButtonActive(true)
|
||||
stopCountdown()
|
||||
}
|
||||
}, [countdown, showDeleteModal])
|
||||
|
||||
const handleModalOpen = () => {
|
||||
setShowDeleteModal(true)
|
||||
setDeletionButtonActive(false)
|
||||
setCountdown(10)
|
||||
startCountdown()
|
||||
}
|
||||
|
||||
const deleteUserAccount = async () => {
|
||||
await deleteUser()
|
||||
clearUser()
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Card className="bg-dark mb-4">
|
||||
<Card.Body>
|
||||
<Card.Title><Trans i18nKey="profile.accountManagement"/></Card.Title>
|
||||
<Button variant="secondary" block href={getBackendUrl() + '/me/export'} className="mb-2">
|
||||
<FontAwesomeIcon icon="cloud-download-alt" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.exportUserData"/>
|
||||
</Button>
|
||||
<Button variant="danger" block onClick={handleModalOpen}>
|
||||
<FontAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.deleteUser"/>
|
||||
</Button>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
<Modal show={showDeleteModal} onHide={handleModalClose} animation={true}>
|
||||
<Modal.Body className="text-dark">
|
||||
<h3><Trans i18nKey="profile.modal.deleteUser.message"/></h3>
|
||||
<Trans i18nKey="profile.modal.deleteUser.subMessage"/>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleModalClose}>
|
||||
<Trans i18nKey="common.close"/>
|
||||
</Button>
|
||||
<Button variant="danger" onClick={deleteUserAccount} disabled={!deletionButtonActive}>
|
||||
{deletionButtonActive ? <Trans i18nKey={'profile.modal.deleteUser.title'}/> : countdown}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import React, { ChangeEvent, FormEvent, useState } from 'react'
|
||||
import { Button, Card, Form } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { changePassword } from '../../../../../api/user'
|
||||
|
||||
export const ProfileChangePassword: React.FC = () => {
|
||||
useTranslation()
|
||||
const [oldPassword, setOldPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
const [newPasswordAgain, setNewPasswordAgain] = useState('')
|
||||
const [newPasswordValid, setNewPasswordValid] = useState(false)
|
||||
const [newPasswordAgainValid, setNewPasswordAgainValid] = useState(false)
|
||||
|
||||
const regexPassword = /^[^\s].{5,}$/
|
||||
|
||||
const onChangeNewPassword = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setNewPassword(event.target.value)
|
||||
setNewPasswordValid(regexPassword.test(event.target.value))
|
||||
setNewPasswordAgainValid(event.target.value === newPasswordAgain)
|
||||
}
|
||||
|
||||
const onChangeNewPasswordAgain = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setNewPasswordAgain(event.target.value)
|
||||
setNewPasswordAgainValid(event.target.value === newPassword)
|
||||
}
|
||||
|
||||
const updatePasswordSubmit = async (event: FormEvent) => {
|
||||
await changePassword(oldPassword, newPassword)
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-dark mb-4">
|
||||
<Card.Body>
|
||||
<Card.Title><Trans i18nKey="profile.changePassword.title"/></Card.Title>
|
||||
<Form onSubmit={updatePasswordSubmit} className="text-left">
|
||||
<Form.Group controlId="oldPassword">
|
||||
<Form.Label><Trans i18nKey="profile.changePassword.old"/></Form.Label>
|
||||
<Form.Control
|
||||
type="password"
|
||||
size="sm"
|
||||
className="bg-dark text-white"
|
||||
required
|
||||
onChange={(event) => setOldPassword(event.target.value)}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group controlId="newPassword">
|
||||
<Form.Label><Trans i18nKey="profile.changePassword.new"/></Form.Label>
|
||||
<Form.Control
|
||||
type="password"
|
||||
size="sm"
|
||||
className="bg-dark text-white"
|
||||
required
|
||||
onChange={onChangeNewPassword}
|
||||
isValid={newPasswordValid}
|
||||
/>
|
||||
<Form.Text><Trans i18nKey="profile.changePassword.info"/></Form.Text>
|
||||
</Form.Group>
|
||||
<Form.Group controlId="newPasswordAgain">
|
||||
<Form.Label><Trans i18nKey="profile.changePassword.newAgain"/></Form.Label>
|
||||
<Form.Control
|
||||
type="password"
|
||||
size="sm"
|
||||
className="bg-dark text-white"
|
||||
required
|
||||
onChange={onChangeNewPasswordAgain}
|
||||
isValid={newPasswordAgainValid}
|
||||
isInvalid={newPasswordAgain !== '' && !newPasswordAgainValid}
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={!newPasswordValid || !newPasswordAgainValid}>
|
||||
<Trans i18nKey="common.save"/>
|
||||
</Button>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import React, { ChangeEvent, FormEvent, useState } from 'react'
|
||||
import { Button, Card, Form } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { updateDisplayName } from '../../../../../api/user'
|
||||
import { ApplicationState } from '../../../../../redux'
|
||||
import { getAndSetUser } from '../../../../../utils/apiUtils'
|
||||
|
||||
export const ProfileDisplayName: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const user = useSelector((state: ApplicationState) => state.user)
|
||||
const [submittable, setSubmittable] = useState(false)
|
||||
const [error, setError] = useState(false)
|
||||
const [displayName, setDisplayName] = useState(user.name)
|
||||
|
||||
const regexInvalidDisplayName = /^\s*$/
|
||||
|
||||
const changeNameField = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setSubmittable(!regexInvalidDisplayName.test(event.target.value))
|
||||
setDisplayName(event.target.value)
|
||||
}
|
||||
|
||||
const doAsyncChange = async () => {
|
||||
await updateDisplayName(displayName)
|
||||
await getAndSetUser()
|
||||
}
|
||||
|
||||
const changeNameSubmit = (event: FormEvent) => {
|
||||
doAsyncChange().catch(() => setError(true))
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-dark mb-4">
|
||||
<Card.Body>
|
||||
<Card.Title>
|
||||
<Trans i18nKey="profile.userProfile"/>
|
||||
</Card.Title>
|
||||
<Form onSubmit={changeNameSubmit} 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-white"
|
||||
onChange={changeNameField}
|
||||
isValid={submittable}
|
||||
isInvalid={error}
|
||||
required
|
||||
/>
|
||||
<Form.Text><Trans i18nKey="profile.displayNameInfo"/></Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={!submittable}>
|
||||
<Trans i18nKey="common.save"/>
|
||||
</Button>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue