Fix UI participant identifier handling (case-sensitive, scheme mandatory, etc.. )

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

@@ -44,7 +44,6 @@ export class AppComponent {
     private themeService: ThemeService,
   ) {
     this.userController = new UserController(this.http, this.lookups, this.dialog);
-
     themeService.updateThemeFromLocalStorage();
   }
 

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

@@ -19,12 +19,12 @@
           Active
         </mat-checkbox>
         <mat-form-field style="flex-grow: 1">
-          <mat-label>Enter a credential valid date range</mat-label>
+          <mat-label>Validity period of the credentials</mat-label>
           <mat-date-range-input [rangePicker]="picker">
             <input matStartDate formControlName="activeFrom" placeholder="Start date">
             <input matEndDate formControlName="expireOn" placeholder="End date">
           </mat-date-range-input>
-          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker-toggle *ngIf="!this.isCertificateType" matIconSuffix [for]="picker"></mat-datepicker-toggle>
           <mat-date-range-picker #picker></mat-date-range-picker>
           <smp-field-error  *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid')">Invalid active from
             date
@@ -87,7 +87,7 @@
   </button>
 
 
-  <button *ngIf="isCertificateType && !isReadOnly" [disabled]="!credentialForm.valid || isCertificateInvalid " mat-raised-button color="primary"
+  <button *ngIf="isCertificateType && !isReadOnly" [disabled]="!credentialForm.valid " mat-raised-button color="primary"
           (click)="storeCertificateCredentials()">
     <mat-icon>key</mat-icon>
     <span>Save Certificate</span>

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

@@ -60,8 +60,7 @@ export class CredentialDialogComponent {
       'encodedValue': new FormControl({value: null, readonly: true})
     });
 
-
-    this.credentialForm.controls['active'].setValue('');
+    this.credentialForm.controls['active'].setValue(true);
     this.credentialForm.controls['description'].setValue('');
     this.credentialForm.controls['activeFrom'].setValue('');
     this.credentialForm.controls['expireOn'].setValue('');
@@ -102,6 +101,11 @@ export class CredentialDialogComponent {
       this.credentialForm.controls['description'].enable();
       this.credentialForm.controls['activeFrom'].enable();
       this.credentialForm.controls['expireOn'].enable();
+      if (this.isCertificateType) {
+        this.credentialForm.controls['activeFrom'].disable();
+        this.credentialForm.controls['expireOn'].disable();
+      }
+
     }
     this.isReadOnly = disabled
 
@@ -115,6 +119,7 @@ export class CredentialDialogComponent {
     }
   }
 
+
   uploadCertificate(event) {
     this.newCertFile = null;
     const file = event.target.files[0];
@@ -136,6 +141,10 @@ export class CredentialDialogComponent {
           } else {
             this.clearAlert()
           }
+
+          this.credentialForm.controls['activeFrom'].setValue(res.validFrom);
+          this.credentialForm.controls['expireOn'].setValue(res.validTo);
+
           this.isCertificateInvalid = res.invalid;
           this.newCertFile = file;
         } else {

smp-angular/src/app/common/panels/user-settings-panel/user-profile-panel.component.scss

@@ -18,10 +18,6 @@
   align-self: stretch;
 }
 
-.smp-data-panel-field {
-  width: 100% !important;
-}
-
 .smp-column-label {
   padding-top: 2em;
   min-height: 100px;

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

@@ -53,8 +53,6 @@
           (click)="domainSelected(row)"
           [ngClass]="{'datatable-row-selected': row==selected,'datatable-row-odd': odd}"
       ></tr>
-
-
       <tr class="mat-row" *matNoDataRow>
         <td *ngIf="inputDomainFilter.value;else noDataFound" class="mat-cell" colspan="2">No data matching the filter
           "{{inputDomainFilter.value}}"

smp-angular/src/app/edit/edit-group/edit-group.component.css

@@ -7,6 +7,7 @@
   min-height: 600px;
   padding: 0 2em;
 }
+
 #group-filter {
   width: 100%;
   padding-top: 1em;

smp-angular/src/app/edit/edit-group/group-resource-panel/group-resource-panel.component.html

@@ -75,8 +75,9 @@
 
     <mat-paginator class="mat-elevation-z2" [length]="resultsLength"
                    (page)="onPageChanged($event)"
