From ea638644fbfaf977c906c3a0bcf89201441eb9b5 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Sat, 14 May 2022 01:52:05 +0300
Subject: [PATCH 1/8] RED-3982 - WIP on 'Configure Digital Signature
 Certificate' dialog

---
 .../src/app/modules/admin/admin.module.ts     |  2 +
 ...onfigure-certificate-dialog.component.html | 27 ++++++++++++++
 ...onfigure-certificate-dialog.component.scss | 37 +++++++++++++++++++
 .../configure-certificate-dialog.component.ts | 20 ++++++++++
 .../kms/kms.component.html                    |  0
 .../kms/kms.component.scss                    |  0
 .../kms/kms.component.ts                      |  0
 .../pkcs/pkcs.component.html                  |  0
 .../pkcs/pkcs.component.scss                  |  0
 .../pkcs/pkcs.component.ts                    |  0
 .../digital-signature-screen.component.html   |  7 ++--
 .../digital-signature-screen.component.ts     | 30 +++++++++------
 .../admin/services/admin-dialog.service.ts    |  8 +++-
 .../digital-signature-dialog-translations.ts  | 12 ++++++
 apps/red-ui/src/assets/i18n/de.json           | 17 +++++++++
 apps/red-ui/src/assets/i18n/en.json           | 21 ++++++++++-
 libs/common-ui                                |  2 +-
 17 files changed, 164 insertions(+), 19 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index de6e99167..9220d7818 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -43,6 +43,7 @@ import { ConfirmDeleteDossierStateDialogComponent } from './dialogs/confirm-dele
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
 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';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,
@@ -58,6 +59,7 @@ const dialogs = [
     UploadDictionaryDialogComponent,
     AddEditDossierStateDialogComponent,
     ConfirmDeleteDossierStateDialogComponent,
+    ConfigureCertificateDialogComponent,
 ];
 
 const screens = [
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
new file mode 100644
index 000000000..815a4f04a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
@@ -0,0 +1,27 @@
+<section class="dialog">
+    <div class="dialog-header heading-l" translate="digital-signature-dialog.title"></div>
+
+    <div class="dialog-content">
+        <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[option].title | translate }}
+            </div>
+            <p class="description">
+                {{ translations[option].description | translate }}
+            </p>
+        </div>
+    </div>
+
+    <div class="dialog-actions">
+        <button (click)="displaySignatureConfiguration()" color="primary" mat-flat-button>
+            {{ 'digital-signature-dialog.actions.continue' | translate }}
+        </button>
+        <div translate="digital-signature-dialog.actions.cancel" class="all-caps-label cancel" mat-dialog-close></div>
+    </div>
+</section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
new file mode 100644
index 000000000..9348c9978
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
@@ -0,0 +1,37 @@
+@use 'variables';
+
+.dialog {
+    .dialog-content {
+        .option {
+            margin-top: 12px;
+            height: 56px;
+            border-radius: 8px;
+            background: rgba(variables.$grey-2, 0.8);
+            border: 16px solid transparent;
+            cursor: pointer;
+
+            .title {
+                display: flex;
+                align-items: center;
+                font-weight: bold;
+
+                iqser-round-checkbox {
+                    padding-right: 6px;
+                }
+
+                p {
+                    font-weight: bold;
+                }
+            }
+            .description {
+                font-size: 11px;
+                opacity: 0.7;
+                margin-top: 6px;
+            }
+        }
+
+        .selected {
+            background: rgba(variables.$red-1, 0.1);
+        }
+    }
+}
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
new file mode 100644
index 000000000..cd296adb4
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
+
+enum CertificateType {
+    PKCS = 'pkcs',
+    KMS = 'kms',
+}
+
+@Component({
+    templateUrl: './configure-certificate-dialog.component.html',
+    styleUrls: ['./configure-certificate-dialog.component.scss'],
+})
+export class ConfigureCertificateDialogComponent {
+    readonly certificateOptions = Object.values(CertificateType);
+    readonly translations = digitalSignatureDialogTranslations;
+
+    selectedOption = this.certificateOptions[0];
+
+    displaySignatureConfiguration() {}
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 6c9083faf..fc7f7e306 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -14,14 +14,15 @@
             <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" />
+                        <!--                        <input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />-->
 
                         <iqser-empty-state
-                            (action)="fileInput.click()"
+                            (action)="openConfigureCertificate()"
                             *ngIf="!hasDigitalSignatureSet"
                             [buttonLabel]="'digital-signature-screen.no-data.action' | translate"
                             [text]="'digital-signature-screen.no-data.title' | translate"
-                            buttonIcon="iqser:upload"
+                            icon="iqser:document"
+                            [buttonIcon]="null"
                         ></iqser-empty-state>
 
                         <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group required w-300">
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 ba3adff2c..3d29517a2 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,6 +9,7 @@ import { DigitalSignatureService } from '../../services/digital-signature.servic
 import { IDigitalSignature } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { HttpStatusCode } from '@angular/common/http';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 
 @Component({
     selector: 'redaction-digital-signature-screen',
@@ -29,8 +30,9 @@ export class DigitalSignatureScreenComponent implements OnInit {
         private readonly _formBuilder: FormBuilder,
         private readonly _userService: UserService,
         private readonly _loadingService: LoadingService,
-        readonly routerHistoryService: RouterHistoryService,
         private readonly _digitalSignatureService: DigitalSignatureService,
+        private readonly _dialogService: AdminDialogService,
+        readonly routerHistoryService: RouterHistoryService,
     ) {}
 
     get hasDigitalSignatureSet() {
@@ -82,17 +84,21 @@ 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);
+    // 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);
     }
 
     async loadDigitalSignatureAndInitializeForm(): Promise<void> {
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 926a6cfff..6451ec696 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -29,6 +29,7 @@ import { UserService } from '@services/user.service';
 import { IDossierAttributeConfig, IFileAttributeConfig, IReportTemplate } from '@red/domain';
 import { ReportTemplateService } from '@services/report-template.service';
 import { CloneDossierTemplateDialogComponent } from '../dialogs/clone-dossier-template-dialog/clone-dossier-template-dialog.component';
+import { ConfigureCertificateDialogComponent } from '../dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -44,7 +45,8 @@ type DialogType =
     | 'addEditDossierAttribute'
     | 'uploadDictionary'
     | 'addEditDossierState'
-    | 'deleteDossierState';
+    | 'deleteDossierState'
+    | 'configureCertificate';
 
 @Injectable()
 export class AdminDialogService extends DialogService<DialogType> {
@@ -101,6 +103,10 @@ export class AdminDialogService extends DialogService<DialogType> {
         deleteDossierState: {
             component: ConfirmDeleteDossierStateDialogComponent,
         },
+        configureCertificate: {
+            component: ConfigureCertificateDialogComponent,
+            dialogConfig: { disableClose: false },
+        },
     };
 
     constructor(
diff --git a/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts b/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
new file mode 100644
index 000000000..e63781c97
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
@@ -0,0 +1,12 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+export const digitalSignatureDialogTranslations = {
+    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;
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 9b8ce8cdb..213a510b9 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -655,6 +655,23 @@
     }
   },
   "digital-signature": "Digitale Signatur",
+  "digital-signature-dialog": {
+    "actions": {
+      "cancel": "",
+      "continue": ""
+    },
+    "options": {
+      "kms": {
+        "description": "",
+        "title": ""
+      },
+      "pkcs": {
+        "description": "",
+        "title": ""
+      }
+    },
+    "title": ""
+  },
   "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.",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 2df6a0b00..c05c1b693 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -655,6 +655,23 @@
     }
   },
   "digital-signature": "Digital Signature",
+  "digital-signature-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "continue": "Continue"
+    },
+    "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"
+      },
+      "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"
+      }
+    },
+    "title": "Configure Digital Signature Certificate"
+  },
   "digital-signature-screen": {
     "action": {
       "certificate-not-valid-error": "Uploaded Certificate is not valid for signing PDFs. PCKS.12 format is required.",
@@ -679,8 +696,8 @@
       "placeholder": "Location"
     },
     "no-data": {
-      "action": "Upload Certificate",
-      "title": "No Digital Signature certificate is configured. For signing redacted documents please upload a PCKS.12 certificate."
+      "action": "Configure Certificate",
+      "title": "No Digital Signature Certificate.<br/>For signing redacted documents please configure a certificate."
     },
     "password": {
       "label": "Certificate Password/Key",
diff --git a/libs/common-ui b/libs/common-ui
index 58f7b5d8b..ad3c87b4a 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 58f7b5d8b9c88ef5c1f6ff7780e3417511523ee1
+Subproject commit ad3c87b4a09961d8f32778c0c912e586cd4576cd

From ff795dd9a1b0866891409c1157757ed495e55e47 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 16 May 2022 00:36:58 +0300
Subject: [PATCH 2/8] RED-3982 - extracted upload file logic from import
 redactions dialog component into a separate component to be reusable also for
 certificate configuration

---
 .../src/app/modules/admin/admin.module.ts     |  4 ++
 ...onfigure-certificate-dialog.component.html | 57 ++++++++++++------
 .../configure-certificate-dialog.component.ts | 21 ++++++-
 ...kms-signature-configuration.component.html |  1 +
 ...ms-signature-configuration.component.scss} |  0
 .../kms-signature-configuration.component.ts  |  9 +++
 .../kms/kms.component.ts                      |  0
 ...kcs-signature-configuration.component.html |  1 +
 ...cs-signature-configuration.component.scss} |  0
 .../pkcs-signature-configuration.component.ts |  9 +++
 .../pkcs/pkcs.component.html                  |  0
 .../pkcs/pkcs.component.scss                  |  0
 .../pkcs/pkcs.component.ts                    |  0
 .../digital-signature-dialog-translations.ts  | 19 ++++--
 .../import-redactions-dialog.html             | 44 ++++----------
 .../import-redactions-dialog.scss             | 59 -------------------
 .../import-redactions-dialog.ts               | 21 +------
 .../drag-drop-file-upload.directive.ts        | 41 -------------
 .../src/app/modules/shared/shared.module.ts   |  4 +-
 apps/red-ui/src/assets/i18n/de.json           | 12 ++--
 apps/red-ui/src/assets/i18n/en.json           | 12 ++--
 libs/common-ui                                |  2 +-
 22 files changed, 129 insertions(+), 187 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
 rename apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/{kms/kms.component.html => kms-signature-configuration/kms-signature-configuration.component.scss} (100%)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
 rename apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/{kms/kms.component.scss => pkcs-signature-configuration/pkcs-signature-configuration.component.scss} (100%)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index 9220d7818..b5570876a 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -44,6 +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';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,
