feat: Angular OAuth2 login page

ui/src/app/app.component.html

@@ -5,12 +5,23 @@ <h3 class="welcome">{{ 'appRoot.welcomeTo' | translate }}</h3>
       {{ 'appRoot.appTitle' | translate }}
       <h5 class="hint">{{ 'appRoot.youHaveToLogin' | translate }}</h5>
     </section>
-    <div style="padding-bottom: 50px">
-      <a href="{{ baseApiUrl }}login" class="btn btn-primary"> Log In </a>
-    </div>
+    <div *ngIf="isOAuth2; then oauth2; else standard"></div>
   </form>
 </div>
 
+<ng-template #standard>
+  <div style="padding-bottom: 50px">
+    <a href="{{ baseApiUrl }}login" class="btn btn-primary"> Log In </a>
+  </div>
+</ng-template>
+<ng-template #oauth2>
+  <div *ngFor="let item of clientRegistrations | async">
+    <div style="padding-bottom: 50px">
+      <a href="{{ baseApiUrl }}oauth2/authorization/{{ item }}" class="btn btn-primary">{{ item }}</a>
+    </div>
+  </div>
+</ng-template>
+
 <ng-template #main>
   <clr-main-container>
     <clr-header class="header header-7">

ui/src/app/app.component.ts

