[87] - User Management upgrade

.gitignore

@@ -28,6 +28,7 @@ xcuserdata/
 *.sublime-workspace
 
 # IDE - VSCode
+.vscode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json

env.sample

@@ -27,10 +27,22 @@ export PH_OAUTH_CLIENT_ID=opsapp
 
 export PH_OAUTH_CLIENT_SECRET=Y2xpZW50Og=
 
+export PH_OAUTH_CLIENT_UUUID=Y2xpZW50Og=
+
 export PH_OAUTH_BASIC_AUTH=true
 
 export PH_OAUTH_BASIC_AUTH_TOKEN=Y2xpZW50Og==
 
+export PH_JBPM_API_URL=http://localhost:8180/kie-server/services/rest/server
+
+export PH_JBPM_CONTAINER_ID=PaymentHubEE_1.0.0-SNAPSHOT
+
+export PH_JBPM_CREDENTIALS_ADMIN_MAKER=Y2xpZW50Og==
+
+export PH_JBPM_CREDENTIALS_ADMIN_CHECKER=Y2xpZW50Og==
+
+export PH_JBPM_CREDENTIALS_BOTH=Y2xpZW50Og==
+
 export PH_DEFAULT_LANGUAGE=en
 
 export PH_SUPPORTED_LANGUAGES=en,fr,es

src/app/core/authentication/authentication.service.ts

