feat(login): auto-retry login with existing credentials

src/app/Login/BasicAuthForm.tsx

@@ -1,32 +1,32 @@
 /*
  * Copyright The Cryostat Authors
- * 
+ *
  * The Universal Permissive License (UPL), Version 1.0
- * 
+ *
  * Subject to the condition set forth below, permission is hereby granted to any
  * person obtaining a copy of this software, associated documentation and/or data
  * (collectively the "Software"), free of charge and under any and all copyright
  * rights in the Software, and any and all patent rights owned or freely
  * licensable by each licensor hereunder covering either (i) the unmodified
  * Software as contributed to or provided by such licensor, or (ii) the Larger
  * Works (as defined below), to deal in both
- * 
+ *
  * (a) the Software, and
  * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
  * one is included with the Software (each a "Larger Work" to which the Software
  * is contributed by such licensors),
- * 
+ *
  * without restriction, including without limitation the rights to copy, create
  * derivative works of, display, perform, and distribute the Software and make,
  * use, sell, offer for sale, import, export, have made, and have sold the
  * Software and the Larger Work(s), and to sublicense the foregoing rights on
  * either these or other terms.
- * 
+ *
  * This license is subject to the following condition:
  * The above copyright notice and either this complete permission notice or at
  * a minimum a reference to the UPL must be included in all copies or
  * substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -36,33 +36,49 @@
  * SOFTWARE.
  */
 import * as React from 'react';
+import { ServiceContext } from '@app/Shared/Services/Services';
 import { ActionGroup, Button, Form, FormGroup, Text, TextInput, TextVariants } from '@patternfly/react-core';
+import { map } from 'rxjs/operators';
 import { FormProps } from './FormProps';
