feat(auth): Display username on masthead (#322)

* Get username from v2 auth resp

Update auth version to 2.1

* fixup! Get username from v2 auth resp

* Add api response interface

* fixup! Add api response interface

src/app/Login/BasicAuthForm.tsx

@@ -75,7 +75,6 @@ export const BasicAuthForm: React.FunctionComponent<FormProps> = (props) => {
 
   const handleSubmit = React.useCallback((evt) => {
     props.onSubmit(evt, `${username}:${password}`, 'Basic', rememberMe);
-    context.login.setUsername(username);
   }, [props, props.onSubmit, username, password, context.login, rememberMe]);
 
   // FIXME Patternfly Form component onSubmit is not triggered by Enter keydown when the Form contains

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

@@ -37,7 +37,7 @@
  */
 import { Observable, ObservableInput, of, ReplaySubject } from 'rxjs';
 import { fromFetch } from 'rxjs/fetch';
-import { catchError, first, map, tap } from 'rxjs/operators';
+import { catchError, concatMap, first, map, tap } from 'rxjs/operators';
 
 export class LoginService {
 
@@ -67,35 +67,37 @@ export class LoginService {
 
     token = this.useCacheItemIfAvailable(this.TOKEN_KEY, token);
 
-    return fromFetch(`${this.authority}/api/v1/auth`, {
+    return fromFetch(`${this.authority}/api/v2.1/auth`, {
       credentials: 'include',
       mode: 'cors',
       method: 'POST',
       body: null,
       headers: this.getAuthHeaders(token, method),
     })
     .pipe(
-      map(response => {
+      concatMap(response => {
         if (!this.authMethod.isStopped) {
           this.authMethod.next(response.ok ? method : (response.headers.get('X-WWW-Authenticate') || ''));
         }
-        return response.ok;
+        return response.json();
+      }),
+      first(),
+      tap((jsonResp: AuthV2Response) => {
+        if(jsonResp.meta.status === 'OK') {
+          this.completeAuthMethod(method);
+          this.setUsername(jsonResp.data.result.username);
+          this.token.next(token);
+          this.authenticated.next(true);
+        }
+      }),
+      map((jsonResp: AuthV2Response) => {
+        return jsonResp.meta.status === 'OK';
       }),
       catchError((e: Error): ObservableInput<boolean> => {
         window.console.error(JSON.stringify(e));
         this.authMethod.complete();
         return of(false);
       }),
-      first(),
-      tap(v => {
-        if (v) {
-          this.authMethod.next(method);
-          this.authMethod.complete();
-          this.setCacheItem(this.METHOD_KEY, method);
-          this.token.next(token);
-          this.authenticated.next(true);
-        }
-      })
     );
   }
 
@@ -137,11 +139,6 @@ export class LoginService {
     this.authenticated.next(false);
   }
 
-  setUsername(username: string): void {
-    this.setCacheItem(this.USER_KEY, username);
-    this.username.next(username);
-  }
-
   rememberToken(token: string): void {
     this.setCacheItem(this.TOKEN_KEY, token);
   }
@@ -150,6 +147,17 @@ export class LoginService {
     this.removeCacheItem(this.TOKEN_KEY);
   }
 
+  private setUsername(username: string): void {
+    this.setCacheItem(this.USER_KEY, username);
+    this.username.next(username);
+  }
+
+  private completeAuthMethod(method: string): void {
+    this.authMethod.next(method);
+    this.setCacheItem(this.METHOD_KEY, method);
+    this.authMethod.complete();
+  }
+
   private getCacheItem(key: string): string {
     const item = sessionStorage.getItem(key);
     return (!!item) ? item : '';
@@ -174,3 +182,21 @@ export class LoginService {
   }
 
 }
+
+interface ApiResponse {
+  meta: Meta;
+  data: Object;
+}
+
+interface Meta {
+  status: string;
+  type: string;
+}
+
+interface AuthV2Response extends ApiResponse {
+  data: {
+    result: {
+      username: string;
+    }
+  };
+}