Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-3982 - used 'DetailsRadioComponent' to choose between kms and pkcs configurations

Browse Source
This commit is contained in:
Valentin Mihai 2022-06-03 16:40:18 +03:00
parent be0dbbba77
commit 185c6a818e
12 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
View File

@ -5,29 +5,18 @@
></div>
<div class="dialog-content">
<ng-container *ngIf="!isInConfiguration">
<div
*ngFor="let option of certificateOptions"
class="option"
(click)="selectedOption = option"
[class.selected]="option === selectedOption"
>
<div class="title">
<iqser-round-checkbox [active]="option === selectedOption"></iqser-round-checkbox>
{{ translations.options[option].title | translate }}
</div>
<p class="description">
{{ translations.options[option].description | translate }}
</p>
</div>
</ng-container>
<form [formGroup]="form" *ngIf="!isInConfiguration">
<iqser-details-radio [options]="options" formControlName="option"></iqser-details-radio>
</form>
<ng-container *ngIf="isInConfiguration">
{{ 'digital-signature-dialog.upload-warning-message' | translate }}
<redaction-pkcs-signature-configuration
*ngIf="selectedOption === certificateType.PKCS"
*ngIf="selectedOption === digitalSignatureOptions.PKCS"
></redaction-pkcs-signature-configuration>
<redaction-kms-signature-configuration *ngIf="selectedOption === certificateType.KMS"></redaction-kms-signature-configuration>
<redaction-kms-signature-configuration
*ngIf="selectedOption === digitalSignatureOptions.KMS"
></redaction-kms-signature-configuration>
</ng-container>
</div>

34
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
View File

