Merge pull request #1463 from hubmapconsortium/logoutFix

Fix for logout button and process
hubmapconsortium · Sep 3, 2024 · 56942a8 · 56942a8
2 parents ea586ad + 07642fa
commit 56942a8
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/src/src/App.css b/src/src/App.css
@@ -70,6 +70,10 @@
   margin-right: 2px;
 }
 
+.logout button div{
+  color: white;
+}
+
 .inline-icon {
   margin-right: 1em;
 }

diff --git a/src/src/App.js b/src/src/App.js
@@ -77,6 +77,7 @@ export function App (props){
   var [userDataGroups, setUserDataGroups] = useState({});
   var [userDev, setUserDev] = useState(false);
   // var [regStatus, setUnregStatus] = useState(false);
+  var [isLoggingOut, setIsLoggingOut] = useState(false);
   var [APIErr, setAPIErr] = useState([]);
   var [isLoading, setIsLoading] = useState(true);
   var [dtloading, setDTLoading] = useState(true);
@@ -125,7 +126,7 @@ export function App (props){
           } else if (results && results.status === 401) {
             console.debug('%c◉ FAIL WITH 410 ', 'color:#00ff7b', results);
             setAuthStatus(false);
-            setUnregStatus(true);
+            // setUnregStatus(true);
             clearAuths();
           } else if (results && results.status === 403 && results.results === "User is not a member of group HuBMAP-read") {
             console.debug('%c◉ UNREG ', 'color:#00ff7b', results );
@@ -254,9 +255,9 @@ export function App (props){
 
 
   function clearAuths() {  
-    console.debug('%c◉ CLEAR AUTHS ', 'color:#00ff7b' );
-    if(process.env.REACT_APP_URL == "http://localhost:8585"){
-      console.debug('%c◉ clearAuths start ', 'color:#00ff7b' );
+    // console.debug('%c◉ CLEAR AUTHS ', 'color:#00ff7b' );
+    if(process.env.REACT_APP_URL === "http://localhost:8585"){
+      // console.debug('%c◉ clearAuths start ', 'color:#00ff7b' );
       return new Promise((resolve) => {
         setTimeout(() => { // Give it a chance to cleaer the local storage
           localStorage.removeItem("info");
@@ -269,9 +270,10 @@ export function App (props){
     }
   }
 
-  function Logout(){
-    clearAuths().then((response) => {
-      console.debug('%c◉  response', 'color:#00ff7b',response );
+  function Logout(e){
+    setIsLoggingOut(true);
+    clearAuths(e).then((response) => {
+        console.debug('%c◉  response', 'color:#00ff7b',response );
         window.location.replace(`${process.env.REACT_APP_DATAINGEST_API_URL}/logout`)
       })
   };
@@ -366,6 +368,7 @@ export function App (props){
       <Navigation 
         login={authStatus} 
         logout={Logout}
+        isLoggingOut={isLoggingOut}
         app_info={ app_info_storage}
         userGroups={userGroups}
         userDataGroups={userDataGroups}
@@ -433,8 +436,9 @@ export function App (props){
           </Grid>
 
         </Box>
-      </Drawer>
 
+
+      </Drawer>
       { !isLoading && bannerShow && (
           <div className="alert alert-info" role="alert">
             <h2>{bannerTitle}</h2>

diff --git a/src/src/Nav.js b/src/src/Nav.js
@@ -17,6 +17,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import LoadingButton from '@mui/lab/LoadingButton';
 
 import UploadsForm from "./components/uploads/createUploads";
 
@@ -443,12 +444,10 @@ export const Navigation = (props) => {
                     Edit Profile
                 </Button>
               </span>
-              <span className="logout">
-                <Button
-                onClick={() => props.logout()}
-                className="nav-link" >
+              <span className="logout" >
+                <LoadingButton loading={props.isLoggingOut} color='info' onClick={(e) => props.logout(e)}>
                   Log Out 
-                </Button>
+                </LoadingButton>
               </span>
               {}
             </div>

diff --git a/src/src/assets/App.css b/src/src/assets/App.css
@@ -70,6 +70,10 @@
   margin-right: 2px;
 }
 
+.logout button div{
+  color: white;
+}
+
 .inline-icon {
   margin-right: 1em;
 }