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 @@ +
+
+ +
+
+
+ + {{ translations[option].title | translate }} +
+

+ {{ translations[option].description | translate }} +

+
+
+ +
+ +
+
+
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 @@
- +
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 = 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 = 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 { 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 { @@ -101,6 +103,10 @@ export class AdminDialogService extends DialogService { 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.
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