From 7213b87dfd5b7d779ce5f7bd7e6e4394a4b07473 Mon Sep 17 00:00:00 2001
From: Anisha1234 <aswain@redhat.com>
Date: Thu, 7 Jan 2021 12:24:48 +0530
Subject: [PATCH] adds login modal to overview page

---
 src/components/LoginHint/index.js  |  4 +-
 src/components/LoginModal/index.js | 80 ++++++++++++++++++++++++++++++
 src/pages/Overview/index.less      |  4 +-
 src/pages/PrivateRoute/index.js    | 11 ++--
 4 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 src/components/LoginModal/index.js

diff --git a/src/components/LoginHint/index.js b/src/components/LoginHint/index.js
index f3de4973f..3dbfdece3 100644
--- a/src/components/LoginHint/index.js
+++ b/src/components/LoginHint/index.js
@@ -7,7 +7,7 @@ import { Title, Button } from '@patternfly/react-core';
   store,
   auth: auth.auth,
 }))
-class Overview extends Component {
+class LoginHint extends Component {
   navigateToAuth = () => {
     const { dispatch } = this.props;
     dispatch(routerRedux.push(`/auth`));
@@ -33,4 +33,4 @@ class Overview extends Component {
   }
 }
 
-export default Overview;
+export default LoginHint;
diff --git a/src/components/LoginModal/index.js b/src/components/LoginModal/index.js
new file mode 100644
index 000000000..4e48f7ca2
--- /dev/null
+++ b/src/components/LoginModal/index.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  TextContent,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+import { routerRedux } from 'dva/router';
+import { connect } from 'dva';
+
+@connect(auth => ({
+  auth: auth.auth,
+}))
+class LoginModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    this.handleModalToggle();
+  }
+
+  handleModalToggle = () => {
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+  };
+
+  handleModalCancel = () => {
+    const { dispatch } = this.props;
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+    dispatch(routerRedux.push(`/`));
+  };
+
+  handleLoginModal = () => {
+    const { dispatch } = this.props;
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+    dispatch(routerRedux.push(`/auth`));
+  };
+
+  render() {
+    const { isModalOpen } = this.state;
+
+    return (
+      <React.Fragment>
+        <Modal
+          variant={ModalVariant.small}
+          isOpen={isModalOpen}
+          onClose={this.handleModalCancel}
+          showClose="false"
+          actions={[
+            <Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
+              Proceed
+            </Button>,
+            <Button key="cancel" variant="link" onClick={this.handleModalCancel}>
+              Cancel
+            </Button>,
+          ]}
+        >
+          <TextContent>
+            <Text component={TextVariants.h4}>
+              This action requires login. Please login to Pbench Dashboard to continue.
+            </Text>
+          </TextContent>
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
+
+export default LoginModal;
diff --git a/src/pages/Overview/index.less b/src/pages/Overview/index.less
index da8c780f2..63d293b9d 100644
--- a/src/pages/Overview/index.less
+++ b/src/pages/Overview/index.less
@@ -76,8 +76,8 @@
 .dropdownContent {
   position: absolute;
   background-color: #f1f1f1;
-  margin-right: -2%;
-  min-width: 160px;
+  margin-left: -5%;
+  min-width: 130px;
   overflow: auto;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
diff --git a/src/pages/PrivateRoute/index.js b/src/pages/PrivateRoute/index.js
index 739939f91..7ae54f6da 100644
--- a/src/pages/PrivateRoute/index.js
+++ b/src/pages/PrivateRoute/index.js
@@ -1,21 +1,20 @@
 import React, { Component, Fragment } from 'react';
-import AuthLayout from '@/components/AuthLayout';
-import { routerRedux } from 'dva/router';
+// import AuthLayout from '@/components/AuthLayout';
+// import { routerRedux } from 'dva/router';
 import { connect } from 'dva';
+import LoginModal from '@/components/LoginModal';
 
 @connect(auth => ({
   auth: auth.auth,
 }))
 class PrivateRoute extends Component {
   render() {
-    const { children, auth, dispatch } = this.props;
+    const { children, auth } = this.props;
 
     if (auth.auth.username === 'admin') {
       return <Fragment>{children}</Fragment>;
     }
-
-    dispatch(routerRedux.push(`/auth`));
-    return <AuthLayout />;
+    return <LoginModal />;
   }
 }
 export default PrivateRoute;