diff --git a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html
index 40a1ded41d683bd546f883c6b2b6bc818e760fad..db7be175adc386036673947db9c8ad741ff0211b 100644
--- a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html
+++ b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html
@@ -1,41 +1,52 @@
<mat-expansion-panel [expanded]="_expanded">
- <mat-expansion-panel-header style="height: 80px">
- <div style="display: flex; flex-direction: column;width: 100%;margin-right: 10px;" >
- <smp-warning-panel *ngIf="!!_credential?.expired;" class="smp-certificate-warning-panel"
+ <mat-expansion-panel-header style="height: 95px">
+ <div
+ style="display: flex; flex-direction: column;width: 100%;margin-right: 10px;">
+ <smp-warning-panel *ngIf="!!_credential?.expired;"
+ class="smp-certificate-warning-panel"
[padding]="false"
icon="error"
label="{{ 'access.token.panel.label.token.expired' | translate }}">
</smp-warning-panel>
- <div style="display: flex; flex-direction: row; justify-content: space-between; gap: 3px; padding-left: 5px;">
- <input matInput style="flex-grow: 1; padding: 5px 0"
- [value]="credential?.name"
- [disabled]="!credential?.active"
- maxlength="255" readonly>
- <div style="display: inline">
+ <div
+ style="display: flex; flex-direction: row; justify-content: space-between; gap: 3px; padding-left: 5px;">
+
+ <mat-form-field style="flex-grow: 1">
+ <mat-label>{{ "access.token.panel.label.name" | translate }}</mat-label>
+ <input matInput
+ [value]="_credential.name"
+ maxlength="255" disabled>
+ <mat-hint
+ style="display: flex; flex-direction: row; font-size: 0.8em;overflow: hidden">
+ <span
+ *ngIf="credentialForm.controls['activeFrom'].value;else elseNoDate">{{ credentialForm.controls["activeFrom"].value | date: dateFormat }}</span>
+ -
+ <span
+ *ngIf="credentialForm.controls['expireOn'].value;else elseNoDate">{{ credentialForm.controls["expireOn"].value | date: dateFormat }}</span>;
+ <span
+ style="overflow: hidden">{{ credentialForm.controls["description"].value }}</span>
+ <ng-template #elseNoDate><span> / </span></ng-template>
+ </mat-hint>
+ </mat-form-field>
+ <div style="display: inline;display: flex;flex-direction: column">
<button id="deleteButton" mat-raised-button
(click)="onDeleteButtonClicked($event)"
- color="primary" >
+ color="primary">
<mat-icon>delete</mat-icon>
<span>{{ "access.token.panel.button.delete" | translate }}</span>
</button>
<button id="saveButton" mat-raised-button
(click)="onSaveButtonClicked($event)"
color="primary"
- [disabled]="!submitButtonEnabled" >
+ [disabled]="!submitButtonEnabled">
<mat-icon>save</mat-icon>
<span>{{ "access.token.panel.button.save" | translate }}</span>
</button>
</div>
</div>
- <div style="display: flex; flex-direction: row; font-size: 0.8em; ">
- <span>{{ credentialForm.controls["activeFrom"].value | date: dateFormat }}</span>
- -
- <span>{{ credentialForm.controls["expireOn"].value | date: dateFormat }}</span>;
- <span>{{ credentialForm.controls["description"].value }}</span>
- </div>
</div>
</mat-expansion-panel-header>
- <div class="smp-data-panel" [formGroup]="credentialForm">
+ <div class="smp-data-panel" [formGroup]="credentialForm">
<mat-form-field style="width: 100%">
<mat-label>{{ "access.token.panel.label.description" | translate }}</mat-label>
<input matInput
@@ -44,20 +55,30 @@
</mat-form-field>
<div style="display: flex;flex-flow: row wrap;">
- <mat-checkbox formControlName="active" style="align-self: center; padding-bottom: 1em;padding-right: 2em">
+ <mat-checkbox formControlName="active"
+ style="align-self: center; padding-bottom: 1em;padding-right: 2em">
{{ "access.token.panel.label.active" | translate }}
</mat-checkbox>
<mat-form-field appearance="fill" style="flex-grow: 1">
<mat-label>{{ "access.token.panel.label.validity.dates" | translate }}</mat-label>
- <mat-date-range-input [rangePicker]="picker" [min]="minSelectableDate" >
- <input matStartDate formControlName="activeFrom" placeholder="{{ 'access.token.panel.placeholder.end.date' | translate }}" required>
- <input matEndDate formControlName="expireOn" placeholder="{{ 'access.token.panel.placeholder.end.date' | translate }}" required>
+ <mat-date-range-input [rangePicker]="picker" [min]="minSelectableDate">
+ <input matStartDate formControlName="activeFrom"
+ placeholder="{{ 'access.token.panel.placeholder.end.date' | translate }}"
+ required>
+ <input matEndDate formControlName="expireOn"
+ placeholder="{{ 'access.token.panel.placeholder.end.date' | translate }}"
+ required>
</mat-date-range-input>
- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <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') || credentialForm.controls.activeFrom.hasError('required')">{{ "access.token.panel.error.invalid.start.date" | translate }}</smp-field-error >
- <smp-field-error *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid') || credentialForm.controls.expireOn.hasError('required')">{{ "access.token.panel.error.invalid.end.date" | translate }}</smp-field-error >
+ <smp-field-error
+ *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid') || credentialForm.controls.activeFrom.hasError('required')">{{ "access.token.panel.error.invalid.start.date" | translate }}
+ </smp-field-error>
+ <smp-field-error
+ *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid') || credentialForm.controls.expireOn.hasError('required')">{{ "access.token.panel.error.invalid.end.date" | translate }}
+ </smp-field-error>
</mat-form-field>
</div>
<div style="display: flex;flex-flow: row;">
@@ -65,26 +86,33 @@
<mat-label>{{ "access.token.panel.label.login.failed.attempts" | translate }}</mat-label>
<input matInput
[value]="sequentialLoginFailureCount"
- id="sequentialTokenLoginFailureCount_id" maxlength="255" disabled readonly>
+ id="sequentialTokenLoginFailureCount_id" maxlength="255" disabled
+ readonly>
</mat-form-field>
- <mat-form-field style="flex-grow:2 " floatLabel="always">
+ <mat-form-field style="flex-grow:2 " floatLabel="always">
<mat-label>{{ "access.token.panel.label.login.last.failed.attempt" | translate }}</mat-label>
- <input id="LastFailedAttempt_id" matInput [ngxMatDatetimePicker]="LastFailedAttemptPicker"
+ <input id="LastFailedAttempt_id" matInput
+ [ngxMatDatetimePicker]="LastFailedAttemptPicker"
[value]="lastFailedLoginAttempt"
placeholder="---"
readonly>
- <mat-datepicker-toggle matSuffix [for]="LastFailedAttemptPicker" style="visibility: hidden"></mat-datepicker-toggle>
- <ngx-mat-datetime-picker #LastFailedAttemptPicker [showSpinners]="true" [showSeconds]="false"
+ <mat-datepicker-toggle matSuffix [for]="LastFailedAttemptPicker"
+ style="visibility: hidden"></mat-datepicker-toggle>
+ <ngx-mat-datetime-picker #LastFailedAttemptPicker [showSpinners]="true"
+ [showSeconds]="false"
[hideTime]="false"></ngx-mat-datetime-picker>
</mat-form-field>
- <mat-form-field style="flex-grow: 2" floatLabel="always">
+ <mat-form-field style="flex-grow: 2" floatLabel="always">
<mat-label>{{ "access.token.panel.label.suspended.until" | translate }}</mat-label>
- <input id="SuspendedUtil_id" matInput [ngxMatDatetimePicker]="suspendedUtilPicker"
+ <input id="SuspendedUtil_id" matInput
+ [ngxMatDatetimePicker]="suspendedUtilPicker"
[value]="suspendedUtil"
placeholder="---"
readonly>
- <mat-datepicker-toggle matSuffix [for]="suspendedUtilPicker" style="visibility: hidden"></mat-datepicker-toggle>
- <ngx-mat-datetime-picker #suspendedUtilPicker [showSpinners]="true" [showSeconds]="false"
+ <mat-datepicker-toggle matSuffix [for]="suspendedUtilPicker"
+ style="visibility: hidden"></mat-datepicker-toggle>
+ <ngx-mat-datetime-picker #suspendedUtilPicker [showSpinners]="true"
+ [showSeconds]="false"
[hideTime]="false"></ngx-mat-datetime-picker>
</mat-form-field>
diff --git a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts
index 2108001f04c2bea4906197dba8a9b6586ee45532..842d0a384b5f91f435f90aff8bd24637cbd62dcd 100644
--- a/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts
+++ b/smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts
@@ -28,6 +28,7 @@ export class AccessTokenPanelComponent implements BeforeLeaveGuard {
private globalLookups: GlobalLookups) {
this.credentialForm = formBuilder.group({
// common values
+ 'name': new FormControl({value: '', disabled: true}),
'active': new FormControl({value: '', disabled: false}),
'description': new FormControl({value: '', disabled: false}),
'activeFrom': new FormControl({value: '', disabled: false}),
@@ -42,11 +43,13 @@ export class AccessTokenPanelComponent implements BeforeLeaveGuard {
@Input() set credential(value: CredentialRo) {
this._credential = value;
if (this._credential) {
+ this.credentialForm.controls['name'].setValue(this._credential.name);
this.credentialForm.controls['active'].setValue(this._credential.active);
this.credentialForm.controls['description'].setValue(this._credential.description);
this.credentialForm.controls['activeFrom'].setValue(this._credential.activeFrom);
this.credentialForm.controls['expireOn'].setValue(this._credential.expireOn);
} else {
+ this.credentialForm.controls['name'].setValue(null);
this.credentialForm.controls['active'].setValue(null);
this.credentialForm.controls['description'].setValue(null);
this.credentialForm.controls['activeFrom'].setValue(null);
diff --git a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html
index 2049fb3a4e5f386e7e5fc4af53b0e581468be528..06ca05efe59ada95c938a395a41aaa14f8f668ff 100644
--- a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html
+++ b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html
@@ -1,20 +1,33 @@
-<mat-expansion-panel [expanded]="_expanded" [formGroup]="credentialForm" >
- <mat-expansion-panel-header style="height: 72px">
- <div style="display: flex; flex-direction: column;width: 100%; padding-right: 10px">
- <smp-warning-panel *ngIf="_credential.certificate?.invalid;" class="smp-certificate-warning-panel"
+<mat-expansion-panel [expanded]="_expanded" [formGroup]="credentialForm">
+ <mat-expansion-panel-header style="height: 95px">
+ <div
+ style="display: flex; flex-direction: column;width: 100%; padding-right: 10px">
+ <smp-warning-panel *ngIf="_credential.certificate?.invalid;"
+ class="smp-certificate-warning-panel"
[padding]="false"
icon="error"
label="{{ 'user.certificate.panel.label.invalid.certificate' | translate: { reason: _credential.certificate.invalidReason} }}">
</smp-warning-panel>
- <div style="display: flex;flex-flow: row; align-items: center; width: 100%">
+ <div
+ style="display: flex;flex-flow: row; align-items: center; width: 100%">
- <input matInput style="flex-grow: 1; padding: 5px 0" [matTooltip]="credential?.name"
- [value]="credential?.name"
- [disabled]="!credential?.active"
- maxlength="255" readonly>
+ <mat-form-field style="flex-grow: 1">
+ <mat-label>{{ "user.certificate.panel.label.certificate.id" | translate }}</mat-label>
+ <input matInput
+ [value]="_credential.name"
+ maxlength="255" disabled>
+ <mat-hint
+ style="display: flex; flex-direction: row; font-size: 0.8em;overflow: hidden">
+ <span *ngIf="credentialForm.controls['activeFrom'].value;else elseNoDate ">{{ credentialForm.controls["activeFrom"].value | date: dateFormat }}</span>
+ -
+ <span *ngIf="credentialForm.controls['expireOn'].value;else elseNoDate">{{ credentialForm.controls["expireOn"].value | date: dateFormat }}</span>;
+ <span style="overflow: hidden">{{ credentialForm.controls["description"].value }}</span>
+ </mat-hint>
+ <ng-template #elseNoDate><span> / </span></ng-template>
+ </mat-form-field>
<div
- style="display: flex; flex-direction: row; justify-content: space-between; gap: 3px; padding-left: 5px;">
+ style="display: flex; flex-direction: column; justify-content: space-between; padding-left: 5px;">
<button id="deleteButton" mat-raised-button
(click)="onDeleteButtonClicked($event)"
color="primary">
@@ -63,13 +76,17 @@
<mat-form-field appearance="fill" style="flex-grow: 1">
<mat-label>{{ "user.certificate.panel.label.validity.dates" | translate }}</mat-label>
<mat-date-range-input>
- <input matStartDate formControlName="activeFrom" placeholder="{{ 'user.certificate.panel.placeholder.start.date' | translate }}">
- <input matEndDate formControlName="expireOn" placeholder="{{ 'user.certificate.panel.placeholder.end.date' | translate }}">
+ <input matStartDate formControlName="activeFrom"
+ placeholder="{{ 'user.certificate.panel.placeholder.start.date' | translate }}">
+ <input matEndDate formControlName="expireOn"
+ placeholder="{{ 'user.certificate.panel.placeholder.end.date' | translate }}">
</mat-date-range-input>
- <smp-field-error *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid')">
+ <smp-field-error
+ *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid')">
{{ "user.certificate.panel.label.invalid.start.date" | translate }}
</smp-field-error>
- <smp-field-error *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid')">
+ <smp-field-error
+ *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid')">
{{ "user.certificate.panel.label.invalid.end.date" | translate }}
</smp-field-error>
</mat-form-field>
diff --git a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.ts b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.ts
index efaaa586f145c417bdb9211262a18ce72ad145e9..3a772a9a4f3241f23c44292f370a90344510b2bd 100644
--- a/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.ts
+++ b/smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.ts
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
import {CredentialRo} from "../../../security/credential.model";
import {BeforeLeaveGuard} from "../../../window/sidenav/navigation-on-leave-guard";
+import {GlobalLookups} from "../../../common/global-lookups";
@Component({
@@ -15,13 +16,12 @@ export class UserCertificatePanelComponent implements BeforeLeaveGuard {
@Output() onShowCertificate: EventEmitter<CredentialRo> = new EventEmitter();
- dateFormat: string = 'yyyy-MM-dd'
-
_credential: CredentialRo;
_expanded: boolean = false;
credentialForm: FormGroup;
- constructor(private formBuilder: FormBuilder) {
+ constructor(private formBuilder: FormBuilder,
+ private globalLookups: GlobalLookups) {
this.credentialForm = formBuilder.group({
// common values
'active': new FormControl({value: '', disabled: false}),
@@ -96,4 +96,8 @@ export class UserCertificatePanelComponent implements BeforeLeaveGuard {
return this.credentialForm.dirty;
}
+ get dateFormat(): string {
+ return this.globalLookups.getDateFormat();
+ }
+
}
diff --git a/smp-angular/src/assets/i18n/en.json b/smp-angular/src/assets/i18n/en.json
index c134313b953a011376f31a264c2f30dcac8ad6e5..cf3fc495fde3ef289162c6cb85c9a0bd03d5c199 100644
--- a/smp-angular/src/assets/i18n/en.json
+++ b/smp-angular/src/assets/i18n/en.json
@@ -812,6 +812,7 @@
"access.token.panel.button.save": "Save",
"access.token.panel.error.invalid.end.date": "Invalid expire on date",
"access.token.panel.error.invalid.start.date": "Invalid active from date",
+ "access.token.panel.label.name": "Name",
"access.token.panel.label.active": "Active",
"access.token.panel.label.description": "Description",
"access.token.panel.label.login.failed.attempts": "Seq. failed attempts",