From 032f0e685f821c3415fca2f8c701b9350204a412 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 26 May 2022 13:33:36 +0300 Subject: [PATCH] RED-3982 - updates to be able to edit/delete digital signature --- .../configure-certificate-dialog.component.ts | 3 +- .../base-signature-configuration-component.ts | 41 +++++++++++-------- ...kms-signature-configuration.component.html | 16 +++----- ...kms-signature-configuration.component.scss | 5 +-- .../kms-signature-configuration.component.ts | 26 ++++++++++-- ...kcs-signature-configuration.component.html | 16 ++++---- ...kcs-signature-configuration.component.scss | 5 +-- .../pkcs-signature-configuration.component.ts | 24 +++++++++-- .../digital-signature-screen.component.ts | 8 +--- .../services/digital-signature.service.ts | 5 --- 10 files changed, 87 insertions(+), 62 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts index fdae0aaaa..3a4759ee2 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts @@ -6,7 +6,7 @@ import { PkcsSignatureConfigurationComponent } from './form/pkcs-signature-confi 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 '../../screens/digital-signature/digital-signature-screen.component'; +import { CertificateType } from './form/base-signature-configuration-component'; const DEFAULT_DIALOG_WIDTH = '662px'; const KMS_SIGNATURE_DIALOG_WIDTH = '810px'; @@ -62,6 +62,7 @@ export class ConfigureCertificateDialogComponent extends BaseDialogComponent { this._toaster.success(_('digital-signature-dialog.actions.save-success')); this._dialogRef.close(true); } catch (error) { + console.log(error); if (error.status === HttpStatusCode.BadRequest) { this._toaster.error(_('digital-signature-dialog.actions.certificate-not-valid-error')); } else { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component.ts index f654b8916..c5830471c 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component.ts @@ -1,10 +1,20 @@ import { BaseFormComponent } from '@iqser/common-ui'; -import { lastIndexOfEnd } from '../../../../../utils'; +import { DigitalSignatureService } from '../../../services/digital-signature.service'; +import { IDigitalSignatureRequest } from '@red/domain'; +import { firstValueFrom } from 'rxjs'; + +export enum CertificateType { + PKCS = 'pkcs', + KMS = 'kms', +} export abstract class BaseSignatureConfigurationComponent extends BaseFormComponent { file: File | null; - constructor(private readonly _certificateFormKey: string) { + protected constructor( + protected readonly _digitalSignatureService: DigitalSignatureService, + private readonly _certificateType: CertificateType, + ) { super(); } @@ -18,21 +28,6 @@ export abstract class BaseSignatureConfigurationComponent extends BaseFormCompon } } - addRemoveCertificate(file: File | null): void { - this.setCertificateName(file); - if (file) { - const fileReader = new FileReader(); - fileReader.onload = () => { - const dataUrl = fileReader.result; - const actualBase64Value = dataUrl.substring(lastIndexOfEnd(dataUrl, ';base64,')); - this.form.get(this._certificateFormKey).setValue(actualBase64Value); - }; - fileReader.readAsDataURL(file as Blob); - } else { - this.form.controls[this._certificateFormKey].setValue(''); - } - } - generateFile(certificateName: string, extension: '.p12' | '.pem'): File | null { if (certificateName) { return { @@ -45,4 +40,16 @@ export abstract class BaseSignatureConfigurationComponent extends BaseFormCompon resetInitialFormValue(): void { this.initialFormValue = this.form.getRawValue(); } + + deleteSignature(): Promise { + const observable = + this._certificateType === CertificateType.PKCS + ? this._digitalSignatureService.deleteSignature() + : this._digitalSignatureService.deleteKmsSignature(); + return firstValueFrom(observable); + } + + abstract addRemoveCertificate(file: File | null): void; + + abstract save(): Promise; } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.html index 2733c4799..f505c99b5 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.html @@ -1,14 +1,8 @@ - + +
-
- - +
@@ -29,13 +23,13 @@
-
+
-
+
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.scss index 8bc5184e4..a52b187c3 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.scss @@ -7,9 +7,8 @@ } } -.full-width { - width: 100%; - margin-right: 0; +.w-300 { + width: 300px; } iqser-upload-file { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts index 08668eff8..e992045b5 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; -import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component'; +import { BaseSignatureConfigurationComponent, CertificateType } from '../base-signature-configuration-component'; import { IKmsDigitalSignature, IKmsDigitalSignatureRequest } from '@red/domain'; import { firstValueFrom } from 'rxjs'; import { DigitalSignatureService } from '../../../../services/digital-signature.service'; @@ -14,8 +14,8 @@ import { DigitalSignatureService } from '../../../../services/digital-signature. export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit { @Input() digitalSignature!: IKmsDigitalSignatureRequest; - constructor(private readonly _formBuilder: FormBuilder, private readonly _digitalSignatureService: DigitalSignatureService) { - super('certificate'); + constructor(protected readonly _digitalSignatureService: DigitalSignatureService, private readonly _formBuilder: FormBuilder) { + super(_digitalSignatureService, CertificateType.KMS); } ngOnInit() { @@ -32,10 +32,28 @@ export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurati this.file = this.generateFile(this.digitalSignature?.certificateName, '.pem'); } - save() { + addRemoveCertificate(file: File | null): void { + this.setCertificateName(file); + if (file) { + const fileReader = new FileReader(); + fileReader.onload = () => { + const binaryContent = fileReader.result; + this.form.get('certificate').setValue(binaryContent); + }; + fileReader.readAsBinaryString(file as Blob); + } else { + this.form.controls['certificate'].setValue(''); + } + } + + save(): Promise { const formValue = this.form.getRawValue(); const digitalSignature: IKmsDigitalSignature = { ...formValue }; + if (!this.digitalSignature) { + digitalSignature.certificate = window.btoa(digitalSignature.certificate); + } + return firstValueFrom(this._digitalSignatureService.saveKmsSignature(digitalSignature)); } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.html index b97ca884a..2e635dc5a 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.html @@ -1,13 +1,13 @@ +
-
- - +
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.scss index eedff7d5e..170cba86c 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.scss @@ -2,9 +2,8 @@ textarea { resize: none; } -.full-width { - width: 100%; - margin-right: 0; +.w-400 { + width: 400px; } iqser-upload-file { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts index b0899844b..5b0025faf 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts @@ -1,9 +1,10 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; -import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component'; +import { BaseSignatureConfigurationComponent, CertificateType } from '../base-signature-configuration-component'; import { IPkcsDigitalSignature, IPkcsDigitalSignatureRequest } from '@red/domain'; import { firstValueFrom } from 'rxjs'; import { DigitalSignatureService } from '../../../../services/digital-signature.service'; +import { lastIndexOfEnd } from '../../../../../../utils'; @Component({ selector: 'redaction-pkcs-signature-configuration', @@ -14,8 +15,8 @@ import { DigitalSignatureService } from '../../../../services/digital-signature. export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit { @Input() digitalSignature!: IPkcsDigitalSignatureRequest; - constructor(private readonly _formBuilder: FormBuilder, private readonly _digitalSignatureService: DigitalSignatureService) { - super('base64EncodedPrivateKey'); + constructor(protected readonly _digitalSignatureService: DigitalSignatureService, private readonly _formBuilder: FormBuilder) { + super(_digitalSignatureService, CertificateType.PKCS); } ngOnInit() { @@ -31,7 +32,22 @@ export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurat this.file = this.generateFile(this.digitalSignature?.certificateName, '.p12'); } - save() { + addRemoveCertificate(file: File | null): void { + this.setCertificateName(file); + if (file) { + const fileReader = new FileReader(); + fileReader.onload = () => { + const dataUrl = fileReader.result; + const actualBase64Value = dataUrl.substring(lastIndexOfEnd(dataUrl, ';base64,')); + this.form.get('base64EncodedPrivateKey').setValue(actualBase64Value); + }; + fileReader.readAsDataURL(file as Blob); + } else { + this.form.controls['base64EncodedPrivateKey'].setValue(''); + } + } + + save(): Promise { const formValue = this.form.getRawValue(); const digitalSignature: IPkcsDigitalSignature = { ...formValue }; diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts index f7deb7c40..476904c47 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts @@ -9,11 +9,7 @@ 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'; - -export enum CertificateType { - PKCS = 'pkcs', - KMS = 'kms', -} +import { CertificateType } from '../../dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component'; @Component({ selector: 'redaction-digital-signature-screen', @@ -47,7 +43,7 @@ export class DigitalSignatureScreenComponent implements OnInit { async removeDigitalSignature(): Promise { this._loadingService.start(); try { - await firstValueFrom(this._digitalSignatureService.deleteSignature()); + await this.activeComponent.deleteSignature(); await this.loadDigitalSignature(); this._toaster.success(_('digital-signature-screen.action.delete-success')); } catch (error) { diff --git a/apps/red-ui/src/app/modules/admin/services/digital-signature.service.ts b/apps/red-ui/src/app/modules/admin/services/digital-signature.service.ts index cd22810a0..6024e3322 100644 --- a/apps/red-ui/src/app/modules/admin/services/digital-signature.service.ts +++ b/apps/red-ui/src/app/modules/admin/services/digital-signature.service.ts @@ -21,11 +21,6 @@ export class DigitalSignatureService extends GenericService { - return this._put(body, `${this._defaultModelPath}/kms`); - } - @Validate() saveSignature(@RequiredParam() body: IPkcsDigitalSignature): Observable { return this._post(body);