Hello, World!
+ );
+ };
+
+ beforeEach(() => {
+ render(
+ {props.children}
+ );
+};
+
+/**
+ * Returns the current authenticated user set by the AuthUtilsConsumer
+ * component.
+ *
+ * @returns {firebase.User} The currently authenticated user.
+ */
+export function getCurrentUser() {
+ return currentUser;
+}
diff --git a/frontend/src/components/AuthUtils/index.js b/frontend/src/components/AuthUtils/index.js
new file mode 100644
index 00000000..cf357b55
--- /dev/null
+++ b/frontend/src/components/AuthUtils/index.js
@@ -0,0 +1,86 @@
+/**
+ * Utility functions to get various parameters corresponding to the currently
+ * authenticated user. These functions should ONLY be called from private pages,
+ * i.e. the user must be authenticated to ensure the parameters can be
+ * retrieved.
+ */
+
+import app from '../Firebase';
+import { AuthUtilsConsumer, getCurrentUser } from './AuthUtilsConsumer.js';
+import { SIGN_IN } from '../../constants/routes.js';
+
+/**
+ * Called when one of the authentication utility functions are used when the
+ * user has not logged in yet. Since the utility functions require that they be
+ * called from private pages, this function being called implies that the user
+ * managed to access a private page without being authenticated first. So they
+ * are immiedately redirected to the SIGN_IN page.
+ */
+function redirectToSignIn() {
+ window.location.href = SIGN_IN;
+}
+
+/**
+ * Checks that the user is logged in by seeing if the current user is set to
+ * null (which is what Firebase Auth returns if the user is not logged in). If
+ * not, they are redirected to the SIGN_IN page.
+ *
+ * @returns {Boolean} True if the user is signed in, false otherwise.
+ */
+function isUserLoggedIn() {
+ if (getCurrentUser() === null) {
+ redirectToSignIn();
+ return false;
+ }
+ return true;
+}
+
+/**
+ * @returns {String} The user's display name.
+ */
+export function getCurUserDisplayName() {
+ if (!isUserLoggedIn()) { return null; }
+ return getCurrentUser().displayName;
+}
+
+/**
+ * @returns {String} The user's email.
+ */
+export function getCurUserEmail() {
+ if (!isUserLoggedIn()) { return null; }
+ return getCurrentUser().email;
+}
+
+/**
+ * @returns {String} The user's profile picture URL.
+ */
+export function getCurUserPhotoUrl() {
+ if (!isUserLoggedIn()) { return null; }
+ return getCurrentUser().photoURL;
+}
+
+/**
+ * @returns {String} The user's unique ID.
+ */
+export function getCurUserUid() {
+ if (!isUserLoggedIn()) { return null; }
+ return getCurrentUser().uid;
+}
+
+export function signOut() {
+ app.auth().signOut();
+}
+
+// Can also access the auth functions in the named authUtils variable.
+const authUtils = {
+ getCurUserDisplayName,
+ getCurUserEmail,
+ getCurUserPhotoUrl,
+ getCurUserUid,
+ signOut
+};
+export default authUtils;
+
+// The AuthUtilsConsumer component must be imported into the App component to
+// allow these functions to be used.
+export { AuthUtilsConsumer };
diff --git a/frontend/src/components/AuthUtils/index.test.js b/frontend/src/components/AuthUtils/index.test.js
new file mode 100644
index 00000000..9b26ca90
--- /dev/null
+++ b/frontend/src/components/AuthUtils/index.test.js
@@ -0,0 +1,79 @@
+import authUtils from './index.js';
+import { getCurrentUser } from './AuthUtilsConsumer.js';
+import { SIGN_IN } from '../../constants/routes.js';
+
+const mockDisplayName = 'Sam Smith';
+const mockEmail = 'samsmith@email.com';
+const mockPhotoURL = 'http://www.photo-hosters.com/qwerty';
+const mockUid = '1234567890';
+const mockAuthenticatedUser = {
+ displayName: mockDisplayName,
+ email: mockEmail,
+ photoURL: mockPhotoURL,
+ uid: mockUid
+};
+const mockUnauthenticatedUser = null;
+
+jest.mock('./AuthUtilsConsumer.js', () => ({
+ getCurrentUser: jest.fn()
+}));
+
+describe('auth utility functions when authenticated', () => {
+ beforeEach(() => {
+ getCurrentUser.mockImplementation(() => mockAuthenticatedUser);
+ expect(getCurrentUser()).toBe(mockAuthenticatedUser);
+ })
+
+ test('getCurUserDisplayName function', () => {
+ expect(authUtils.getCurUserDisplayName()).toBe(mockDisplayName);
+ });
+
+ test('getCurUserEmail function', () => {
+ expect(authUtils.getCurUserEmail()).toBe(mockEmail);
+ });
+
+ test('getCurUserPhotoUrl function', () => {
+ expect(authUtils.getCurUserPhotoUrl()).toBe(mockPhotoURL);
+ });
+
+ test('getCurUserUid function', () => {
+ expect(authUtils.getCurUserUid()).toBe(mockUid);
+ });
+});
+
+// All utility functions in this scenario should do the same thing: redirect to
+// the SIGN_IN page.
+describe('auth utility functions when not authenticated', () => {
+ // Delete the default window.location object set by Jest to use my own mock.
+ beforeAll(() => {
+ delete window.location;
+ });
+
+ beforeEach(() => {
+ window.location = {
+ href: ''
+ }
+ getCurrentUser.mockImplementation(() => mockUnauthenticatedUser);
+ expect(getCurrentUser()).toBe(mockUnauthenticatedUser);
+ });
+
+ test('getCurUserDisplayName function', () => {
+ authUtils.getCurUserDisplayName();
+ expect(window.location.href).toBe(SIGN_IN);
+ });
+
+ test('getCurUserEmail function', () => {
+ authUtils.getCurUserEmail();
+ expect(window.location.href).toBe(SIGN_IN);
+ });
+
+ test('getCurUserPhotoUrl function', () => {
+ authUtils.getCurUserPhotoUrl();
+ expect(window.location.href).toBe(SIGN_IN);
+ });
+
+ test('getCurUserUid function', () => {
+ authUtils.getCurUserUid();
+ expect(window.location.href).toBe(SIGN_IN);
+ });
+});
diff --git a/frontend/src/components/Header/UserInfo.js b/frontend/src/components/Header/UserInfo.js
new file mode 100644
index 00000000..1a2bf20d
--- /dev/null
+++ b/frontend/src/components/Header/UserInfo.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import authUtils from '../AuthUtils';
+
+import '../../styles/header.css';
+import Button from 'react-bootstrap/Button';
+
+// To set spacing between each element of the component.
+const BOOTSTRAP_SPACING_CLASS =
+ 'm-3 row justify-content-center align-self-center';
+
+/**
+ * Renders the user's profile picture (as provided by the service they used to
+ * 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 (
+
+ })
+
+ );
+ }
+}
+
+export default UserInfo;
diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js
index de8947b4..2e41bcf8 100644
--- a/frontend/src/components/Header/index.js
+++ b/frontend/src/components/Header/index.js
@@ -1,13 +1,38 @@
import React from 'react';
+import UserInfo from './UserInfo.js';
+
+import '../../styles/header.css';
+import Container from 'react-bootstrap/Container';
+import Navbar from 'react-bootstrap/Navbar';
+
+import { VIEW_TRIPS } from '../../constants/routes.js';
/**
- * Header component.
+ * Header component to display at the top of pages. By default, it displays the
+ * SLURP logo on the left and user info on the right. It accepts a React
+ * component, rendering whatever it was given in the middle of the header.
+ *
+ * This component must ONLY be called in PrivateRoute pages.
+ *
+ * @param {Object} props An optional React component can be passed as the child
+ * of this component. The Header component will then render the given child
+ * component in its center.
*/
class Header extends React.Component {
+ /** @inheritdoc */
render() {
return (
+ {authUtils.getCurUserDisplayName()} +
+ +
-
+
+ {/* TODO (Issue #24): Put path to logo when we have one. */}
+ ![SLURP Logo]()
+
+
+ {this.props.children}
+
+
);
}
diff --git a/frontend/src/components/Utils/filter-input.js b/frontend/src/components/Utils/filter-input.js
index edea6c30..e32419cd 100644
--- a/frontend/src/components/Utils/filter-input.js
+++ b/frontend/src/components/Utils/filter-input.js
@@ -28,7 +28,7 @@ export function getCleanedTextInput(rawInput, defaultValue) {
export function getCollaboratorUidArray(collaboratorEmailArr) {
collaboratorEmailArr = [getCurUserEmail()].concat(collaboratorEmailArr);
- // Removes empty fields (temporary).
+ // Removes empty fields (temporary until fix #67 & #72).
while (collaboratorEmailArr.includes('')) {
const emptyStrIdx = collaboratorEmailArr.indexOf('');
collaboratorEmailArr.splice(emptyStrIdx, 1);
diff --git a/frontend/src/components/ViewTrips/trip.js b/frontend/src/components/ViewTrips/trip.js
index fc4a3b9a..bc8db4d9 100644
--- a/frontend/src/components/ViewTrips/trip.js
+++ b/frontend/src/components/ViewTrips/trip.js
@@ -6,8 +6,8 @@ import { getUserEmailFromUid } from '../Utils/temp-auth-utils.js'
import ViewActivitiesButton from './view-activities-button.js';
/**
- * Returns the date range of the trip associated with the Trip document data
- * `tripObj`.
+ * Returns the string date range of the trip associated with the Trip document
+ * data `tripObj`.
*
* Notes:
* - tripObj will always contain valid start_date and end_date fields.
@@ -17,7 +17,7 @@ import ViewActivitiesButton from './view-activities-button.js';
*
* @param {firebase.firestore.DocumentData} tripObj Object containing the fields
* and values for a Trip document.
- * @return Date range of the trip (if it exists).
+ * @return {string} Date range of the trip.
*/
export function getDateRange(tripObj) {
const startDate = tripObj.start_date.toDate();
@@ -27,6 +27,13 @@ export function getDateRange(tripObj) {
`${endDate.getDate()}/${endDate.getFullYear()}`;
}
+/**
+ *
+ * @param {!Array} collaboratorUidArr Array of collaborator uids
+ * stored in trip document.
+ * @returns {string} Collaborator emails in comma separated string.
+ * Ex: "person1@email.com, person2@email.com".
+ */
export function getCollaboratorEmails(collaboratorUidArr) {
const collaboratorEmailArr =
collaboratorUidArr.map(uid => getUserEmailFromUid(uid));
diff --git a/frontend/src/styles/header.css b/frontend/src/styles/header.css
new file mode 100644
index 00000000..0e3ea7ea
--- /dev/null
+++ b/frontend/src/styles/header.css
@@ -0,0 +1,5 @@
+img {
+ border-radius: 50%;
+ height: 50px;
+ width: 50px;
+}