Skip to content

Col-1073 Update GitHub auth #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
matthuynh wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Col-1073 Update GitHub auth #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a21fb9
COL-1073 Update OAuth to use CollabCloud organization. Change registe…
matthuynh May 9, 2020
9043ed1
COL-1073 Improve styling of Register2 page. Add tooltips
matthuynh May 9, 2020
7d950a4
COL-1073 Move all GitHub API OAuth variables into .env files
matthuynh May 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
**vscode_workspace.code-workspace
**env
**package-lock.json

# Logs
logs
Expand Down
77 changes: 53 additions & 24 deletions client/src/Containers/Account/Register/RegisterPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
import React from "react";
import { Card } from "react-bootstrap";
import { Card, Tooltip, OverlayTrigger, Button } from "react-bootstrap";
import "../../../css/Register.css";

//TODO: Create basic button that links to authorization page, style after?
const clientID = process.env.REACT_APP_GITHUB_CLIENT_ID;

// This page allows the user to redirect to GitHub to authorize our app to use their credentials
const Register = ({ register }) => {
function renderTooltip(props) {
return (
<Tooltip id="button-tooltip" {...props}>
We require read access to your public and private repositories
so that you can create projects based off of your GitHub repos.
<br />
<br />
Your information will NEVER be used for any purposes other than
to display your repositories. It will also NEVER be shared with
a third-party.
</Tooltip>
);
}

return (
<div className="container">
<body>
Expand All @@ -12,43 +28,56 @@ const Register = ({ register }) => {
style={{
margin: "auto",
width: "30rem",
marginTop: "50px"
marginTop: "50px",
}}
>
<div className="text-center" style={{ marginTop: "35px" }}>
<font style={{ fontSize: 40, color: "#667eea" }}>
Register
</font>
</div>
<div className="text-center" style={{ marginTop: "20px" }}>
<h3>
Find projects to collaborate on or post your own
</h3>
<div className="page-title text-center">Register</div>
<div className="page-heading page-paragraph text-center">
<h4>We will need to connect to your GitHub account</h4>
</div>
<div className="text-center">

<div className="page-main text-center">
<a
className="btn btn-secondary text-center"
style={{ width: "320px", marginTop: "50px" }}
href="https://github.com/login/oauth/authorize?client_id=08f4f6db13802f8cd769&scope=repo"
style={{ width: "320px" }}
href={`https://github.com/login/oauth/authorize?client_id=${clientID}&scope=repo`}
>
<img
src={require("./GitHub-Mark-32px.png")}
alt="Github Btn"
alt="Github Logo"
/>{" "}
&nbsp;{" "}
<label
style={{
fontWeight: "bold",
fontSize: "23px",
marginTop: "5px"
}}
>
<label id="github-button-label">
Sign up with GitHub
</label>
</a>
</div>
<div className="text-center" style={{ marginBottom: "35px" }}>

<div className="text-center">
Already have an account? <a href="/login">Log in</a>
<OverlayTrigger
placement="top"
delay={{ show: 100, hide: 200 }}
overlay={renderTooltip}
>
<Button
id="tooltip-trigger"
variant="primary"
size="sm"
>
Why do I need to connect my GitHub account?
</Button>
</OverlayTrigger>
<br />
<a href="/">
<img
alt="CollabCloud-Logo"
src={require("../../../logo.png")}
width="70"
height="35"
style={{ marginTop: "20px", marginBottom: "30px" }}
/>
</a>
</div>
</Card>
</body>
Expand Down
31 changes: 3 additions & 28 deletions client/src/Containers/Account/Register/RegisterPage2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
/*
Packages
*/
import React from "react";
import RegisterForm from "../../../components/specialized/Account/RegisterForm";
import Card from "react-bootstrap/Card";
import "../../../css/LoginForm.css";

//const state = require("../../../store");
// After the user enters their username and password on GitHub, GitHub redirects the user to this page
const Register2 = props => {
return (
<div>
Expand All @@ -18,33 +15,11 @@ const Register2 = props => {
<h1 className="header" style={{ marginTop: 20 }}>
Register
</h1>
<p> Almost done! Complete your registration by filling in the information below </p>
<RegisterForm />
</Card>
</div>
);
};
export default Register2;
/*return (<body>

<div class="container">

<div style={{textAlign: "center" ,marginTop: '50px'}}>

<form onSubmit={onSubmit}>
<div style={{display: "inline-block", textAlign:'left', margin:'20px'}}>

<label style={{fontWeight: 'bold', fontSize: '23px', marginTop: '5px'}}>Username</label> <br/>
<input className="form-control form-control-md" style={{width: '400px'}} type="text" name="username" onChange={e =>onChange(e)} value={formData.username} placeholder="Enter a Username" required/> <br/>
<label style={{fontWeight: 'bold', fontSize: '23px', marginTop: '5px'}}>Password</label> <br/>
<input className="form-control form-control-md" type="password" name="password" onChange={e =>onChange(e)} value={formData.password} placeholder="Enter a Password"/> <br />
<label style={{fontWeight: 'bold', fontSize: '23px', marginTop: '5px'}}>Confirm Password</label> <br/>
<input className="form-control form-control-md" type="password" name="confirmpassword" onChange={e =>onChange(e)} value= {formData.confirmpassword}placeholder=""/> <br/>
<input className="btn btn-secondary" type="submit" name="submit" value="Sign Up"/>
<div style={{display: "inline-block", textAlign:'left', margin:'20px'}}>
</div>
</div>
</form>

</div>
</div>
</body>*/
export default Register2;
16 changes: 8 additions & 8 deletions client/src/Reducers/registerReducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,37 +17,37 @@ const initialState = {
export default (state = initialState, action) => {
switch (action.type) {
case ATTEMPT:
const obj = {
return {
...state,
attempted: true,
registered: false,
githubExists: false
};
return obj;

case GET_TOKEN:
const obj1 = {
return {
...state,
attempted: true,
registered: true,
githubExists: false
};
return obj1;

// This case is when the user already has an account with the same username registered and saved in the CollabCloud database
case GITHUB_EXISTS:
const obj2 = {
return {
...state,
attempted: true,
registered: false,
githubExists: true
};
return obj2;

case GITHUB_USERNAME_NOMATCH:
const obj3 = {
return {
...state,
attemped: true,
registered: false,
wrongUser: true
};
return obj3;
default:
return state;
}
Expand Down
5 changes: 3 additions & 2 deletions client/src/Routing/Router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,10 @@ const Router = () => {
{/* Public Routes */}
<Route path="/" component={LandingPage} exact />
<Route path="/login" component={Login} />
<Route path="/register2" component={Register2} />
<Route path="/register" component={Register} />
<Route path="/register" component={Register} exact />
<Route path="/register/authenticated" component={Register2} />
<Route path="/logout" component={Logout} />

{/* Auth Routes */}
<PrivateRoute path="/project/:pid" component={Project} />
<PrivateRoute path="/explore" component={Explore} />
Expand Down
8 changes: 4 additions & 4 deletions client/src/actions/registerActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,20 @@ export const register = (auth_code, formData) => async dispatch => {
const body = JSON.stringify({ code: auth_code, ...formData });

// If success, dispatch action
// TODO: Check the response for whether or not the user is
// already registered on github or not
axios
.post(url, body, config)
.then(response => {
// Registration succeeded
dispatch({
type: GET_TOKEN,
payload: response.data
});
})
.catch(err => {
console.log(err.response.status);
// Registration failed
console.log(`Error occurred while registering. Code is ${err.response.status}`);
if (err.response.status === 301) {
// Provided username already exists in database
dispatch({
type: GITHUB_EXISTS
});
Expand All @@ -42,6 +43,5 @@ export const register = (auth_code, formData) => async dispatch => {
type: ATTEMPT
});
}
console.log("Error occurred while registering");
});
};
20 changes: 13 additions & 7 deletions client/src/components/specialized/Account/LoginForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,20 @@ function LoginForm({ loggedIn, login }) {
Submit
</Button>
</Form>

<div className="text-center" >
Don't have an account yet? <a href="/register">Register</a>
</div>
<div>
<img
alt=""
src={require("../../../logo.png")}
width="70"
height="35"
style={{ marginTop: 40, marginBottom: 20 }}
/>
<a href="/">
<img
alt="CollabCloud-Logo"
src={require("../../../logo.png")}
width="70"
height="35"
style={{ marginTop: 20, marginBottom: 10 }}
/>
</a>
</div>
</div>
);
Expand Down
Loading