Skip to content

Commit b3a8cec

Browse files
MacKentochMacKentoch
committed
migration
1 parent 6ed1792 commit b3a8cec

File tree

1 file changed

+115
-118
lines changed

1 file changed

+115
-118
lines changed

‎front/src/pages/login/Login.tsx‎

Lines changed: 115 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -10,132 +10,49 @@ import userInfoMock from '../../mock/userInfo.json';
1010
import { AuthContextProps } from '../../contexts/auth/consumerHOC';
1111
import FadeInEntrance from '../../components/fadeInEntrance';
1212

13-
1413
type Props = {} & RouteComponentProps<any, any> & AuthContextProps;
1514

16-
17-
function Login({disconnectUser = () => {}, history, setToken, setUserInfo}: Props) {
18-
const [email, setEmail] = useState<string>('')
19-
const [password, setPassword] = useState<string>('')
20-
const [isLogging, setIsLogging] = useState<boolean>(false)
15+
function Login({
16+
disconnectUser = () => {},
17+
history,
18+
setToken,
19+
setUserInfo,
20+
}: Props) {
21+
const [email, setEmail] = useState<string>('');
22+
const [password, setPassword] = useState<string>('');
23+
const [isLogging, setIsLogging] = useState<boolean>(false);
2124

2225
// #region on mount
2326
useEffect(() => {
2427
disconnectUser(); // diconnect user: remove token and user info
25-
}, [])
28+
}, []);
2629
// #endregion
2730

2831
// #region input callbacks
29-
const handlesOnEmailChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
32+
const goHome = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
3033
event && event.preventDefault();
31-
// should add some validator before setState in real use cases
32-
setEmail(event.target.value.trim());
34+
history.push({ pathname: '/' });
3335
}, []);
3436

35-
const handlesOnPasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
37+
const handlesOnEmailChange = useCallback(
38+
(event: React.ChangeEvent<HTMLInputElement>) => {
39+
event && event.preventDefault();
40+
// should add some validator before setState in real use cases
41+
setEmail(event.target.value.trim());
42+
},
43+
[],
44+
);
45+
46+
const handlesOnPasswordChange = (
47+
event: React.ChangeEvent<HTMLInputElement>,
48+
) => {
3649
event && event.preventDefault();
3750
// should add some validator before setState in real use cases
3851
setPassword(event.target.value.trim());
3952
};
40-
// #endregion
4153