-                   [pageSize]="5"
-                   [pageSizeOptions]="[5, 10, 25]"
+                   [hidePageSize]="true"
+                   [showFirstLastButtons]="true"
+                   [pageSize]="10"
                    [disabled]="disabledForm"
                    aria-label="Select pages"></mat-paginator>
   </div>

smp-angular/src/app/edit/edit-group/group-resource-panel/resource-dialog/resource-dialog.component.html

@@ -20,14 +20,37 @@
       <mat-label>Resource identifier</mat-label>
       <input id="identifierValue_id" type="text" matInput #identifierValue
              formControlName="identifierValue"
-             required auto-focus-directive>
+             required auto-focus-directive
+             maxlength="255" required>
+      <div
+        *ngIf="(newMode && resourceForm.controls['identifierValue'].touched ) &&  resourceForm.controls['identifierValue'].hasError('required')"
+        style="color:red; font-size: 70%">
+        Participant identifier must not be empty and must be up to 255 characters long.
+      </div>
+      <div
+        *ngIf="(newMode &&  resourceForm.controls['identifierValue'].hasError('dbExist'))"
+        style="color:red; font-size: 70%">
+        Participant identifier for given scheme is already defined in database!
+      </div>
     </mat-form-field>
 
     <mat-form-field  style="width: 100%">
       <mat-label>Resource scheme</mat-label>
       <input id="identifierScheme_id" type="text" matInput
              formControlName="identifierScheme"
+             maxlength="255"
              >
+      <div
+        *ngIf="(newMode && resourceForm.controls['identifierScheme'].touched ) &&  resourceForm.controls['identifierScheme'].hasError('required')"
+        style="color:red; font-size: 70%">
+        Participant scheme must not be empty.
+      </div>
+      <div
+        *ngIf="(newMode && resourceForm.controls['identifierScheme'].touched ) &&
+               resourceForm.controls['identifierScheme'].hasError('pattern')"
+        style="color:red; font-size: 70%">
+        {{participantSchemeMessage}}
+      </div>
     </mat-form-field>
 
 

smp-angular/src/app/edit/edit-group/group-resource-panel/resource-dialog/resource-dialog.component.ts

 import {Component, ElementRef, Inject, Input, ViewChild} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
 import {AlertMessageService} from "../../../../common/alert-message/alert-message.service";
 import {VisibilityEnum} from "../../../../common/enums/visibility.enum";
 import {GroupRo} from "../../../../common/model/group-ro.model";
@@ -8,6 +8,8 @@ import {ResourceRo} from "../../../../common/model/resource-ro.model";
 import {DomainRo} from "../../../../common/model/domain-ro.model";
 import {ResourceDefinitionRo} from "../../../../system-settings/admin-extension/resource-definition-ro.model";
 import {EditGroupService} from "../../edit-group.service";
