Restructure repository (#426)

organized repository 

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Philip Molares <git@molar.es>

src/components/profile-page/profile-page.tsx

@@ -0,0 +1,34 @@
+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 } from '../../redux/user/types'
+import { ShowIf } from '../common/show-if/show-if'
+import { ProfileAccountManagement } from './settings/profile-account-management'
+import { ProfileChangePassword } from './settings/profile-change-password'
+import { ProfileDisplayName } from './settings/profile-display-name'
+
+export const ProfilePage: React.FC = () => {
+  const user = useSelector((state: ApplicationState) => state.user)
+
+  if (!user) {
+    return (
+      <Redirect to={'/login'}/>
+    )
+  }
+
+  return (
+    <div className="my-3">
+      <Row className="h-100 flex justify-content-center">
+        <Col lg={6}>
+          <ProfileDisplayName/>
+          <ShowIf condition={user.provider === LoginProvider.INTERNAL}>
+            <ProfileChangePassword/>
+          </ShowIf>
+          <ProfileAccountManagement/>
+        </Col>
+      </Row>
+    </div>
+  )
+}

src/components/profile-page/settings/profile-account-management.tsx

@@ -0,0 +1,87 @@
+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/me'
+import { clearUser } from '../../../redux/user/methods'
+import { getApiUrl } from '../../../api/utils'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+
+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={getApiUrl() + '/me/export'} className="mb-2">
+            <ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mx-2"/>
+            <Trans i18nKey="profile.exportUserData"/>
+          </Button>
+          <Button variant="danger" block onClick={handleModalOpen}>
+            <ForkAwesomeIcon icon="trash" fixedWidth={true} className="mx-2"/>
+            <Trans i18nKey="profile.deleteUser"/>
+          </Button>
+        </Card.Body>
+      </Card>
+
+      <Modal show={showDeleteModal} onHide={handleModalClose} animation={true}>
+        <Modal.Body className="text-dark">
+          <h3 dir="auto"><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>
+  )
+}

src/components/profile-page/settings/profile-change-password.tsx

@@ -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/me'
+
+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>
+  )
+}

src/components/profile-page/settings/profile-display-name.tsx

@@ -0,0 +1,75 @@
+import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import { Alert, Button, Card, Form } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { updateDisplayName } from '../../../api/me'
+import { ApplicationState } from '../../../redux'
+import { getAndSetUser } from '../../login-page/auth/utils'
+
+export const ProfileDisplayName: React.FC = () => {
+  const regexInvalidDisplayName = /^\s*$/
+  const { t } = useTranslation()
+  const user = useSelector((state: ApplicationState) => state.user)
+  const [submittable, setSubmittable] = useState(false)
+  const [error, setError] = useState(false)
+  const [displayName, setDisplayName] = useState('')
+
+  useEffect(() => {
+    if (user) {
+      setDisplayName(user.name)
+    }
+  }, [user])
+
+  if (!user) {
+    return <Alert variant={'danger'}>User not logged in</Alert>
+  }
+
+  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>
+  )
+}