Skip to content
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

Jump to bottom

Modify website flows for authentication #80

Merged
merged 5 commits into from
Jul 28, 2020
Merged

Modify website flows for authentication #80

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e66b12
Redirect to VIEW_TRIPS from SIGN_IN if user is already logged in
keiffer01 Jul 17, 2020
098edfb
Redirect user to LANDING when signed out
keiffer01 Jul 17, 2020
5b5001e
Add .js
keiffer01 Jul 22, 2020
acdec42
Style edits
keiffer01 Jul 27, 2020
d087a75
Merge branch 'master' into authflows
keiffer01 Jul 28, 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
57 changes: 34 additions & 23 deletions frontend/src/components/Header/UserInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from 'react';
import React from 'react';
keiffer01 marked this conversation as resolved.
Show resolved Hide resolved
import { useHistory } from 'react-router-dom';
import authUtils from '../AuthUtils';

import '../../styles/header.css';
import Button from 'react-bootstrap/Button';

import { LANDING } from '../../constants/routes.js';

keiffer01 marked this conversation as resolved.
Show resolved Hide resolved
// To set spacing between each element of the component.
const BOOTSTRAP_SPACING_CLASS =
'm-3 row justify-content-center align-self-center';
Expand All @@ -13,29 +16,37 @@ const BOOTSTRAP_SPACING_CLASS =
* log in), the user's display name, and a Sign Out button. This component is to
* be used with the Header component.
*/
class UserInfo extends React.Component {
/** @inheritdoc */
render() {
return (
<div className='d-flex flex-row'>
<img
className={BOOTSTRAP_SPACING_CLASS}
src={authUtils.getUserPhotoUrl()}
alt='Your Profile'
/>
<p className={BOOTSTRAP_SPACING_CLASS}>
{authUtils.getUserDisplayName()}
</p>
<Button
className={BOOTSTRAP_SPACING_CLASS}
variant='secondary'
onClick={authUtils.signOut}
>
Sign Out
</Button>
</div>
);
const UserInfo = () => {
const history = useHistory();

/**
* Redirects the user to the LANDING page first before actually signing them
* out.
*/
function signOutAndRedirectToLanding() {
history.push(LANDING);
authUtils.signOut();
}
keiffer01 marked this conversation as resolved.
Show resolved Hide resolved

return (
<div className='d-flex flex-row'>
<img
className={BOOTSTRAP_SPACING_CLASS}
src={authUtils.getUserPhotoUrl()}
alt='Your Profile'
/>
<p className={BOOTSTRAP_SPACING_CLASS}>
{authUtils.getUserDisplayName()}
</p>
<Button
className={BOOTSTRAP_SPACING_CLASS}
variant='secondary'
onClick={signOutAndRedirectToLanding}
>
Sign Out
</Button>
</div>
);
}

export default UserInfo;
17 changes: 15 additions & 2 deletions frontend/src/components/SignIn/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React from 'react';
import { Redirect } from 'react-router-dom';
import { AuthContext } from '../Auth';

import * as firebase from 'firebase/app';
import app from '../Firebase';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import {VIEW_TRIPS} from '../../constants/routes';
import { VIEW_TRIPS } from '../../constants/routes';
keiffer01 marked this conversation as resolved.
Show resolved Hide resolved

// Configure FirebaseUI.
const uiConfig = {
Expand Down Expand Up @@ -34,10 +36,21 @@ function handleAuthError(error) {
}

/**
* SignIn component that defines the sign-in page of the application.
* SignIn component that defines the sign-in page of the application. If the
* the user is already logged in, they will immediately be redirected to the
* VIEW_TRIPS page. Otherwise, they be given a number of providers through which
* they can sign in.
*/
class SignIn extends React.Component {
static contextType = AuthContext;

/** @inheritdoc */
render() {
// Immediately go to VIEW_TRIPS page if the user is already logged in.
if (this.context !== null) {
return <Redirect to={VIEW_TRIPS} />;
}

return (
<div>
<h1>Please sign in:</h1>
Expand Down