@@ -86,6 +88,8 @@ const components = [
     BaseEntityScreenComponent,
     GeneralConfigFormComponent,
     SmtpFormComponent,
+    PkcsSignatureConfigurationComponent,
+    KmsSignatureConfigurationComponent,
 
     ...dialogs,
     ...screens,
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
index 815a4f04a..2811695b0 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
@@ -1,27 +1,48 @@
 <section class="dialog">
-    <div class="dialog-header heading-l" translate="digital-signature-dialog.title"></div>
+    <div
+        class="dialog-header heading-l"
+        [translate]="!isInConfiguration ? translations.title.beforeConfiguration : translations.title[selectedOption]"
+    ></div>
 
     <div class="dialog-content">
-        <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[option].title | translate }}
+        <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>
-            <p class="description">
-                {{ translations[option].description | translate }}
-            </p>
-        </div>
+        </ng-container>
+        <ng-container *ngIf="isInConfiguration">
+            <redaction-pkcs-signature-configuration
+                *ngIf="selectedOption === certificateType.PKCS"
+            ></redaction-pkcs-signature-configuration>
+            <redaction-kms-signature-configuration *ngIf="selectedOption === certificateType.KMS"></redaction-kms-signature-configuration>
+        </ng-container>
     </div>
 
     <div class="dialog-actions">
-        <button (click)="displaySignatureConfiguration()" color="primary" mat-flat-button>
-            {{ 'digital-signature-dialog.actions.continue' | translate }}
-        </button>
-        <div translate="digital-signature-dialog.actions.cancel" class="all-caps-label cancel" mat-dialog-close></div>
+        <ng-container *ngIf="!isInConfiguration">
+            <button (click)="toggleIsInConfiguration()" color="primary" mat-flat-button>
+                {{ 'digital-signature-dialog.actions.continue' | translate }}
+            </button>
+            <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>
+                {{ 'digital-signature-dialog.actions.save' | translate }}
+            </button>
+            <div translate="digital-signature-dialog.actions.back" class="all-caps-label cancel" (click)="toggleIsInConfiguration()"></div>
+        </ng-container>
     </div>
+
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
 </section>
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 cd296adb4..881ba41a6 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
@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Injector, ViewChild } from '@angular/core';
 import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
+import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
+import { MatDialogRef } from '@angular/material/dialog';
 
 enum CertificateType {
     PKCS = 'pkcs',
@@ -10,11 +12,24 @@ enum CertificateType {
     templateUrl: './configure-certificate-dialog.component.html',
     styleUrls: ['./configure-certificate-dialog.component.scss'],
 })
