Add delete account button

src/App.tsx

@@ -8,6 +8,7 @@ import './App.less';
 import Home from './containers/home/Home';
 import Signup from './containers/signup/Signup';
 import Login from './containers/login/Login';
+import Settings from './containers/settings/Settings';
 import BlockTemplate from './containers/template-1-col-block/Template';
 import GridTemplate from './containers/template-24-col-grid/Template';
 
@@ -38,6 +39,7 @@ const App: React.FC = () => {
                 <Route path="/grid-template" exact component={GridTemplate} />
                 <Route path="/login" exact component={Login} />
                 <Route path="/signup" exact component={Signup} />
+                <Route path="/settings" exact component={Settings} />
                 <Route path="*" exact component={NotFound} />
               </Switch>
             </div>

src/auth/authAPI.tsx

@@ -5,6 +5,7 @@ enum ROUTES {
   LOGIN = '/api/v1/user/login/',
   SIGNUP = '/api/v1/user/signup/',
   REFRESH = '/api/v1/user/login/refresh/',
+  DELETE_ACCOUNT = '/api/v1/user',
 }
 
 interface LoginRequest {
@@ -51,6 +52,22 @@ export const logout: () => Promise<void> = async () =>
       Token.removeRefreshToken();
     });
 
+export const deleteAccount: () => Promise<void> = async () =>
+  Axios.delete(ROUTES.DELETE_ACCOUNT, {
+    headers: {
+      'X-Access-Token': Token.getAccessToken(),
+      'X-Refresh-Token': Token.getRefreshToken(),
+    },
+  })
+    .then((response) => {
+      Token.removeAccessToken();
+      Token.removeRefreshToken();
+    })
+    .catch(() => {
+      Token.removeAccessToken();
+      Token.removeRefreshToken();
+    });
+
 export const refresh: () => Promise<void> = async () =>
   Axios.post(ROUTES.REFRESH, null, {
     headers: {

src/components/NavBar.tsx

@@ -20,6 +20,8 @@ const NavBar: React.FC = () => {
         return '4';
       case '/signup':
         return '5';
+      case '/settings':
+        return '6';
       default:
         return '1';
     }
@@ -72,6 +74,14 @@ const NavBar: React.FC = () => {
         >
           Sign Up
         </Menu.Item>
+        <Menu.Item
+          key="6"
+          onClick={() => {
+            history.push('/settings');
+          }}
+        >
+          Settings
+        </Menu.Item>
       </Menu>
     </Header>
   );

src/containers/home/Home.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import './home.less';
 import { Button, Form, Input, Typography } from 'antd';
 import { login } from '../../auth/authAPI';
 const { Title } = Typography;

src/containers/login/Login.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import './login.less';
 import { Button, Form, Input, Typography } from 'antd';
 import { login } from '../../auth/authAPI';
 import { Link } from 'react-router-dom';

src/containers/not-found/NotFound.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 import { Typography } from 'antd';
-import './not-found.less';
 const { Title } = Typography;
 
 /*

src/containers/settings/Settings.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { Button, Form, Typography } from 'antd';
+import { deleteAccount } from '../../auth/authAPI';
+const { Title } = Typography;
+
+const Settings: React.FC = () => {
+  const onFinish = () => {
+    deleteAccount();
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Settings</title>
+        <meta name="description" content="Description goes here." />
+      </Helmet>
+      <div className="content-container">
+        <Title>Settings</Title>
+        <Form name="basic" onFinish={onFinish}>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              Delete Account
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+export default Settings;

src/containers/signup/Signup.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import './signup.less';
 import { Button, Form, Input, Typography } from 'antd';
 import { signup } from '../../auth/authAPI';
 import { Link } from 'react-router-dom';

src/containers/template-1-col-block/Template.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import './template.less';
 import { Typography } from 'antd';
 import { Link } from 'react-router-dom';