Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content

Commit 14cbdc3

Browse files
ElzaCSElzaCS
authored
Add google oauth option (#81)
1 parent 1d5302f commit 14cbdc3

File tree

7 files changed

+53
-50
lines changed

7 files changed

+53
-50
lines changed

‎__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap

+2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
exports[`Login Container Should render 1`] = `
44
<Login
55
errorMessage=""
6+
getUserDetails={[Function]}
67
handleSelectPanel={[Function]}
78
isLoggedIn={false}
89
isLoginLoading={false}
910
login={[Function]}
11+
setIsLoginLoading={[Function]}
1012
updateErrorMessage={[Function]}
1113
/>
1214
`;

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

+33-46
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
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';
34
import { NavBar, NavPage } from 'app/components/home/Navbar';
4-
// import { API_BASE_URL } from 'app/../config/config';
55
import PopUpMenu from 'app/components/PopUpMenu';
66
import { Routes } from 'app/routes';
77
import * as styles from 'app/styles/Authentication.module.css';
@@ -19,6 +19,8 @@ export enum OAUTH_ROUTES {
1919

2020
export class Login extends React.Component<LoginInterfaces.Props, LoginInterfaces.State> {
2121
private loginRef = React.createRef<HTMLFormElement>();
22+
private authWindow: Window | null = null;
23+
private intervalID: null | ReturnType<typeof setTimeout> = null;
2224

2325
constructor(props: LoginInterfaces.Props) {
2426
super(props);
@@ -62,6 +64,9 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
6264
const { username, password } = this.state;
6365
const { errorMessage, isLoginLoading, isLoggedIn } = this.props;
6466
if (isLoggedIn) {
67+
if (this.authWindow != null) this.authWindow.close();
68+
if (this.intervalID != null) clearInterval(this.intervalID);
69+
this.props.setIsLoginLoading(false);
6570
return <Redirect to={Routes.ROOT} />;
6671
}
6772

@@ -83,50 +88,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
8388
account credentials to login.
8489
</div>
8590
</div>
86-
<div className={classnames('container px-0 justify-content-center', styles.loginForm)}>
87-
{/* {
88-
// TODO: Remove this on OAuth Integration.
89-
<Row
90-
onClick={(e) => {
91-
window.location.href = `https://code.pragyan.org/api/${OAUTH_ROUTES.GOOGLE}`;
92-
}}
93-
className={classnames(
94-
styles['google-btn'],
95-
'border justify-content-center my-3',
96-
styles.oauth_btn,
97-
styles.no_margin,
98-
)}
99-
>
100-
<div className={classnames('col-auto my-2', styles.img_div)}>
101-
<img src="./assets/img/google.png" height="24" width="24" />
102-
</div>
103-
<p className="col-auto">Log in with Google</p>
104-
</Row>
105-
<Row
106-
onClick={(e) => {
107-
window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GITHUB}`;
108-
}}
109-
className={classnames(
110-
'justify-content-center',
111-
styles['github-btn'],
112-
styles.oauth_btn,
113-
styles.no_margin,
114-
)}
115-
>
116-
<div className={classnames('col-auto my-2', styles.img_div)}>
117-
<img src="./assets/img/github.png" height="24" width="24" />
118-
</div>
119-
<p className="col-auto">Log in with Github</p>
120-
</Row>}
121-
<Row className={classnames(styles.no_margin)}>
122-
<div className={classnames(styles.separator)}>
123-
<div className={classnames(styles.wordWithLine)}>
124-
<span className={classnames(styles.text)}>or</span>
125-
</div>
126-
</div>
127-
</Row>
128-
*/}
129-
</div>
91+
13092
<Row className={classnames(styles.no_margin)}>
13193
<div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
13294
<form
@@ -135,7 +97,32 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
13597
ref={this.loginRef}
13698
onSubmit={this.handleLogin}
13799
>
138-
<div className="form-row">
100+
<Row
101+
onClick={(e) => {
102+
this.authWindow = window.open(`${API_BASE_URL}${OAUTH_ROUTES.GOOGLE}`);
103+
this.intervalID = setInterval(this.props.getUserDetails, 500);
104+
this.props.setIsLoginLoading(true);
105+
}}
106+
className={classnames(
107+
styles['google-btn'],
108+
'border justify-content-center my-3',
109+
styles.oauth_btn,
110+
styles.no_margin,
111+
)}
112+
>
113+
<div className={classnames('col-auto my-2', styles.img_div)}>
114+
<img src="./assets/img/google.png" height="24" width="24" />
115+
</div>
116+
<p className="col-auto">Log in with Google</p>
117+
</Row>
118+
<Row className={classnames(styles.no_margin)}>
119+
<div className={classnames(styles.separator)}>
120+
<div className={classnames(styles.wordWithLine)}>
121+
<span className={classnames(styles.text)}>or</span>
122+
</div>
123+
</div>
124+
</Row>
125+
<div className="form-row mt-4">
139126
<div className="col mb-4">
140127
<div className={classnames(styles['login-label'])}> Email </div>
141128
<div className="input-group">

‎src/app/components/Dashboard.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export class Dashboard extends React.Component<
5454
}
5555

5656
public componentDidMount() {
57+
this.props.getUserDetails();
5758
if (this.props.isFirstLogin) {
5859
this.setState({
5960
isReactTourActive: true,

‎src/app/containers/Authentication/Login.ts

+13-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Login } from 'app/components/Authentication/Login';
33
import { RootState } from 'app/reducers';
44
import * as LoginInterfaces from 'app/types/Authentication/Login';
55
import { connect } from 'react-redux';
6+
import { Dispatch } from 'redux';
67

78
const mapStateToProps = (rootState: RootState) => {
89
return {
@@ -12,12 +13,20 @@ const mapStateToProps = (rootState: RootState) => {
1213
};
1314
};
1415

16+
const mapDispatchToProps = (dispatch: Dispatch) => {
17+
return {
18+
getUserDetails: () => dispatch(UserActions.getUserDetails()),
19+
login: (email: string, password: string) => dispatch(UserActions.login(email, password)),
20+
setIsLoginLoading: (isLoginLoading: boolean) =>
21+
dispatch(UserActions.setIsLoginLoading(isLoginLoading)),
22+
updateErrorMessage: (errorMessage: string) =>
23+
dispatch(UserActions.updateErrorMessage(errorMessage)),
24+
};
25+
};
26+
1527
const loginContainer = connect<LoginInterfaces.StateProps, LoginInterfaces.DispatchProps, {}>(
1628
mapStateToProps,
17-
{
18-
login: UserActions.login,
19-
updateErrorMessage: UserActions.updateErrorMessage,
20-
},
29+
mapDispatchToProps,
2130
)(Login);
2231

2332
export default loginContainer;

‎src/app/containers/Dashboard.ts

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const mapStateToProps = (rootState: RootState) => {
2424
const mapDispatchToProps = (dispatch: Dispatch) => {
2525
return {
2626
closeWelcomeModal: () => dispatch(DashboardActions.setIsWelcomeModalOpen(false)),
27+
getUserDetails: () => dispatch(UserActions.getUserDetails()),
2728
setIsAuthenticationOpen: (isAuthenticationOpen: boolean) =>
2829
dispatch(UserActions.setIsAuthenticationOpen(isAuthenticationOpen)),
2930
toggleReactTour: () => dispatch(DashboardActions.toggleReactTour()),

‎src/app/types/Authentication/Login.ts

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export interface StateProps {
1717
export interface DispatchProps {
1818
login: (username: string, password: string) => void;
1919
updateErrorMessage: (errorMessage: string) => void;
20+
getUserDetails: () => void;
21+
setIsLoginLoading: (isLoginLoading: boolean) => void;
2022
}
2123

2224
export type Props = ElementOwnProps & StateProps & DispatchProps;

‎src/app/types/Dashboard.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface StateProps {
3838
}
3939

4040
export interface DispatchProps {
41+
getUserDetails: () => void;
4142
setIsAuthenticationOpen: (isAuthenticationOpen: boolean) => void;
4243
toggleReactTour: () => void;
4344
closeWelcomeModal: () => void;

0 commit comments

Comments
 (0)