fixes

.prettierignore

@@ -9,3 +9,4 @@ src/app/**/swagger-codegen
 src/app/**/gen-model
 .vscode
 .swagger-codegen
+*.svg

src/app/app.component.scss

@@ -32,6 +32,10 @@
 }
 
 ::ng-deep {
+    .mat-form-field-label {
+        font-weight: 700 !important;
+    }
+
     .mat-button > .mat-ripple {
         display: none;
     }

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { ContainerModule } from './container';
 import { initializer } from './initializer';
 import { SectionsModule } from './sections/sections.module';
 import { NavigateMenuModule } from './shared/components/navigate-menu/navigate-menu.module';
+import { LAYOUT_GAP_L, LAYOUT_GAP_M, LAYOUT_GAP_S } from './tokens';
 
 @NgModule({
     declarations: [AppComponent],
@@ -46,6 +47,18 @@ import { NavigateMenuModule } from './shared/components/navigate-menu/navigate-m
             multi: true,
             deps: [ConfigService, KeycloakService],
         },
+        {
+            provide: LAYOUT_GAP_S,
+            useValue: '8px',
+        },
+        {
+            provide: LAYOUT_GAP_M,
+            useValue: '16px',
+        },
+        {
+            provide: LAYOUT_GAP_L,
+            useValue: '24px',
+        },
     ],
     bootstrap: [AppComponent],
 })

src/app/container/components/user-info/filter-roles.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterRoles',
+})
+export class FilterRolesPipe implements PipeTransform {
+    transform(roles: string[]): string[] {
+        return roles.filter((role) => !role.includes('fraud'));
+    }
+}

src/app/container/components/user-info/format-role.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'formatRole',
+})
+export class FormatRolePipe implements PipeTransform {
+    transform(role: string): string {
+        switch (role) {
+            case 'manage-account':
+                return 'Manage account';
+            case 'manage-account-links':
+                return 'Manage account links';
+            case 'view-profile':
+                return 'View profile';
+            case 'offline_access':
+                return 'Offline access';
+            case 'uma_authorization':
+                return 'UMA authorization';
+            default:
+                return role;
+        }
+    }
+}

src/app/container/components/user-info/roles-to-string.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-    name: 'rolesToString',
-})
-export class RolesToStringPipe implements PipeTransform {
-    transform(roles: string[]): string {
-        return roles.join(', ');
-    }
-}

src/app/container/components/user-info/user-info.component.html

@@ -1,4 +1,6 @@
-<div class="user-info" fxLayout="column" fxLayoutAlign="center center">
+<div class="user-info" fxLayout="column" [fxLayoutGap]="layoutGapS">
     <div class="username">{{ username }}</div>
-    <div class="fb-caption roles">{{ roles | rolesToString }}</div>
+    <ul class="fb-caption roles">
+        <li *ngFor="let role of roles | filterRoles">{{ role | formatRole }}</li>
+    </ul>
 </div>

src/app/container/components/user-info/user-info.component.scss

@@ -11,7 +11,12 @@
     padding: 8px;
 }
 
-.username,
-.user-info {
+.username {
     text-align: center;
 }
+
+ul {
+    margin: 0;
+    padding-left: 20px;
+    padding-right: 8px;
+}

src/app/container/components/user-info/user-info.component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
+
+import { LAYOUT_GAP_S } from '../../../tokens';
 
 @Component({
     selector: 'fb-user-info',
@@ -9,4 +11,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 export class UserInfoComponent {
     @Input() username: string;
     @Input() roles: string[];
+
+    constructor(@Inject(LAYOUT_GAP_S) public layoutGapS: string) {}
 }

src/app/container/container.module.ts

@@ -10,7 +10,8 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 
 import { NavigateMenuModule } from '../shared/components/navigate-menu/navigate-menu.module';
-import { RolesToStringPipe } from './components/user-info/roles-to-string.pipe';
+import { FilterRolesPipe } from './components/user-info/filter-roles.pipe';
+import { FormatRolePipe } from './components/user-info/format-role.pipe';
 import { UserInfoComponent } from './components/user-info/user-info.component';
 import { ContainerComponent } from './container.component';
 
@@ -27,7 +28,7 @@ import { ContainerComponent } from './container.component';
         MatMenuModule,
         MatDividerModule,
     ],
-    declarations: [ContainerComponent, UserInfoComponent, RolesToStringPipe],
+    declarations: [ContainerComponent, UserInfoComponent, FilterRolesPipe, FormatRolePipe],
     exports: [ContainerComponent],
 })
 export class ContainerModule {}

src/app/sections/template/create-template/create-template.component.html

