closed #419

frontend/src/components/Modals/RemoveAccount.jsx

@@ -0,0 +1,88 @@
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { useState } from 'react';
+
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { PersonFillDash } from 'react-bootstrap-icons';
+
+import { useAuth } from '../../hooks';
+import routes from '../../routes';
+import FormAlert from '../Forms/FormAlert.jsx';
+
+function RemoveAccount({ handleClose, isOpen }) {
+  const { t } = useTranslation();
+  const auth = useAuth();
+
+  const [isSubmitting, setSubmitting] = useState(false);
+  const userInfo = useSelector((state) => state.user.userInfo);
+  const initialFormState = { state: 'initial', message: '' };
+  const [formState, setFormState] = useState(initialFormState);
+
+  const handleRemoveAccount = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setFormState(initialFormState);
+    try {
+      await axios.delete(routes.deleteUserPath(userInfo.id));
+      auth.signOut();
+      handleClose();
+    } catch (err) {
+      if (!err.isAxiosError) {
+        setFormState({
+          state: 'failed',
+          message: 'errors.unknown',
+        });
+        throw err;
+      } else {
+        setFormState({
+          state: 'failed',
+          message: 'errors.network',
+        });
+        throw err;
+      }
+    }
+    setSubmitting(false);
+  };
+
+  return (
+    <Modal centered onHide={handleClose} show={isOpen} size="md">
+      <Modal.Body>
+        <div className="d-flex flex-column gap-3 text-center">
+          <FormAlert
+            onClose={() => setFormState(initialFormState)}
+            state={formState.state}
+          >
+            {t(formState.message)}
+          </FormAlert>
+          <PersonFillDash className="bi fs-1 align-self-center text-danger m-3" />
+          <p>
+            {t('modals.removeAccount.message')}{' '}
+            <b>{t('modals.removeAccount.messageBold')}</b>
+          </p>
+          <div className="d-flex justify-content-end">
+            <Button
+              className="me-2"
+              disabled={isSubmitting}
+              onClick={handleRemoveAccount}
+              type="button"
+              variant="danger"
+            >
+              {t('modals.removeAccount.okButton')}
+            </Button>
+            <Button
+              onClick={handleClose}
+              type="button"
+              variant="outline-danger"
+            >
+              {t('modals.removeAccount.cancelButton')}
+            </Button>
+          </div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+export default RemoveAccount;

frontend/src/components/Modals/index.jsx

@@ -4,6 +4,7 @@ import { actions } from '../../slices';
 
 import SignUpModal from './SignUp.jsx';
 import SignInModal from './SignIn.jsx';
+import RemoveAccount from './RemoveAccount.jsx';
 import NewSnippet from './NewSnippet';
 import ShareSnippet from './ShareSnippet.jsx';
 import InDevelopment from './InDevelopment.jsx';
@@ -13,6 +14,7 @@ import DuplicateSnippetModal from './DuplicateSnippetModal';
 const modals = {
   signingUp: SignUpModal,
   signingIn: SignInModal,
+  removeAccount: RemoveAccount,
   newSnippet: NewSnippet,
   sharingSnippet: ShareSnippet,
   inDevelopment: InDevelopment,

frontend/src/locales/ru.json

@@ -315,6 +315,12 @@
       "message": "Эта функция пока недоступна",
       "okButton": "Понятно"
     },
+    "removeAccount": {
+      "message": "Вы действительно хотите",
+      "messageBold": "удалить учетную запись?",
+      "okButton": "Удалить",
+      "cancelButton": "Отмена"
+    },
     "share": {
       "snippetEmbedLabel": "Код сниппета для вставки",
       "snippetLinkLabel": "Ссылка на сниппет"

frontend/src/pages/settings/index.jsx

@@ -19,7 +19,7 @@ function SettingsPage() {
   const dispatch = useDispatch();
 
   const handleRemoveAccount = () => {
-    dispatch(modalActions.openModal({ type: 'inDevelopment' }));
+    dispatch(modalActions.openModal({ type: 'removeAccount' }));
   };
 
   return (

frontend/src/routes.js

@@ -22,7 +22,7 @@ export default {
   signOutPath: () => [apiPath, 'signout'].join('/'),
 
   // delete user
-  deleteUserPath: (id) => [apiPath, 'users', `:${id}`].join('/'),
+  deleteUserPath: (id) => [apiPath, 'users', `${id}`].join('/'),
 
   // get - shows all snippets
   snippetsPath: () => [apiPath, 'snippets'].join('/'),