From 3a2ae862ea1dbf6f63f3a94bf5d049b125ce1480 Mon Sep 17 00:00:00 2001
From: Anisha Swain <aswain@aswain.remote.csb>
Date: Wed, 3 Feb 2021 21:57:25 +0530
Subject: [PATCH] addition of login form in login modal

---
 src/components/LoginForm/index.js             | 145 ++++++++++++++++++
 .../LoginForm}/index.less                     |   0
 src/components/LoginModal/index.js            |  51 +++---
 src/pages/LoginHandler/index.js               | 145 +-----------------
 4 files changed, 178 insertions(+), 163 deletions(-)
 create mode 100644 src/components/LoginForm/index.js
 rename src/{pages/LoginHandler => components/LoginForm}/index.less (100%)

diff --git a/src/components/LoginForm/index.js b/src/components/LoginForm/index.js
new file mode 100644
index 000000000..377092984
--- /dev/null
+++ b/src/components/LoginForm/index.js
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Checkbox,
+  ActionGroup,
+  Button,
+  Title,
+} from '@patternfly/react-core';
+import { routerRedux } from 'dva/router';
+import { connect } from 'dva';
+import styles from './index.less';
+
+@connect(auth => ({
+  auth: auth.auth,
+}))
+class LoginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+      variantVal: 'tertiary',
+      btnColor: 'black',
+      btnDisabled: 'true',
+    };
+  }
+
+  componentDidMount = () => {
+    this.disableSubmitBtn();
+  };
+
+  setLoggedIn = payload => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'auth/loadUser',
+      payload,
+    });
+    dispatch(routerRedux.push(`/private`));
+  };
+
+  enableSubmitBtn = () => {
+    this.setState({
+      variantVal: 'primary',
+      btnColor: 'white',
+      btnDisabled: 'false',
+    });
+  };
+
+  disableSubmitBtn = () => {
+    this.setState({
+      variantVal: 'tertiary',
+      btnColor: 'black',
+      btnDisabled: 'true',
+    });
+  };
+
+  handleUserNameInputChange = username => {
+    const { password } = this.state;
+    this.setState({
+      username,
+    });
+    if (password !== '' && username !== '') {
+      this.enableSubmitBtn();
+    } else {
+      this.disableSubmitBtn();
+    }
+  };
+
+  handlePassWordInputChange = password => {
+    const { username } = this.state;
+    this.setState({
+      password,
+    });
+    if (username !== '' && password !== '') {
+      this.enableSubmitBtn();
+    } else {
+      this.disableSubmitBtn();
+    }
+  };
+
+  handleLoginSubmit = () => {
+    const { username, password } = this.state;
+    if (username === 'admin' && password === 'admin') {
+      this.setLoggedIn({ username });
+    } else {
+      alert('Wrong username/password pair');
+    }
+  };
+
+  render() {
+    const { variantVal, btnColor, btnDisabled } = this.state;
+    const form = (
+      <div className={styles.section}>
+        <Form>
+          <FormGroup label="Email address" isRequired fieldId="horizontal-form-name">
+            <TextInput
+              isRequired
+              type="text"
+              id="horizontal-form-name"
+              aria-describedby="horizontal-form-name-helper"
+              name="horizontal-form-name"
+              onChange={this.handleUserNameInputChange}
+            />
+          </FormGroup>
+          <FormGroup label="Password" isRequired fieldId="horizontal-form-password">
+            <TextInput
+              isRequired
+              type="password"
+              id="horizontal-form-password"
+              name="horizontal-form-password"
+              onChange={this.handlePassWordInputChange}
+            />
+          </FormGroup>
+          <FormGroup fieldId="remember-me">
+            <Checkbox
+              label="Keep me logged in"
+              id="alt-form-checkbox-1"
+              name="alt-form-checkbox-1"
+              className={styles.check}
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button
+              isBlock
+              variant={variantVal}
+              onClick={() => this.handleLoginSubmit()}
+              className={styles.btn}
+              id="submitBtn"
+              {...(btnDisabled === 'true' ? { isDisabled: 'true' } : {})}
+            >
+              <Title headingLevel="h4" size="xl" style={{ color: btnColor }}>
+                Submit
+              </Title>
+            </Button>
+          </ActionGroup>
+        </Form>
+      </div>
+    );
+    return <React.Fragment>{form}</React.Fragment>;
+  }
+}
+
+export default LoginForm;
diff --git a/src/pages/LoginHandler/index.less b/src/components/LoginForm/index.less
similarity index 100%
rename from src/pages/LoginHandler/index.less
rename to src/components/LoginForm/index.less
diff --git a/src/components/LoginModal/index.js b/src/components/LoginModal/index.js
index e786b2a0e..6db0f4bea 100644
--- a/src/components/LoginModal/index.js
+++ b/src/components/LoginModal/index.js
@@ -9,6 +9,7 @@ import {
 } from '@patternfly/react-core';
 import { routerRedux } from 'dva/router';
 import { connect } from 'dva';