+import {GlobalLookups} from "../../../../common/global-lookups";
+import {EntityStatus} from "../../../../common/enums/entity-status.enum";
 
 
 @Component({
@@ -20,6 +22,7 @@ export class ResourceDialogComponent {
    .map(el => {
       return {key: el, value: VisibilityEnum[el]}
     });
+
   formTitle = "Resource dialog";
   resourceForm: FormGroup;
   message: string;
@@ -29,24 +32,39 @@ export class ResourceDialogComponent {
   domain:DomainRo;
   domainResourceDefs:ResourceDefinitionRo[];
 
+  participantSchemePattern = '^[a-z0-9]+-[a-z0-9]+-[a-z0-9]+$';
+  participantSchemeMessage:string;
+
   @ViewChild('identifierValue', {static: false}) identifierValue: ElementRef;
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
+              public lookups: GlobalLookups,
               public dialogRef: MatDialogRef<ResourceDialogComponent>,
               private editGroupService: EditGroupService,
               private alertService: AlertMessageService,
               private formBuilder: FormBuilder
   ) {
+
+    if (this.lookups.cachedApplicationConfig) {
+      this.participantSchemePattern = this.lookups.cachedApplicationConfig.participantSchemaRegExp != null ?
+        this.lookups.cachedApplicationConfig.participantSchemaRegExp : ".*"
+
+      this.participantSchemeMessage = this.lookups.cachedApplicationConfig.participantSchemaRegExpMessage;
+    }
+
     dialogRef.disableClose = true;//disable default close operation
     this.formTitle = data.formTitle;
 
 
     this.resourceForm = formBuilder.group({
-      'identifierValue': new FormControl({value: null}),
-      'identifierScheme': new FormControl({value: null}),
+      'identifierValue': new FormControl({value: null}, ),
+      'identifierScheme': new FormControl({value: null},[Validators.pattern(this.participantSchemePattern)]),
       'visibility': new FormControl({value: null}),
       'resourceTypeIdentifier': new FormControl({value: null}),
       '': new FormControl({value: null})
     });
+    if (!!lookups.cachedApplicationConfig.partyIDSchemeMandatory) {
+      this.resourceForm.controls['identifierScheme'].addValidators(Validators.required);
+    }
     this.resource = data.resource;
     this.group = data.group;
     this.domain = data.domain;

smp-angular/src/app/service-group-search/service-group-search.component.html

@@ -18,14 +18,17 @@
 
 
   <ng-template #searchPanel>
+    <div style="display: flex;flex-direction: row;width: 100%">
     <mat-form-field class="smp-data-panel-field">
-      <input matInput placeholder="Participant Identifier" name="ParticipantIdentifier"
+      <mat-label>Resource Identifier filter</mat-label>
+      <input matInput name="ResourceIdentifier"
              [(ngModel)]="filter.participantIdentifier"
-             #messageId="ngModel" id="participantIdentifier">
+             #messageId="ngModel" id="ResourceIdentifier">
     </mat-form-field>
     <mat-form-field  class="smp-data-panel-field">
-      <input matInput placeholder="Participant scheme" name="patricipantScheme" [(ngModel)]="filter.participantScheme"
-             #messageId="ngModel" id="participantScheme">
+      <mat-label>Resource scheme filter</mat-label>
+      <input matInput  name="ResourceScheme" [(ngModel)]="filter.participantScheme"
+             #messageId="ngModel" id="ResourceScheme">
     </mat-form-field>
     <mat-select placeholder="All Domains" [(ngModel)]="filter.domain" name="domain" *ngIf="false"
                 id="domain_id">
@@ -34,6 +37,7 @@
         {{domain.domainCode}} ({{domain.smlSubdomain}})
       </mat-option>
     </mat-select>
+    </div>
   </ng-template>
 
 

smp-angular/src/app/service-group-search/service-group-search.component.ts

@@ -65,7 +65,7 @@ export class ServiceGroupSearchComponent implements OnInit, AfterViewInit, After
         resizable: "false",
       },
       {
-        name: 'Participant scheme',
+        name: 'Resource scheme',
         prop: 'participantScheme',
         showInitially: true,
         width: 300,
@@ -73,13 +73,13 @@ export class ServiceGroupSearchComponent implements OnInit, AfterViewInit, After
         resizable: "false"
       },
       {
-        name: 'Participant identifier',
+        name: 'Resource identifier',
         prop: 'participantIdentifier',
         showInitially: true,
       },
       {
         cellTemplate: this.rowSMPUrlLinkAction,
-        name: 'OASIS ServiceGroup URL',
+        name: 'Resource URL',
         showInitially: true,
         width: 250,
         maxWidth: 250,

smp-angular/src/app/system-settings/property/property.component.html

@@ -15,8 +15,9 @@
   [tableTitle]="tableTitle"
 >
   <ng-template #searchPanel>
-    <mat-form-field>
-      <input matInput placeholder="Property" name="Property"
+    <mat-form-field style="width: 100%" >
+      <mat-label>Filter by property name</mat-label>
+      <input matInput name="Property"
              [(ngModel)]="filter.property"
              [matTooltip]='"Filter by property name"' (input)="searchPropertyChanged()" id="searchProperty">
     </mat-form-field>

smp-angular/src/app/system-settings/user/user-controller.ts

@@ -17,8 +17,6 @@ import {ApplicationRoleEnum} from "../../common/enums/application-role.enum";
 export class UserController implements SearchTableController {
 
   nullCert:CertificateRo;
-
-
   compareUserProperties = ["username","password","emailAddress","active","role","certificate"];
   compareCertProperties = ["certificateId","subject","issuer","serialNumber","crlUrl","validFrom","validTo"];
 

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html

@@ -36,7 +36,7 @@
 
     <mat-form-field appearance="fill" style="flex-grow: 1">
       <mat-label>Enter a valid date range</mat-label>
-      <mat-date-range-input [rangePicker]="picker" >
+      <mat-date-range-input [rangePicker]="picker" [min]="minSelectableDate" >
         <input matStartDate formControlName="activeFrom" placeholder="Start date">
         <input matEndDate formControlName="expireOn" placeholder="End date">
       </mat-date-range-input>

smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts

@@ -11,6 +11,7 @@ import {BeforeLeaveGuard} from "../../../window/sidenav/navigation-on-leave-guar
 })
 export class AccessTokenPanelComponent implements BeforeLeaveGuard {
 
+  @Output() minSelectableDate: Date = new Date();
   @Output() onDeleteEvent: EventEmitter<CredentialRo> = new EventEmitter();
   @Output() onSaveEvent: EventEmitter<CredentialRo> = new EventEmitter();
 

smp-angular/src/app/user-settings/user-access-tokens/user-access-tokens.component.ts

@@ -16,7 +16,6 @@ import {AccessTokenPanelComponent} from "./access-token-panel/access-token-panel
 })
 export class UserAccessTokensComponent implements BeforeLeaveGuard {
   accessTokens: CredentialRo[] = [];
-
   @ViewChildren(AccessTokenPanelComponent)
   userTokenCredentialComponents: QueryList<AccessTokenPanelComponent>;
 

smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html

 <div class="panel smp-data-panel"  [formGroup]="credentialForm" (ngSubmit)="onSaveButtonClicked()">
+  <smp-warning-panel *ngIf="_credential.certificate?.invalid;"
+                     icon="error"
+                     label="Invalid certificate: {{_credential.certificate.invalidReason}}">
+  </smp-warning-panel>
   <div style="display: flex;flex-flow: row wrap;">
     <mat-form-field style="flex-grow: 2">
       <mat-label>Certificate ID</mat-label>
@@ -40,13 +44,11 @@
       Active
     </mat-checkbox>
     <mat-form-field appearance="fill" style="flex-grow: 1">
-      <mat-label>Enter a valid date range</mat-label>
-      <mat-date-range-input [rangePicker]="picker" >
+      <mat-label>Validity period of the certificate</mat-label>
+      <mat-date-range-input  >
         <input matStartDate formControlName="activeFrom" placeholder="Start date">
         <input matEndDate formControlName="expireOn" placeholder="End date">
       </mat-date-range-input>
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
       <smp-field-error  *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid')">Invalid active from date</smp-field-error >
       <smp-field-error  *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid')">Invalid expire on date</smp-field-error >
     </mat-form-field>

smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.ts

@@ -21,7 +21,6 @@ export class UserCertificatePanelComponent  implements  BeforeLeaveGuard {
 
   credentialForm: FormGroup;
 
-
   constructor(private formBuilder: FormBuilder) {
     this.credentialForm = formBuilder.group({
       // common values
@@ -47,6 +46,8 @@ export class UserCertificatePanelComponent  implements  BeforeLeaveGuard {
       this.credentialForm.controls['description'].setValue(this._credential.description);
       this.credentialForm.controls['activeFrom'].setValue(this._credential.activeFrom);
       this.credentialForm.controls['expireOn'].setValue(this._credential.expireOn);
+      this.credentialForm.controls['activeFrom'].disable()
+      this.credentialForm.controls['expireOn'].disable()
     } else {
       this.credentialForm.controls['active'].setValue(null);
       this.credentialForm.controls['description'].setValue(null);

smp-angular/src/app/user-settings/user-profile/user-profile.component.ts

-import {Component, ViewChild,} from '@angular/core';
+import {Component, Output, ViewChild,} from '@angular/core';
 import {SecurityService} from "../../security/security.service";
 import {User} from "../../security/user.model";
 import {UserService} from "../../system-settings/user/user.service";
@@ -20,7 +20,6 @@ import {UserDetailsDialogMode} from "../../system-settings/user/user-details-dia
 })
 export class UserProfileComponent implements BeforeLeaveGuard {
 
-
   @ViewChild('userProfilePanel') userProfilePanel: UserProfilePanelComponent;
   currentUserData: UserRo;
   loggedInUser: User;

smp-angular/src/styles.css

@@ -16,6 +16,9 @@ td , th {
 }
 
 
+.smp-data-panel-field {
+  width: 100% !important;
+}
 
 .smp-no-data-panel {
   padding:2em;