42-
return (
43-
<FadeInEntrance>
44-
<div className="content">
45-
<Row>
46-
<Col md={{ size: 4, offset: 4 }} xs={{ size: 10, offset: 1 }}>
47-
<form className="form-horizontal" noValidate>
48-
<fieldset>
49-
<legend>Login</legend>
50-
51-
<div className="form-group">
52-
<label
53-
htmlFor="inputEmail"
54-
className="col-lg-2 control-label"
55-
>
56-
Email
57-
</label>
58-
<Col lg={12}>
59-
<input
60-
type="text"
61-
className="form-control"
62-
id="inputEmail"
63-
placeholder="Email"
64-
autoComplete="username email"
65-
value={email}
66-
onChange={handlesOnEmailChange}
67-
/>
68-
</Col>
69-
</div>
70-
71-
<div className="form-group">
72-
<label
73-
htmlFor="inputPassword"
74-
className="col-lg-2 control-label"
75-
>
76-
Password
77-
</label>
78-
<Col lg={12}>
79-
<input
80-
type="password"
81-
className="form-control"
82-
id="inputPassword"
83-
placeholder="Password"
84-
autoComplete="current-password"
85-
value={password}
86-
onChange={this.handlesOnPasswordChange}
87-
/>
88-
</Col>
89-
</div>
90-
91-
<div className="form-group">
92-
<Col lg={{ size: 12 }}>
93-
<Button
94-
className="login-button btn-block"
95-
color="primary"
96-
disabled={isLogging}
97-
onClick={this.handlesOnLogin}
98-
>
99-
{isLogging ? (
100-
<span>
101-
login in... &nbsp;
102-
<i className="fa fa-spinner fa-pulse fa-fw" />
103-
</span>
104-
) : (
105-
<span>Login</span>
106-
)}
107-
</Button>
108-
</Col>
109-
</div>
110-
</fieldset>
111-
</form>
112-
</Col>
113-
</Row>
114-
<Row>
115-
<Col md={{ size: 4, offset: 4 }} xs={{ size: 10, offset: 1 }}>
116-
<div className="pull-right">
117-
<Button className="btn-block" onClick={this.goHome}>
118-
back to home
119-
</Button>
120-
</div>
121-
</Col>
122-
</Row>
123-
</div>
124-
</FadeInEntrance>
125-
);
126-
}
127-
128-
129-
130-
131-
132-
133-
134-
135-
handlesOnLogin = async (event: React.MouseEvent<HTMLButtonElement>) => {
136-
if (event) {
137-
event.preventDefault();
138-
}
54+
const handlesOnLogin = async (event: React.MouseEvent<HTMLButtonElement>) => {
55+
event && event.preventDefault();
13956

14057
const { history, setToken, setUserInfo } = this.props;
14158
const { email, password } = this.state;
@@ -147,7 +64,7 @@ function Login({disconnectUser = () => {}, history, setToken, setUserInfo}: Prop
14764

14865
try {
14966
this.setState({ isLogging: true });
150-
const response = await this.logUser(userLogin);
67+
const response = await logUser(userLogin);
15168
const {
15269
data: { token, user },
15370
} = response;
@@ -165,8 +82,9 @@ function Login({disconnectUser = () => {}, history, setToken, setUserInfo}: Prop
16582
/* eslint-enable no-console */
16683
}
16784
};
85+
// #endregion
16886

169-
logUser = async (login: string = '', password: string = '') => {
87+
const logUser = async (login: string = '', password: string = '') => {
17088
const __SOME_LOGIN_API__ = 'login';
17189
const url = `${getLocationOrigin()}/${__SOME_LOGIN_API__}`;
17290
const method = 'post';
@@ -205,13 +123,92 @@ function Login({disconnectUser = () => {}, history, setToken, setUserInfo}: Prop
205123
}
206124
};
207125

208-
goHome = (event: React.MouseEvent<HTMLButtonElement>) => {
209-
if (event) {
210-
event.preventDefault();
211-
}
212-
const { history } = this.props;
213-
history.push({ pathname: '/' });
214-
};
126+
return (
127+
<FadeInEntrance>
128+
<div className="content">
129+
<Row>
130+
<Col md={{ size: 4, offset: 4 }} xs={{ size: 10, offset: 1 }}>
131+
<form className="form-horizontal" noValidate>
132+
<fieldset>
133+
<legend>Login</legend>
134+
135+
<div className="form-group">
136+
<label
137+
htmlFor="inputEmail"
138+
className="col-lg-2 control-label"
139+
>
140+
Email
141+
</label>
142+
<Col lg={12}>
143+
<input
144+
type="text"
145+
className="form-control"
146+
id="inputEmail"
147+
placeholder="Email"
148+
autoComplete="username email"
149+
value={email}
150+
onChange={handlesOnEmailChange}
151+
/>
152+
</Col>
153+
</div>
154+
155+
<div className="form-group">
156+
<label
157+
htmlFor="inputPassword"
158+
className="col-lg-2 control-label"
159+
>
160+
Password
161+
</label>
162+
<Col lg={12}>
163+
<input
164+
type="password"
165+
className="form-control"
166+
id="inputPassword"
167+
placeholder="Password"
168+
autoComplete="current-password"
169+
value={password}
170+
onChange={handlesOnPasswordChange}
171+
/>
172+
</Col>
173+
</div>
174+
175+
<div className="form-group">
176+
<Col lg={{ size: 12 }}>
177+
<Button
178+
className="login-button btn-block"
179+
color="primary"
180+
disabled={isLogging}
181+
onClick={handlesOnLogin}
182+
>
183+
{isLogging ? (
184+
<span>
185+
login in... &nbsp;
186+
<i className="fa fa-spinner fa-pulse fa-fw" />
187+
</span>
188+
) : (
189+
<span>Login</span>
190+
)}
191+
</Button>
192+
</Col>
193+
</div>
194+
</fieldset>
195+
</form>
196+
</Col>
197+
</Row>
198+
<Row>
199+
<Col md={{ size: 4, offset: 4 }} xs={{ size: 10, offset: 1 }}>
200+
<div className="pull-right">
201+
<Button className="btn-block" onClick={goHome}>
202+
back to home
203+
</Button>
204+
</div>
205+
</Col>
206+
</Row>
207+
</div>
208+
</FadeInEntrance>
209+
);
215210
}
216211

212+
Login.DisplayName = 'Login';
213+
217214
export default Login;

0 commit comments

Comments
 (0)