@@ -164,7 +164,7 @@ export class AuthenticationService {
    */
   private getUserDetails(loginContext: LoginContext, tokenResponse: OAuth2Token) {
     if (this.isOauthKeyCloak()) {
-      this.oauthKeycloakService.introspect(tokenResponse).subscribe((userDetails: Introspect) => {
+      this.oauthKeycloakService.getUserInfo(tokenResponse).subscribe((userDetails: Introspect) => {
         this.storage.setItem(this.oAuthUserDetailsStorageKey, JSON.stringify(userDetails));
         this.onLoginSuccess({ username: loginContext.username, accessToken: tokenResponse.access_token, authenticated: true, tenantId: loginContext.tenant } as any);
 

src/app/core/authentication/keycloak/oauth-keycloak.service.ts

@@ -91,6 +91,18 @@ export class OauthKeycloakService {
     return this.http.post(url, payload.toString(), httpOptions);
   }
 
+  getUserInfo(token: OAuth2Token): Observable<any> {
+
+    const httpOptions = {
+      headers: new HttpHeaders({
+        Authorization: `Bearer ${token.access_token}`,
+        'Content-Type': 'application/json'
+      })
+    };
+    const url: string = `${this.url()}/userinfo`;
+    return this.http.get(url, httpOptions);
+  }
+
   private url(): string {
     return `${environment.oauth.serverUrl}/realms/${environment.oauth.realm}/protocol/openid-connect`;
   }

src/app/core/shell/content/content.component.html

@@ -6,7 +6,7 @@
         </ng-container>
     </xng-breadcrumb>
     <ng-template #iconTemplate>
-        <mat-icon>chevron_right</mat-icon>
+        <fa-icon icon="arrow-right" size="2xs"></fa-icon>
     </ng-template>
 </div>
 

src/app/core/shell/content/content.component.scss

@@ -1,9 +1,23 @@
-.container {
-    width: 80%;
+@import 'theme/theme';
 
+.container {
+    width: 90%;
+    margin: 0 auto;
     .breadcrumb {
         padding-left: 18%;
         margin: 0;
-        font-size: x-large;
+        font-size: 1.6rem;
+        font-weight: 600;
     }
 }
+
+::ng-deep .xng-breadcrumb-link{
+    color: $primary !important;
+    font-size:1.3rem;
+    font-weight: 400;
+    cursor: pointer;
+}
+
+::ng-deep .xng-breadcrumb-link:hover{
+    text-decoration: none !important;
+}

src/app/core/shell/shell.component.html

@@ -26,10 +26,8 @@
     <!-- Progress Bar -->
     <mat-progress-bar [mode]="progressBarMode"></mat-progress-bar>
 
-    <div class="vertical-space"></div>
     <!-- Toolbar -->
     <mifosx-toolbar [sidenav]="sidenav" (collapse)="toggleCollapse($event)"></mifosx-toolbar>
-    <div class="vertical-space"></div>
 
     <!-- Content -->
     <mifosx-content></mifosx-content>

src/app/core/shell/shell.component.scss

@@ -9,15 +9,10 @@
   }
 
   .sidebar-full {
-    width: 22rem;
+    width: 18rem;
   }
 
   .sidebar-compact {
-    width: 8rem;
-  }
-
-  .vertical-space {
-    line-height: 40px;
-    height: 40px;
+    width: 6rem;
   }
 }

src/app/core/shell/sidenav/sidenav.component.html

@@ -8,10 +8,10 @@
 
     <div class="app-sidenav">
 
-      <div class="m-t-30 m-b-1 nav-item-sep center">
-        <div class="app-brand" [routerLink]="['/home']">
-          <img src="assets/images/app_logo.png" alt="app-logo" class="app-logo">
-          <span *ngIf="!sidenavCollapsed" #logo class="app-logo-text text-muted">{{ 'APP_NAME' | translate }}</span>
+      <div fxLayout="row" fxLayoutAlign="center center" class="nav-item-sep">
+        <div  fxLayout="row" fxLayoutAlign="space-between center"  class="app-brand">
+          <fa-icon  class="app-logo" icon="square-parking" size="xl"></fa-icon>
+          <span *ngIf="!sidenavCollapsed" #logo class="app-logo-text">{{ 'APP_NAME' | translate }}</span>
         </div>
       </div>
 
@@ -22,6 +22,48 @@
           </mat-icon>
           <a *ngIf="!sidenavCollapsed" matLine #dashboard>{{ 'labels.menus.Dashboard' | translate }}</a>
         </mat-list-item>
+
+        <!-- User Management Section -->
+        <mat-list-item (click)="toggleUserManagement($event)" matTooltip="User Management">
+          <a *ngIf="!sidenavCollapsed" fxLayout="row" fxLayoutAlign="space-between center" matLine #userManagement>
+            <p>{{ "labels.menus.User Management" | translate }}</p>
+            <mat-icon *ngIf="!sidenavCollapsed" matListIcon>
+              <fa-icon [icon]="isUserManagementExpanded ? 'caret-up' : 'caret-down'" size="lg" class="mat-list-icon"></fa-icon>
+            </mat-icon>
+          </a>
+          <mat-icon matListIcon>
+            <fa-icon icon="users" size="sm"></fa-icon>
+          </mat-icon>
+        </mat-list-item>
+
+        <div class="expanded-user p-4" fxLayout="column" fxLayoutAlign="center flex-end"
+          *ngIf="!sidenavCollapsed && isUserManagementExpanded">
+          <button fxLayout="row" fxLayoutAlign="flex-start center" [routerLink]="['/users/create']" class="sub-menu" [ngStyle]="{
+                          'background-color': activeButton === 'create' ? 'white' : '',
+                          color: activeButton === 'create' ? '#1658BD' : ''
+                        }" (click)="setActiveButton('create'); $event.stopPropagation()">
+            <a matLine #createUser>{{
+              "labels.menus.Create User" | translate
+              }}</a>
+          </button>
+          <button fxLayout="row" fxLayoutAlign="flex-start center" [routerLink]="['/users/user-requests']" class="sub-menu" [ngStyle]="{
+                          'background-color':
+                            activeButton === 'userRequests' ? 'white' : '',
+                          color: activeButton === 'userRequests' ? '#1658BD' : ''
+                        }" (click)="setActiveButton('userRequests'); $event.stopPropagation()">
+            <a matLine #userRequests>{{
+              "labels.menus.User Requests" | translate
+              }}</a>
+          </button>
+          <button fxLayout="row" fxLayoutAlign="flex-start center" [routerLink]="['/users']" class="sub-menu" [ngStyle]="{
+                          'background-color': activeButton === 'viewUsers' ? 'white' : '',
+                          color: activeButton === 'viewUsers' ? '#1658BD' : ''
+                        }" (click)="setActiveButton('viewUsers'); $event.stopPropagation()">
+            <a matLine #view>{{ "labels.menus.View Users" | translate }}</a>
+          </button>
+        </div>
+
+
         <mat-list-item [routerLink]="['/settings']" matTooltip="Settings">
           <mat-icon matListIcon >
             <fa-icon icon="cog" size="lg"></fa-icon>
@@ -32,10 +74,10 @@
 
       <div class="sidenav-collapse">
         <button mat-fab *ngIf="!sidenavCollapsed" matTooltip="Close" (click)="sideNavCollapsed(true)">
-          <fa-icon icon="arrow-left" size="lg"></fa-icon>
+          <fa-icon icon="left-long" size="lg"></fa-icon>
         </button>
         <button mat-fab *ngIf="sidenavCollapsed" matTooltip="Open" (click)="sideNavCollapsed(false)">
-          <fa-icon icon="arrow-right" size="lg"></fa-icon>
+          <fa-icon icon="right-long" size="lg"></fa-icon>
         </button>
       </div>
     </div>