Skip to content
This repository was archived by the owner on Aug 31, 2022. It is now read-only.

Commit a8515e6

Browse files
author
Anisha Swain
committed
addition of login form in login modal
1 parent 6c5fe14 commit a8515e6

File tree

4 files changed

+178
-163
lines changed

4 files changed

+178
-163
lines changed

‎src/components/LoginForm/index.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React from 'react';
2+
import {
3+
Form,
4+
FormGroup,
5+
TextInput,
6+
Checkbox,
7+
ActionGroup,
8+
Button,
9+
Title,
10+
} from '@patternfly/react-core';
11+
import { routerRedux } from 'dva/router';
12+
import { connect } from 'dva';
13+
import styles from './index.less';
14+
15+
@connect(auth => ({
16+
auth: auth.auth,
17+
}))
18+
class LoginForm extends React.Component {
19+
constructor(props) {
20+
super(props);
21+
this.state = {
22+
username: '',
23+
password: '',
24+
variantVal: 'tertiary',
25+
btnColor: 'black',
26+
btnDisabled: 'true',
27+
};
28+
}
29+
30+
componentDidMount = () => {
31+
this.disableSubmitBtn();
32+
};
33+
34+
setLoggedIn = payload => {
35+
const { dispatch } = this.props;
36+
dispatch({
37+
type: 'auth/loadUser',
38+
payload,
39+
});
40+
dispatch(routerRedux.push(`/private`));
41+
};
42+
43+
enableSubmitBtn = () => {
44+
this.setState({
45+
variantVal: 'primary',
46+
btnColor: 'white',
47+
btnDisabled: 'false',
48+
});
49+
};
50+
51+
disableSubmitBtn = () => {
52+
this.setState({
53+
variantVal: 'tertiary',
54+
btnColor: 'black',
55+
btnDisabled: 'true',
56+
});
57+
};
58+
59+
handleUserNameInputChange = username => {
60+
const { password } = this.state;
61+
this.setState({
62+
username,
63+
});
64+
if (password !== '' && username !== '') {
65+
this.enableSubmitBtn();
66+
} else {
67+
this.disableSubmitBtn();
68+
}
69+
};
70+
71+
handlePassWordInputChange = password => {
72+
const { username } = this.state;
73+
this.setState({
74+
password,
75+
});
76+
if (username !== '' && password !== '') {
77+
this.enableSubmitBtn();
78+
} else {
79+
this.disableSubmitBtn();
80+
}
81+
};
82+
83+
handleLoginSubmit = () => {
84+
const { username, password } = this.state;
85+
if (username === 'admin' && password === 'admin') {
86+
this.setLoggedIn({ username });
87+
} else {
88+
alert('Wrong username/password pair');
89+
}
90+
};
91+
92+
render() {
93+
const { variantVal, btnColor, btnDisabled } = this.state;
94+
const form = (
95+
<div className={styles.section}>
96+
<Form>
97+
<FormGroup label="Email address" isRequired fieldId="horizontal-form-name">
98+
<TextInput
99+
isRequired
100+
type="text"
101+
id="horizontal-form-name"
102+
aria-describedby="horizontal-form-name-helper"
103+
name="horizontal-form-name"
104+
onChange={this.handleUserNameInputChange}
105+
/>
106+
</FormGroup>
107+
<FormGroup label="Password" isRequired fieldId="horizontal-form-password">
108+
<TextInput
109+
isRequired
110+
type="password"
111+
id="horizontal-form-password"
112+
name="horizontal-form-password"
113+
onChange={this.handlePassWordInputChange}
114+
/>
115+
</FormGroup>
116+
<FormGroup fieldId="remember-me">
117+
<Checkbox
118+
label="Keep me logged in"
119+
id="alt-form-checkbox-1"
120+
name="alt-form-checkbox-1"
121+
className={styles.check}
122+
/>
123+
</FormGroup>
124+
<ActionGroup>
125+
<Button
126+
isBlock
127+
variant={variantVal}
128+
onClick={() => this.handleLoginSubmit()}
129+
className={styles.btn}
130+
id="submitBtn"
131+
{...(btnDisabled === 'true' ? { isDisabled: 'true' } : {})}
132+
>
133+
<Title headingLevel="h4" size="xl" style={{ color: btnColor }}>
134+
Submit
135+
</Title>
136+
</Button>
137+
</ActionGroup>
138+
</Form>
139+
</div>
140+
);
141+
return <React.Fragment>{form}</React.Fragment>;
142+
}
143+
}
144+
145+
export default LoginForm;