+import LoginForm from '@/components/LoginForm';
 
 @connect(auth => ({
   auth: auth.auth,
@@ -18,10 +19,32 @@ class LoginModal extends React.Component {
     super(props);
     this.state = {
       isModalOpen: false,
+      modalContent: '',
     };
   }
 
   componentDidMount() {
+    const loginAction = (
+      <div>
+        <TextContent>
+          <Text component={TextVariants.h4}>
+            This action requires login. Please login to Pbench Dashboard to continue.
+          </Text>
+        </TextContent>
+        <Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
+          Login
+        </Button>
+        <Button key="confirm" variant="link" onClick={this.handleSignupModal}>
+          Signup
+        </Button>
+        <Button key="cancel" variant="link" onClick={this.handleModalCancel}>
+          Cancel
+        </Button>
+      </div>
+    );
+    this.setState({
+      modalContent: loginAction,
+    });
     this.handleModalToggle();
   }
 
@@ -40,11 +63,9 @@ class LoginModal extends React.Component {
   };
 
   handleLoginModal = () => {
-    const { dispatch } = this.props;
-    this.setState(({ isModalOpen }) => ({
-      isModalOpen: !isModalOpen,
-    }));
-    dispatch(routerRedux.push(`/auth`));
+    this.setState({
+      modalContent: <LoginForm />,
+    });
   };
 
   handleSignupModal = () => {
@@ -56,8 +77,7 @@ class LoginModal extends React.Component {
   };
 
   render() {
-    const { isModalOpen } = this.state;
-
+    const { isModalOpen, modalContent } = this.state;
     return (
       <React.Fragment>
         <Modal
@@ -65,23 +85,8 @@ class LoginModal extends React.Component {
           isOpen={isModalOpen}
           onClose={this.handleModalCancel}
           showClose="false"
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
-              Login
-            </Button>,
-            <Button key="confirm" variant="link" onClick={this.handleSignupModal}>
-              Signup
-            </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>
+          {modalContent}
         </Modal>
       </React.Fragment>
     );
diff --git a/src/pages/LoginHandler/index.js b/src/pages/LoginHandler/index.js
index 635e7eff2..1dc668b4e 100644
--- a/src/pages/LoginHandler/index.js
+++ b/src/pages/LoginHandler/index.js
@@ -1,146 +1,11 @@
 import React from 'react';
-import {
-  Form,
-  FormGroup,
-  TextInput,
-  Checkbox,
-  ActionGroup,
-  Button,
-  Title,
-} from '@patternfly/react-core';
 import AuthLayout from '@/components/AuthLayout';
-import { routerRedux } from 'dva/router';
-import { connect } from 'dva';
-import styles from './index.less';
+import LoginForm from '@/components/LoginForm';
 
-@connect(auth => ({
-  auth: auth.auth,
-}))
-class LoginHandler extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      username: '',
-      password: '',
-      variantVal: 'tertiary',
-      btnColor: 'black',
-      btnDisabled: 'true',
-    };
-  }
-
-  componentDidMount = () => {
-    this.disableSubmitBtn();
-  };
-
-  setLoggedIn = payload => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'auth/loadUser',
-      payload,
-    });
-    dispatch(routerRedux.push(`/private`));
-  };
-
-  enableSubmitBtn = () => {
-    this.setState({
-      variantVal: 'primary',
-      btnColor: 'white',
-      btnDisabled: 'false',
-    });
-  };
-
-  disableSubmitBtn = () => {
-    this.setState({
-      variantVal: 'tertiary',
-      btnColor: 'black',
-      btnDisabled: 'true',
-    });
-  };
-
-  handleUserNameInputChange = username => {
-    const { password } = this.state;
-    this.setState({
-      username,
-    });
-    if (password !== '' && username !== '') {
-      this.enableSubmitBtn();
-    } else {
-      this.disableSubmitBtn();
-    }
-  };
-
-  handlePassWordInputChange = password => {
-    const { username } = this.state;
-    this.setState({
-      password,
-    });
-    if (username !== '' && password !== '') {
-      this.enableSubmitBtn();
-    } else {
-      this.disableSubmitBtn();
-    }
-  };
-
-  handleLoginSubmit = () => {
-    const { username, password } = this.state;
-    if (username === 'admin' && password === 'admin') {
-      this.setLoggedIn({ username });
-    } else {
-      alert('Wrong username/password pair');
-    }
-  };
-
-  render() {
-    const { variantVal, btnColor, btnDisabled } = this.state;
-    const form = (
-      <div className={styles.section}>
-        <Form>
-          <FormGroup label="Email address" isRequired fieldId="horizontal-form-name">
-            <TextInput
-              isRequired
-              type="text"
-              id="horizontal-form-name"
-              aria-describedby="horizontal-form-name-helper"
-              name="horizontal-form-name"
-              onChange={this.handleUserNameInputChange}
-            />
-          </FormGroup>
-          <FormGroup label="Password" isRequired fieldId="horizontal-form-password">
-            <TextInput
-              isRequired
-              type="password"
-              id="horizontal-form-password"
-              name="horizontal-form-password"
-              onChange={this.handlePassWordInputChange}
-            />
-          </FormGroup>
-          <FormGroup fieldId="remember-me">
-            <Checkbox
-              label="Keep me logged in"
-              id="alt-form-checkbox-1"
-              name="alt-form-checkbox-1"
-              className={styles.check}
-            />
-          </FormGroup>
-          <ActionGroup>
-            <Button
-              isBlock
-              variant={variantVal}
-              onClick={() => this.handleLoginSubmit()}
-              className={styles.btn}
-              id="submitBtn"
-              {...(btnDisabled === 'true' ? { isDisabled: 'true' } : {})}
-            >
-              <Title headingLevel="h4" size="xl" style={{ color: btnColor }}>
-                Submit
-              </Title>
-            </Button>
-          </ActionGroup>
-        </Form>
-      </div>
-    );
-    return <AuthLayout toPreview={form} heading="Log into your Pbench Acount" backOpt="true" />;
-  }
+function LoginHandler() {
+  return (
+    <AuthLayout toPreview={<LoginForm />} heading="Log into your Pbench Acount" backOpt="true" />
+  );
 }
 
 export default LoginHandler;