RED-3982 - updates to add 'pkcs signature' and 'kms signature' forms also on main screen component to be edited

apps/red-ui/src/app/modules/admin/admin.module.ts

@@ -44,8 +44,8 @@ import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-scre
 import { CloneDossierTemplateDialogComponent } from './dialogs/clone-dossier-template-dialog/clone-dossier-template-dialog.component';
 import { AdminSideNavComponent } from './admin-side-nav/admin-side-nav.component';
 import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
-import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component';
-import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component';
+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';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,

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

@@ -23,7 +23,6 @@
         </ng-container>
         <ng-container *ngIf="isInConfiguration">
             {{ 'digital-signature-dialog.upload-warning-message' | translate }}
-            <iqser-upload-file></iqser-upload-file>
 
             <redaction-pkcs-signature-configuration
                 *ngIf="selectedOption === certificateType.PKCS"
@@ -40,7 +39,7 @@
             <div translate="digital-signature-dialog.actions.cancel" class="all-caps-label cancel" mat-dialog-close></div>
         </ng-container>
         <ng-container *ngIf="isInConfiguration">
-            <button (click)="save()" color="primary" mat-flat-button>
+            <button (click)="save()" [disabled]="disabled" color="primary" mat-flat-button>
                 {{ 'digital-signature-dialog.actions.save' | translate }}
             </button>
             <div translate="digital-signature-dialog.actions.back" class="all-caps-label cancel" (click)="toggleIsInConfiguration()"></div>

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss

@@ -33,10 +33,5 @@
         .selected {
             background: rgba(variables.$red-1, 0.1);
         }
-
-        iqser-upload-file {
-            padding-top: 24px;
-            padding-bottom: 24px;
-        }
     }
 }

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

@@ -1,14 +1,15 @@
-import { Component, Injector, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
 import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
-import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
+import { BaseDialogComponent, LoadingService, Toaster } from '../../../../../../../../libs/common-ui/src';
 import { MatDialogRef } from '@angular/material/dialog';
-import { PkcsSignatureConfigurationComponent } from './pkcs-signature-configuration/pkcs-signature-configuration.component';
-import { KmsSignatureConfigurationComponent } from './kms-signature-configuration/kms-signature-configuration.component';
+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 '../../screens/digital-signature/digital-signature-screen.component';
 
-enum CertificateType {
-    PKCS = 'pkcs',
-    KMS = 'kms',
-}
+const DEFAULT_DIALOG_WIDTH = '662px';
+const KMS_SIGNATURE_DIALOG_WIDTH = '810px';
 
 @Component({
     templateUrl: './configure-certificate-dialog.component.html',
@@ -25,18 +26,47 @@ export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
     selectedOption = this.certificateOptions[0];
     isInConfiguration = false;
 
-    constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<ConfigureCertificateDialogComponent>) {
+    constructor(
+        protected readonly _injector: Injector,
+        protected readonly _dialogRef: MatDialogRef<ConfigureCertificateDialogComponent>,
+        private readonly _loadingService: LoadingService,
+        private readonly _toaster: Toaster,
+        private readonly _changeDetectorRef: ChangeDetectorRef,
+    ) {
         super(_injector, _dialogRef);
     }
 
     toggleIsInConfiguration() {
         this.isInConfiguration = !this.isInConfiguration;
         if (this.isInConfiguration && this.selectedOption === CertificateType.KMS) {
-            this._dialogRef.updateSize('810px');
+            this._dialogRef.updateSize(KMS_SIGNATURE_DIALOG_WIDTH);
         } else {
-            this._dialogRef.updateSize('662px');
+            this._dialogRef.updateSize(DEFAULT_DIALOG_WIDTH);
         }
+        this._changeDetectorRef.detectChanges();
     }
 
-    save() {}
+    get disabled(): boolean {
+        return this.activeComponent?.disabled;
+    }
+
+    get activeComponent() {
+        return this.selectedOption === CertificateType.PKCS
+            ? this.pkcsSignatureConfigurationComponent
+            : this.kmsSignatureConfigurationComponent;
+    }
+
+    async save(): Promise<void> {
+        try {
+            await this.activeComponent.save();
+            this._toaster.success(_('digital-signature-dialog.actions.save-success'));
+            this._dialogRef.close(true);
+        } catch (error) {
+            if (error.status === HttpStatusCode.BadRequest) {
+                this._toaster.error(_('digital-signature-dialog.actions.certificate-not-valid-error'));
+            } else {
+                this._toaster.error(_('digital-signature-dialog.actions.save-error'));
+            }
+        }
+    }
 }

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

@@ -0,0 +1,42 @@
+import { BaseFormComponent } from '@iqser/common-ui';
+import { lastIndexOfEnd } from '../../../../../utils';
+
+export abstract class BaseSignatureConfigurationComponent extends BaseFormComponent {
+    constructor(private readonly _certificateFormKey: string) {
+        super();
+    }
+
+    setCertificateName(file: File | null): void {
+        if (file) {
+            let name = file.name.split('.')[0];
+            name = name.replace(/-/g, ' ');
+            this.form.controls['certificateName'].setValue(name);
+        } else {
+            this.form.controls['certificateName'].setValue('');
+        }
+    }
+
+    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 {
+                name: certificateName.split(' ').join('-') + extension,
+            } as File;
+        }
+        return null;
+    }
+}

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

