Implemented handlers to delete/restore account. Implemented "account deleted" page

packages/app/components/profile/AccountDeleted.story.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ProfileLayout } from 'app/components/profile/Profile.story';
+
+import AccountDeleted from './AccountDeleted';
+
+storiesOf('Components/Profile', module).add('AccountDeleted', () => (
+    <ProfileLayout>
+        <AccountDeleted onRestore={action('onRestore')} />
+    </ProfileLayout>
+));

packages/app/components/profile/AccountDeleted.tsx

@@ -0,0 +1,48 @@
+import React, { ComponentType } from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import { Helmet } from 'react-helmet-async';
+
+import { Button } from 'app/components/ui/form';
+
+import styles from './accountDeleted.scss';
+
+interface Props {
+    onRestore?: () => void;
+}
+
+const AccountDeleted: ComponentType<Props> = ({ onRestore }) => {
+    return (
+        <div className={styles.wrapper}>
+            <Message key="accountDeleted" defaultMessage="Account deleted">
+                {(pageTitle: string) => (
+                    <h2 className={styles.title}>
+                        <Helmet title={pageTitle} />
+                        {pageTitle}
+                    </h2>
+                )}
+            </Message>
+
+            <div className={styles.description}>
+                <Message
+                    key="accountDeletedDescription"
+                    // TODO: verify translation
+                    defaultMessage="The account has been marked for deletion and will be permanently removed within a week. Until then, all activity on the account has been suspended."
+                />
+            </div>
+
+            <div className={styles.description}>
+                <Message
+                    key="ifYouWantToRestoreAccount"
+                    // TODO: verify translation
+                    defaultMessage="If you want to restore your account, click on the button below."
+                />
+            </div>
+
+            <Button onClick={onRestore} color="black" small>
+                <Message key="restoreAccount" defaultMessage="Restore account" />
+            </Button>
+        </div>
+    );
+};
+
+export default AccountDeleted;

packages/app/components/profile/Profile.story.tsx

@@ -22,6 +22,7 @@ storiesOf('Components/Profile', module).add('Profile', () => (
                 hasMojangUsernameCollision: true,
                 isActive: true,
                 isGuest: false,
+                isDeleted: false,
                 isOtpEnabled: true,
                 lang: 'unknown',
                 passwordChangedAt: 1595328712,

packages/app/components/profile/accountDeleted.scss

@@ -0,0 +1,24 @@
+.wrapper {
+    text-align: center;
+
+    @media (min-height: 600px) {
+        margin-top: 140px;
+    }
+}
+
+.title {
+    composes: indexTitle from '~app/components/profile/profile.scss';
+
+    margin-bottom: 25px;
+}
+
+.description {
+    composes: indexDescription from '~app/components/profile/profile.scss';
+
+    margin: 0 auto 20px auto;
+    max-width: 330px;
+
+    &:last-of-type {
+        margin-bottom: 25px;
+    }
+}

packages/app/components/user/reducer.ts

@@ -10,6 +10,7 @@ export interface User {
     lang: string;
     isGuest: boolean;
     isActive: boolean;
+    isDeleted: boolean;
     isOtpEnabled: boolean;
     passwordChangedAt: number;
     hasMojangUsernameCollision: boolean;
@@ -31,6 +32,7 @@ const defaults: State = {
     avatar: '',
     lang: '',
     isActive: false,
+    isDeleted: false,
     isOtpEnabled: false,
     shouldAcceptRules: false, // whether user need to review updated rules
     passwordChangedAt: 0,