‎src/pages/LoginHandler/index.less‎ renamed to ‎src/components/LoginForm/index.less‎

File renamed without changes.

‎src/components/LoginModal/index.js‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
} from '@patternfly/react-core';
1010
import { routerRedux } from 'dva/router';
1111
import { connect } from 'dva';
12+
import LoginForm from '@/components/LoginForm';
1213

1314
@connect(auth => ({
1415
auth: auth.auth,
@@ -18,10 +19,32 @@ class LoginModal extends React.Component {
1819
super(props);
1920
this.state = {
2021
isModalOpen: false,
22+
modalContent: '',
2123
};
2224
}
2325

2426
componentDidMount() {
27+
const loginAction = (
28+
<div>
29+
<TextContent>
30+
<Text component={TextVariants.h4}>
31+
This action requires login. Please login to Pbench Dashboard to continue.
32+
</Text>
33+
</TextContent>
34+
<Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
35+
Login
36+
</Button>
37+
<Button key="confirm" variant="link" onClick={this.handleSignupModal}>
38+
Signup
39+
</Button>
40+
<Button key="cancel" variant="link" onClick={this.handleModalCancel}>
41+
Cancel
42+
</Button>
43+
</div>
44+
);
45+
this.setState({
46+
modalContent: loginAction,
47+
});
2548
this.handleModalToggle();
2649
}
2750

@@ -40,11 +63,9 @@ class LoginModal extends React.Component {
4063
};
4164

4265
handleLoginModal = () => {
43-
const { dispatch } = this.props;
44-
this.setState(({ isModalOpen }) => ({
45-
isModalOpen: !isModalOpen,
46-
}));
47-
dispatch(routerRedux.push(`/auth`));
66+
this.setState({
67+
modalContent: <LoginForm />,
68+
});
4869
};
4970

5071
handleSignupModal = () => {
@@ -56,32 +77,16 @@ class LoginModal extends React.Component {
5677
};
5778

5879
render() {
59-
const { isModalOpen } = this.state;
60-
80+
const { isModalOpen, modalContent } = this.state;
6181
return (
6282
<React.Fragment>
6383
<Modal
6484
variant={ModalVariant.small}
6585
isOpen={isModalOpen}
6686
onClose={this.handleModalCancel}
6787
showClose="false"
68-
actions={[
69-
<Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
70-
Login
71-
</Button>,
72-
<Button key="confirm" variant="link" onClick={this.handleSignupModal}>
73-
Signup
74-
</Button>,
75-
<Button key="cancel" variant="link" onClick={this.handleModalCancel}>
76-
Cancel
77-
</Button>,
78-
]}
7988
>
80-
<TextContent>
81-
<Text component={TextVariants.h4}>
82-
This action requires login. Please login to Pbench Dashboard to continue.
83-
</Text>
84-
</TextContent>
89+
{modalContent}
8590
</Modal>
8691
</React.Fragment>
8792
);

‎src/pages/LoginHandler/index.js‎

Lines changed: 5 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,11 @@
11
import React from 'react';
2-
import {
3-
Form,
4-
FormGroup,
5-
TextInput,
6-
Checkbox,
7-
ActionGroup,
8-
Button,
9-
Title,
10-
} from '@patternfly/react-core';
112
import AuthLayout from '@/components/AuthLayout';
12-
import { routerRedux } from 'dva/router';
13-
import { connect } from 'dva';
14-
import styles from './index.less';
3+
import LoginForm from '@/components/LoginForm';
154

16-
@connect(auth => ({
17-
auth: auth.auth,
18-
}))
19-
class LoginHandler extends React.Component {
20-
constructor(props) {
21-
super(props);
22-
this.state = {
23-
username: '',
24-
password: '',
25-
variantVal: 'tertiary',
26-
btnColor: 'black',
27-
btnDisabled: 'true',
28-
};
29-
}
30-
31-
componentDidMount = () => {
32-
this.disableSubmitBtn();
33-
};
34-
35-
setLoggedIn = payload => {
36-
const { dispatch } = this.props;
37-
dispatch({
38-
type: 'auth/loadUser',
39-
payload,
40-
});
41-
dispatch(routerRedux.push(`/private`));
42-
};
43-
44-
enableSubmitBtn = () => {
45-
this.setState({
46-
variantVal: 'primary',
47-
btnColor: 'white',
48-
btnDisabled: 'false',
49-
});
50-
};
51-
52-
disableSubmitBtn = () => {
53-
this.setState({
54-
variantVal: 'tertiary',
55-
btnColor: 'black',
56-
btnDisabled: 'true',
57-
});
58-
};
59-
60-
handleUserNameInputChange = username => {
61-
const { password } = this.state;
62-
this.setState({
63-
username,
64-
});
65-
if (password !== '' && username !== '') {
66-
this.enableSubmitBtn();
67-
} else {
68-
this.disableSubmitBtn();
69-
}
70-
};
71-
72-
handlePassWordInputChange = password => {
73-
const { username } = this.state;
74-
this.setState({
75-
password,
76-
});
77-
if (username !== '' && password !== '') {
78-
this.enableSubmitBtn();
79-
} else {
80-
this.disableSubmitBtn();
81-
}
82-
};
83-
84-
handleLoginSubmit = () => {
85-
const { username, password } = this.state;
86-
if (username === 'admin' && password === 'admin') {
87-
this.setLoggedIn({ username });
88-
} else {
89-
alert('Wrong username/password pair');
90-
}
91-
};
92-
93-
render() {
94-
const { variantVal, btnColor, btnDisabled } = this.state;
95-
const form = (
96-
<div className={styles.section}>
97-
<Form>
98-
<FormGroup label="Email address" isRequired fieldId="horizontal-form-name">
99-
<TextInput
100-
isRequired
101-
type="text"
102-
id="horizontal-form-name"
103-
aria-describedby="horizontal-form-name-helper"
104-
name="horizontal-form-name"
105-
onChange={this.handleUserNameInputChange}
106-
/>
107-
</FormGroup>
108-
<FormGroup label="Password" isRequired fieldId="horizontal-form-password">
109-
<TextInput
110-
isRequired
111-
type="password"
112-
id="horizontal-form-password"
113-
name="horizontal-form-password"
114-
onChange={this.handlePassWordInputChange}
115-
/>
116-
</FormGroup>
117-
<FormGroup fieldId="remember-me">
118-
<Checkbox
119-
label="Keep me logged in"
120-
id="alt-form-checkbox-1"
121-
name="alt-form-checkbox-1"
122-
className={styles.check}
123-
/>
124-
</FormGroup>
125-
<ActionGroup>
126-
<Button
127-
isBlock
128-
variant={variantVal}
129-
onClick={() => this.handleLoginSubmit()}
130-
className={styles.btn}
131-
id="submitBtn"
132-
{...(btnDisabled === 'true' ? { isDisabled: 'true' } : {})}
133-
>
134-
<Title headingLevel="h4" size="xl" style={{ color: btnColor }}>
135-
Submit
136-
</Title>
137-
</Button>
138-
</ActionGroup>
139-
</Form>
140-
</div>
141-
);
142-
return <AuthLayout toPreview={form} heading="Log into your Pbench Acount" backOpt="true" />;
143-
}
5+
function LoginHandler() {
6+
return (
7+
<AuthLayout toPreview={<LoginForm />} heading="Log into your Pbench Acount" backOpt="true" />
8+
);
1449
}
14510

14611
export default LoginHandler;

0 commit comments

Comments
 (0)