Merge pull request #264 from CodeForPhilly/263-about

Adds AboutUs to User,Login header

Author: c-simpson

src/client/src/App.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {BrowserRouter as Router, Switch, Route, useHistory} from 'react-router-dom';
 
-import Header, {AdminHeader} from "./components/Header";
+import Header, {AdminHeader, LoginHeader} from "./components/Header";
 
 import HomePage from './pages/Home';
 import Admin from './pages/Admin';
@@ -79,7 +79,7 @@ function AuthenticatedApp() {
 
     const userRole = decoded?.payload.role;
     var expTime =  decoded?.payload.exp -  Date.now()/1000;
-    const jwtExpired = expTime <= 0
+    const jwtExpired = !expTime || expTime <= 0
 
     const popRefreshAlert = expTime > 0 && expTime < REFRESH_POPUP_TIME;  // Time in secs to pop up refresh dialog
 
@@ -91,13 +91,15 @@ function AuthenticatedApp() {
     <>
         <Router>
 
-            { !jwtExpired && hdr ?  hdr : '' /* Above-chosen header, or if logged out, no header */ } 
+            { !jwtExpired && hdr ?  hdr : <LoginHeader /> /* Above-chosen header, or if logged out, no header */ } 
 
             {popRefreshAlert && <RefreshDlg shouldOpen={true} setToken={setToken} /> }  {/* Pop up the refresh dialog */}
 
             {jwtExpired &&  <RefreshDlg shouldOpen={false} setToken={setToken} /> }     { /* Too late, expired: close the dialog */}
 
-
+            <Route path="/about">
+                    <About/>
+                </Route>
 
             {  /* If not logged in, show login screen */
               (!access_token | jwtExpired) ?  <Login setToken={setToken} /> :    <Switch>
@@ -115,9 +117,6 @@ function AuthenticatedApp() {
                     }
 
 
-                <Route path="/about">
-                    <About/>
-                </Route>
 
                 <Route path="/360view/search">
                     <Search360 access_token = {access_token} />

src/client/src/components/Header.js

@@ -22,6 +22,24 @@ export  function AdminHeader(props){  // This one if user has the ADMIN role
   );
 }
 
+export  function LoginHeader(props){  // This one for login page
+
+  return(
+        <AppBar position="static" id="header" className={styles.header} elevation={1}> 
+          <Toolbar style={{"minWidth":"100", "dipslay":"flex", "justifyContent":"space-between"}}>
+            <Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
+            <div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
+                <Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
+             { /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
+            </div>
+          </Toolbar>
+        </AppBar>
+  );
+}
+
+
+
+
 export default function Header(props){  // This one if user only has USER role - no link to Admin page
 
   return(
@@ -30,9 +48,11 @@ export default function Header(props){  // This one if user only has USER role -
             <Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
             <div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
               <Button className={styles.header_link} component={RouterLink} to="/360view/search">360 DataView</Button>
+              <Button className={styles.header_link} component={RouterLink} to="/about">About us</Button>
               { /* <Button className={styles.header_link} component={RouterLink} to="/check">Check</Button> */ }
             </div>
           </Toolbar>
         </AppBar>
   );
-}
+}
+

src/client/src/components/Login/Login.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './Login.css';
 
-
 function checkLoginResponse(response) {
     let gotError = !response.ok;
     if (gotError) {
@@ -42,6 +41,7 @@ export default function Login({ setToken }) {
     }
 
     return (
+
         <div className="login-wrapper">
             <h1>Please Log In</h1>
             <form onSubmit={handleSubmit}>