@@ -1,3 +1,4 @@
+<iqser-upload-file accept=".pem" (fileChanged)="addRemoveCertificate($event)"></iqser-upload-file>
 <form [formGroup]="form">
     <div class="flex">
         <div class="flex fields-container">
@@ -28,7 +29,7 @@
         </div>
 
         <div class="flex fields-container">
-            <div class="iqser-input-group w-400 certificate">
+            <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>
             </div>

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

@@ -6,3 +6,9 @@
         height: 100%;
     }
 }
+
+iqser-upload-file {
+    display: block;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}

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

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
+import { IKmsDigitalSignature, IPkcsDigitalSignature } from '../../../../../../../../../../libs/red-domain/src';
+import { lastIndexOfEnd } from '../../../../../../utils';
+import { firstValueFrom } from 'rxjs';
+import { DigitalSignatureService } from '../../../../services/digital-signature.service';
+
+@Component({
+    selector: 'redaction-kms-signature-configuration',
+    templateUrl: './kms-signature-configuration.component.html',
+    styleUrls: ['./kms-signature-configuration.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {
+    @Input() digitalSignature!: IKmsDigitalSignature;
+    file: File | null;
+
+    constructor(private readonly _formBuilder: FormBuilder, private readonly _digitalSignatureService: DigitalSignatureService) {
+        super('certificate');
+    }
+
+    ngOnInit() {
+        this.form = this._formBuilder.group({
+            certificateName: [this.digitalSignature?.certificateName, Validators.required],
+            kmsServiceEndpoint: [this.digitalSignature?.kmsServiceEndpoint, Validators.required],
+            kmsRegion: [this.digitalSignature?.kmsRegion, Validators.required],
+            kmsKeyId: [this.digitalSignature?.kmsKeyId, Validators.required],
+            kmsAccessKey: [this.digitalSignature?.kmsAccessKey, Validators.required],
+            kmsSecretKey: [this.digitalSignature?.kmsSecretKey, this.digitalSignature ? Validators.required : null],
+            certificate: [this.digitalSignature?.certificate, this.digitalSignature ? Validators.required : null],
+        });
+        this.initialFormValue = this.form.getRawValue();
+        this.file = this.generateFile(this.digitalSignature?.certificateName, '.pem');
+    }
+
+    async save() {
+        const formValue = this.form.getRawValue();
+        const digitalSignature: IKmsDigitalSignature = { ...formValue };
+
+        return await firstValueFrom(this._digitalSignatureService.saveKmsSignature(digitalSignature));
+    }
+}

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

@@ -1,3 +1,4 @@
+<iqser-upload-file accept=".p12" [file]="file" [readonly]="!!file" (fileChanged)="addRemoveCertificate($event)"></iqser-upload-file>
 <form [formGroup]="form">
     <div class="flex">
         <div class="flex fields-container">
@@ -5,7 +6,7 @@
                 <label translate="digital-signature-dialog.forms.pkcs.certificate-name"></label>
                 <input formControlName="certificateName" 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.pkcs.password-key"></label>
                 <input formControlName="password" type="password" />
             </div>

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

@@ -0,0 +1,9 @@
+textarea {
+    resize: none;
+}
+
+iqser-upload-file {
+    display: block;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}

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

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
+import { lastIndexOfEnd } from '../../../../../../utils';
+import { IPkcsDigitalSignature } from '../../../../../../../../../../libs/red-domain/src';
+import { firstValueFrom } from 'rxjs';
+import { LoadingService } from '../../../../../../../../../../libs/common-ui/src';
+import { DigitalSignatureService } from '../../../../services/digital-signature.service';
+
+@Component({
+    selector: 'redaction-pkcs-signature-configuration',
+    templateUrl: './pkcs-signature-configuration.component.html',
+    styleUrls: ['./pkcs-signature-configuration.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {
+    @Input() digitalSignature!: IPkcsDigitalSignature;
+    file: File | null;
+
+    constructor(private readonly _formBuilder: FormBuilder, private readonly _digitalSignatureService: DigitalSignatureService) {
+        super('base64EncodedPrivateKey');
+    }
+
+    ngOnInit() {
+        this.form = this._formBuilder.group({
+            certificateName: [this.digitalSignature?.certificateName, Validators.required],
+            password: [this.digitalSignature?.password, !this.digitalSignature ? Validators.required : null],
+            contactInfo: [this.digitalSignature?.contactInfo],
+            location: [this.digitalSignature?.location],
+            reason: [this.digitalSignature?.reason],
+            base64EncodedPrivateKey: [this.digitalSignature?.base64EncodedPrivateKey, !this.digitalSignature ? Validators.required : null],
+        });
+        this.initialFormValue = this.form.getRawValue();
+        this.file = this.generateFile(this.digitalSignature?.certificateName, '.p12');
+    }
+
+    async save() {
+        const formValue = this.form.getRawValue();
+        const digitalSignature: IPkcsDigitalSignature = { ...formValue };
+
+        return await firstValueFrom(this._digitalSignatureService.saveSignature(digitalSignature));
+    }
+}

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

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-@Component({
-    selector: 'redaction-kms-signature-configuration',
-    templateUrl: './kms-signature-configuration.component.html',
-    styleUrls: ['./kms-signature-configuration.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KmsSignatureConfigurationComponent implements OnInit {
-    form: FormGroup;
-
-    constructor(private readonly _formBuilder: FormBuilder) {}
-
-    ngOnInit() {
-        this.form = this._formBuilder.group({
-            certificateName: ['', Validators.required],
-            kmsServiceEndpoint: ['', Validators.required],
-            kmsRegion: ['', Validators.required],
-            kmsKeyId: ['', Validators.required],
-            kmsAccessKey: ['', Validators.required],
-            kmsSecretKey: ['', Validators.required],
-            certificate: ['', Validators.required],
-        });
-    }
-}

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

@@ -1,3 +0,0 @@
-textarea {
-    resize: none;
-}

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

@@ -1,24 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-@Component({
-    selector: 'redaction-pkcs-signature-configuration',
-    templateUrl: './pkcs-signature-configuration.component.html',
-    styleUrls: ['./pkcs-signature-configuration.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PkcsSignatureConfigurationComponent implements OnInit {
-    form: FormGroup;
-
-    constructor(private readonly _formBuilder: FormBuilder) {}
-
-    ngOnInit() {
-        this.form = this._formBuilder.group({
-            certificateName: ['', Validators.required],
-            password: ['', Validators.required],
-            contactInfo: [''],
-            location: [''],
-            reason: [''],
-        });
-    }
-}

apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html

@@ -13,92 +13,42 @@
         <div class="content-inner">
             <div class="content-container">
                 <div class="content-container-content">
-                    <form *ngIf="form" [formGroup]="form" autocomplete="off">
-                        <!--                        <input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />-->
+                    <iqser-empty-state
+                        (action)="openConfigureCertificate()"
+                        *ngIf="!digitalSignature"
+                        [buttonLabel]="'digital-signature-screen.no-data.action' | translate"
+                        [text]="'digital-signature-screen.no-data.title' | translate"
+                        icon="iqser:document"
+                        [buttonIcon]="null"
+                    ></iqser-empty-state>
 
-                        <iqser-empty-state
-                            (action)="openConfigureCertificate()"
-                            *ngIf="!hasDigitalSignatureSet"
-                            [buttonLabel]="'digital-signature-screen.no-data.action' | translate"
-                            [text]="'digital-signature-screen.no-data.title' | translate"
-                            icon="iqser:document"
-                            [buttonIcon]="null"
-                        ></iqser-empty-state>
+                    <ng-container *ngIf="digitalSignature">
+                        <redaction-pkcs-signature-configuration
+                            *ngIf="currentCertificateType === certificateType.PKCS"
+                            [digitalSignature]="digitalSignature"
+                        ></redaction-pkcs-signature-configuration>
+                        <redaction-kms-signature-configuration
+                            *ngIf="currentCertificateType === certificateType.KMS"
+                            [digitalSignature]="digitalSignature"
+                        ></redaction-kms-signature-configuration>
+                    </ng-container>
 
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group required w-300">
-                            <label translate="digital-signature-screen.certificate-name.label"></label>
-                            <input
-                                [placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
-                                formControlName="certificateName"
-                                name="certificateName"
-                            />
-                        </div>
+                    <div [class.hidden]="!digitalSignature" class="changes-box">
+                        <iqser-icon-button
+                            (action)="saveDigitalSignature()"
+                            [disabled]="disabled"
+                            [label]="'digital-signature-screen.action.save' | translate"
+                            [type]="iconButtonTypes.primary"
+                            icon="iqser:check"
+                        ></iqser-icon-button>
 
                         <div
-                            *ngIf="!digitalSignatureExists"
-                            [class.hidden]="!hasDigitalSignatureSet"
-                            class="iqser-input-group required w-300"
-                        >
-                            <label translate="digital-signature-screen.password.label"></label>
-                            <input
-                                [placeholder]="'digital-signature-screen.password.placeholder' | translate"
-                                formControlName="keySecret"
-                                name="keySecret"
-                            />
-                        </div>
-
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group w-300">
-                            <label translate="digital-signature-screen.reason.label"></label>
-                            <input
-                                [placeholder]="'digital-signature-screen.reason.placeholder' | translate"
-                                formControlName="reason"
-                                name="reason"
-                            />
-                        </div>
-
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group w-300">
-                            <label translate="digital-signature-screen.location.label"></label>
-                            <input
-                                [placeholder]="'digital-signature-screen.location.placeholder' | translate"
-                                formControlName="location"
-                                name="location"
-                            />
-                        </div>
-
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group w-300">
-                            <label translate="digital-signature-screen.contact-info.label"></label>
-                            <input
-                                [placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
-                                formControlName="contactInfo"
-                                name="contactInfo"
-                            />
-                        </div>
-
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="changes-box">
-                            <iqser-icon-button
-                                (action)="saveDigitalSignature()"
-                                [disabled]="form.invalid"
-                                [label]="'digital-signature-screen.action.save' | translate"
-                                [type]="iconButtonTypes.primary"
-                                icon="iqser:check"
-                            ></iqser-icon-button>
-
-                            <iqser-icon-button
-                                (action)="removeDigitalSignature()"
-                                *ngIf="digitalSignatureExists"
-                                [label]="'digital-signature-screen.action.delete' | translate"
-                                [type]="iconButtonTypes.primary"
-                                icon="iqser:trash"
-                            ></iqser-icon-button>
-
-                            <div
-                                (click)="loadDigitalSignatureAndInitializeForm()"
-                                *ngIf="!digitalSignatureExists"
-                                class="all-caps-label cancel"
-                                translate="digital-signature-screen.action.reset"
-                            ></div>
-                        </div>
-                    </form>
+                            (click)="removeDigitalSignature()"
+                            *ngIf="digitalSignature"
+                            class="all-caps-label cancel"
+                            translate="digital-signature-screen.action.remove"
+                        ></div>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -1,15 +1,20 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { lastIndexOfEnd } from '@utils/functions';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
 import { RouterHistoryService } from '@services/router-history.service';
 import { DigitalSignatureService } from '../../services/digital-signature.service';
-import { IDigitalSignature } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
-import { HttpStatusCode } from '@angular/common/http';
 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 '../../../../../../../../libs/red-domain/src';
+import { HttpStatusCode } from '@angular/common/http';
+
+export enum CertificateType {
+    PKCS = 'pkcs',
+    KMS = 'kms',
+}
 
 @Component({
     selector: 'redaction-digital-signature-screen',
@@ -17,66 +22,34 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
     styleUrls: ['./digital-signature-screen.component.scss'],
 })
 export class DigitalSignatureScreenComponent implements OnInit {
+    @ViewChild(PkcsSignatureConfigurationComponent) pkcsSignatureConfigurationComponent: PkcsSignatureConfigurationComponent;
+    @ViewChild(KmsSignatureConfigurationComponent) kmsSignatureConfigurationComponent: KmsSignatureConfigurationComponent;
+
+    readonly certificateType = CertificateType;
     readonly iconButtonTypes = IconButtonTypes;
     readonly currentUser = this._userService.currentUser;
 
-    digitalSignature: IDigitalSignature;
-    form: FormGroup;
-
-    digitalSignatureExists = false;
+    digitalSignature: IPkcsDigitalSignatureRequest | IKmsDigitalSignatureRequest;
 
     constructor(
         private readonly _toaster: Toaster,
-        private readonly _formBuilder: FormBuilder,
         private readonly _userService: UserService,
         private readonly _loadingService: LoadingService,
         private readonly _digitalSignatureService: DigitalSignatureService,
         private readonly _dialogService: AdminDialogService,
+        private readonly _changeDetectorRef: ChangeDetectorRef,
         readonly routerHistoryService: RouterHistoryService,
     ) {}
 
-    get hasDigitalSignatureSet() {
-        return this.digitalSignatureExists || !!this.form.get('base64EncodedPrivateKey').value;
-    }
-
     async ngOnInit(): Promise<void> {
-        await this.loadDigitalSignatureAndInitializeForm();
-    }
-
-    async saveDigitalSignature(): Promise<void> {
-        this._loadingService.start();
-        const formValue = this.form.getRawValue();
-        const digitalSignature: IDigitalSignature = {
-            ...formValue,
-        };
-        //adjusted for chrome auto-complete / password manager
-        digitalSignature.password = formValue.keySecret;
-
-        const observable = this.digitalSignatureExists
-            ? this._digitalSignatureService.update(digitalSignature)
-            : this._digitalSignatureService.save(digitalSignature);
-
-        try {
-            await firstValueFrom(observable);
-            await this.loadDigitalSignatureAndInitializeForm();
-            this._toaster.success(_('digital-signature-screen.action.save-success'));
-        } catch (error) {
-            console.error(error);
-            if (error.status === HttpStatusCode.BadRequest) {
-                this._toaster.error(_('digital-signature-screen.action.certificate-not-valid-error'));
-            } else {
-                this._toaster.error(_('digital-signature-screen.action.save-error'));
-            }
-        }
-
-        this._loadingService.stop();
+        await this.loadDigitalSignature();
     }
 
     async removeDigitalSignature(): Promise<void> {
         this._loadingService.start();
         try {
-            await firstValueFrom(this._digitalSignatureService.delete());
-            await this.loadDigitalSignatureAndInitializeForm();
+            await firstValueFrom(this._digitalSignatureService.deleteSignature());
+            await this.loadDigitalSignature();
             this._toaster.success(_('digital-signature-screen.action.delete-success'));
         } catch (error) {
             console.error(error);
@@ -84,48 +57,45 @@ export class DigitalSignatureScreenComponent implements OnInit {
         }
     }
 
-    // fileChanged(event, input: HTMLInputElement) {
-    //     const file = event.target.files[0];
-    //     const fileReader = new FileReader();
-    //     fileReader.onload = () => {
-    //         const dataUrl = <string>fileReader.result;
-    //         const actualBase64Value = dataUrl.substring(lastIndexOfEnd(dataUrl, ';base64,'));
-    //         this.form.get('base64EncodedPrivateKey').setValue(actualBase64Value);
-    //         this.form.get('certificateName').setValue(file.name);
-    //         input.value = null;
-    //     };
-    //     fileReader.readAsDataURL(file as Blob);
-    // }
-
-    openConfigureCertificate() {
-        this._dialogService.openDialog('configureCertificate', null, null);
+    get disabled(): boolean {
+        return this.activeComponent?.disabled;
     }
 
-    async loadDigitalSignatureAndInitializeForm(): Promise<void> {
-        this._loadingService.start();
+    async saveDigitalSignature(): Promise<void> {
         try {
-            const digitalSignature = await firstValueFrom(this._digitalSignatureService.getSignature());
-            this.digitalSignatureExists = true;
-            this.digitalSignature = digitalSignature;
+            await this.activeComponent.save();
+            this._toaster.success(_('digital-signature-screen.action.save-success'));
         } catch (error) {
-            this.digitalSignatureExists = false;
-            this.digitalSignature = {};
+            this._toaster.error(_('digital-signature-screen.action.save-error'));
         }
-
-        this.form = this._getForm();
-        this._loadingService.stop();
     }
 
-    private _getForm(): FormGroup {
-        return this._formBuilder.group({
-            certificateName: [this.digitalSignature.certificateName, Validators.required],
-            contactInfo: this.digitalSignature.contactInfo,
-            location: this.digitalSignature.location,
-            keySecret: this.digitalSignatureExists ? null : [this.digitalSignature.password, Validators.required],
-            reason: this.digitalSignature.reason,
-            base64EncodedPrivateKey: this.digitalSignatureExists
-                ? null
-                : [this.digitalSignature.base64EncodedPrivateKey, Validators.required],
+    get currentCertificateType() {
+        if (!this.digitalSignature) {
+            return;
+        }
+        return 'contactInfo' in this.digitalSignature ? CertificateType.PKCS : CertificateType.KMS;
+    }
+
+    get activeComponent() {
+        return this.currentCertificateType === CertificateType.PKCS
+            ? this.pkcsSignatureConfigurationComponent
+            : this.kmsSignatureConfigurationComponent;
+    }
+
+    openConfigureCertificate(): void {
+        const dialogRef = this._dialogService.openDialog('configureCertificate', null, null);
+        firstValueFrom(dialogRef.afterClosed()).then(async res => {
+            if (res) {
+                await this.loadDigitalSignature();
+            }
         });
     }
+
+    async loadDigitalSignature(): Promise<void> {
+        this._loadingService.start();
+        this.digitalSignature = await firstValueFrom(this._digitalSignatureService.getSignature());
+        this._loadingService.stop();
+        this._changeDetectorRef.detectChanges();
+    }
 }

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

@@ -1,7 +1,14 @@
 import { Injectable, Injector } from '@angular/core';
-import { GenericService, RequiredParam, Validate } from '@iqser/common-ui';
-import { Observable } from 'rxjs';
-import { IDigitalSignature, IDigitalSignatureRequest } from '@red/domain';
+import { filterEach, GenericService, RequiredParam, Validate } from '@iqser/common-ui';
+import { filter, forkJoin, Observable, of } from 'rxjs';
+import {
+    IDigitalSignatureRequest,
+    IKmsDigitalSignature,
+    IKmsDigitalSignatureRequest,
+    IPkcsDigitalSignature,
+    IPkcsDigitalSignatureRequest,
+} from '@red/domain';
+import { catchError, map, tap } from 'rxjs/operators';
 
 @Injectable()
 export class DigitalSignatureService extends GenericService<IDigitalSignatureRequest> {
@@ -10,20 +17,39 @@ export class DigitalSignatureService extends GenericService<IDigitalSignatureReq
     }
 
     @Validate()
-    update(@RequiredParam() body: IDigitalSignatureRequest): Observable<unknown> {
+    updateSignature(@RequiredParam() body: IDigitalSignatureRequest): Observable<unknown> {
         return this._put(body);
     }
 
     @Validate()
-    save(@RequiredParam() body: IDigitalSignature): Observable<IDigitalSignatureRequest> {
+    updateKmsSignature(@RequiredParam() body: IKmsDigitalSignatureRequest): Observable<unknown> {
+        return this._put(body, `${this._defaultModelPath}/kms`);
+    }
+
+    @Validate()
+    saveSignature(@RequiredParam() body: IPkcsDigitalSignature): Observable<IPkcsDigitalSignatureRequest> {
         return this._post(body);
     }
 
-    delete(): Observable<unknown> {
+    @Validate()
+    saveKmsSignature(@RequiredParam() body: IKmsDigitalSignature): Observable<IKmsDigitalSignatureRequest> {
+        return this._post(body, `${this._defaultModelPath}/kms`);
+    }
+
+    deleteSignature(): Observable<unknown> {
         return super.delete({});
     }
 
+    deleteKmsSignature(): Observable<unknown> {
+        return super.delete({}, `${this._defaultModelPath}/kms`);
+    }
+
     getSignature(): Observable<IDigitalSignatureRequest> {
-        return super.getAll();
+        const digitalSignature$ = super.getAll().pipe(catchError(() => of(null)));
+        const kmsDigitalSignature$ = super.getAll(`${this._defaultModelPath}/kms`).pipe(catchError(() => of(null)));
+        return forkJoin([digitalSignature$, kmsDigitalSignature$]).pipe(
+            filterEach(signature => !!signature),
+            map(signatures => signatures[0] as IDigitalSignatureRequest),
+        );
     }
 }

apps/red-ui/src/assets/i18n/de.json

@@ -659,8 +659,11 @@
     "actions": {
       "back": "",
       "cancel": "",
+      "certificate-not-valid-error": "",
       "continue": "",
-      "save": ""
+      "save": "",
+      "save-error": "",
+      "save-success": ""
     },
     "forms": {
       "kms": {
@@ -699,38 +702,17 @@
   },
   "digital-signature-screen": {
     "action": {
-      "certificate-not-valid-error": "Das hochgeladene Zertifikat eignet sich nicht zum Signieren von PDF-Dokumenten. Sie benötigen das Format PCKS#12.",
-      "delete": "Digitale Signatur löschen",
+      "certificate-not-valid-error": "",
       "delete-error": "Die digitale Signatur konnte nicht entfernt werden, bitte versuchen Sie es erneut.",
       "delete-success": "Die digitale Signatur wurde gelöscht. Geschwärzte Dateien werden nicht länger mit einer Signatur versehen!",
-      "reset": "Zurücksetzen",
+      "remove": "",
       "save": "Digitale Signatur speichern",
-      "save-error": "Fehler beim Speichern der digitalen Signatur",
-      "save-success": "Digitale Signatur erfolgreich gespeichert"
-    },
-    "certificate-name": {
-      "label": "Name des Zertifikats",
-      "placeholder": "Name des Zertifikats"
-    },
-    "contact-info": {
-      "label": "Kontaktdaten",
-      "placeholder": "Kontaktdaten"
-    },
-    "location": {
-      "label": "Ort",
-      "placeholder": "Ort"
+      "save-error": "",
+      "save-success": ""
     },
     "no-data": {
       "action": "Zertifikat hochladen",
       "title": "Es ist kein Zertifikat für die digitale Signatur konfiguriert. Laden Sie ein PCKS#12-Zertifikat hoch, um Ihre geschwärzten Dokumente zu signieren."
-    },
-    "password": {
-      "label": "Zertifikatspasswort/-schlüssel",
-      "placeholder": "Passwort"
-    },
-    "reason": {
-      "label": "Begründung",
-      "placeholder": "Begründung"
     }
   },
   "document-info": {

apps/red-ui/src/assets/i18n/en.json

@@ -659,8 +659,11 @@
     "actions": {
       "back": "Back",
       "cancel": "Cancel",
+      "certificate-not-valid-error": "Uploaded Certificate is not valid!",
       "continue": "Continue",
-      "save": "Save Configurations"
+      "save": "Save Configurations",
+      "save-error": "Failed to save digital signature!",
+      "save-success": "Digital Signature Certificate successfully saved!"
     },
     "forms": {
       "kms": {
@@ -699,38 +702,16 @@
   },
   "digital-signature-screen": {
     "action": {
-      "certificate-not-valid-error": "Uploaded Certificate is not valid for signing PDFs. PCKS.12 format is required.",
-      "delete": "Delete Digital Signature",
       "delete-error": "Failed to remove digital signature, please try again.",
       "delete-success": "Digital signature removed. Redacted files will no longer be signed!",
-      "reset": "Reset",
-      "save": "Save Digital Signature",
-      "save-error": "Failed to save digital signature",
-      "save-success": "Digital signature saved successfully"
-    },
-    "certificate-name": {
-      "label": "Certificate Name",
-      "placeholder": "Certificate Name"
-    },
-    "contact-info": {
-      "label": "Contact Information",
-      "placeholder": "Contact Information"
-    },
-    "location": {
-      "label": "Location",
-      "placeholder": "Location"
+      "remove": "Remove",
+      "save": "Save Changes",
+      "save-error": "Failed to save digital signature!",
+      "save-success": "Digital Signature Certificate successfully saved!"
     },
     "no-data": {
       "action": "Configure Certificate",
       "title": "No Digital Signature Certificate.<br/>For signing redacted documents please configure a certificate."
-    },
-    "password": {
-      "label": "Certificate Password/Key",
-      "placeholder": "Password"
-    },
-    "reason": {
-      "label": "Reason",
-      "placeholder": "Reason"
     }
   },
   "document-info": {

libs/common-ui

@@ -1 +1 @@
-Subproject commit e7be61efff0b9baa3d6b53002cbecd8b53d7b934
+Subproject commit 1b146037facaa4d3e5a662fea64f67c0dd8b0110

libs/red-domain/src/lib/signature/digital-signature-request.ts

@@ -1,6 +1,3 @@
 export interface IDigitalSignatureRequest {
     certificateName?: string;
-    contactInfo?: string;
-    location?: string;
-    reason?: string;
 }

libs/red-domain/src/lib/signature/digital-signature.ts

@@ -1,6 +0,0 @@
-import { IDigitalSignatureRequest } from './digital-signature.request';
-
-export interface IDigitalSignature extends IDigitalSignatureRequest {
-    base64EncodedPrivateKey?: string;
-    password?: string;
-}

libs/red-domain/src/lib/signature/index.ts

@@ -1,2 +1,5 @@
-export * from './digital-signature.request';
-export * from './digital-signature';
+export * from './pkcs-digital-signature.request';
+export * from './kms-digital-signature.request';
+export * from './pkcs-digital-signature';
+export * from './kms-digital-signature';
+export * from './digital-signature-request';

libs/red-domain/src/lib/signature/kms-digital-signature.request.ts

@@ -0,0 +1,8 @@
+import { IDigitalSignatureRequest } from './digital-signature-request';
+
+export interface IKmsDigitalSignatureRequest extends IDigitalSignatureRequest {
+    kmsAccessKey?: string;
+    kmsKeyId?: string;
+    kmsRegion?: string;
+    kmsServiceEndpoint?: string;
+}

libs/red-domain/src/lib/signature/kms-digital-signature.ts

@@ -0,0 +1,6 @@
+import { IKmsDigitalSignatureRequest } from './kms-digital-signature.request';
+
+export interface IKmsDigitalSignature extends IKmsDigitalSignatureRequest {
+    certificate?: string;
+    kmsSecretKey?: string;
+}

libs/red-domain/src/lib/signature/pkcs-digital-signature.request.ts

@@ -0,0 +1,7 @@
+import { IDigitalSignatureRequest } from './digital-signature-request';
+
+export interface IPkcsDigitalSignatureRequest extends IDigitalSignatureRequest {
+    contactInfo?: string;
+    location?: string;
+    reason?: string;
+}

libs/red-domain/src/lib/signature/pkcs-digital-signature.ts

@@ -0,0 +1,6 @@
+import { IPkcsDigitalSignatureRequest } from './pkcs-digital-signature.request';
+
+export interface IPkcsDigitalSignature extends IPkcsDigitalSignatureRequest {
+    base64EncodedPrivateKey?: string;
+    password?: string;
+}