Login.js enhanced with signout and link to protected FAQ page

package.json

@@ -153,7 +153,7 @@
     "react-player": "^2.16.0",
     "react-rewards": "^2.0.4",
     "react-router-dom": "^5.3.4",
-    "react-router-dom-v5-compat": "^6.23.1",
+    "react-router-dom-v5-compat": "^6.28.1",
     "react-share": "^4.4.1",
     "react-slick": "^0.30.2",
     "react-svg": "^14.1.9",

src/App.jsx

@@ -20,6 +20,8 @@ import HeaderBarSuspense from './js/components/Navigation/HeaderBarSuspense';
 import webAppConfig from './js/config';
 import VoterStore from './js/stores/VoterStore';
 import Login from './js/pages/Login';
+import { PrivateRoute } from './js/auth';
+
 // importRemoveCordovaListenersToken1  -- Do not remove this line!
 
 // Root URL pages
@@ -44,13 +46,16 @@ class App extends Component {
       hideFooter: false,
       showReadyLight: true,
       enableFullStory: false,
+      isJqueryInitialized: false,
     };
     this.setShowHeader = this.setShowHeader.bind(this);
     this.setShowFooter = this.setShowFooter.bind(this);
     this.setShowHeaderFooter = this.setShowHeaderFooter.bind(this);  // Look more closely at this
     this.setShowReadyHeavy = this.setShowReadyHeavy.bind(this);
     this.bypass2FA = this.bypass2FA.bind(this);
     this.localIsCordova();
+    console.log('--------- initializejQuery() -----------------------------');
+    initializejQuery(() => {});
   }
 
   // See https://reactjs.org/docs/error-boundaries.html
@@ -64,14 +69,6 @@ class App extends Component {
     this.appStateSubscription = messageService.getMessage().subscribe(() => this.onAppObservableStoreChange());
     this.voterStoreListener = VoterStore.addListener(this.onVoterStoreChange.bind(this));
 
-    // let { hostname } = window.location;
-    // hostname = hostname || '';
-    initializejQuery(() => {
-      // AppObservableStore.siteConfigurationRetrieve(hostname);
-    });
-    // console.log('href in App.js componentDidMount: ', window.location.href);
-    // console.log('normalizedHrefPage in App.js componentDidMount: ', normalizedHref());
-
     if (isCordova()) {
       const size = isIOS() ?  getIOSSizeString() : getAndroidSize();
       console.log('Cordova:   device model', window.device.model, '  size: ', size);
@@ -259,6 +256,9 @@ class App extends Component {
       window.location.href = destinationHref;
     }
 
+
+    console.log('======================================== ', localStorage.getItem('isAuthenticated'), ' =============================');
+
     return (
       <>
         <StyledEngineProvider injectFirst>
@@ -274,7 +274,7 @@ class App extends Component {
               </Suspense>
               <Suspense fallback={<LoadingWheelComp />}>
                 <Switch>
-                  <Route path="/faq" exact><FAQ /></Route>
+                  <PrivateRoute path="/faq" component={FAQ} isAuthenticated={localStorage.getItem('isAuthenticated')} />
                   <Route path="/login" exact><Login /></Route>
                   <Route path="/teams" exact component={Teams} />
                   <Route path="/team-members/:teamId" exact component={TeamMembers} />

src/js/auth.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import webAppConfig from './config';
+
+/* global $  */
+
+// eslint-disable-next-line import/prefer-default-export
+export async function getAuthentication () {
+  if (window.$) {
+    console.log(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}getAuth`);
+    $.get(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}auth/`,
+      {},
+      (data, status) => {
+        console.log(`/auth response -- status: '${status}',  data: ${JSON.stringify(data)}`);
+        localStorage.setItem('isAuthenticated', data.userId);
+        return data.authenticated;
+      });
+  } else {
+    console.log('jquery not yet defined in getAuthentication');
+  }
+}
+
+/* eslint-disable react/jsx-props-no-spreading */
+// eslint-disable-next-line react/prop-types
+export const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
+  <Route
+    {...rest}
+    render={(props) => (isAuthenticated ? (
+      <Component {...props} />
+    ) : (
+      // eslint-disable-next-line react/prop-types
+      <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
+    ))}
+  />
+);
+
+

src/js/common/utils/initializejQuery.js

@@ -14,6 +14,12 @@ const initializejQuery = (afterFunction) => {
       window.jQuery = jquery;
       window.$ = jquery;
       // console.log('jquery loaded');
+      window.$.ajaxSetup({
+        crossDomain: true,
+        xhrFields: {
+          withCredentials: true,
+        },
+      });
       if (afterFunction) {
         afterFunction();
       }