Code development platform for open source projects from the European Union institutions :large_blue_circle: EU Login authentication by SMS will be completely phased out by mid-2025. To see alternatives please check here

Skip to content
Snippets Groups Projects
Commit 7ec16c73 authored by Joze RIHTARSIC's avatar Joze RIHTARSIC
Browse files

[EDELIVERY-13776] Access token - more info in the header

parent 8583757d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 104 additions and 51 deletions
smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.html
+ 62
− 34
View file @ 7ec16c73
<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>
&nbsp;&nbsp;-&nbsp;&nbsp;
<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>&nbsp;/&nbsp;</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>
&nbsp;&nbsp;-&nbsp;&nbsp;
<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>
......
smp-angular/src/app/user-settings/user-access-tokens/access-token-panel/access-token-panel.component.ts
+ 3
− 0
View file @ 7ec16c73
......@@ -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);
......
smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.html
+ 31
− 14
View file @ 7ec16c73
<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>
&nbsp;&nbsp;-&nbsp;&nbsp;
<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>&nbsp;/&nbsp;</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>
......
smp-angular/src/app/user-settings/user-certificates/user-certificate-panel/user-certificate-panel.component.ts
+ 7
− 3
View file @ 7ec16c73
......@@ -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();
}
}
smp-angular/src/assets/i18n/en.json
+ 1
− 0
View file @ 7ec16c73
......@@ -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",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

For further information about the platform and support, please see https://code.europa.eu/info/about