Merge pull request #259 from CodeForPhilly/198-UI

UI for login refresh (198 UI)

Author: c-simpson

src/client/src/App.js

@@ -10,7 +10,10 @@ import Search360 from './pages/DataView360/Search/Search';
 import View360 from './pages/DataView360/View/View';
 import About from './pages/About';
 import Login from './components/Login/Login';
+import RefreshDlg from './components/RefreshDlg';
 import Check from './pages/Check/Check';
+import Refresh from './components/Refresh';
+
 import useToken from './components/Login/useToken';
 var jwt = require('jsonwebtoken');
 
@@ -68,26 +71,32 @@ function useAuthState() {
 
 
 function AuthenticatedApp() {
-
+      
     const { access_token, setToken } = useToken();
 
-
     var decoded = jwt.decode(access_token, { complete: true });
 
     const userRole = decoded?.payload.role;
     var expTime =  decoded?.payload.exp -  Date.now()/1000;
-
     const jwtExpired = expTime <= 0
 
+    const popRefreshAlert = expTime > 0 && expTime < 30;  // Time in secs to pop up refresh dialog
+
     const hdr = userRole === 'admin' ?  <AdminHeader /> : <Header /> // If we're going to display a header, which one?
 
     const history = useHistory();
 
   return (
     <>
         <Router>
+          
+            { !jwtExpired && hdr ?  hdr : '' /* 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 */}
+
 
-            { !jwtExpired && hdr ?  hdr : '' /* Above-chosen header, or if logged out, no header */ }
 
             {  /* If not logged in, show login screen */
               (!access_token | jwtExpired) ?  <Login setToken={setToken} /> :    <Switch>
@@ -113,13 +122,18 @@ function AuthenticatedApp() {
                     <Search360/>
                 </Route>
 
-                  <Route path="/360view/view">
-                      <View360/>
-                  </Route>
+                <Route path="/360view/view">
+                     <View360/>
+                </Route>
+  
+                <Route path="/check"> 
+                  <Check access_token = {access_token}/>
+                </Route>
 
-                <Route path="/check">
-                  <Check />
+                <Route path="/ref">
+                  <Refresh />
                 </Route>
+
             </Switch>
             }
 

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

@@ -4,6 +4,7 @@ export default function useToken() {
     const getToken = () => {
         const tokenString = sessionStorage.getItem('access_token');  // getItem(key)
         const userToken = JSON.parse(tokenString);
+
         return userToken?.access_token
     };
 

src/client/src/components/Refresh.js

@@ -0,0 +1,31 @@
+export default async function Refresh(old_token) {
+    
+    // Use exisiting token to get a new fresh token
+
+        const new_at = await fetch('http://localhost:5000/api/user/refresh',
+        {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + old_token
+            }
+        })
+
+        .then((response) => {
+            if (!response.ok) {
+                //throw (String(response.status + ':' + response.statusText))
+                throw (response)
+            }
+            return response.json()
+        } )
+
+        .catch((e) => {
+            // If it failed there's not much to do, probably got here after expiration 
+            return '{}'
+        });
+
+           
+        return(new_at);
+
+}
+

src/client/src/components/RefreshDlg.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+import useToken from './Login/useToken';
+
+import Refresh from './Refresh';
+
+export default function  RefreshDlg(props) {
+  const [open, setOpen] = React.useState(props.shouldOpen);
+  const { access_token } = useToken();  // We want to use the passed-in top-level setToken
+
+  const handleClose = async (shouldRefresh) => {
+    // Could be closed with Yes, No, outclick (which equals No)
+    setOpen(false);
+    if (props.shouldOpen){
+      const new_at =  await Refresh(access_token);
+      props.setToken(new_at);
+    }
+  };
+
+
+
+  return (
+    <div>
+      <Dialog
+        open={open}
+        onClose={() => handleClose(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{"You are about to be logged out!"}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            Stay logged in to keep working?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => handleClose(false)} color="primary">
+            No
+          </Button>
+          <Button onClick={() => handleClose(true)} color="primary" autoFocus>
+           Yes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}

src/client/src/pages/Check/Check.js

@@ -6,9 +6,9 @@ var jwt = require('jsonwebtoken');
 // const { DateTime } = require("luxon");  /* Enable if you enable console logging below */ 
 
 
-export default function Check() {
+export default function Check({access_token}) {
 
-    const { access_token, setToken } = useToken();
+    const {  setToken } = useToken();
 
     const [processStatus, setProcessStatus] = React.useState('loading');
     const [error, setError] = React.useState('');

src/server/app.py

@@ -13,7 +13,7 @@
 app.config["JWT_MAX_TIMEOUT"] = 7200 #Seconds
 
  # We'll use max for default but can be reduced for testing
-app.config["JWT_ACCESS_TOKEN_EXPIRES"] = app.config["JWT_MAX_TIMEOUT"] 
+app.config["JWT_ACCESS_TOKEN_EXPIRES"] = 60               # app.config["JWT_MAX_TIMEOUT"] 
 
 jwt = JWTManager(app)