From b65f30397c8e25b87560c41d2f87b5d793fef6b9 Mon Sep 17 00:00:00 2001 From: Timo Date: Wed, 3 Feb 2021 14:39:18 +0200 Subject: [PATCH] UI for digital signature --- .../digital-signature-screen.component.html | 52 +++++++++++++------ .../digital-signature-screen.component.scss | 22 ++++++++ .../digital-signature-screen.component.ts | 38 +++++++++----- .../upload-download/file-download.service.ts | 6 ++- apps/red-ui/src/app/utils/functions.ts | 5 ++ apps/red-ui/src/assets/i18n/en.json | 12 ++++- .../src/lib/model/digitalSignature.ts | 1 + 7 files changed, 106 insertions(+), 30 deletions(-) diff --git a/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.html b/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.html index 650e8f40f..2ebeece77 100644 --- a/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.html @@ -18,26 +18,39 @@
- + -
- -
- +
+
+
-
+
+ + +
+ +
+ + +
+ +
-
+
-
+
-
- - -
- -
+
-
+ + + +
diff --git a/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.scss b/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.scss index d80cd118a..1080cac21 100644 --- a/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.scss @@ -10,6 +10,28 @@ } } +.no-certificate { + position: absolute; + width: 100%; + top: 0; + bottom: 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + redaction-icon-button { + margin-top: 12px; + } +} + +form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + @font-face { font-family: 'secret'; src: url(data:font/woff;base64,d09GRgABAAAAAAusAAsAAAAAMGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZjRmM5Y21hcAAAAYQAAAgCAAArYmjjYVVnbHlmAAAJiAAAAEEAAABQiOYj2mhlYWQAAAnMAAAALgAAADYOxVFUaGhlYQAACfwAAAAcAAAAJAqNAyNobXR4AAAKGAAAAAgAAAAIAyAAAGxvY2EAAAogAAAABgAAAAYAKAAAbWF4cAAACigAAAAeAAAAIAEOACJuYW1lAAAKSAAAAUIAAAKOcN63t3Bvc3QAAAuMAAAAHQAAAC5lhHRpeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGScwDiBgZWBgSGVtYKBgVECQjMfYEhiYmFgYGJgZWbACgLSXFMYHIAq/rNfAHK3gEmgASACAIekCT4AAHic7dhl0zDVmUXh5+XFHYK7E0IguFtwt4QQgmtwd3d3d7cED+4SXIO7u7vbsNfaUzU1fyGcu66u1adOf+6uHhgYGGpgYGDwL37/iyEHBoZZcWDQLzUw9NK/7A5if/DA8OwPOfQknBky+0P8/PPPOcd1UJ785frr/Dq/zq/z6/w3zsCgoX/xX74GRsxbcYpRB1iDB/7PGvT/DFGDenBwe8hKD1XpoSs9TKWHrfRwlR6+0iNUesRKj1TpkSs9SqVHrfRolR690r+p9BiVHrPSY1V67EqPU+lxKz1epcev9ASVnrDSE1V64kpPUulJKz1ZpSev9BSVnrLSU1V66kr/ttLTVPp3lZ62/KJSerpKT1/pP1R6hkrPWOmZKj1zpWep9KyVnq3Ss1d6jkrPWem5Kj13peep9LyVnq/S81d6gUr/sdILVnqhSi9c6UUqvWilF6v04pVeotJLVnqpSi9d6WUqvWyll6v08pVeodIrVvpPlf5zpVeq9F8qvXKl/1rpVSr9t0qvWunVKr16pdeo9JqVXqvSa1d6nUqvW+n1Kr1+pTeo9N8rvWGlN6r0xpXepNKbVnqzSm9e6S0qvWWlt6r01pXeptLbVnq7Sm9f6R0qvWOld6r0zpXepdK7Vnq3Su9e6T0qvWel96r03pXep9L7Vnq/Su9f6QMqfWClD6r0wZU+pNKHVvqwSh9e6SMqfWSlj6r00ZU+ptLHVvq4Sh9f6RMqfWKlT6r0yZU+pdKnVvq0Sp9e6TMqfWalz6r02ZU+p9LnVvq8Sp9f6QsqfWGl/1Hpf1b6okpfXOlLKn1ppS+r9OWVvqLS/6r0lZW+qtJXV/qaSl9b6esqfX2lb6j0jZW+qdI3V/qWSt9a6dsqfXul76j0vyt9Z6XvqvTdlb6n0vdW+r5K31/pByr9YKUfqvTDlX6k0v+p9KOVfqzSj1f6iUo/WemnKv10pZ+p9LOVfq7Sz1f6hUq/WOmXKv1ypV+p9KuVfq3Sr1f6jUq/Wem3Kv12pd+p9LuVfq/S71f6g0p/WOmPKv1xpT+p9KeV/qzSn1f6i0p/WemvKv11pb+p9LeV/q7S31f6h0r/WOmfKv1zDfI26KKHED1Y9JCihxI9tOhhRA8rejjRw4seQfSIokcSPbLoUUSPKno00aOL/o3oMUSPKXos0WOLHkf0uKLHEz2+6AlETyh6ItETi55E9KSiJxM9uegpRE8peirRU4v+rehpRP9O9LSify96OtHTi/6D6BlEzyh6JtEzi55F9KyiZxM9u+g5RM8pei7Rc4ueR/S8oucTPb/oBUT/UfSCohcSvbDoRUQvKnox0YuLXkL0kqKXEr206GVELyt6OdHLi15B9Iqi/yT6z6JXEv0X0SuL/qvoVUT/TfSqolcTvbroNUSvKXot0WuLXkf0uqLXE72+6A1E/130hqI3Er2x6E1Ebyp6M9Gbi95C9JaitxK9tehtRG8rejvR24veQfSOoncSvbPoXUTvKno30buL3kP0nqL3Er236H1E7yt6P9H7iz5A9IGiDxJ9sOhDRB8q+jDRh4s+QvSRoo8SfbToY0QfK/o40ceLPkH0iaJPEn2y6FNEnyr6NNGniz5D9JmizxJ9tuhzRJ8r+jzR54u+QPSFov8h+p+iLxJ9sehLRF8q+jLRl4u+QvS/RF8p+irRV4u+RvS1oq8Tfb3oG0TfKPom0TeLvkX0raJvE3276DtE/1v0naLvEn236HtE3yv6PtH3i35A9IOiHxL9sOhHRP9H9KOiHxP9uOgnRD8p+inRT4t+RvSzop8T/bzoF0S/KPol0S+LfkX0q6JfE/266DdEvyn6LdFvi35H9Lui3xP9vugPRH8o+iPRH4v+RPSnoj8T/bnoL0R/Kfor0V+L/kb0t6K/E/296B9E/yj6J9E/K/2/v/npoocQPVj0kKKHEj206GFEDyt6ONHDix5B9IiiRxI9suhRRI8qejTRo4v+jegxRI8peizRY4seR/S4oscTPb7oCURPKHoi0ROLnkT0pKInEz256ClETyl6KtFTi/6t6GlE/070tKJ/L3o60dOL/oPoGUTPKHom0TOLnkX0rKJnEz276DlEzyl6LtFzi55H9Lyi5xM9v+gFRP9R9IKiFxK9sOhFRC8qejHRi4teQvSSopcSvbToZUQvK3o50cuLXkH0iqL/JPrPolcS/RfRK4v+q+hVRP9N9KqiVxO9uug1RK8pei3Ra4teR/S6otcTvb7oDUT/XfSGojcSvbHoTURvKnoz0ZuL3kL0lqK3Er216G1Ebyt6O9Hbi95B9I6idxK9s+hdRO8qejfRu4veQ/SeovcSvbfofUTvK3o/0fuLPkD0gaIPEn2w6ENEHyr6MNGHiz5C9JGijxJ9tOhjRB8r+jjRx4s+QfSJok8SfbLoU0SfKvo00aeLPkP0maLPEn226HNEnyv6PNHni75A9IWi/yH6n6IvEn2x6EtEXyr6MtGXi75C9L9EXyn6KtFXi75G9LWirxN9vegbRN8o+ibRN4u+RfStom8TfbvoO0T/W/Sdou8Sfbfoe0TfK/o+0feLfkD0g6IfEv2w6EdE/0f0o6IfE/246CdEPyn6KdFPi35G9LOinxP9vOgXRL8o+iXRL4t+RfSrol8T/broN0S/Kfot0W+Lfkf0u6LfE/2+6A9Efyj6I9Efi/5E9KeiPxP9uegvRH8p+ivRX4v+RvS3or8T/b3oH0T/KPon0T9rYND/AOaSEScAAHicY2BiAAKmPSy+QEqUgYFRUURcTFzMyNzM3MxEXU1dTYmdjZ2NccK/K5oaLm6L3Fw0NOEMZoVAFD6IAQD4PA9iAAAAeJxjYGRgYADirq+zjOP5bb4ycLNfAIowXCttkUWmmfaw+AIpDgYmEA8ANPUJwQAAeJxjYGRgYL/AAATMCiCSaQ8DIwMqYAIAK/QBvQAAAAADIAAAAAAAAAAoAAB4nGNgZGBgYGIQA2IGMIuBgQsIGRj+g/kMAArUATEAAHicjY69TsMwFIWP+4doJYSKhMTmoUJIqOnPWIm1ZWDq0IEtTZw2VRpHjlu1D8A7MPMczAw8DM/AifFEl9qS9d1zzr3XAK7xBYHqCHTdW50aLlj9cZ1057lBfvTcRAdPnlvUnz23mXj13MEN3jhBNC6p9PDuuYYrfHquU//23CD/eG7iVnQ9t9ATD57bWIgXzx3ciw+rDrZfqmhnUnvsx2kZzdVql4Xm1DhVFsqUqc7lKBiemjOVKxNaFcvlUZb71djaRCZGb+VU51ZlmZaF0RsV2WBtbTEZDBKvB5HewkLhwLePkhRhB4OU9ZFKTCqpzems6GQI6Z7TcU5mQceQUmjkkBghwPCszhmd3HWHLh+ze8mEpLvnT8dULRLWCTMaW9LUbanSGa+mUjhv47ZY7l67rgITDHiTf/mAKU76BTuXfk8AAHicY2BigAARBuyAiZGJkZmBJSWzOJmBAQALQwHHAAAA) diff --git a/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.ts b/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.ts index c0eef4ada..f0a32c9d8 100644 --- a/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.ts @@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { NotificationService, NotificationType } from '../../../notification/notification.service'; import { TranslateService } from '@ngx-translate/core'; import { PermissionsService } from '../../../common/service/permissions.service'; +import { lastIndexOfEnd } from '../../../utils/functions'; @Component({ selector: 'redaction-digital-signature-screen', @@ -15,6 +16,7 @@ export class DigitalSignatureScreenComponent { public digitalSignatureForm: FormGroup; public viewReady = false; + public digitalSignatureExists = false; constructor( private readonly _digitalSignatureControllerService: DigitalSignatureControllerService, @@ -31,18 +33,20 @@ export class DigitalSignatureScreenComponent { ...this.digitalSignatureForm.getRawValue() }; + digitalSignature.password = digitalSignature.keySecret; + this._digitalSignatureControllerService.saveDigitalSignature(digitalSignature).subscribe( () => { this.loadDigitalSignatureAndInitializeForm(); this._notificationService.showToastNotification( - this._translateService.instant('digital-signature-screen.action.change-success'), + this._translateService.instant('digital-signature-screen.action.save-success'), null, NotificationType.SUCCESS ); }, () => { this._notificationService.showToastNotification( - this._translateService.instant('digital-signature-screen.action.error'), + this._translateService.instant('digital-signature-screen.action.save-error'), null, NotificationType.ERROR ); @@ -62,7 +66,7 @@ export class DigitalSignatureScreenComponent { }, () => { this._notificationService.showToastNotification( - this._translateService.instant('digital-signature-screen.action.error'), + this._translateService.instant('digital-signature-screen.action.delete-error'), null, NotificationType.ERROR ); @@ -70,15 +74,17 @@ export class DigitalSignatureScreenComponent { ); } - fileChanged(event) { + fileChanged(event, input: HTMLInputElement) { const file = event.target.files[0]; const fileReader = new FileReader(); fileReader.onload = () => { - if (typeof fileReader.result === 'string') { - this.digitalSignatureForm.get('base64EncodedPrivateKey').setValue(btoa(fileReader.result)); - } + const dataUrl = fileReader.result; + const actualBase64Value = dataUrl.substring(lastIndexOfEnd(dataUrl, ';base64,')); + this.digitalSignatureForm.get('base64EncodedPrivateKey').setValue(actualBase64Value); + this.digitalSignatureForm.get('certificateName').setValue(file.name); + input.value = null; }; - fileReader.readAsText(file); + fileReader.readAsDataURL(file); } loadDigitalSignatureAndInitializeForm() { @@ -87,6 +93,7 @@ export class DigitalSignatureScreenComponent { .getDigitalSignature() .subscribe( (digitalSignature) => { + this.digitalSignatureExists = true; this.digitalSignature = digitalSignature; }, () => { @@ -101,13 +108,18 @@ export class DigitalSignatureScreenComponent { private _initForm() { this.digitalSignatureForm = this._formBuilder.group({ - contactInfo: [{ value: this.digitalSignature.contactInfo }], - location: [{ value: this.digitalSignature.location }], - keySecret: [{ value: this.digitalSignature.password }], - reason: [{ value: this.digitalSignature.reason }], - base64EncodedPrivateKey: [{ value: this.digitalSignature.base64EncodedPrivateKey }, Validators.required] + certificateName: { value: this.digitalSignature.certificateName, disabled: true }, + contactInfo: this.digitalSignature.contactInfo, + location: this.digitalSignature.location, + keySecret: this.digitalSignature.password, + reason: this.digitalSignature.reason, + base64EncodedPrivateKey: [this.digitalSignature.base64EncodedPrivateKey, Validators.required] }); } + get hasDigitalSignatureSet() { + return !!this.digitalSignatureForm.get('base64EncodedPrivateKey').value; + } + formChanged() {} } diff --git a/apps/red-ui/src/app/upload-download/file-download.service.ts b/apps/red-ui/src/app/upload-download/file-download.service.ts index 8bb28a262..13fcf2b94 100644 --- a/apps/red-ui/src/app/upload-download/file-download.service.ts +++ b/apps/red-ui/src/app/upload-download/file-download.service.ts @@ -10,6 +10,7 @@ import { FileStatusWrapper } from '../screens/file/model/file-status.wrapper'; import { mergeMap, tap } from 'rxjs/operators'; import { DownloadStatusWrapper } from './model/download-status.wrapper'; import { AppStateService } from '../state/app-state.service'; +import { PermissionsService } from '../common/service/permissions.service'; @Injectable({ providedIn: 'root' @@ -22,6 +23,7 @@ export class FileDownloadService { constructor( private readonly _applicationRef: ApplicationRef, private readonly _appStateService: AppStateService, + private readonly _permissionsService: PermissionsService, private readonly _downloadControllerService: DownloadControllerService, private readonly _translateService: TranslateService, private readonly _appConfigService: AppConfigService, @@ -29,7 +31,9 @@ export class FileDownloadService { private readonly _dialogService: DialogService ) { interval(5000).subscribe((val) => { - this._getDownloadStatus().subscribe(() => {}); + if (_permissionsService.isUser()) { + this._getDownloadStatus().subscribe(() => {}); + } }); } diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts index 60a8cb091..5b08f8722 100644 --- a/apps/red-ui/src/app/utils/functions.ts +++ b/apps/red-ui/src/app/utils/functions.ts @@ -83,3 +83,8 @@ export function getFirstRelevantTextPart(text, direction: 'FORWARD' | 'BACKWARD' } return accumulator; } + +export function lastIndexOfEnd(string, search) { + const io = string.lastIndexOf(search); + return io === -1 ? -1 : io + search.length; +} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index e7db830b1..111f2e09c 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -793,10 +793,16 @@ }, "digital-signature-screen": { "title": "Digital Signature", + "no-key": "No Digital Signature certificate is configured. For signing redacted documents please upload an PCKS.12 certificate.", + "upload-key": "Upload Certificate", "reason": { "label": "Reason", "placeholder": "Reason" }, + "certificate-name": { + "label": "Certificate Name", + "placeholder": "Certificate Name" + }, "contact-info": { "label": "Contact Information", "placeholder": "Contact Information" @@ -812,7 +818,11 @@ "action": { "save": "Save Digital Signature", "delete": "Delete Digital Signature", - "reset": "Reset" + "reset": "Reset", + "save-success": "Digital signature saved successfully", + "save-error": "Failed to save digital signature", + "delete-success": "Digital signature removed. Redacted files will no longer be signed!", + "delete-error": "Failed to remove digital signature, please try again." } } } diff --git a/libs/red-ui-http/src/lib/model/digitalSignature.ts b/libs/red-ui-http/src/lib/model/digitalSignature.ts index 1185a02d9..31321fc50 100644 --- a/libs/red-ui-http/src/lib/model/digitalSignature.ts +++ b/libs/red-ui-http/src/lib/model/digitalSignature.ts @@ -12,6 +12,7 @@ export interface DigitalSignature { base64EncodedPrivateKey?: string; + certificateName?: string; contactInfo?: string; location?: string; password?: string;