Browse Source

Added GitHub Authentication

vietnamkong 7 years ago
parent
commit
7c09866f63

+ 12 - 2
frontend/app/js/views/App/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Switch, withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
@@ -34,9 +34,12 @@ const asyncComponent = getComponent => {
 
 @connect()
 
-export default class App extends Component { // eslint-disable-line react/no-multi-comp
+class App extends Component { // eslint-disable-line react/no-multi-comp
 	static propTypes = {
 		dispatch: PropTypes.func,
+		history: PropTypes.shape({
+			push: PropTypes.func.isRequired,
+		}).isRequired,
 	}
 
 	static defaultProps = {
@@ -53,6 +56,11 @@ export default class App extends Component { // eslint-disable-line react/no-mul
 			});
 			socket.on("keep.event:banned", reason => dispatch(ban(reason)));
 		});
+
+		if (localStorage.getItem("github_redirect")) {
+			this.props.history.push(localStorage.getItem("github_redirect"));
+			localStorage.removeItem("github_redirect");
+		}
 	}
 
 	render() {
@@ -111,3 +119,5 @@ export default class App extends Component { // eslint-disable-line react/no-mul
 		);
 	}
 }
+
+export default withRouter(App);

+ 10 - 1
frontend/app/js/views/Auth/Login.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
 
 import io from "../../io";
 import config from "../../../../config/default";
@@ -41,6 +40,10 @@ export default class Login extends Component {
 		});
 	}
 
+	githubRedirect() {
+		localStorage.setItem("github_redirect", window.location.pathname);
+	}
+
 	render() {
 		return (
 			<div>
@@ -50,6 +53,12 @@ export default class Login extends Component {
 				<input type="password" id="password" value={ this.state.password } onChange={ event => this.updateField("password", event) } />
 				<p>By logging in/registering you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
 				<button onClick={ this.login }>Login</button>
+				<a href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>
+					<div className="icon">
+						<img alt="GitHub Icon" src="/assets/images/social/github.svg" />
+					</div>
+					&nbsp;&nbsp;Login with GitHub
+				</a>
 			</div>
 		);
 	}

+ 10 - 0
frontend/app/js/views/Auth/Register.jsx

@@ -58,6 +58,10 @@ export default class Register extends Component {
 		});
 	}
 
+	githubRedirect() {
+		localStorage.setItem("github_redirect", window.location.pathname);
+	}
+
 	render() {
 		return (
 			<div>
@@ -70,6 +74,12 @@ export default class Register extends Component {
 				<div id="recaptcha" />
 				<p>By logging in/registering you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
 				<button onClick={ this.register }>Register</button>
+				<a href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>
+					<div className="icon">
+						<img alt="GitHub Icon" src="/assets/images/social/github.svg" />
+					</div>
+					&nbsp;&nbsp;Login with GitHub
+				</a>
 			</div>
 		);
 	}

+ 4 - 0
frontend/app/js/views/Home/index.jsx

@@ -24,6 +24,10 @@ export default class Home extends Component {
 		this.handleIncrement = this.handleIncrement.bind(this);
 	}
 
+	componentDidMount() {
+
+	}
+
 	handleIncrement() {
 		const { dispatch } = this.props;