@ -1,12 +1,13 @@
import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
import { BaseDialogComponent, LoadingService, Toaster } from '@iqser/common-ui';
import { BaseDialogComponent, DetailsRadioOption, LoadingService, Toaster } from '@iqser/common-ui';
import { MatDialogRef } from '@angular/material/dialog';
import { PkcsSignatureConfigurationComponent } from './form/pkcs-signature-configuration/pkcs-signature-configuration.component';
import { KmsSignatureConfigurationComponent } from './form/kms-signature-configuration/kms-signature-configuration.component';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { HttpStatusCode } from '@angular/common/http';
import { CertificateType } from './form/base-signature-configuration-component';
import { DigitalSignatureOption, DigitalSignatureOptions } from '@red/domain';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
const DEFAULT_DIALOG_WIDTH = '662px';
const KMS_SIGNATURE_DIALOG_WIDTH = '810px';
@ -19,26 +20,41 @@ export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
@ViewChild(PkcsSignatureConfigurationComponent) pkcsSignatureConfigurationComponent: PkcsSignatureConfigurationComponent;
@ViewChild(KmsSignatureConfigurationComponent) kmsSignatureConfigurationComponent: KmsSignatureConfigurationComponent;
readonly certificateType = CertificateType;
readonly certificateOptions = Object.values(CertificateType);
readonly digitalSignatureOptions = DigitalSignatureOptions;
readonly translations = digitalSignatureDialogTranslations;
readonly options: DetailsRadioOption<DigitalSignatureOption>[] = [
{
label: _('digital-signature-dialog.options.pkcs.label'),
value: DigitalSignatureOptions.PKCS,
description: _('digital-signature-dialog.options.pkcs.description'),
},
{
label: _('digital-signature-dialog.options.kms.label'),
value: DigitalSignatureOptions.KMS,
description: _('digital-signature-dialog.options.kms.description'),
},
];
selectedOption = this.certificateOptions[0];
isInConfiguration = false;
constructor(
protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<ConfigureCertificateDialogComponent>,
private readonly _formBuilder: FormBuilder,
private readonly _loadingService: LoadingService,
private readonly _toaster: Toaster,
private readonly _changeDetectorRef: ChangeDetectorRef,
) {
super(_injector, _dialogRef);
this.form = this._formBuilder.group({
option: [this.options[0]],
});
}
toggleIsInConfiguration() {
this.isInConfiguration = !this.isInConfiguration;
if (this.isInConfiguration && this.selectedOption === CertificateType.KMS) {
if (this.isInConfiguration && this.selectedOption === DigitalSignatureOptions.KMS) {
this._dialogRef.updateSize(KMS_SIGNATURE_DIALOG_WIDTH);
} else {
this._dialogRef.updateSize(DEFAULT_DIALOG_WIDTH);
@ -51,11 +67,15 @@ export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
}
get activeComponent() {
return this.selectedOption === CertificateType.PKCS
return this.selectedOption === DigitalSignatureOptions.PKCS
? this.pkcsSignatureConfigurationComponent
: this.kmsSignatureConfigurationComponent;
}
get selectedOption(): DigitalSignatureOption {
return this.form.get('option').value.value;
}
async save(): Promise<void> {
try {
await this.activeComponent.save();

15
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component.ts
View File

@ -1,19 +1,14 @@
import { BaseFormComponent } from '@iqser/common-ui';
import { DigitalSignatureService } from '../../../services/digital-signature.service';
import { IDigitalSignatureRequest } from '@red/domain';
import { firstValueFrom } from 'rxjs';
export enum CertificateType {
PKCS = 'pkcs',
KMS = 'kms',
}
import { IDigitalSignatureRequest, DigitalSignatureOption, DigitalSignatureOptions } from '@red/domain';
import { firstValueFrom, Observable } from 'rxjs';
export abstract class BaseSignatureConfigurationComponent extends BaseFormComponent {
file: File | null;
protected constructor(
protected readonly _digitalSignatureService: DigitalSignatureService,
private readonly _certificateType: CertificateType,
private readonly _selectedOption: DigitalSignatureOption,
) {
super();
}
@ -42,8 +37,8 @@ export abstract class BaseSignatureConfigurationComponent extends BaseFormCompon
}
deleteSignature(): Promise<unknown> {
const observable =
this._certificateType === CertificateType.PKCS
const observable: Observable<unknown> =
this._selectedOption === DigitalSignatureOptions.PKCS
? this._digitalSignatureService.deleteSignature()
: this._digitalSignatureService.deleteKmsSignature();
return firstValueFrom(observable);

6
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts
View File

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { BaseSignatureConfigurationComponent, CertificateType } from '../base-signature-configuration-component';
import { IKmsDigitalSignature, IKmsDigitalSignatureRequest } from '@red/domain';
import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
import { IKmsDigitalSignature, IKmsDigitalSignatureRequest, DigitalSignatureOptions } from '@red/domain';
import { firstValueFrom } from 'rxjs';
import { DigitalSignatureService } from '../../../../services/digital-signature.service';
@ -15,7 +15,7 @@ export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurati
@Input() digitalSignature!: IKmsDigitalSignatureRequest;
constructor(protected readonly _digitalSignatureService: DigitalSignatureService, private readonly _formBuilder: FormBuilder) {
super(_digitalSignatureService, CertificateType.KMS);
super(_digitalSignatureService, DigitalSignatureOptions.KMS);
}
ngOnInit() {

6
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
View File

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { BaseSignatureConfigurationComponent, CertificateType } from '../base-signature-configuration-component';
import { IPkcsDigitalSignature, IPkcsDigitalSignatureRequest } from '@red/domain';
import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
import { IPkcsDigitalSignature, IPkcsDigitalSignatureRequest, DigitalSignatureOptions } from '@red/domain';
import { firstValueFrom } from 'rxjs';
import { DigitalSignatureService } from '../../../../services/digital-signature.service';
import { lastIndexOfEnd } from '../../../../../../utils';
@ -16,7 +16,7 @@ export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurat
@Input() digitalSignature!: IPkcsDigitalSignatureRequest;
constructor(protected readonly _digitalSignatureService: DigitalSignatureService, private readonly _formBuilder: FormBuilder) {
super(_digitalSignatureService, CertificateType.PKCS);
super(_digitalSignatureService, DigitalSignatureOptions.PKCS);
}
ngOnInit() {

12
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
View File

@ -8,8 +8,7 @@ import { firstValueFrom } from 'rxjs';
import { AdminDialogService } from '../../services/admin-dialog.service';
import { PkcsSignatureConfigurationComponent } from '../../dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
import { KmsSignatureConfigurationComponent } from '../../dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component';
import { IKmsDigitalSignatureRequest, IPkcsDigitalSignatureRequest } from '@red/domain';
import { CertificateType } from '../../dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component';
import { DigitalSignatureOptions, IKmsDigitalSignatureRequest, IPkcsDigitalSignatureRequest } from '@red/domain';
@Component({
selector: 'redaction-digital-signature-screen',
@ -20,7 +19,7 @@ export class DigitalSignatureScreenComponent implements OnInit {
@ViewChild(PkcsSignatureConfigurationComponent) pkcsSignatureConfigurationComponent: PkcsSignatureConfigurationComponent;
@ViewChild(KmsSignatureConfigurationComponent) kmsSignatureConfigurationComponent: KmsSignatureConfigurationComponent;
readonly certificateType = CertificateType;
readonly certificateType = DigitalSignatureOptions;
readonly iconButtonTypes = IconButtonTypes;
readonly currentUser = this._userService.currentUser;
@ -53,7 +52,8 @@ export class DigitalSignatureScreenComponent implements OnInit {
}
get disabled(): boolean {
return this.activeComponent?.disabled;
//TODO remove second check when the update endpoint will be available for KMS signature
return this.activeComponent?.disabled || this.currentCertificateType === DigitalSignatureOptions.KMS;
}
async saveDigitalSignature(): Promise<void> {
@ -70,11 +70,11 @@ export class DigitalSignatureScreenComponent implements OnInit {
if (!this.digitalSignature) {
return;
}
return 'contactInfo' in this.digitalSignature ? CertificateType.PKCS : CertificateType.KMS;
return 'contactInfo' in this.digitalSignature ? DigitalSignatureOptions.PKCS : DigitalSignatureOptions.KMS;
}
get activeComponent() {
return this.currentCertificateType === CertificateType.PKCS
return this.currentCertificateType === DigitalSignatureOptions.PKCS
? this.pkcsSignatureConfigurationComponent
: this.kmsSignatureConfigurationComponent;
}

10
apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
View File

@ -6,14 +6,4 @@ export const digitalSignatureDialogTranslations = {
pkcs: _('digital-signature-dialog.title.pkcs'),
kms: _('digital-signature-dialog.title.kms'),
},
options: {
pkcs: {
title: _('digital-signature-dialog.options.pkcs.title'),
description: _('digital-signature-dialog.options.pkcs.description'),
},
kms: {
title: _('digital-signature-dialog.options.kms.title'),
description: _('digital-signature-dialog.options.kms.description'),
},
},
} as const;

4
apps/red-ui/src/assets/i18n/de.json
View File

@ -679,11 +679,11 @@
"options": {
"kms": {
"description": "",
"title": ""
"label": ""
},
"pkcs": {
"description": "",
"title": ""
"label": ""
}
},
"title": {

4
apps/red-ui/src/assets/i18n/en.json
View File

@ -679,11 +679,11 @@
"options": {
"kms": {
"description": "Provide a corresponding PEM file containing the certificate, along with Amazon KMS credentials needed for securing the private key.",
"title": "I use an Amazon KMS private key"
"label": "I use an Amazon KMS private key"
},
"pkcs": {
"description": "A PKCS#12 file is a file that bundles the private key and the X.509 certificate. The password protection is required to secure the private key. Unprotected PKCS#12 files are not supported.",
"title": "I want to upload a PKCS#12 file"
"label": "I want to upload a PKCS#12 file"
}
},
"title": {

1
libs/red-domain/src/index.ts
View File

@ -25,3 +25,4 @@ export * from './lib/trash';
export * from './lib/text-highlight';
export * from './lib/permissions';
export * from './lib/license';
export * from './lib/digital-signature';

6
libs/red-domain/src/lib/digital-signature/digital-signature-options.ts Normal file
View File

@ -0,0 +1,6 @@
export const DigitalSignatureOptions = {
KMS: 'KMS',
PKCS: 'PKCS',
} as const;
export type DigitalSignatureOption = keyof typeof DigitalSignatureOptions;

1
libs/red-domain/src/lib/digital-signature/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './digital-signature-options';