-export class ConfigureCertificateDialogComponent {
+export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
+    // @ViewChild(EditDossierGeneralInfoComponent) generalInfoComponent: EditDossierGeneralInfoComponent;
+    // @ViewChild(EditDossierDownloadPackageComponent) downloadPackageComponent: EditDossierDownloadPackageComponent;
+
+    readonly certificateType = CertificateType;
     readonly certificateOptions = Object.values(CertificateType);
     readonly translations = digitalSignatureDialogTranslations;
 
     selectedOption = this.certificateOptions[0];
+    isInConfiguration = false;
 
-    displaySignatureConfiguration() {}
+    constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<ConfigureCertificateDialogComponent>) {
+        super(_injector, _dialogRef);
+    }
+
+    toggleIsInConfiguration() {
+        this.isInConfiguration = !this.isInConfiguration;
+    }
+
+    save() {}
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
new file mode 100644
index 000000000..c0ad9c296
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
@@ -0,0 +1 @@
+<iqser-upload-file></iqser-upload-file>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.html
rename to apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
new file mode 100644
index 000000000..348ee0547
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'redaction-kms-signature-configuration',
+    templateUrl: './kms-signature-configuration.component.html',
+    styleUrls: ['./kms-signature-configuration.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KmsSignatureConfigurationComponent {}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
new file mode 100644
index 000000000..c0ad9c296
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
@@ -0,0 +1 @@
+<iqser-upload-file></iqser-upload-file>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.scss
rename to apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
new file mode 100644
index 000000000..445735cba
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'redaction-pkcs-signature-configuration',
+    templateUrl: './pkcs-signature-configuration.component.html',
+    styleUrls: ['./pkcs-signature-configuration.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PkcsSignatureConfigurationComponent {}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts b/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
index e63781c97..c4776bd53 100644
--- a/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
+++ b/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
@@ -1,12 +1,19 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export const digitalSignatureDialogTranslations = {
-    pkcs: {
-        title: _('digital-signature-dialog.options.pkcs.title'),
-        description: _('digital-signature-dialog.options.pkcs.description'),
+    title: {
+        beforeConfiguration: _('digital-signature-dialog.title.before-configuration'),
+        pkcs: _('digital-signature-dialog.title.pkcs'),
+        kms: _('digital-signature-dialog.title.kms'),
     },
-    kms: {
-        title: _('digital-signature-dialog.options.kms.title'),
-        description: _('digital-signature-dialog.options.kms.description'),
+    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;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
index 5c032b36c..21cb3dcdf 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
@@ -3,37 +3,21 @@
 
     <div class="dialog-content">
         <div translate="import-redactions-dialog.details" class="mb-24"></div>
-        <div
-            class="upload-area"
-            *ngIf="!fileToImport"
-            (click)="triggerAttachFile()"
-            redactionDragDropFileUpload
-            (fileDropped)="attachFile($event)"
-        >
-            <mat-icon svgIcon="iqser:upload"></mat-icon>
-            <div translate="import-redactions-dialog.upload-area-text"></div>
-        </div>
-        <ng-container *ngIf="fileToImport">
-            <div class="file-area">
-                <mat-icon svgIcon="iqser:document"></mat-icon>
-                <p>{{ fileToImport.name }}</p>
-                <mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
-            </div>
-            <div class="only-for-pages">
-                <mat-checkbox
-                    (change)="onlyForSpecificPages = !onlyForSpecificPages"
-                    [checked]="onlyForSpecificPages"
-                    class="filter-menu-checkbox"
-                    color="primary"
-                >
-                    {{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
-                </mat-checkbox>
+        <iqser-upload-file (fileChanged)="fileChanged($event)"></iqser-upload-file>
+        <div class="only-for-pages" *ngIf="fileToImport">
+            <mat-checkbox
+                (change)="onlyForSpecificPages = !onlyForSpecificPages"
+                [checked]="onlyForSpecificPages"
+                class="filter-menu-checkbox"
+                color="primary"
+            >
+                {{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
+            </mat-checkbox>
 
-                <div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
-                    <input />
-                </div>
+            <div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
+                <input />
             </div>
-        </ng-container>
+        </div>
     </div>
 
     <div class="dialog-actions">
@@ -45,5 +29,3 @@
 
     <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
 </section>
-
-<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" accept="application/pdf" />
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss
index 7fca79465..0f476c1e4 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss
@@ -1,62 +1,3 @@
-@use 'variables';
-
-.upload-area,
-.file-area {
-    display: flex;
-    align-items: center;
-    border-radius: 8px;
-    width: 586px;
-    background: variables.$grey-2;
-}
-
-.upload-area {
-    gap: 16px;
-    height: 88px;
-    cursor: pointer;
-
-    mat-icon,
-    div {
-        opacity: 0.5;
-        transition: 0.1s;
-    }
-
-    mat-icon {
-        margin-left: 32px;
-    }
-
-    div {
-        font-size: 16px;
-        font-weight: 500;
-    }
-}
-
-.file-area {
-    gap: 10px;
-    height: 48px;
-
-    mat-icon:first-child {
-        opacity: 0.5;
-        margin-left: 16px;
-    }
-
-    mat-icon:last-child {
-        margin-left: auto;
-        margin-right: 16px;
-        cursor: pointer;
-    }
-
-    mat-icon {
-        transform: scale(0.7);
-    }
-
-    p {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 490px;
-    }
-}
-
 .only-for-pages {
     margin-top: 16px;
     margin-left: 21px;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
index 2cffea8d5..c9f20d3e0 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
@@ -33,28 +33,13 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
         super(_injector, _dialogRef);
     }
 
-    triggerAttachFile() {
-        this.attachFileInput.nativeElement.click();
-    }
-
-    attachFile(event) {
-        const files = event.target['files'];
-        this.fileToImport = files[0];
-
-        // input field needs to be set as empty in case the same file will be selected second time
-        event.target.value = '';
-
+    fileChanged(file: File | null) {
+        this.fileToImport = file;
         if (!this.fileToImport) {
-            console.error('No file to import!');
-            return;
+            this.onlyForSpecificPages = false;
         }
     }
 
-    removeFile() {
-        this.fileToImport = null;
-        this.onlyForSpecificPages = false;
-    }
-
     async save(): Promise<void> {
         this._loadingService.start();
         const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport);
diff --git a/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts b/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts
deleted file mode 100644
index 77daf3780..000000000
--- a/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
-
-const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
-const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
-
-@Directive({
-    selector: '[redactionDragDropFileUpload]',
-})
-export class DragDropFileUploadDirective {
-    @Output() readonly fileDropped = new EventEmitter<any>();
-    @HostBinding('style.background-color') private background = DEFAULT_BACKGROUND_COLOR;
-
-    @HostListener('dragover', ['$event'])
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.dataTransfer.types.includes('Files')) {
-            this.background = DRAG_OVER_BACKGROUND_COLOR;
-        }
-    }
-
-    @HostListener('dragleave', ['$event'])
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.background = DEFAULT_BACKGROUND_COLOR;
-    }
-
-    @HostListener('drop', ['$event'])
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.dataTransfer.types.includes('Files')) {
-            this.background = DEFAULT_BACKGROUND_COLOR;
-            const files = event.dataTransfer.files;
-            if (files.length > 0) {
-                this.fileDropped.emit({ target: { files } });
-            }
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index b6acecd3f..823543687 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -30,7 +30,7 @@ import { FileStatsComponent } from './components/file-stats/file-stats.component
 import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
 import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
-import { DragDropFileUploadDirective } from '@shared/directives/drag-drop-file-upload.directive';
+import { DragDropFileUploadDirective } from '../../../../../../libs/common-ui/src/lib/upload-file/drag-drop-file-upload.directive';
 import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
@@ -59,7 +59,7 @@ const components = [
     ...buttons,
 ];
 
-const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective, DragDropFileUploadDirective];
+const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
 
 const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];
 
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 213a510b9..2af73dc3b 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -657,8 +657,10 @@
   "digital-signature": "Digitale Signatur",
   "digital-signature-dialog": {
     "actions": {
+      "back": "",
       "cancel": "",
-      "continue": ""
+      "continue": "",
+      "save": ""
     },
     "options": {
       "kms": {
@@ -670,7 +672,11 @@
         "title": ""
       }
     },
-    "title": ""
+    "title": {
+      "before-configuration": "",
+      "kms": "",
+      "pkcs": ""
+    }
   },
   "digital-signature-screen": {
     "action": {
@@ -1548,8 +1554,6 @@
     "backend-version": "Backend-Version der Anwendung",
     "chart": {
       "cumulative": "Seiten insgesamt",
-      "legend": "Legende",
-      "licensed-total": "Insgesamt lizensiert",
       "pages-per-month": "Seiten pro Monat",
       "total-pages": "Gesamtzahl der Seiten"
     },
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index c05c1b693..df1024ef6 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -657,8 +657,10 @@
   "digital-signature": "Digital Signature",
   "digital-signature-dialog": {
     "actions": {
+      "back": "Back",
       "cancel": "Cancel",
-      "continue": "Continue"
+      "continue": "Continue",
+      "save": "Save Configurations"
     },
     "options": {
       "kms": {
@@ -670,7 +672,11 @@
         "title": "I want to upload a PKCS#12 file"
       }
     },
-    "title": "Configure Digital Signature Certificate"
+    "title": {
+      "before-configuration": "Configure Digital Signature Certificate",
+      "kms": "Configure a Certificate with Amazon KMS",
+      "pkcs": "Configure a PKCS#12 Certificate"
+    }
   },
   "digital-signature-screen": {
     "action": {
@@ -1548,8 +1554,6 @@
     "backend-version": "Backend Application Version",
     "chart": {
       "cumulative": "Cumulative Pages",
-      "legend": "Legend",
-      "licensed-total": "Licensed Total",
       "pages-per-month": "Pages per Month",
       "total-pages": "Total Pages"
     },
diff --git a/libs/common-ui b/libs/common-ui
index ad3c87b4a..c695f5c44 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit ad3c87b4a09961d8f32778c0c912e586cd4576cd
+Subproject commit c695f5c4419f4fd8d76946d5a474dccbda0edad2

From e929705a765bb301ee122945a884d7a6a3f253ba Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Tue, 17 May 2022 00:36:23 +0300
Subject: [PATCH 3/8] RED-3982 - added 'pkcs signature' and 'kms signature'
 forms

---
 ...onfigure-certificate-dialog.component.html |  3 ++
 ...onfigure-certificate-dialog.component.scss |  5 +++
 .../configure-certificate-dialog.component.ts | 11 +++++-
 ...kms-signature-configuration.component.html | 38 ++++++++++++++++++-
 ...kms-signature-configuration.component.scss |  8 ++++
 .../kms-signature-configuration.component.ts  | 21 +++++++++-
 ...kcs-signature-configuration.component.html | 27 ++++++++++++-
 ...kcs-signature-configuration.component.scss |  3 ++
 .../pkcs-signature-configuration.component.ts | 19 +++++++++-
 .../admin/services/admin-dialog.service.ts    |  2 +-
 .../edit-dossier-general-info.component.scss  |  8 ----
 apps/red-ui/src/assets/config/config.json     |  4 +-
 apps/red-ui/src/assets/i18n/de.json           | 21 +++++++++-
 apps/red-ui/src/assets/i18n/en.json           | 21 +++++++++-
 libs/common-ui                                |  2 +-
 15 files changed, 171 insertions(+), 22 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
index 2811695b0..203eb8b54 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
@@ -22,6 +22,9 @@
             </div>
         </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"
             ></redaction-pkcs-signature-configuration>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
index 9348c9978..ad58f439f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
@@ -33,5 +33,10 @@
         .selected {
             background: rgba(variables.$red-1, 0.1);
         }
+
+        iqser-upload-file {
+            padding-top: 24px;
+            padding-bottom: 24px;
+        }
     }
 }
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 881ba41a6..f8f625078 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
@@ -2,6 +2,8 @@ import { Component, Injector, ViewChild } from '@angular/core';
 import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
 import { BaseDialogComponent } 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';
 
 enum CertificateType {
     PKCS = 'pkcs',
@@ -13,8 +15,8 @@ enum CertificateType {
     styleUrls: ['./configure-certificate-dialog.component.scss'],
 })
 export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
-    // @ViewChild(EditDossierGeneralInfoComponent) generalInfoComponent: EditDossierGeneralInfoComponent;
-    // @ViewChild(EditDossierDownloadPackageComponent) downloadPackageComponent: EditDossierDownloadPackageComponent;
+    @ViewChild(PkcsSignatureConfigurationComponent) pkcsSignatureConfigurationComponent: PkcsSignatureConfigurationComponent;
+    @ViewChild(KmsSignatureConfigurationComponent) kmsSignatureConfigurationComponent: KmsSignatureConfigurationComponent;
 
     readonly certificateType = CertificateType;
     readonly certificateOptions = Object.values(CertificateType);
@@ -29,6 +31,11 @@ export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
 
     toggleIsInConfiguration() {
         this.isInConfiguration = !this.isInConfiguration;
+        if (this.isInConfiguration && this.selectedOption === CertificateType.KMS) {
+            this._dialogRef.updateSize('810px');
+        } else {
+            this._dialogRef.updateSize('662px');
+        }
     }
 
     save() {}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
index c0ad9c296..79c64fa12 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
@@ -1 +1,37 @@
-<iqser-upload-file></iqser-upload-file>
+<form [formGroup]="form">
+    <div class="flex">
+        <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" />
+            </div>
+            <div class="iqser-input-group required w-300">
+                <label translate="digital-signature-dialog.forms.kms.kms-service-endpoint"></label>
+                <input formControlName="kmsServiceEndpoint" type="text" />
+            </div>
+            <div class="iqser-input-group required w-300">
+                <label translate="digital-signature-dialog.forms.kms.kms-region"></label>
+                <input formControlName="kmsRegion" type="text" />
+            </div>
+            <div class="iqser-input-group required w-300">
+                <label translate="digital-signature-dialog.forms.kms.kms-id"></label>
+                <input formControlName="kmsKeyId" type="text" />
+            </div>
+            <div class="iqser-input-group required w-300">
+                <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">
+                <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="iqser-input-group w-400 certificate">
+                <label translate="digital-signature-dialog.forms.kms.certificate-content"></label>
+                <textarea formControlName="certificate" type="text"></textarea>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
index e69de29bb..b566c7e18 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
@@ -0,0 +1,8 @@
+.certificate {
+    height: 100%;
+
+    textarea {
+        resize: none;
+        height: 100%;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
index 348ee0547..ef66f801e 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'redaction-kms-signature-configuration',
@@ -6,4 +7,20 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     styleUrls: ['./kms-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class KmsSignatureConfigurationComponent {}
+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],
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
index c0ad9c296..adc6b7c97 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
@@ -1 +1,26 @@
-<iqser-upload-file></iqser-upload-file>
+<form [formGroup]="form">
+    <div class="flex">
+        <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" />
+            </div>
+            <div class="iqser-input-group required w-300">
+                <label translate="digital-signature-dialog.forms.pkcs.password-key"></label>
+                <input formControlName="password" type="password" />
+            </div>
+            <div class="iqser-input-group w-300">
+                <label translate="digital-signature-dialog.forms.pkcs.contact-information"></label>
+                <input formControlName="contactInfo" type="text" />
+            </div>
+            <div class="iqser-input-group w-300">
+                <label translate="digital-signature-dialog.forms.pkcs.location"></label>
+                <input formControlName="location" type="text" />
+            </div>
+            <div class="iqser-input-group w-450">
+                <label translate="digital-signature-dialog.forms.pkcs.reason"></label>
+                <textarea formControlName="reason" rows="4" type="text"></textarea>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
index e69de29bb..2e0c215b3 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
@@ -0,0 +1,3 @@
+textarea {
+    resize: none;
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
index 445735cba..4bddc2b8f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'redaction-pkcs-signature-configuration',
@@ -6,4 +7,18 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     styleUrls: ['./pkcs-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PkcsSignatureConfigurationComponent {}
+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: [''],
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 6451ec696..b3de08e1e 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -105,7 +105,7 @@ export class AdminDialogService extends DialogService<DialogType> {
         },
         configureCertificate: {
             component: ConfigureCertificateDialogComponent,
-            dialogConfig: { disableClose: false },
+            dialogConfig: { disableClose: false, maxHeight: '100vh' },
         },
     };
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index cadbd6f7a..029a1182d 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -24,14 +24,6 @@
     padding: 0;
 }
 
-.fields-container {
-    flex-direction: column;
-
-    &:first-child {
-        margin-right: 40px;
-    }
-}
-
 redaction-small-chip {
     margin-right: 8px;
 }
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 640de2ce2..a718d12f3 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dev-05.iqser.cloud/redaction-gateway-v1",
+  "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
   "APP_NAME": "RedactManager",
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -17,7 +17,7 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dev-05.iqser.cloud/auth/realms/redaction",
+  "OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview"
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 2af73dc3b..bb00a1640 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -662,6 +662,24 @@
       "continue": "",
       "save": ""
     },
+    "forms": {
+      "kms": {
+        "certificate-content": "",
+        "certificate-name": "",
+        "kms-access-key": "",
+        "kms-id": "",
+        "kms-region": "",
+        "kms-secret-key": "",
+        "kms-service-endpoint": ""
+      },
+      "pkcs": {
+        "certificate-name": "",
+        "contact-information": "",
+        "location": "",
+        "password-key": "",
+        "reason": ""
+      }
+    },
     "options": {
       "kms": {
         "description": "",
@@ -676,7 +694,8 @@
       "before-configuration": "",
       "kms": "",
       "pkcs": ""
-    }
+    },
+    "upload-warning-message": ""
   },
   "digital-signature-screen": {
     "action": {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index df1024ef6..b9f0199ce 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -662,6 +662,24 @@
       "continue": "Continue",
       "save": "Save Configurations"
     },
+    "forms": {
+      "kms": {
+        "certificate-content": "Certificate Content",
+        "certificate-name": "Certificate Name",
+        "kms-access-key": "KMS Access Key",
+        "kms-id": "KMS Id",
+        "kms-region": "KMS Region",
+        "kms-secret-key": "KMS Secret Key",
+        "kms-service-endpoint": "KMS Service Endpoint"
+      },
+      "pkcs": {
+        "certificate-name": "Certificate Name",
+        "contact-information": "Contact Information",
+        "location": "Location",
+        "password-key": "Password Key",
+        "reason": "Reason"
+      }
+    },
     "options": {
       "kms": {
         "description": "Provide a corresponding PEM file containing the certificate, along with Amazon KMS credentials needed for securing the private key.",
@@ -676,7 +694,8 @@
       "before-configuration": "Configure Digital Signature Certificate",
       "kms": "Configure a Certificate with Amazon KMS",
       "pkcs": "Configure a PKCS#12 Certificate"
-    }
+    },
+    "upload-warning-message": "To configure the certificate, you first need to upload it."
   },
   "digital-signature-screen": {
     "action": {
diff --git a/libs/common-ui b/libs/common-ui
index c695f5c44..f90405572 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit c695f5c4419f4fd8d76946d5a474dccbda0edad2
+Subproject commit f90405572f662bb150950032f726305a616de0dc

From 9008f56414ceaaa01c521f9c5847887fb7b3f696 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Sun, 22 May 2022 23:35:42 +0300
Subject: [PATCH 4/8] RED-3982 - updates to add 'pkcs signature' and 'kms
 signature' forms also on main screen component to be edited

---
 .../src/app/modules/admin/admin.module.ts     |   4 +-
 ...onfigure-certificate-dialog.component.html |   3 +-
 ...onfigure-certificate-dialog.component.scss |   5 -
 .../configure-certificate-dialog.component.ts |  54 +++++--
 .../base-signature-configuration-component.ts |  42 ++++++
 ...kms-signature-configuration.component.html |   3 +-
 ...kms-signature-configuration.component.scss |   6 +
 .../kms-signature-configuration.component.ts  |  43 ++++++
 ...kcs-signature-configuration.component.html |   3 +-
 ...kcs-signature-configuration.component.scss |   9 ++
 .../pkcs-signature-configuration.component.ts |  43 ++++++
 .../kms-signature-configuration.component.ts  |  26 ----
 ...kcs-signature-configuration.component.scss |   3 -
 .../pkcs-signature-configuration.component.ts |  24 ----
 .../digital-signature-screen.component.html   | 114 +++++----------
 .../digital-signature-screen.component.ts     | 132 +++++++-----------
 .../services/digital-signature.service.ts     |  40 +++++-
 apps/red-ui/src/assets/i18n/de.json           |  34 ++---
 apps/red-ui/src/assets/i18n/en.json           |  35 ++---
 libs/common-ui                                |   2 +-
 ...equest.ts => digital-signature-request.ts} |   3 -
 .../src/lib/signature/digital-signature.ts    |   6 -
 libs/red-domain/src/lib/signature/index.ts    |   7 +-
 .../kms-digital-signature.request.ts          |   8 ++
 .../lib/signature/kms-digital-signature.ts    |   6 +
 .../pkcs-digital-signature.request.ts         |   7 +
 .../lib/signature/pkcs-digital-signature.ts   |   6 +
 27 files changed, 357 insertions(+), 311 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/base-signature-configuration-component.ts
 rename apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/{ => form}/kms-signature-configuration/kms-signature-configuration.component.html (91%)
 rename apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/{ => form}/kms-signature-configuration/kms-signature-configuration.component.scss (52%)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts
 rename apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/{ => form}/pkcs-signature-configuration/pkcs-signature-configuration.component.html (85%)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
 rename libs/red-domain/src/lib/signature/{digital-signature.request.ts => digital-signature-request.ts} (52%)
 delete mode 100644 libs/red-domain/src/lib/signature/digital-signature.ts
 create mode 100644 libs/red-domain/src/lib/signature/kms-digital-signature.request.ts
 create mode 100644 libs/red-domain/src/lib/signature/kms-digital-signature.ts
 create mode 100644 libs/red-domain/src/lib/signature/pkcs-digital-signature.request.ts
 create mode 100644 libs/red-domain/src/lib/signature/pkcs-digital-signature.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index b5570876a..c754937ae 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/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,
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
index 203eb8b54..51d0ea681 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
+++ b/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>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
index ad58f439f..9348c9978 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.scss
+++ b/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;
-        }
     }
 }
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 f8f625078..bbb6c2ba8 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
@@ -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'));
+            }
+        }
+    }
 }
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
new file mode 100644
index 000000000..19d5099c7
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/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
similarity index 91%
rename from apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html
rename to apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.html
index 79c64fa12..32c5ee3ab 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/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,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>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/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
similarity index 52%
rename from apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
rename to apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.scss
index b566c7e18..9b54c29df 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/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
@@ -6,3 +6,9 @@
         height: 100%;
     }
 }
