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;