Pull request #212: Update user dialog

Merge in EDELIVERY/smp from bugfix/EDELIVERY-9397-user-email-can-not-save-for-a-user-when-trying-to-put-user-email-in-user-edit to development

* commit '5eb90706b9d17d9f0d00c8c5b522599c25658e61':
  Update user dialog

smp-angular/src/app/alert/alert.component.html

@@ -9,7 +9,9 @@
   [showSearchPanel]="false"
   [filter]="filter"
   [allowNewItems]="false"
-  [allowDeleteItems]="securityService.isCurrentUserSystemAdmin()"
+  [allowDeleteItems]="false"
+  [allowEditItems]="false"
+  [showActionButtons]="false"
 >
   <ng-template #additionalToolButtons>
     <span style="width: 2px;background-color: deepskyblue;">&nbsp;</span>

smp-angular/src/app/app.component.html

@@ -95,7 +95,7 @@
             <button mat-menu-item id="changePassword_id" (click)="changeCurrentUserPassword()">
               <span>Change password</span>
             </button>
-            <button mat-menu-item id="getAccessToken_id" (click)="regenerateAccesesToken()">
+            <button mat-menu-item id="getAccessToken_id" (click)="regenerateCurrentUserAccessToken()">
               <span>Generated access token</span>
             </button>
 

smp-angular/src/app/app.component.ts

-import {Component, ViewChild} from '@angular/core';
+import {Component} from '@angular/core';
 import {SecurityService} from './security/security.service';
 import {Router} from '@angular/router';
 import {Authority} from "./security/authority.model";
@@ -8,7 +8,6 @@ import {GlobalLookups} from "./common/global-lookups";
 import {UserController} from "./user/user-controller";
 import {HttpClient} from "@angular/common/http";
 import {SearchTableEntityStatus} from "./common/search-table/search-table-entity-status.model";
-import {SmpConstants} from "./smp.constants";
 import {UserService} from "./user/user.service";
 import {UserDetailsDialogMode} from "./user/user-details-dialog/user-details-dialog.component";
 
@@ -59,21 +58,25 @@ export class AppComponent {
     });
   }
 
+
   changeCurrentUserPassword() {
     const formRef: MatDialogRef<any> = this.userController.changePasswordDialog({
-      data: this.securityService.getCurrentUser()
+      data: {user: this.securityService.getCurrentUser(), adminUser:false}
     });
   }
 