+
+iqser-upload-file {
+    display: block;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
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
new file mode 100644
index 000000000..1c6a29161
--- /dev/null
+++ b/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));
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/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
similarity index 85%
rename from apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html
rename to apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.html
index adc6b7c97..246e00946 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/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,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>
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
new file mode 100644
index 000000000..e821f1e30
--- /dev/null
+++ b/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;
+}
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
new file mode 100644
index 000000000..3559ddf26
--- /dev/null
+++ b/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));
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
deleted file mode 100644
index ef66f801e..000000000
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts
+++ /dev/null
@@ -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],
-        });
-    }
-}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
deleted file mode 100644
index 2e0c215b3..000000000
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-textarea {
-    resize: none;
-}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
deleted file mode 100644
index 4bddc2b8f..000000000
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
+++ /dev/null
@@ -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: [''],
-        });
-    }
-}
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index fc7f7e306..c54eeefa0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/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>
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 3d29517a2..710669630 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
@@ -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();
+    }
 }
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 005bb8b08..9e956e0ed 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
@@ -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),
+        );
     }
 }
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index bb00a1640..0b3680bea 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/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": {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index b9f0199ce..a42746dcb 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/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": {
diff --git a/libs/common-ui b/libs/common-ui
index e7be61eff..1b146037f 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit e7be61efff0b9baa3d6b53002cbecd8b53d7b934
+Subproject commit 1b146037facaa4d3e5a662fea64f67c0dd8b0110
diff --git a/libs/red-domain/src/lib/signature/digital-signature.request.ts b/libs/red-domain/src/lib/signature/digital-signature-request.ts
similarity index 52%
rename from libs/red-domain/src/lib/signature/digital-signature.request.ts
rename to libs/red-domain/src/lib/signature/digital-signature-request.ts
index d7d9fa618..3eb55d4ac 100644
--- a/libs/red-domain/src/lib/signature/digital-signature.request.ts
+++ b/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;
 }
