[Library | Trunk]: Add lock icon on disabled inputs

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60182 d315682c-612b-4755-9ff5-7f18f6832af3

role-verification/role-verification.component.ts

@@ -176,9 +176,9 @@ export class RoleVerificationComponent implements OnInit, OnDestroy {
       this.loading = false;
       this.managerModal.cancel();
       this.error = null;
-      this.subs.push(this.userManagementService.updateUserInfo(() => {
+      this.userManagementService.updateUserInfo(() => {
         this.router.navigate(['/admin/' + this.verification.entity]);
-      }));
+      });
     }, error => {
       this.loading = false;
       this.error = 'The verification code is invalid';
@@ -190,9 +190,9 @@ export class RoleVerificationComponent implements OnInit, OnDestroy {
     this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
       this.loading = false;
       this.error = null;
-      this.subs.push(this.userManagementService.updateUserInfo(() => {
+      this.userManagementService.updateUserInfo(() => {
         this.isMember = true;
-      }));
+      });
     }, error => {
       this.loading = false;
       this.error = 'The verification code is invalid';

sharedComponents/input/input.component.ts

@@ -15,28 +15,32 @@ export interface Option {
 @Component({
   selector: '[dashboard-input]',
   template: `
-    <div *ngIf="label && type != 'checkbox'"
+    <div *ngIf="label && type != 'checkbox'" class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
-         class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
     <div *ngIf="hint" class="uk-margin-bottom uk-text-small uk-form-hint">{{hint}}</div>
     <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
       <ng-content></ng-content>
       <div [class.uk-hidden]="hideControl" class="uk-width-expand@m uk-position-relative" [class.uk-flex-first]="!extraLeft">
-        <ng-template [ngIf]="icon">
+        <ng-template [ngIf]="icon && formControl.enabled">
           <span class="uk-text-muted" [ngClass]="iconLeft?('left'):'right'">
             <icon [name]="icon"></icon>
           </span>
         </ng-template>
+        <ng-template [ngIf]="formControl.disabled">
+          <span class="uk-text-muted left">
+            <icon [name]="'lock'"></icon>
+          </span>
+        </ng-template>
         <ng-template [ngIf]="type === 'text'">
-          <input class="uk-input input-box uk-text-small" [placeholder]="placeholder" [formControl]="formControl"
+          <input class="uk-input input-box uk-text-small" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''" [placeholder]="placeholder" [formControl]="formControl"
                  [class.uk-form-danger]="formControl.invalid && formControl.touched">
         </ng-template>
         <ng-template [ngIf]="type === 'textarea'">
-          <textarea class="uk-textarea input-box uk-text-small" [rows]="rows" [placeholder]="placeholder"
+          <textarea class="uk-textarea input-box uk-text-small" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''" [rows]="rows" [placeholder]="placeholder"
                     [formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
           </textarea>
         </ng-template>
         <ng-template [ngIf]="type === 'select'">
-          <div class="input-box clickable" [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
+          <div class="input-box" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''" [class.clickable]="formControl.enabled"  [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
             <mat-form-field class="uk-width-1-1">
               <mat-select #select *ngIf="type === 'select'" [required]="required" [value]="null"
                           (openedChange)="stopPropagation()" [formControl]="formControl" [disableOptionCentering]="true">

sharedComponents/input/input.module.ts

@@ -6,6 +6,9 @@ import {MatInputModule} from "@angular/material/input";
 import {MatSelectModule} from "@angular/material/select";
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {IconsModule} from "../../utils/icons/icons.module";
+import {IconsService} from "../../utils/icons/icons.service";
+import {lock} from "../../utils/icons/icons";
+
 @NgModule({
   imports: [
     SharedModule,
@@ -23,4 +26,7 @@ import {IconsModule} from "../../utils/icons/icons.module";
   ]
 })
 export class InputModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([lock]);
+  }
 }