+import { Base64 } from 'js-base64';
 
 export const BasicAuthForm: React.FunctionComponent<FormProps> = (props) => {
-
+  const context = React.useContext(ServiceContext);
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
 
-  const handleUserChange = (evt) => {
+  React.useEffect(() => {
+    const sub = context.api.getToken().pipe(map(Base64.decode)).subscribe(creds => {
+      if (!creds.includes(':')) {
+        setUsername(creds);
+        return;
+      }
+      let parts: string[] = creds.split(':');
+      setUsername(parts[0]);
+      setPassword(parts[1]);
+    });
+    return () => sub.unsubscribe();
+  }, [context, context.api, setUsername, setPassword]);
+
+  const handleUserChange = React.useCallback((evt) => {
     setUsername(evt);
-  }
+  }, [setUsername]);
 
-  const handlePasswordChange = (evt) => {
+  const handlePasswordChange = React.useCallback((evt) => {
     setPassword(evt);
-  }
+  }, [setPassword]);
 
-  const handleSubmit = (evt) => {
+  const handleSubmit = React.useCallback((evt) => {
     props.onSubmit(evt, `${username}:${password}`, 'Basic');
-  }
+  }, [props, props.onSubmit, username, password]);
 
   // FIXME Patternfly Form component onSubmit is not triggered by Enter keydown when the Form contains
   // multiple FormGroups. This key handler is a workaround to allow keyboard-driven use of the form
-  const handleKeyDown = (evt) => {
+  const handleKeyDown = React.useCallback((evt) => {
     if (evt.key === 'Enter') {
       handleSubmit(evt);
     }
-  }
+  }, [handleSubmit]);
 
   return (
     <Form onSubmit={handleSubmit}>

src/app/Login/BearerAuthForm.tsx

@@ -1,32 +1,32 @@
 /*
  * Copyright The Cryostat Authors
- * 
+ *
  * The Universal Permissive License (UPL), Version 1.0
- * 
+ *
  * Subject to the condition set forth below, permission is hereby granted to any
  * person obtaining a copy of this software, associated documentation and/or data
  * (collectively the "Software"), free of charge and under any and all copyright
  * rights in the Software, and any and all patent rights owned or freely
  * licensable by each licensor hereunder covering either (i) the unmodified
  * Software as contributed to or provided by such licensor, or (ii) the Larger
  * Works (as defined below), to deal in both
- * 
+ *
  * (a) the Software, and
  * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
  * one is included with the Software (each a "Larger Work" to which the Software
  * is contributed by such licensors),
- * 
+ *
  * without restriction, including without limitation the rights to copy, create
  * derivative works of, display, perform, and distribute the Software and make,
  * use, sell, offer for sale, import, export, have made, and have sold the
  * Software and the Larger Work(s), and to sublicense the foregoing rights on
  * either these or other terms.
- * 
+ *
  * This license is subject to the following condition:
  * The above copyright notice and either this complete permission notice or at
  * a minimum a reference to the UPL must be included in all copies or
  * substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -36,20 +36,26 @@
  * SOFTWARE.
  */
 import * as React from 'react';
+import { ServiceContext } from '@app/Shared/Services/Services';
 import { ActionGroup, Button, Form, FormGroup, Text, TextInput, TextVariants } from '@patternfly/react-core';
 import { FormProps } from './FormProps';
 
 export const BearerAuthForm: React.FunctionComponent<FormProps> = (props) => {
-
+  const context = React.useContext(ServiceContext);
   const [token, setToken] = React.useState('');
 
-  const handleTokenChange = (evt) => {
+  React.useEffect(() => {
+    const sub = context.api.getToken().subscribe(setToken);
+    return () => sub.unsubscribe();
+  }, [context, context.api, setToken]);
+
+  const handleTokenChange = React.useCallback((evt) => {
     setToken(evt);
-  }
+  }, [setToken]);
 
-  const handleSubmit = (evt) => {
+  const handleSubmit = React.useCallback((evt) => {
     props.onSubmit(evt, token, 'Bearer');
-  }
+  }, [props, props.onSubmit, token]);
 
   return (
     <Form onSubmit={handleSubmit}>

src/app/Login/Login.tsx

@@ -1,32 +1,32 @@
 /*
  * Copyright The Cryostat Authors
- * 
+ *
  * The Universal Permissive License (UPL), Version 1.0
- * 
+ *
  * Subject to the condition set forth below, permission is hereby granted to any
  * person obtaining a copy of this software, associated documentation and/or data
  * (collectively the "Software"), free of charge and under any and all copyright
  * rights in the Software, and any and all patent rights owned or freely
  * licensable by each licensor hereunder covering either (i) the unmodified
  * Software as contributed to or provided by such licensor, or (ii) the Larger
  * Works (as defined below), to deal in both
- * 
+ *
  * (a) the Software, and
  * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
  * one is included with the Software (each a "Larger Work" to which the Software
  * is contributed by such licensors),
- * 
+ *
  * without restriction, including without limitation the rights to copy, create
  * derivative works of, display, perform, and distribute the Software and make,
  * use, sell, offer for sale, import, export, have made, and have sold the
  * Software and the Larger Work(s), and to sublicense the foregoing rights on
  * either these or other terms.
- * 
+ *
  * This license is subject to the following condition:
  * The above copyright notice and either this complete permission notice or at
  * a minimum a reference to the UPL must be included in all copies or
  * substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -39,7 +39,8 @@ import * as React from 'react';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { Card, CardBody, CardFooter, CardHeader, PageSection, Title } from '@patternfly/react-core';
-import { first } from 'rxjs/operators';
+import { combineLatest, timer } from 'rxjs';
+import { debounceTime, first } from 'rxjs/operators';
 import { Base64 } from 'js-base64';
 import { BasicAuthDescriptionText, BasicAuthForm } from './BasicAuthForm';
 import { BearerAuthDescriptionText, BearerAuthForm } from './BearerAuthForm';
@@ -48,11 +49,11 @@ export const Login = (props) => {
   const context = React.useContext(ServiceContext);
 
   const [token, setToken] = React.useState('');
-  const [authMethod, setAuthMethod] = React.useState('Basic');
+  const [authMethod, setAuthMethod] = React.useState('');
   const addSubscription = useSubscriptions();
   const onLoginSuccess = props.onLoginSuccess;
 
-  const checkAuth = React.useCallback(() => {
+  const checkAuth = React.useCallback((token, authMethod) => {
     let tok = token;
     if (authMethod === 'Basic') {
       tok = Base64.encodeURL(token);
@@ -66,19 +67,35 @@ export const Login = (props) => {
         }
       })
     );
-  }, [context.api, token, authMethod, onLoginSuccess]);
+  }, [context, context.api, addSubscription, onLoginSuccess]);
 
-  const handleSubmit = (evt, token, authMethod) => {
+  const handleSubmit = React.useCallback((evt, token, authMethod) => {
     setToken(token);
     setAuthMethod(authMethod);
+    checkAuth(token, authMethod);
     evt.preventDefault();
-  };
+  }, [setToken, setAuthMethod, checkAuth]);
 
   React.useEffect(() => {
-    checkAuth();
-    const sub = context.api.getAuthMethod().subscribe(authMethod => setAuthMethod(authMethod));
+    const sub = context.api.getAuthMethod().subscribe(setAuthMethod);
+    checkAuth('', 'Basic'); // check auth once at component load to query the server's auth method
     return () => sub.unsubscribe();
-  }, [context.api, checkAuth]);
+  }, [context, context.api, setAuthMethod, checkAuth]);
+
+  React.useEffect(() => {
+    const sub =
+      combineLatest(context.api.getToken(), context.api.getAuthMethod(), timer(0, 5000))
+      .pipe(debounceTime(1000))
+      .subscribe(parts => {
+        let token = parts[0];
+        let authMethod = parts[1];
+        if (authMethod === 'Basic') {
+          token = Base64.decode(token);
+        }
+        checkAuth(token, authMethod);
+    });
+    return () => sub.unsubscribe();
+  }, [context, context.api, checkAuth]);
 
   return (
     <PageSection>

src/app/Shared/Services/NotificationChannel.service.tsx

@@ -1,32 +1,32 @@
 /*
  * Copyright The Cryostat Authors
- * 
+ *
  * The Universal Permissive License (UPL), Version 1.0
- * 
+ *
  * Subject to the condition set forth below, permission is hereby granted to any
  * person obtaining a copy of this software, associated documentation and/or data
  * (collectively the "Software"), free of charge and under any and all copyright
  * rights in the Software, and any and all patent rights owned or freely
  * licensable by each licensor hereunder covering either (i) the unmodified
  * Software as contributed to or provided by such licensor, or (ii) the Larger
  * Works (as defined below), to deal in both
- * 
+ *
  * (a) the Software, and
  * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
  * one is included with the Software (each a "Larger Work" to which the Software
  * is contributed by such licensors),
- * 
+ *
  * without restriction, including without limitation the rights to copy, create
  * derivative works of, display, perform, and distribute the Software and make,
  * use, sell, offer for sale, import, export, have made, and have sold the
  * Software and the Larger Work(s), and to sublicense the foregoing rights on
  * either these or other terms.
- * 
+ *
  * This license is subject to the following condition:
  * The above copyright notice and either this complete permission notice or at
  * a minimum a reference to the UPL must be included in all copies or
  * substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -67,7 +67,6 @@ export class NotificationChannel {
         map((url: any): string => url.notificationsUrl)
       );
     combineLatest(notificationsUrl, this.apiSvc.getToken(), this.apiSvc.getAuthMethod())
-      .pipe(first())
       .subscribe(
         (parts: string[]) => {
           const url = parts[0];

src/app/routes.tsx

@@ -159,10 +159,13 @@ const AppRoutes = () => {
   React.useEffect(() => {
     const sub = context.notificationChannel
       .isReady()
-      .pipe(filter((v) => !v))
-      .subscribe(() => setAuthenticated(false));
+      .subscribe(v => setAuthenticated(v));
     return () => sub.unsubscribe();
-  }, [context.notificationChannel]);
+  }, [context.notificationChannel, setAuthenticated]);
+
+  const handleAuthenticated = React.useCallback(() => {
+    setAuthenticated(true);
+  }, [setAuthenticated]);
 
   return (
     <LastLocationProvider>
@@ -179,7 +182,7 @@ const AppRoutes = () => {
             />
           ))
         ) : (
-          <Login onLoginSuccess={() => setAuthenticated(true)} />
+          <Login onLoginSuccess={handleAuthenticated} />
         )}
         <PageNotFound title="404 Page Not Found" />
       </Switch>