diff --git a/libs/red-domain/src/lib/signature/digital-signature.ts b/libs/red-domain/src/lib/signature/digital-signature.ts
deleted file mode 100644
index 0b971ca70..000000000
--- a/libs/red-domain/src/lib/signature/digital-signature.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { IDigitalSignatureRequest } from './digital-signature.request';
-
-export interface IDigitalSignature extends IDigitalSignatureRequest {
-    base64EncodedPrivateKey?: string;
-    password?: string;
-}
diff --git a/libs/red-domain/src/lib/signature/index.ts b/libs/red-domain/src/lib/signature/index.ts
index f5a313484..a6c32906c 100644
--- a/libs/red-domain/src/lib/signature/index.ts
+++ b/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';
diff --git a/libs/red-domain/src/lib/signature/kms-digital-signature.request.ts b/libs/red-domain/src/lib/signature/kms-digital-signature.request.ts
new file mode 100644
index 000000000..f8261ba11
--- /dev/null
+++ b/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;
+}
diff --git a/libs/red-domain/src/lib/signature/kms-digital-signature.ts b/libs/red-domain/src/lib/signature/kms-digital-signature.ts
new file mode 100644
index 000000000..db37bea71
--- /dev/null
+++ b/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;
+}
diff --git a/libs/red-domain/src/lib/signature/pkcs-digital-signature.request.ts b/libs/red-domain/src/lib/signature/pkcs-digital-signature.request.ts
new file mode 100644
index 000000000..06eb9bf84
--- /dev/null
+++ b/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;
+}
diff --git a/libs/red-domain/src/lib/signature/pkcs-digital-signature.ts b/libs/red-domain/src/lib/signature/pkcs-digital-signature.ts
new file mode 100644
index 000000000..16a6ebfad
--- /dev/null
+++ b/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;
+}