@@ -11,6 +11,8 @@ import {UrlUtilities} from './url-utilities.service';
 export class AppComponent {
   shouldProtect = this.securityService.shouldProtect();
   securityEnabled = this.securityService.securityEnabled();
+  isOAuth2 = this.securityService.isOAuth2();
+  clientRegistrations = this.securityService.clientRegistrations();
   baseApiUrl = UrlUtilities.calculateBaseApiUrl();
 
   constructor(

ui/src/app/app.module.ts

@@ -83,7 +83,8 @@ import {UrlUtilities} from './url-utilities.service';
                   security.authenticationEnabled,
                   security.authenticated,
                   security.username,
-                  security.roles
+                  security.roles,
+                  security.clientRegistrations
                 );
                 if (security.authenticated || !security.authenticationEnabled) {
                   return aboutService.load().pipe(map(() => security));

ui/src/app/security/service/security.service.spec.ts

@@ -93,7 +93,7 @@ describe('security/service/security.service.ts integration', () => {
   });
 
   it('should have proper state after loaded', () => {
-    service.loaded(false, true, 'fakeuser', ['role1']);
+    service.loaded(false, true, 'fakeuser', ['role1'], []);
 
     let expected = cold('(a|)', {a: false});
     expect(service.securityEnabled().pipe(take(1))).toBeObservable(expected);

ui/src/app/security/service/security.service.ts

@@ -1,12 +1,21 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {Store, select} from '@ngrx/store';
+import {Store, select, props} from '@ngrx/store';
 import {Observable} from 'rxjs';
 import {catchError, mergeMap, take} from 'rxjs/operators';
 import {HttpUtils} from '../../shared/support/http.utils';
 import {ErrorUtils} from '../../shared/support/error.utils';
 import {Security} from '../../shared/model/security.model';
-import {State, getUsername, getRoles, getEnabled, getShouldProtect, getSecurity} from '../store/security.reducer';
+import {
+  State,
+  getUsername,
+  getRoles,
+  getEnabled,
+  getShouldProtect,
+  getSecurity,
+  getClientRegistrations,
+  isOAuth2
+} from '../store/security.reducer';
 import {loaded, logout, unauthorised} from '../store/security.action';
 import {UrlUtilities} from '../../url-utilities.service';
 
@@ -34,12 +43,19 @@ export class SecurityService {
     return arr1.some(i => arr2.includes(i));
   }
 
-  loaded(enabled: boolean, authenticated: boolean, username: string, roles: string[]): void {
-    this.store.dispatch(loaded({enabled, authenticated, username, roles}));
+  loaded(enabled: boolean, authenticated: boolean, username: string, roles: string[], clientRegistrations: string[]): void {
+    this.store.dispatch(loaded({enabled, authenticated, username, roles, clientRegistrations}));
   }
 
   unauthorised(): void {
-    this.store.dispatch(unauthorised());
+    this.store.dispatch(
+      unauthorised({
+        authenticated: false,
+        enabled: false,
+        username: '',
+        roles: [],
+        clientRegistrations: []
+    }));
   }
 
   securityEnabled(): Observable<boolean> {
@@ -50,6 +66,10 @@ export class SecurityService {
     return this.store.pipe(select(getUsername));
   }
 
+  clientRegistrations(): Observable<string[]> {
+    return this.store.pipe(select(getClientRegistrations));
+  }
+
   roles(): Observable<string[]> {
     return this.store.pipe(select(getRoles));
   }
@@ -58,6 +78,10 @@ export class SecurityService {
     return this.store.pipe(select(getShouldProtect));
   }
 
+  isOAuth2(): Observable<boolean> {
+    return this.store.pipe(select(isOAuth2));
+  }
+
   load(): Observable<any> {
     const headers = HttpUtils.getDefaultHttpHeaders();
     return this.http
@@ -73,8 +97,9 @@ export class SecurityService {
     const headers = HttpUtils.getDefaultHttpHeaders();
     return this.http.get(UrlUtilities.calculateBaseApiUrl() + 'logout', {headers: headers, responseType: 'text'}).pipe(
       mergeMap(() => {
-        this.store.dispatch(logout());
-        return this.load();
+        const observable = this.load();
+        observable.pipe().subscribe(securityContext => this.store.dispatch(logout(securityContext)));
+        return observable;
       }),
       catchError(ErrorUtils.catchError)
     );

ui/src/app/security/store/security.action.ts

@@ -2,7 +2,13 @@ import {createAction, props} from '@ngrx/store';
 
 export const loaded = createAction(
   '[Security] Loaded',
-  props<{enabled: boolean; authenticated: boolean; username: string; roles: string[]}>()
+  props<{enabled: boolean; authenticated: boolean; username: string; roles: string[]; clientRegistrations: string[]}>()
+);
+export const logout = createAction(
+  '[Security] Logout',
+  props<{enabled: boolean; authenticated: boolean; username: string; roles: string[]; clientRegistrations: string[]}>()
+);
+export const unauthorised = createAction(
+  '[Security] Unauthorised',
+  props<{enabled: boolean; authenticated: boolean; username: string; roles: string[]; clientRegistrations: string[]}>()
 );
-export const logout = createAction('[Security] Logout');
-export const unauthorised = createAction('[Security] Unauthorised');

ui/src/app/security/store/security.effect.spec.ts

@@ -20,8 +20,15 @@ describe('Security Effect', () => {
   }));
 
   it('Unauthorised should logout', () => {
-    actions$ = of(SecurityAction.unauthorised());
-    const expected = cold('(a|)', {a: SecurityAction.logout()});
+    const props = {
+      authenticated: false,
+      enabled: false,
+      username: '',
+      roles: [],
+      clientRegistrations: []
+    };
+    actions$ = of(SecurityAction.unauthorised(props));
+    const expected = cold('(a|)', {a: SecurityAction.logout(props)});
     expect(effects.securityReset$).toBeObservable(expected);
     expect(routerSpy.navigate).toHaveBeenCalledWith(['/']);
   });

ui/src/app/security/store/security.reducer.spec.ts

@@ -13,25 +13,37 @@ describe('security/store/security.reducer.ts', () => {
       enabled: false,
       authenticated: true,
       username: 'fakeuser',
-      roles: ['role1', 'role2']
+      roles: ['role1', 'role2'],
+      clientRegistrations: ['test_registration', 'test_registration2']
     };
     let newState = fromSecurity.reducer(
       undefined,
       SecurityActions.loaded({
         enabled: false,
         authenticated: true,
         username: 'fakeuser',
-        roles: ['role1', 'role2']
+        roles: ['role1', 'role2'],
+        clientRegistrations: ['test_registration', 'test_registration2']
       })
     );
     expect(newState).toEqual(expectedState);
     expectedState = {
       enabled: false,
       authenticated: false,
       username: undefined,
-      roles: []
+      roles: [],
+      clientRegistrations: ['test_registration', 'test_registration2']
     };
-    newState = fromSecurity.reducer(newState, SecurityActions.logout());
+    newState = fromSecurity.reducer(
+      newState,
+      SecurityActions.logout({
+        enabled: false,
+        authenticated: false,
+        username: undefined,
+        roles: [],
+        clientRegistrations: ['test_registration', 'test_registration2']
+      })
+    );
     expect(newState).toEqual(expectedState);
   });
 });

ui/src/app/security/store/security.reducer.ts

@@ -9,6 +9,7 @@ export interface SecurityState {
   authenticated: boolean;
   username: string;
   roles: string[];
+  clientRegistrations?: string[];
 }
 
 export interface State extends fromRoot.State {
@@ -23,17 +24,22 @@ export const getAuthenticated = (state: State): boolean => state[securityFeature
 
 export const getUsername = (state: State): string => state[securityFeatureKey].username;
 
+export const getClientRegistrations = (state: State): string[] => state[securityFeatureKey].clientRegistrations;
+
 export const getRoles = (state: State): string[] => state[securityFeatureKey].roles;
 
 export const getShouldProtect = createSelector(getEnabled, getAuthenticated, (enabled, authenticated) =>
   !enabled ? false : enabled && !authenticated
 );
 
+export const isOAuth2 = createSelector(getClientRegistrations, clientRegistrations => clientRegistrations.length > 0);
+
 export const initialState: SecurityState = {
   enabled: true,
   authenticated: false,
   username: undefined,
-  roles: []
+  roles: [],
+  clientRegistrations: []
 };
 
 export const reducer = createReducer(
@@ -42,12 +48,14 @@ export const reducer = createReducer(
     enabled: props.enabled,
     authenticated: props.authenticated,
     username: props.username,
-    roles: props.roles
+    roles: props.roles,
+    clientRegistrations: props.clientRegistrations
   })),
-  on(SecurityActions.logout, state => ({
+  on(SecurityActions.logout, (state, props) => ({
     enabled: state.enabled,
     authenticated: false,
     username: undefined,
-    roles: []
+    roles: props.roles,
+    clientRegistrations: props.clientRegistrations
   }))
 );

ui/src/app/shared/model/security.model.ts

@@ -3,4 +3,5 @@ export interface Security {
   authenticated: boolean;
   username: string;
   roles: string[];
+  clientRegistrations: string[];
 }

ui/src/app/tests/data/security.ts

@@ -3,5 +3,6 @@ export const LOAD = {
   authenticated: false,
   username: null,
   roles: [],
+  clientRegistrations: [],
   _links: {self: {href: 'http://localhost:4200/security/info'}}
 };