@@ -1,5 +1,5 @@
-<div fxLayout="column" fxLayoutGap="24px">
-    <div fxLayout fxLayoutAlign="start center" fxLayoutGap="16px">
+<div fxLayout="column" [fxLayoutGap]="layoutGapL">
+    <div fxLayout fxLayoutAlign="start center" [fxLayoutGap]="layoutGapM">
         <mat-icon (click)="back()">keyboard_backspace</mat-icon>
         <h3 class="fb-headline">New template</h3>
     </div>

src/app/sections/template/create-template/create-template.component.ts

@@ -1,6 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
+import { LAYOUT_GAP_L, LAYOUT_GAP_M } from '../../../tokens';
+
 @Component({
     templateUrl: './create-template.component.html',
     styleUrls: ['./create-template.component.scss'],
@@ -9,7 +11,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class CreateTemplateComponent {
     operationType$ = this.route.fragment;
 
-    constructor(private router: Router, private route: ActivatedRoute) {}
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        @Inject(LAYOUT_GAP_L) public layoutGapL: string,
+        @Inject(LAYOUT_GAP_M) public layoutGapM: string
+    ) {}
 
     back() {
         this.router.navigate([`../templates`]);

src/app/sections/template/edit-template/edit-template.component.html

@@ -1,5 +1,5 @@
-<div fxLayout="column" fxLayoutGap="24px">
-    <div fxLayout fxLayoutAlign="start center" fxLayoutGap="16px">
+<div fxLayout="column" [fxLayoutGap]="layoutGapL">
+    <div fxLayout fxLayoutAlign="start center" [fxLayoutGap]="layoutGapM">
         <mat-icon (click)="back()">keyboard_backspace</mat-icon>
         <h3 class="fb-headline">Edit template</h3>
     </div>

src/app/sections/template/edit-template/edit-template.component.ts

@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map, pluck, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
 
+import { LAYOUT_GAP_L, LAYOUT_GAP_M } from '../../../tokens';
 import { TemplatesService } from '../services/templates/templates.service';
 
 @Component({
@@ -22,7 +23,13 @@ export class EditTemplateComponent {
         shareReplay(1)
     );
 
-    constructor(private route: ActivatedRoute, private router: Router, private templateService: TemplatesService) {}
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private templateService: TemplatesService,
+        @Inject(LAYOUT_GAP_L) public layoutGapL: string,
+        @Inject(LAYOUT_GAP_M) public layoutGapM: string
+    ) {}
 
     back() {
         this.router.navigate([`../templates`]);

src/app/shared/components/create-template/create-template.component.html

@@ -1,6 +1,6 @@
 <mat-card>
-    <mat-card-content fxLayout="column" fxLayoutGap="24px">
-        <form [formGroup]="form" fxLayout="column" fxLayoutGap="24px">
+    <mat-card-content fxLayout="column" [fxLayoutGap]="layoutGapL">
+        <form [formGroup]="form" fxLayout="column" [fxLayoutGap]="layoutGapL">
             <mat-form-field [attr.readonly]="!!template" class="full-width" floatLabel="always">
                 <input required matInput placeholder="Name" formControlName="id" />
             </mat-form-field>
@@ -8,7 +8,7 @@
                 <textarea required matInput placeholder="Templates rules" formControlName="template"></textarea>
             </mat-form-field>
         </form>
-        <div fxLayout fxLayoutAlign="end" fxLayoutGap="16px">
+        <div fxLayout fxLayoutAlign="end" [fxLayoutGap]="layoutGapM">
             <button mat-button color="accent" [disabled]="inProgress$ | async" (click)="validateTemplate()">
                 Validate
             </button>

src/app/shared/components/create-template/create-template.component.ts

@@ -1,9 +1,10 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
 import { Template } from '../../../sections/template/types/template';
+import { LAYOUT_GAP_L, LAYOUT_GAP_M } from '../../../tokens';
 import { OperationType } from '../../constants/operation-type';
 import { ErrorHandlerService } from '../../services/utils/error-handler.service';
 import { ValidateResponseHandler } from '../../services/utils/validate-response-handler.service';
@@ -31,7 +32,9 @@ export class CreateTemplateComponent implements OnInit {
         private templateService: TemplateService,
         private errorHandlerService: ErrorHandlerService,
         private validateResponseHandler: ValidateResponseHandler,
-        private snackBar: MatSnackBar
+        private snackBar: MatSnackBar,
+        @Inject(LAYOUT_GAP_L) public layoutGapL: string,
+        @Inject(LAYOUT_GAP_M) public layoutGapM: string
     ) {}
 
     ngOnInit() {

src/app/tokens.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const LAYOUT_GAP_S = new InjectionToken<string>('layoutGapS');
+export const LAYOUT_GAP_M = new InjectionToken<string>('layoutGapM');
+export const LAYOUT_GAP_L = new InjectionToken<string>('layoutGapL');