From 11d0ed1a0f011c303f6171bf3af1c404d51f7e8a Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 23 May 2022 18:29:05 +0300
Subject: [PATCH 5/8] RED-3982 - fixed some imports

---
 .../configure-certificate-dialog.component.ts         |  2 +-
 .../kms-signature-configuration.component.html        |  9 ++++++++-
 .../kms-signature-configuration.component.scss        |  5 +++++
 .../kms-signature-configuration.component.ts          |  7 +++----
 .../pkcs-signature-configuration.component.html       | 10 ++++++++--
 .../pkcs-signature-configuration.component.scss       |  5 +++++
 .../pkcs-signature-configuration.component.ts         | 11 +++++------
 .../digital-signature-screen.component.ts             |  3 +--
 apps/red-ui/src/app/modules/shared/shared.module.ts   |  1 -
 9 files changed, 36 insertions(+), 17 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 bbb6c2ba8..fdae0aaaa 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
@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
 import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
-import { BaseDialogComponent, LoadingService, Toaster } from '../../../../../../../../libs/common-ui/src';
+import { BaseDialogComponent, 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';
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 32c5ee3ab..2733c4799 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,7 +1,14 @@
 <iqser-upload-file accept=".pem" (fileChanged)="addRemoveCertificate($event)"></iqser-upload-file>
 <form [formGroup]="form">
     <div class="flex">
-        <div class="flex fields-container">
+        <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="iqser-input-group required w-300">
                 <label translate="digital-signature-dialog.forms.kms.certificate-name"></label>
                 <input formControlName="certificateName" type="text" />
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 9b54c29df..8bc5184e4 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,6 +7,11 @@
     }
 }
 
