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

RED-3982 - updates to be able to edit/delete digital signature

Browse Source
This commit is contained in:
Valentin Mihai 2022-05-26 13:33:36 +03:00
parent 0962a2cb90
commit 032f0e685f
10 changed files with 87 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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 = <string>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<unknown> {
const observable =
this._certificateType === CertificateType.PKCS
? this._digitalSignatureService.deleteSignature()
: this._digitalSignatureService.deleteKmsSignature();
return firstValueFrom(observable);
}
abstract addRemoveCertificate(file: File | null): void;
abstract save(): Promise<IDigitalSignatureRequest | unknown>;
}

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

@ -1,14 +1,8 @@
<iqser-upload-file accept=".pem" (fileChanged)="addRemoveCertificate($event)"></iqser-upload-file>
<iqser-upload-file [class.w-300]="!!file" accept=".pem" [file]="file" [readonly]="!!file" (fileChanged)="addRemoveCertificate($event)">
</iqser-upload-file>
<form [formGroup]="form">
<div class="flex">
<div class="flex fields-container" [class.full-width]="!file">
<iqser-upload-file
accept=".p12"
[file]="file"
[readonly]="!!file"
(fileChanged)="addRemoveCertificate($event)"
></iqser-upload-file>
<div class="flex fields-container">
<div class="iqser-input-group required w-300">
<label translate="digital-signature-dialog.forms.kms.certificate-name"></label>
<input formControlName="certificateName" type="text" />
@ -29,13 +23,13 @@
<label translate="digital-signature-dialog.forms.kms.kms-access-key"></label>
<input formControlName="kmsAccessKey" type="text" />
</div>
<div class="iqser-input-group required w-300">
<div class="iqser-input-group required w-300" *ngIf="!digitalSignature">
<label translate="digital-signature-dialog.forms.kms.kms-secret-key"></label>
<input formControlName="kmsSecretKey" type="text" />
</div>
</div>
<div class="flex fields-container">
<div class="flex fields-container" *ngIf="!digitalSignature">
<div class="iqser-input-group required w-400 certificate">
<label translate="digital-signature-dialog.forms.kms.certificate-content"></label>
<textarea formControlName="certificate" type="text"></textarea>

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

@ -7,9 +7,8 @@
}
}
.full-width {
width: 100%;
margin-right: 0;
.w-300 {
width: 300px;
}
iqser-upload-file {

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

@ -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 = <string>fileReader.result;
this.form.get('certificate').setValue(binaryContent);
};
fileReader.readAsBinaryString(file as Blob);
} else {
this.form.controls['certificate'].setValue('');
}
}
save(): Promise<IKmsDigitalSignatureRequest> {
const formValue = this.form.getRawValue();
const digitalSignature: IKmsDigitalSignature = { ...formValue };
if (!this.digitalSignature) {
digitalSignature.certificate = window.btoa(<string>digitalSignature.certificate);
}
return firstValueFrom(this._digitalSignatureService.saveKmsSignature(digitalSignature));
}
}

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

@ -1,13 +1,13 @@
<iqser-upload-file
[class.w-400]="!!file"
accept=".p12"
[file]="file"
[readonly]="!!file"
(fileChanged)="addRemoveCertificate($event)"
></iqser-upload-file>
<form [formGroup]="form">
<div class="flex">
<div class="flex fields-container" [class.full-width]="!file">
<iqser-upload-file
accept=".p12"
[file]="file"
[readonly]="!!file"
(fileChanged)="addRemoveCertificate($event)"
></iqser-upload-file>
<div class="flex fields-container">
<div class="iqser-input-group required w-300">
<label translate="digital-signature-dialog.forms.pkcs.certificate-name"></label>
<input formControlName="certificateName" type="text" />

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

@ -2,9 +2,8 @@ textarea {
resize: none;
}
.full-width {
width: 100%;
margin-right: 0;
.w-400 {
width: 400px;
}
iqser-upload-file {

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

@ -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 = <string>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<IPkcsDigitalSignatureRequest | unknown> {
const formValue = this.form.getRawValue();
const digitalSignature: IPkcsDigitalSignature = { ...formValue };

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

@ -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<void> {
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) {

5
apps/red-ui/src/app/modules/admin/services/digital-signature.service.ts
View File

@ -21,11 +21,6 @@ export class DigitalSignatureService extends GenericService<IDigitalSignatureReq
return this._put(body);
}
@Validate()
updateKmsSignature(@RequiredParam() body: IKmsDigitalSignatureRequest): Observable<unknown> {
return this._put(body, `${this._defaultModelPath}/kms`);
}
@Validate()
saveSignature(@RequiredParam() body: IPkcsDigitalSignature): Observable<IPkcsDigitalSignatureRequest> {
return this._post(body);