-  regenerateAccesesToken() {
+  regenerateCurrentUserAccessToken() {
     const formRef: MatDialogRef<any> = this.userController.generateAccessTokenDialog({
-      data: this.securityService.getCurrentUser()
+      data: {user: this.securityService.getCurrentUser(), adminUser:false}
     });
     formRef.afterClosed().subscribe(result => {
-      /*if (result) {
-        const user = {...formRef.componentInstance.getCurrent(), status: SearchTableEntityStatus.UPDATED};
-        this.userService.updateUser(user);
-      }*/
+      if (result) {
+        let user = {...formRef.componentInstance.getCurrent()};
+        let currUser = this.securityService.getCurrentUser();
+        currUser.accessTokenId = user.accessTokenId;
+        currUser.accessTokenExpireOn = user.accessTokenExpireOn;
+        this.securityService.updateUserDetails(currUser);
+      }
     });
   }
 

smp-angular/src/app/app.module.ts

@@ -49,9 +49,9 @@ import {DatePipe} from './custom-date/date.pipe';
 import {CapitalizeFirstPipe} from './common/capitalize-first.pipe';
 import {DefaultPasswordDialogComponent} from './security/default-password-dialog/default-password-dialog.component';
 import {ServiceGroupDetailsDialogComponent} from './service-group-edit/service-group-details-dialog/service-group-details-dialog.component';
-import {CancelDialogComponent} from './common/cancel-dialog/cancel-dialog.component';
+import {CancelDialogComponent} from './common/dialogs/cancel-dialog/cancel-dialog.component';
 import {DirtyGuard} from './common/dirty.guard';
-import {SaveDialogComponent} from './common/save-dialog/save-dialog.component';
+import {SaveDialogComponent} from './common/dialogs/save-dialog/save-dialog.component';
 import {ColumnPickerComponent} from './common/column-picker/column-picker.component';
 import {PageHelperComponent} from './common/page-helper/page-helper.component';
 import {SharedModule} from './common/module/shared.module';
@@ -67,26 +67,27 @@ import {CertificateService} from './user/certificate.service';
 import {GlobalLookups} from './common/global-lookups';
 import {ServiceGroupExtensionWizardDialogComponent} from './service-group-edit/service-group-extension-wizard-dialog/service-group-extension-wizard-dialog.component';
 import {ServiceMetadataWizardDialogComponent} from './service-group-edit/service-metadata-wizard-dialog/service-metadata-wizard-dialog.component';
-import {ConfirmationDialogComponent} from './common/confirmation-dialog/confirmation-dialog.component';
+import {ConfirmationDialogComponent} from './common/dialogs/confirmation-dialog/confirmation-dialog.component';
 import {SpinnerComponent} from './common/spinner/spinner.component';
 import {UserService} from './user/user.service';
 import {UserDetailsService} from './user/user-details-dialog/user-details.service';
-import {ExpiredPasswordDialogComponent} from './common/expired-password-dialog/expired-password-dialog.component';
-import {DialogComponent} from './common/dialog/dialog.component';
+import {ExpiredPasswordDialogComponent} from './common/dialogs/expired-password-dialog/expired-password-dialog.component';
+import {DialogComponent} from './common/dialogs/dialog/dialog.component';
 import {KeystoreImportDialogComponent} from "./domain/keystore-import-dialog/keystore-import-dialog.component";
 import {KeystoreEditDialogComponent} from "./domain/keystore-edit-dialog/keystore-edit-dialog.component";
-import {CertificateDialogComponent} from "./common/certificate-dialog/certificate-dialog.component";
+import {CertificateDialogComponent} from "./common/dialogs/certificate-dialog/certificate-dialog.component";
 import {TruststoreEditDialogComponent} from "./user/truststore-edit-dialog/truststore-edit-dialog.component";
-import {InformationDialogComponent} from "./common/information-dialog/information-dialog.component";
+import {InformationDialogComponent} from "./common/dialogs/information-dialog/information-dialog.component";
 import {KeystoreService} from "./domain/keystore.service";
 import {TruststoreService} from "./user/truststore.service";
 import {SmlIntegrationService} from "./domain/sml-integration.service";
-import {PasswordChangeDialogComponent} from "./common/password-change-dialog/password-change-dialog.component";
-import {AccessTokenGenerationDialogComponent} from "./common/access-token-generation-dialog/access-token-generation-dialog.component";
+import {PasswordChangeDialogComponent} from "./common/dialogs/password-change-dialog/password-change-dialog.component";
+import {AccessTokenGenerationDialogComponent} from "./common/dialogs/access-token-generation-dialog/access-token-generation-dialog.component";
 import {AlertComponent} from "./alert/alert.component";
 import {PropertyComponent} from "./property/property.component";
 import {PropertyDetailsDialogComponent} from "./property/property-details-dialog/property-details-dialog.component";
 import {MatCheckbox, MatCheckboxModule} from "@angular/material/checkbox";
+import {AutoFocusDirective} from "./common/directive/autofocus/auto-focus.directive";
 
 
 @NgModule({
@@ -133,6 +134,7 @@ import {MatCheckbox, MatCheckboxModule} from "@angular/material/checkbox";
     KeystoreEditDialogComponent,
     CertificateDialogComponent,
     TruststoreEditDialogComponent,
+    AutoFocusDirective,
   ],
   imports: [
     BrowserModule,

smp-angular/src/app/common/access-token-generation-dialog/access-token-generation-dialog.component.css

-.password-panel .mat-form-field {
-  margin-bottom: 1.5em;
-  padding: 2px;
-}

smp-angular/src/app/common/certificate-dialog/certificate-dialog.component.html

-<h2 mat-dialog-title>{{formTitle}}</h2>
-<mat-dialog-content style="height:450px;width:900px">
-  <form [formGroup]="certificateForm">
-    <mat-card>
-      <mat-card-content fxLayout="column">
-         <mat-form-field class="alias" style="width:100%">
-           <input matInput placeholder="Alias" [formControl]="certificateForm.controls['alias']" id="alias_id" readonly="true">
-         </mat-form-field>
-         <mat-form-field class="certificate-subject" style="width:100%">
-           <input matInput placeholder="Subject Name" [formControl]="certificateForm.controls['subject']" id="subject_id" readonly="true">
-         </mat-form-field>
-         <mat-form-field class="certificate-valid-from" style="width:100%">
-           <input matInput placeholder="Valid From" [formControl]="certificateForm.controls['validFrom']" id="validFrom_id" readonly="true">
-         </mat-form-field>
-         <mat-form-field class="certificate-valid-to" style="width:100%">
-           <input matInput placeholder="Valid To" [formControl]="certificateForm.controls['validTo']" id="validTo_id" readonly="true">
-         </mat-form-field>
-         <mat-form-field class="certificate-issuer" style="width:100%">
-           <input matInput placeholder="Issuer" [formControl]="certificateForm.controls['issuer']" id="issuer_id" readonly="true">
-         </mat-form-field>
-         <mat-form-field class="certificate-serial-number" style="width:100%">
-           <input matInput placeholder="Serial Number" [formControl]="certificateForm.controls['serialNumber']"
-                  id="servialNumber_id" readonly="true">
-         </mat-form-field>
-         <mat-form-field class="certificate-id" style="width:100%">
-           <input matInput placeholder="SMP certificate ID" [formControl]="certificateForm.controls['certificateId']"
-                  id="certificateId_id"
-                  resizeable="true" readonly="true">
-         </mat-form-field>
-      </mat-card-content>
-    </mat-card>
-
-  </form>
-</mat-dialog-content>
-
-<table class="buttonsRow">
-  <tr>
-    <td>
-      <button mat-raised-button color="primary" mat-dialog-close>
-        <mat-icon>close</mat-icon>
-        <span>Close</span>
-      </button>
-    </td>
-  </tr>
-</table>
-
-

smp-angular/src/app/common/dialog/dialog.component.html

-<div class="dialog">
-  <h1 mat-dialog-title>{{title}}</h1>
-
-  <div class="divTable">
-    <div class="divTableBody">
-
-      <div class="divTableRow">
-
-        <div *ngIf="isConfirmationDialog()" class="divTableCell" >
-          <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id" tabindex="0">
-            <mat-icon>check_circle</mat-icon>
-            <span>Yes</span>
-          </button>
-        </div>
-
-        <div *ngIf="isConfirmationDialog()" class="divTableCell">
-          <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id" tabindex="1">
-            <mat-icon>cancel</mat-icon>
-            <span>No</span>
-          </button>
-        </div>
-
-        <div *ngIf="isInformationDialog()" class="divTableCell">
-          <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="okbuttondialog_id" tabindex="3">
-            <mat-icon>warning</mat-icon>
-            <span>OK</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

smp-angular/src/app/common/dialogs/access-token-generation-dialog/access-token-generation-dialog.component.css

+.empty-field-label {
+  color: gray;
+}

smp-angular/src/app/common/access-token-generation-dialog/access-token-generation-dialog.component.html → smp-angular/src/app/common/dialogs/access-token-generation-dialog/access-token-generation-dialog.component.html

 <h2 mat-dialog-title>{{formTitle}}</h2>
 <mat-dialog-content style="width:700px">
-
-  <div *ngIf="message" [ngClass]="{ 'alert-message': message, 'alert-message-success': messageType === 'success', 'alert-message-error':messageType === 'error' }" id="alertmessage_id">
+  <div *ngIf="message"
+       [ngClass]="{ 'alert-message': message, 'alert-message-success': messageType === 'success', 'alert-message-error':messageType === 'error' }"
+       id="alertmessage_id">
     <span class="alert-message-close-button" (click)="clearAlert()">&times;</span>
     {{message}}
   </div>
@@ -9,52 +10,54 @@
     <mat-card>
       <mat-card-content fxLayout="column">
         <mat-form-field style="width:100%">
-          <input matInput placeholder="User email" formControlName="email" id="em_id" readonly="true">
+          <input matInput placeholder="Generate access token for Username" formControlName="username" id="un_id" readonly="true">
         </mat-form-field>
         <mat-form-field style="width:100%">
-          <input matInput placeholder="Username" formControlName="username" id="un_id" readonly="true">
+          <input matInput placeholder="Generate access token for User with email" formControlName="email" id="em_id"
+                 [ngClass]="{ 'empty-field-label': isEmptyEmailAddress }" readonly="true"  >
         </mat-form-field>
       </mat-card-content>
     </mat-card>
     <mat-card>
       <mat-card-content>
-        <mat-card-actions >
+        <mat-card-actions>
           <button mat-raised-button color="primary" (click)="regenerateAccessToken()"
-                  [disabled]="!dialogForm.valid" >
+                  [disabled]="!dialogForm.valid">
             <mat-icon>check_circle</mat-icon>
             <span>Regenerate access token</span>
           </button>
+          <mat-label *ngIf="adminUser" style="color: red;font-weight: bold">
+            Token will be generated immediately.
+          </mat-label>
         </mat-card-actions>
         <mat-form-field style="width:100%">
-            <input matInput placeholder="Current Password" [type]="hideCurrPwdFiled ? 'password' : 'text'"
-                   formControlName="current-password" required id="cp_id">
-            <mat-icon matSuffix
-                      (click)="hideCurrPwdFiled = !hideCurrPwdFiled">{{hideCurrPwdFiled ? 'visibility_off' : 'visibility'}}</mat-icon>
-            <mat-error *ngIf="passwordError('current-password', 'required')">Password is required</mat-error>
-          </mat-form-field>
-
-          <mat-form-field style="width:100%">
-            <input matInput placeholder="Access token id" formControlName="accessTokenId" id="at_id" readonly="true">
-          </mat-form-field>
+          <input matInput [placeholder]="getPasswordTitle" [type]="hideCurrPwdFiled ? 'password' : 'text'"
+                 formControlName="current-password" required id="cp_id">
+          <mat-icon matSuffix
+                    (click)="hideCurrPwdFiled = !hideCurrPwdFiled">{{hideCurrPwdFiled ? 'visibility_off' : 'visibility'}}</mat-icon>
+          <mat-error *ngIf="passwordError('current-password', 'required')">Password is required</mat-error>
+        </mat-form-field>
 
-          <mat-form-field style="width:100%">
-            <input matInput placeholder="Valid until" formControlName="accessTokenExpireOn" id="expireOn_id"
-                   readonly="true">
-          </mat-form-field>
+        <mat-form-field style="width:100%">
+          <input matInput placeholder="Access token id" formControlName="accessTokenId" id="at_id" readonly="true">
+        </mat-form-field>
 
+        <mat-form-field style="width:100%">
+          <input matInput placeholder="Valid until"
+                 value="{{dialogForm.get('accessTokenExpireOn').value | date:dateTimeFormat}}"
+                  id="expireOn_id"
+                 readonly="true">
+        </mat-form-field>
       </mat-card-content>
     </mat-card>
   </form>
-
-  <table class="buttonsRow">
-    <tr>
-      <td>
-        <button mat-raised-button color="primary" mat-dialog-close>
-          <mat-icon>cancel</mat-icon>
-          <span>Close</span>
-        </button>
-      </td>
-    </tr>
-  </table>
-  <div class="required-fields">* required fields</div>
 </mat-dialog-content>
+<div class="required-fields">* required fields</div>
+
+<mat-dialog-actions>
+  <button mat-raised-button color="primary" (click)="closeDialog()">
+    <mat-icon>cancel</mat-icon>
+    <span>Close</span>
+  </button>
+</mat-dialog-actions>
+

smp-angular/src/app/common/access-token-generation-dialog/access-token-generation-dialog.component.ts → smp-angular/src/app/common/dialogs/access-token-generation-dialog/access-token-generation-dialog.component.ts

 import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  FormGroupDirective, NgForm,
-  ValidatorFn,
-  Validators
-} from "@angular/forms";
-import {User} from "../../security/user.model";
-import {GlobalLookups} from "../global-lookups";
-import {UserDetailsService} from "../../user/user-details-dialog/user-details.service";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {User} from "../../../security/user.model";
+import {GlobalLookups} from "../../global-lookups";
+import {UserDetailsService} from "../../../user/user-details-dialog/user-details.service";
 import {AccessTokenRo} from "./access-token-ro.model";
-import {SearchTableEntityStatus} from "../search-table/search-table-entity-status.model";
-import {SecurityService} from "../../security/security.service";
+import {SecurityService} from "../../../security/security.service";
+import {SmpConstants} from "../../../smp.constants";
+import {SearchTableEntityStatus} from "../../search-table/search-table-entity-status.model";
 
 @Component({
   selector: 'smp-access-token-generation-dialog',
@@ -23,24 +16,31 @@ import {SecurityService} from "../../security/security.service";
 })
 export class AccessTokenGenerationDialogComponent {
 
+  dateTimeFormat: string = SmpConstants.DATE_TIME_FORMAT;
   formTitle = "Access token generation dialog!";
   dialogForm: FormGroup;
   hideCurrPwdFiled: boolean = true;
   hideNewPwdFiled: boolean = true;
   hideConfPwdFiled: boolean = true;
+  tokenChanged: boolean = false;
+  adminUser: boolean = false;
   current: User;
   message: string;
   messageType: string = "alert-error";
 
+
   constructor(
     public dialogRef: MatDialogRef<AccessTokenGenerationDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: User,
+    @Inject(MAT_DIALOG_DATA) public data: any,
     private lookups: GlobalLookups,
     private userDetailsService: UserDetailsService,
     private securityService: SecurityService,
     private fb: FormBuilder
   ) {
-    this.current = {...data}
+    dialogRef.disableClose = true;//disable default close operation
+
+    this.current = {...data.user}
+    this.adminUser = data.adminUser
 
 
     this.dialogForm = fb.group({
@@ -51,37 +51,67 @@ export class AccessTokenGenerationDialogComponent {
       'current-password': new FormControl({value: null, readonly: false}, [Validators.required]),
     });
 
-    this.dialogForm.controls['email'].setValue(this.current.emailAddress);
+    this.dialogForm.controls['email'].setValue(this.isEmptyEmailAddress ? "Empty email address!" : this.current.emailAddress);
     this.dialogForm.controls['username'].setValue(this.current.username);
     this.dialogForm.controls['accessTokenId'].setValue(this.current.accessTokenId);
     this.dialogForm.controls['accessTokenExpireOn'].setValue(this.current.accessTokenExpireOn);
     this.dialogForm.controls['current-password'].setValue('');
+    this.tokenChanged = false;
   }
 
   public passwordError = (controlName: string, errorName: string) => {
     return this.dialogForm.controls[controlName].hasError(errorName);
   }
 
+  get isEmptyEmailAddress() {
+    return !this.current.emailAddress;
+  }
+
+  get getPasswordTitle(): string{
+    return this.adminUser?"Admin password for user ["+this.securityService.getCurrentUser().username+"]":"Current password";
+  }
+
   regenerateAccessToken() {
     this.clearAlert();
 
-    // update password
-    this.userDetailsService.regenerateAccessToken(this.current.userId,
-      this.dialogForm.controls['current-password'].value).subscribe((response: AccessTokenRo) => {
-        this.showSuccessMessage("Token with id: " + response.identifier + " and value: " + response.value + " was generated!")
-        this.current.accessTokenId = response.identifier;
-        this.current.accessTokenExpireOn = response.expireOn;
-        // set to current form
-        this.dialogForm.controls['accessTokenId'].setValue(this.current.accessTokenId);
-        this.dialogForm.controls['accessTokenExpireOn'].setValue(this.current.accessTokenExpireOn);
-        // save new values
-        const user = {...this.current, status: SearchTableEntityStatus.UPDATED};
-        this.securityService.updateUserDetails(user);
-      },
-      (err) => {
-        this.showErrorMessage(err.error.errorDescription);
-      }
-    );
+    if (this.adminUser) {
+// update password
+      this.userDetailsService.regenerateAccessTokenAdmin(this.securityService.getCurrentUser().userId,
+        this.dialogForm.controls['current-password'].value,
+      this.current.userId
+      ).subscribe((response: AccessTokenRo) => {
+          this.showSuccessMessage("Token with id: " + response.identifier + " and value: " + response.value + " was generated!")
+          this.current.accessTokenId = response.identifier;
+          this.current.accessTokenExpireOn = response.expireOn;
+          // set to current form
+          this.dialogForm.controls['accessTokenId'].setValue(this.current.accessTokenId);
+          this.dialogForm.controls['accessTokenExpireOn'].setValue(this.current.accessTokenExpireOn);
+          this.tokenChanged = true;
+        },
+        (err) => {
+          this.showErrorMessage(err.error.errorDescription);
+        }
+      );
+    } else {
+      // update access token for currently logged-in user
+      this.userDetailsService.regenerateAccessToken(this.current.userId,
+        this.dialogForm.controls['current-password'].value).subscribe((response: AccessTokenRo) => {
+          this.showSuccessMessage("Token with id: " + response.identifier + " and value: " + response.value + " was generated!")
+          this.current.accessTokenId = response.identifier;
+          this.current.accessTokenExpireOn = response.expireOn;
+          // set to current form
+          this.dialogForm.controls['accessTokenId'].setValue(this.current.accessTokenId);
+          this.dialogForm.controls['accessTokenExpireOn'].setValue(this.current.accessTokenExpireOn);
+          // save new values
+          const user = {...this.current, status: SearchTableEntityStatus.UPDATED};
+          this.securityService.updateUserDetails(user);
+          this.tokenChanged = true;
+        },
+        (err) => {
+          this.showErrorMessage(err.error.errorDescription);
+        }
+      );
+    }
   }
 
   showSuccessMessage(value: string) {
@@ -98,4 +128,15 @@ export class AccessTokenGenerationDialogComponent {
     this.message = null;
     this.messageType = null;
   }
+
+  public getCurrent() {
+    if (this.tokenChanged) {
+      return this.current;
+    }
+    return null;
+  }
+
+  closeDialog() {
+    this.dialogRef.close(this.getCurrent())
+  }
 }

smp-angular/src/app/common/cancel-dialog/cancel-dialog.component.html → smp-angular/src/app/common/dialogs/cancel-dialog/cancel-dialog.component.html

-<smp-dialog [title]="'Do you want to cancel all unsaved operations?'"
+<smp-dialog [title]="'Unsaved data'"
+            [text]="'Do you want to cancel all unsaved operations?'"
             [type]="'confirmation'"
             [dialogRef]="dialogRef">
 </smp-dialog>

smp-angular/src/app/common/dialogs/certificate-dialog/certificate-dialog.component.html

+<h2 mat-dialog-title>{{formTitle}}</h2>
+<mat-dialog-content style="height:450px;width:900px">
+  <form [formGroup]="certificateForm">
+    <mat-card>
+      <mat-card-content fxLayout="column">
+        <mat-form-field  *ngIf="!!this.current.alias" class="alias" style="width:100%">
+          <input matInput  placeholder="Alias" [formControl]="certificateForm.controls['alias']" id="alias_id"
+                 readonly="true">
+        </mat-form-field>
+        <mat-form-field class="certificate-subject" style="width:100%">
+          <input matInput placeholder="Subject Name" [formControl]="certificateForm.controls['subject']" id="subject_id"
+                 readonly="true">
+        </mat-form-field>
+        <mat-form-field class="certificate-valid-from" style="width:100%">
+          <input matInput placeholder="Valid To"
+                 value="{{certificateForm.get('validFrom').value | date:dateTimeFormat}}"
+                 id="validFrom_id"
+                 readonly="true">
+
+        </mat-form-field>
+        <mat-form-field class="certificate-valid-to" style="width:100%">
+          <input matInput placeholder="Valid To"
+                 value="{{certificateForm.get('validTo').value | date:dateTimeFormat}}"
+                 id="validTo_id"
+                 readonly="true">
+
+        </mat-form-field>
+        <mat-form-field class="certificate-issuer" style="width:100%">
+          <input matInput placeholder="Issuer" [formControl]="certificateForm.controls['issuer']" id="issuer_id"
+                 readonly="true">
+        </mat-form-field>
+        <mat-form-field class="certificate-serial-number" style="width:100%">
+          <input matInput placeholder="Serial Number" [formControl]="certificateForm.controls['serialNumber']"
+                 id="servialNumber_id" readonly="true">
+        </mat-form-field>
+        <mat-form-field class="certificate-id" style="width:100%">
+          <input matInput placeholder="SMP certificate ID" [formControl]="certificateForm.controls['certificateId']"
+                 id="certificateId_id"
+                 resizeable="true" readonly="true">
+        </mat-form-field>
+      </mat-card-content>
+    </mat-card>
+
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button mat-raised-button color="primary" mat-dialog-close>
+    <mat-icon>close</mat-icon>
+    <span>Close</span>
+  </button>
+</mat-dialog-actions>
+
+

smp-angular/src/app/common/certificate-dialog/certificate-dialog.component.ts → smp-angular/src/app/common/dialogs/certificate-dialog/certificate-dialog.component.ts

 import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
-import {CertificateRo} from "../../user/certificate-ro.model";
-import {SecurityService} from "../../security/security.service";
+import {CertificateRo} from "../../../user/certificate-ro.model";
+import {SecurityService} from "../../../security/security.service";
+import {SmpConstants} from "../../../smp.constants";
 
 @Component({
   selector: 'keystore-certificate-dialog',
   templateUrl: './certificate-dialog.component.html'
 })
 export class CertificateDialogComponent {
+  readonly dateTimeFormat: string = SmpConstants.DATE_TIME_FORMAT;
   formTitle: string;
   certificateForm: FormGroup;
-
   current: CertificateRo;
 
   constructor(
@@ -21,7 +22,7 @@ export class CertificateDialogComponent {
     private fb: FormBuilder) {
 
     this.formTitle = "Certificate details";
-    this.current = {...data.row}
+    this.current = { ...data.row}
 
 // set empty form ! do not bind it to current object !
     this.certificateForm = fb.group({