+.full-width {
+    width: 100%;
+    margin-right: 0;
+}
+
 iqser-upload-file {
     display: block;
     margin-top: 24px;
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 1c6a29161..f628e488e 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,8 +1,7 @@
 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 { IKmsDigitalSignature } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { DigitalSignatureService } from '../../../../services/digital-signature.service';
 
@@ -34,10 +33,10 @@ export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurati
         this.file = this.generateFile(this.digitalSignature?.certificateName, '.pem');
     }
 
-    async save() {
+    save() {
         const formValue = this.form.getRawValue();
         const digitalSignature: IKmsDigitalSignature = { ...formValue };
 
-        return await firstValueFrom(this._digitalSignatureService.saveKmsSignature(digitalSignature));
+        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 246e00946..b97ca884a 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,7 +1,13 @@
-<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">
+        <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="iqser-input-group required w-300">
                 <label translate="digital-signature-dialog.forms.pkcs.certificate-name"></label>
                 <input formControlName="certificateName" type="text" />
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 e821f1e30..eedff7d5e 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,6 +2,11 @@ textarea {
     resize: none;
 }
 
+.full-width {
+    width: 100%;
+    margin-right: 0;
+}
+
 iqser-upload-file {
     display: block;
     margin-top: 24px;
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 3559ddf26..695cfe053 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,10 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
-import { lastIndexOfEnd } from '../../../../../../utils';
-import { IPkcsDigitalSignature } from '../../../../../../../../../../libs/red-domain/src';
+import { IPkcsDigitalSignature } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
-import { LoadingService } from '../../../../../../../../../../libs/common-ui/src';
 import { DigitalSignatureService } from '../../../../services/digital-signature.service';
 
 @Component({
@@ -32,12 +30,13 @@ export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurat
         });
         this.initialFormValue = this.form.getRawValue();
         this.file = this.generateFile(this.digitalSignature?.certificateName, '.p12');
+        console.log(!this.digitalSignature);
     }
 
-    async save() {
+    save() {
         const formValue = this.form.getRawValue();
         const digitalSignature: IPkcsDigitalSignature = { ...formValue };
 
-        return await firstValueFrom(this._digitalSignatureService.saveSignature(digitalSignature));
+        return firstValueFrom(this._digitalSignatureService.saveSignature(digitalSignature));
     }
 }
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 710669630..e35d46ed8 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
@@ -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 '../../../../../../../../libs/red-domain/src';
-import { HttpStatusCode } from '@angular/common/http';
+import { IKmsDigitalSignatureRequest, IPkcsDigitalSignatureRequest } from '@red/domain';
 
 export enum CertificateType {
     PKCS = 'pkcs',
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index cf765e133..4dbf5004b 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -30,7 +30,6 @@ import { FileStatsComponent } from './components/file-stats/file-stats.component
 import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
 import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
-import { DragDropFileUploadDirective } from '../../../../../../libs/common-ui/src/lib/upload-file/drag-drop-file-upload.directive';
 import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';

From ae4c065038a62d25087050e35cb3cf779082ba38 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 23 May 2022 23:28:00 +0300
Subject: [PATCH 6/8] RED-3982 - changes to can update digital signature

---
 .../base-signature-configuration-component.ts   |  6 ++++++
 .../kms-signature-configuration.component.ts    |  9 ++++-----
 .../pkcs-signature-configuration.component.ts   | 17 +++++++++--------
 .../digital-signature-screen.component.ts       |  1 +
 .../admin/services/digital-signature.service.ts |  2 +-
 5 files changed, 21 insertions(+), 14 deletions(-)

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 19d5099c7..f654b8916 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
@@ -2,6 +2,8 @@ import { BaseFormComponent } from '@iqser/common-ui';
 import { lastIndexOfEnd } from '../../../../../utils';
 
 export abstract class BaseSignatureConfigurationComponent extends BaseFormComponent {
+    file: File | null;
+
     constructor(private readonly _certificateFormKey: string) {
         super();
     }
@@ -39,4 +41,8 @@ export abstract class BaseSignatureConfigurationComponent extends BaseFormCompon
         }
         return null;
     }
+
+    resetInitialFormValue(): void {
+        this.initialFormValue = this.form.getRawValue();
+    }
 }
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 f628e488e..08668eff8 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,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
-import { IKmsDigitalSignature } from '@red/domain';
+import { IKmsDigitalSignature, IKmsDigitalSignatureRequest } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { DigitalSignatureService } from '../../../../services/digital-signature.service';
 
@@ -12,8 +12,7 @@ import { DigitalSignatureService } from '../../../../services/digital-signature.
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {
-    @Input() digitalSignature!: IKmsDigitalSignature;
-    file: File | null;
+    @Input() digitalSignature!: IKmsDigitalSignatureRequest;
 
     constructor(private readonly _formBuilder: FormBuilder, private readonly _digitalSignatureService: DigitalSignatureService) {
         super('certificate');
@@ -26,8 +25,8 @@ export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurati
             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],
+            kmsSecretKey: this.digitalSignature ? null : ['', Validators.required],
+            certificate: this.digitalSignature ? null : ['', Validators.required],
         });
         this.initialFormValue = this.form.getRawValue();
         this.file = this.generateFile(this.digitalSignature?.certificateName, '.pem');
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 695cfe053..b0899844b 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,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
-import { IPkcsDigitalSignature } from '@red/domain';
+import { IPkcsDigitalSignature, IPkcsDigitalSignatureRequest } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { DigitalSignatureService } from '../../../../services/digital-signature.service';
 
