fix: Move content into to frontend directory

Doing this BEFORE the merge prevents a lot of merge conflicts.

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

frontend/src/components/profile-page/account-management/account-deletion-modal.tsx

@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import type { ModalVisibilityProps } from '../../common/modals/common-modal'
+import { CommonModal } from '../../common/modals/common-modal'
+import { Trans, useTranslation } from 'react-i18next'
+import { Button, Modal } from 'react-bootstrap'
+import { CountdownButton } from '../../common/countdown-button/countdown-button'
+import { deleteUser } from '../../../api/me'
+import { clearUser } from '../../../redux/user/methods'
+import { useUiNotifications } from '../../notifications/ui-notification-boundary'
+
+/**
+ * Confirmation modal for deleting your account.
+ *
+ * @param show True if the modal should be shown, false otherwise.
+ * @param onHide Callback that is fired when the modal is closed.
+ */
+export const AccountDeletionModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
+  useTranslation()
+  const { showErrorNotification, dispatchUiNotification } = useUiNotifications()
+
+  const deleteUserAccount = useCallback(() => {
+    deleteUser()
+      .then(() => {
+        clearUser()
+        return dispatchUiNotification(
+          'profile.modal.deleteUser.notificationTitle',
+          'profile.modal.deleteUser.notificationText',
+          {}
+        )
+      })
+      .catch(showErrorNotification('profile.modal.deleteUser.failed'))
+      .finally(() => {
+        if (onHide) {
+          onHide()
+        }
+      })
+  }, [dispatchUiNotification, onHide, showErrorNotification])
+
+  return (
+    <CommonModal show={show} title={'profile.modal.deleteUser.message'} onHide={onHide} showCloseButton={true}>
+      <Modal.Body>
+        <Trans i18nKey='profile.modal.deleteUser.subMessage' />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant='secondary' onClick={onHide}>
+          <Trans i18nKey='common.close' />
+        </Button>
+        <CountdownButton variant='danger' onClick={deleteUserAccount} countdownStartSeconds={10}>
+          <Trans i18nKey={'profile.modal.deleteUser.title'} />
+        </CountdownButton>
+      </Modal.Footer>
+    </CommonModal>
+  )
+}

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

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment } from 'react'
+import { Button, Card, Row } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { AccountDeletionModal } from './account-deletion-modal'
+import { useBooleanState } from '../../../hooks/common/use-boolean-state'
+
+/**
+ * Profile page section that allows to export all data from the account or to delete the account.
+ */
+export const ProfileAccountManagement: React.FC = () => {
+  useTranslation()
+  const [modalVisibility, showModal, closeModal] = useBooleanState()
+
+  return (
+    <Fragment>
+      <Card className='bg-dark mb-4'>
+        <Card.Body>
+          <Card.Title>
+            <Trans i18nKey='profile.accountManagement' />
+          </Card.Title>
+          <Row>
+            <Button variant='secondary' href={'me/export'} className='mb-2'>
+              <ForkAwesomeIcon icon='cloud-download' fixedWidth={true} className='mx-2' />
+              <Trans i18nKey='profile.exportUserData' />
+            </Button>
+          </Row>
+          <Row>
+            <Button variant='danger' onClick={showModal}>
+              <ForkAwesomeIcon icon='trash' fixedWidth={true} className='mx-2' />
+              <Trans i18nKey='profile.deleteUser' />
+            </Button>
+          </Row>
+        </Card.Body>
+      </Card>
+      <AccountDeletionModal show={modalVisibility} onHide={closeModal} />
+    </Fragment>
+  )
+}