Implemented UI for the account deletion

packages/app/pages/profile/DeleteAccountPage.tsx

@@ -0,0 +1,36 @@
+import React, { ComponentType, useCallback, useContext, useRef } from 'react';
+
+import { useReduxDispatch } from 'app/functions';
+import { changePassword } from 'app/services/api/accounts';
+import { FormModel } from 'app/components/ui/form';
+import DeleteAccount from 'app/components/profile/deleteAccount';
+import { updateUser } from 'app/components/user/actions';
+import ProfileContext from 'app/components/profile/Context';
+
+const DeleteAccountPage: ComponentType = () => {
+    const context = useContext(ProfileContext);
+    const dispatch = useReduxDispatch();
+    const { current: form } = useRef(new FormModel());
+    const onSubmit = useCallback(
+        () =>
+            context
+                .onSubmit({
+                    form,
+                    // TODO: rework
+                    sendData: () => changePassword(context.userId, form.serialize()),
+                })
+                .then(() => {
+                    dispatch(
+                        updateUser({
+                            passwordChangedAt: Date.now() / 1000,
+                        }),
+                    );
+                    context.goToProfile();
+                }),
+        [context],
+    );
+
+    return <DeleteAccount onSubmit={onSubmit} />;
+};
+
+export default DeleteAccountPage;

packages/app/pages/profile/ProfileController.tsx

@@ -20,6 +20,7 @@ import ChangePasswordPage from 'app/pages/profile/ChangePasswordPage';
 import ChangeUsernamePage from 'app/pages/profile/ChangeUsernamePage';
 import ChangeEmailPage from 'app/pages/profile/ChangeEmailPage';
 import MultiFactorAuthPage from 'app/pages/profile/MultiFactorAuthPage';
+import DeleteAccountPage from 'app/pages/profile/DeleteAccountPage';
 
 interface Props {
     userId: number;
@@ -50,6 +51,7 @@ const ProfileController: ComponentType<Props> = ({ userId, onSubmit, refreshUser
                         <Route path="/profile/change-password" exact component={ChangePasswordPage} />
                         <Route path="/profile/change-username" exact component={ChangeUsernamePage} />
                         <Route path="/profile/change-email/:step?/:code?" component={ChangeEmailPage} />
+                        <Route path="/profile/delete" component={DeleteAccountPage} />
                         <Route path="/profile" exact component={Profile} />
                         <Route path="/" exact component={Profile} />
                         <Redirect to="/404" />