@@ -12,8 +12,7 @@ import { DigitalSignatureService } from '../../../../services/digital-signature.
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {
-    @Input() digitalSignature!: IPkcsDigitalSignature;
-    file: File | null;
+    @Input() digitalSignature!: IPkcsDigitalSignatureRequest;
 
     constructor(private readonly _formBuilder: FormBuilder, private readonly _digitalSignatureService: DigitalSignatureService) {
         super('base64EncodedPrivateKey');
@@ -22,21 +21,23 @@ export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurat
     ngOnInit() {
         this.form = this._formBuilder.group({
             certificateName: [this.digitalSignature?.certificateName, Validators.required],
-            password: [this.digitalSignature?.password, !this.digitalSignature ? Validators.required : null],
+            password: this.digitalSignature ? null : ['', Validators.required],
             contactInfo: [this.digitalSignature?.contactInfo],
             location: [this.digitalSignature?.location],
             reason: [this.digitalSignature?.reason],
-            base64EncodedPrivateKey: [this.digitalSignature?.base64EncodedPrivateKey, !this.digitalSignature ? Validators.required : null],
+            base64EncodedPrivateKey: this.digitalSignature ? null : ['', Validators.required],
         });
-        this.initialFormValue = this.form.getRawValue();
+        this.resetInitialFormValue();
         this.file = this.generateFile(this.digitalSignature?.certificateName, '.p12');
-        console.log(!this.digitalSignature);
     }
 
     save() {
         const formValue = this.form.getRawValue();
         const digitalSignature: IPkcsDigitalSignature = { ...formValue };
 
-        return firstValueFrom(this._digitalSignatureService.saveSignature(digitalSignature));
+        const observable = this.digitalSignature
+            ? this._digitalSignatureService.updateSignature(digitalSignature)
+            : this._digitalSignatureService.saveSignature(digitalSignature);
+        return firstValueFrom(observable);
     }
 }
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 e35d46ed8..f7deb7c40 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
@@ -63,6 +63,7 @@ export class DigitalSignatureScreenComponent implements OnInit {
     async saveDigitalSignature(): Promise<void> {
         try {
             await this.activeComponent.save();
+            this.activeComponent.resetInitialFormValue();
             this._toaster.success(_('digital-signature-screen.action.save-success'));
         } catch (error) {
             this._toaster.error(_('digital-signature-screen.action.save-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 9e956e0ed..cd22810a0 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
@@ -17,7 +17,7 @@ export class DigitalSignatureService extends GenericService<IDigitalSignatureReq
     }
 
     @Validate()
-    updateSignature(@RequiredParam() body: IDigitalSignatureRequest): Observable<unknown> {
+    updateSignature(@RequiredParam() body: IPkcsDigitalSignatureRequest): Observable<unknown> {
         return this._put(body);
     }
 

From 032f0e685f821c3415fca2f8c701b9350204a412 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Thu, 26 May 2022 13:33:36 +0300
Subject: [PATCH 7/8] 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 = <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>;
 }
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 @@
-<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>
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 = <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));
     }
 }
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 @@
+<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" />
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 = <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 };
 
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<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) {
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<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);

From 185c6a818e451c57ccc7c1d5c0363e7304994715 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Fri, 3 Jun 2022 16:40:18 +0300
Subject: [PATCH 8/8] RED-3982 - used 'DetailsRadioComponent' to choose between
 kms and pkcs configurations

---
 ...onfigure-certificate-dialog.component.html | 25 ++++----------
 .../configure-certificate-dialog.component.ts | 34 +++++++++++++++----
 .../base-signature-configuration-component.ts | 15 +++-----
 .../kms-signature-configuration.component.ts  |  6 ++--
 .../pkcs-signature-configuration.component.ts |  6 ++--
 .../digital-signature-screen.component.ts     | 12 +++----
 .../digital-signature-dialog-translations.ts  | 10 ------
 apps/red-ui/src/assets/i18n/de.json           |  4 +--
 apps/red-ui/src/assets/i18n/en.json           |  4 +--
 libs/red-domain/src/index.ts                  |  1 +
 .../digital-signature-options.ts              |  6 ++++
 .../src/lib/digital-signature/index.ts        |  1 +
 12 files changed, 63 insertions(+), 61 deletions(-)
 create mode 100644 libs/red-domain/src/lib/digital-signature/digital-signature-options.ts
 create mode 100644 libs/red-domain/src/lib/digital-signature/index.ts

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
index 51d0ea681..f5eb8fb35 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
@@ -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>
 
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 3a4759ee2..b81cb2779 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
@@ -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();
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 c5830471c..d25bca73c 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,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);
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 e992045b5..0f1810b23 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,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() {
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 5b0025faf..ed5afee29 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,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() {
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 476904c47..c1edad42e 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
@@ -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;
     }
diff --git a/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts b/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
index c4776bd53..b4b99925c 100644
--- a/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
+++ b/apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
@@ -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;
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 1a018f956..973f53c6d 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -679,11 +679,11 @@
     "options": {
       "kms": {
         "description": "",
-        "title": ""
+        "label": ""
       },
       "pkcs": {
         "description": "",
-        "title": ""
+        "label": ""
       }
     },
     "title": {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 6cceeb79e..38839e57d 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -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": {
diff --git a/libs/red-domain/src/index.ts b/libs/red-domain/src/index.ts
index 31a7e92e8..92d56faad 100644
--- a/libs/red-domain/src/index.ts
+++ b/libs/red-domain/src/index.ts
@@ -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';
diff --git a/libs/red-domain/src/lib/digital-signature/digital-signature-options.ts b/libs/red-domain/src/lib/digital-signature/digital-signature-options.ts
new file mode 100644
index 000000000..c012fec01
--- /dev/null
+++ b/libs/red-domain/src/lib/digital-signature/digital-signature-options.ts
@@ -0,0 +1,6 @@
+export const DigitalSignatureOptions = {
+    KMS: 'KMS',
+    PKCS: 'PKCS',
+} as const;
+
+export type DigitalSignatureOption = keyof typeof DigitalSignatureOptions;
diff --git a/libs/red-domain/src/lib/digital-signature/index.ts b/libs/red-domain/src/lib/digital-signature/index.ts
new file mode 100644
index 000000000..2502c7af8
--- /dev/null
+++ b/libs/red-domain/src/lib/digital-signature/index.ts
@@ -0,0 +1 @@
+export * from './digital-signature-options';