Skip to content

Commit 3667210

Browse files
bestinbthomasbestinbthomas
committed
fixup! add forgot password in login
1 parent c5dd4c3 commit 3667210

File tree

4 files changed

+130
-174
lines changed

4 files changed

+130
-174
lines changed

‎src/app/apiFetch/User.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export const changeUserPassword = (body: UserInterfaces.ChangeUserPassword) => {
140140
method: 'POST',
141141
})
142142
.then((response) => {
143-
return headResponseWrapper(response, HeadReqType.USERNAME);
143+
return response;
144144
})
145145
.then((data) => {
146146
return data;

‎src/app/components/Authentication/Login.tsx‎

Lines changed: 122 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import { API_BASE_URL } from 'app/../config/config';
4-
import PopUpMenu from 'app/components/PopUpMenu';
53
import { Routes } from 'app/routes';
64
import * as styles from 'app/styles/Authentication.module.css';
75
import * as registerStyles from 'app/styles/Register.module.css';
@@ -11,11 +9,7 @@ import classnames from 'classnames';
119
import * as React from 'react';
1210
import { Col, Row } from 'react-bootstrap';
1311
import { Redirect } from 'react-router-dom';
14-
15-
export enum OAUTH_ROUTES {
16-
GOOGLE = 'login/google',
17-
GITHUB = 'login/github',
18-
}
12+
import { API_BASE_URL } from '../../../config/config';
1913

2014
export class Login extends React.Component<LoginInterfaces.Props, LoginInterfaces.State> {
2115
private loginRef = React.createRef<HTMLFormElement>();
@@ -61,7 +55,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
6155
}
6256

6357
public render() {
64-
const { isForgotPassword, username, password } = this.state;
58+
const { username, password, isForgotPassword } = this.state;
6559
const { errorMessage, updateErrorMessage, isLoginLoading, isLoggedIn } = this.props;
6660
if (isLoggedIn) {
6761
return <Redirect to={Routes.ROOT} />;
@@ -84,80 +78,48 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
8478
account credentials to login.
8579
</div>
8680
</div>
87-
<<<<<<< HEAD
88-
</div>
89-
<div className={classnames('container px-0 justify-content-center', styles.loginForm)}>
90-
<Row
91-
onClick={(e) => {
92-
window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GOOGLE}`;
93-
}}
94-
className={classnames(
95-
styles['google-btn'],
96-
'border justify-content-center my-3',
97-
styles.oauth_btn,
98-
styles.no_margin,
99-
)}
100-
>
101-
<div className={classnames('col-auto my-2', styles.img_div)}>
102-
<img src="assets/img/google.png" height="24" width="24" />
103-
</div>
104-
<p className="col-auto">Log in with Google</p>
105-
</Row>
106-
<Row
107-
onClick={(e) => {
108-
window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GITHUB}`;
109-
}}
110-
className={classnames(
111-
'justify-content-center',
112-
styles['github-btn'],
113-
styles.oauth_btn,
114-
styles.no_margin,
115-
)}
116-
>
117-
<div className={classnames('col-auto my-2', styles.img_div)}>
118-
<img src="assets/img/github.png" height="24" width="24" />
119-
</div>
120-
<p className="col-auto">Log in with Github</p>
121-
</Row>
122-
<Row className={classnames(styles.no_margin)}>
123-
<div className={classnames(styles.separator)}>
124-
<div className={classnames(styles.wordWithLine)}>
125-
<span className={classnames(styles.text)}>or</span>
81+
<div className={classnames('container px-0 justify-content-center', styles.loginForm)}>
82+
<Row
83+
onClick={(e) => {
84+
window.location.href = `${API_BASE_URL}${Routes.GOOGLE_OAUTH}`;
85+
}}
86+
className={classnames(
87+
styles['google-btn'],
88+
'border justify-content-center my-3',
89+
styles.oauth_btn,
90+
styles.no_margin,
91+
)}
92+
>
93+
<div className={classnames('col-auto my-2', styles.img_div)}>
94+
<img src="assets/img/google.png" height="24" width="24" />
12695
</div>
127-
</div>
128-
</Row>
129-
</div>
130-
<Row className={classnames(styles.no_margin)}>
131-
<div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
132-
<form
133-
className={classnames(styles.loginForm)}
134-
noValidate
135-
ref={this.loginRef}
136-
onSubmit={this.handleLogin}
96+
<p className="col-auto">Log in with Google</p>
97+
</Row>
98+
<Row
99+
onClick={(e) => {
100+
window.location.href = `${API_BASE_URL}${Routes.GITHUB_OAUTH}`;
101+
}}
102+
className={classnames(
103+
'justify-content-center',
104+
styles['github-btn'],
105+
styles.oauth_btn,
106+
styles.no_margin,
107+
)}
137108
>
138-
<div className="form-row">
139-
<div className="col mb-4">
140-
<div className={classnames(styles['login-label'])}> Email </div>
141-
<div className="input-group">
142-
<input
143-
type="email"
144-
className={classnames('form-control', styles['login-input'])}
145-
id="validationUsername"
146-
aria-describedby="inputGroupPrepend"
147-
required
148-
value={username}
149-
onChange={(e) =>
150-
this.setState({
151-
username: e.target.value,
152-
})
153-
}
154-
/>
155-
<div className={classnames('invalid-feedback', styles['login-error'])}>
156-
{' '}
157-
Please enter a valid Email.{' '}
158-
=======
159-
160-
<Row>
109+
<div className={classnames('col-auto my-2', styles.img_div)}>
110+
<img src="assets/img/github.png" height="24" width="24" />
111+
</div>
112+
<p className="col-auto">Log in with Github</p>
113+
</Row>
114+
<Row className={classnames(styles.no_margin)}>
115+
<div className={classnames(styles.separator)}>
116+
<div className={classnames(styles.wordWithLine)}>
117+
<span className={classnames(styles.text)}>or</span>
118+
</div>
119+
</div>
120+
</Row>
121+
</div>
122+
<Row className={classnames(styles.no_margin)}>
161123
<div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
162124
<form
163125
className={classnames(styles.loginForm)}
@@ -186,7 +148,6 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
186148
{' '}
187149
Please enter a valid Email.{' '}
188150
</div>
189-
>>>>>>> add forgot password in login
190151
</div>
191152
</div>
192153
</div>
@@ -261,7 +222,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
261222
<Row>
262223
<Col className="text-center my-3 ml-auto mr-auto">
263224
<div className="text-dark">
264-
Don't have an account?{' '}
225+
Don't have an account?
265226
<a
266227
href={Routes.REGISTER}
267228
className={classnames(styles['create-one-button'])}
@@ -284,91 +245,87 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
284245
<div className={classnames(styles.welcomeBack)}>
285246
<h1> Forgot your password? </h1>
286247
</div>
287-
<<<<<<< HEAD
288-
</Row>
289-
<Row className={classnames(styles.no_margin)}>
290-
<Col className="text-center my-3 ml-auto mr-auto">
291-
<div className="text-dark">
292-
Don't have an account?{' '}
293-
<a
294-
href={Routes.REGISTER}
295-
className={classnames(styles['create-one-button'])}
296-
onClick={() => {
297-
updateErrorMessage('');
298-
this.props.handleSelectPanel(AuthType.REGISTER);
299-
}}
300-
=======
301248
<Row>
302-
<div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
303-
<form
304-
className={classnames(styles.loginForm)}
305-
noValidate
306-
ref={this.forgotPasswordRef}
307-
onSubmit={this.handleForgotPassword}
308-
>>>>>>> add forgot password in login
309-
>
310-
<div className="form-row">
311-
<div className="col mb-4">
312-
<div className={classnames(styles['login-label'])}> Your Email: </div>
313-
<div className="input-group">
314-
<input
315-
type="email"
316-
className={classnames('form-control', styles['login-input'])}
317-
id="validationUsername"
318-
aria-describedby="inputGroupPrepend"
319-
required
320-
value={username}
321-
onChange={(e) =>
322-
this.setState({
323-
username: e.target.value,
324-
})
325-
}
326-
/>
327-
<div className={classnames('invalid-feedback', styles['login-error'])}>
328-
{' '}
329-
Please enter a valid Email.{' '}
330-
</div>
331-
</div>
332-
</div>
333-
</div>
334-
335-
<div className={classnames('form-row', styles['error-row'])}>
336-
<div
337-
className={
338-
!errorMessage
339-
? classnames(
340-
'col text-center mt -0 mb-2 ',
341-
styles['register-error-inactive'],
342-
registerStyles.errorMessage,
343-
)
344-
: classnames(
345-
'col text-center mt -0 mb-2 errorMessage',
346-
styles['register-error-active'],
347-
registerStyles.errorMessageLogin,
348-
styles['login-error-active'],
349-
)
350-
}
351-
>
352-
{errorMessage}
353-
</div>
354-
</div>
355-
<div className="form-row">
356-
<div className="col text-center">
357-
<button
358-
className={classnames('btn btn-info', styles.loginButton)}
359-
type="submit"
249+
<Col className="text-center my-3 ml-auto mr-auto">
250+
<div className="text-dark">
251+
Don't have an account?
252+
<a
253+
href={Routes.REGISTER}
254+
className={classnames(styles['create-one-button'])}
255+
onClick={() => {
256+
updateErrorMessage('');
257+
this.props.handleSelectPanel(AuthType.REGISTER);
258+
}}
259+
>
260+
Create one
261+
</a>
262+
<Row>
263+
<div className={classnames('col-sm-10', styles.form)}>
264+
<form
265+
className={classnames(styles.loginForm)}
266+
noValidate
267+
ref={this.forgotPasswordRef}
268+
onSubmit={this.handleForgotPassword}
360269
>
361-
Reset Password&nbsp;
362-
</button>
270+
<div className="form-row">
271+
<div className="col mb-4">
272+
<div className={classnames(styles['login-label'])}> Your Email: </div>
273+
<div className="input-group">
274+
<input
275+
type="email"
276+
className={classnames('form-control', styles['login-input'])}
277+
id="validationUsername"
278+
aria-describedby="inputGroupPrepend"
279+
required
280+
value={username}
281+
onChange={(e) =>
282+
this.setState({
283+
username: e.target.value,
284+
})
285+
}
286+
/>
287+
<div className={classnames('invalid-feedback', styles['login-error'])}>
288+
{' '}
289+
Please enter a valid Email.{' '}
290+
</div>
291+
</div>
292+
</div>
293+
</div>
294+
<div className={classnames('form-row', styles['error-row'])}>
295+
<div
296+
className={
297+
!errorMessage
298+
? classnames(
299+
'col text-center mt -0 mb-2 ',
300+
styles['register-error-inactive'],
301+
registerStyles.errorMessage,
302+
)
303+
: classnames(
304+
'col text-center mt -0 mb-2 errorMessage',
305+
styles['register-error-active'],
306+
registerStyles.errorMessageLogin,
307+
styles['login-error-active'],
308+
)
309+
}
310+
>
311+
{errorMessage}
312+
</div>
313+
</div>
314+
<div className="form-row">
315+
<div className="col text-center">
316+
<button
317+
className={classnames('btn btn-info', styles.loginButton)}
318+
type="submit"
319+
>
320+
Reset Password&nbsp;
321+
</button>
322+
</div>
323+
</div>
324+
</form>
363325
</div>
364-
</div>
365-
</form>
366-
</div>
367-
<<<<<<< HEAD
368-
</Col>
369-
</Row>
370-
<PopUpMenu />
371-
=======
326+
</Row>
327+
</div>
328+
</Col>
372329
</Row>
373330
<Row>
374331
<Col className="text-center my-3 ml-auto mr-auto">
@@ -383,7 +340,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
383340
<Row>
384341
<Col className="text-center my-3 ml-auto mr-auto">
385342
<div className="text-dark">
386-
Don't have an account?{' '}
343+
Don't have an account?
387344
<a
388345
href={Routes.REGISTER}
389346
className={classnames(styles['create-one-button'])}
@@ -398,7 +355,6 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
398355
</Col>
399356
</Row>
400357
</div>
401-
>>>>>>> add forgot password in login
402358
</div>
403359
);
404360
}

‎src/app/sagas/User.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import * as UserFetch from 'app/apiFetch/User';
1414
import { checkAuthentication } from 'app/sagas/utils';
1515
import { avatarName } from 'app/types/Authentication/Register';
1616
import { resType } from 'app/types/sagas';
17-
import { push } from 'react-router-redux';
18-
// import { push } from 'react-router-redux';
1917
import { all, call, put, takeEvery } from 'redux-saga/effects';
2018
import { ActionType } from 'typesafe-actions';
2119

@@ -216,9 +214,13 @@ export function* changeUserPassword(action: ActionType<typeof UserActions.change
216214
const res = yield call(UserFetch.changeUserPassword, action.payload);
217215
yield put(UserActions.updateErrorMessage(res.error ? res.body.message : ''));
218216

219-
if (res.type !== resType.ERROR) {
220-
yield put(push('/login'));
217+
if (res.status === 200) {
218+
window.location.assign('/login');
221219
}
220+
221+
// if (res.type !== resType.ERROR) {
222+
// window.location.assign("/login")
223+
// }
222224
} catch (err) {
223225
console.error(err);
224226
}

0 commit comments

Comments
 (0)