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

UI for digital signature

Browse Source
This commit is contained in:
Timo 2021-02-03 14:39:18 +02:00
parent 7a89597101
commit b65f30397c
7 changed files with 106 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.html
View File

@ -18,26 +18,39 @@
<div class="left-container">
<div class="left-container-content">
<form [formGroup]="digitalSignatureForm" (keyup)="formChanged()" autocomplete="off" *ngIf="digitalSignatureForm">
<input #fileInput (change)="fileChanged($event)" hidden class="file-upload-input" type="file" />
<input #fileInput (change)="fileChanged($event, fileInput)" hidden class="file-upload-input" type="file" />
<div *ngIf="!digitalSignatureForm.get('base64EncodedPrivateKey').value" class="empty-state">
<mat-icon svgIcon="red:document"></mat-icon>
<div class="heading-l" translate="project-overview.no-data.title"></div>
<redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="project-overview.no-data.action" type="primary">
<div *ngIf="!hasDigitalSignatureSet" class="no-certificate">
<div class="heading-l" translate="digital-signature-screen.no-key"></div>
<redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="digital-signature-screen.upload-key" type="primary">
</redaction-icon-button>
</div>
<div class="red-input-group w-300">
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.certificate-name.label"></label>
<input
formControlName="certificateName"
name="certificateName"
[placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
/>
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.password.label"></label>
<input formControlName="keySecret" name="keySecret" [placeholder]="'digital-signature-screen.password.placeholder' | translate" />
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.reason.label"></label>
<input formControlName="reason" name="reason" [placeholder]="'digital-signature-screen.reason.placeholder' | translate" />
</div>
<div class="red-input-group w-300">
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.location.label"></label>
<input formControlName="location" name="location" [placeholder]="'digital-signature-screen.location.placeholder' | translate" />
</div>
<div class="red-input-group w-300">
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.contact-info.label"></label>
<input
formControlName="contactInfo"
@ -46,12 +59,7 @@
/>
</div>
<div class="red-input-group w-300">
<label translate="digital-signature-screen.password.label"></label>
<input formControlName="keySecret" name="keySecret" [placeholder]="'digital-signature-screen.password.placeholder' | translate" />
</div>
<div class="changes-box">
<div class="changes-box" [class.hidden]="!hasDigitalSignatureSet">
<redaction-icon-button
[disabled]="digitalSignatureForm.invalid"
icon="red:check-alt"
@ -59,7 +67,21 @@
text="digital-signature-screen.action.save"
type="primary"
></redaction-icon-button>
<div (click)="removeDigitalSignature()" translate="digital-signature-screen.action.reset" class="all-caps-label cancel"></div>
<redaction-icon-button
*ngIf="digitalSignatureExists"
icon="red:trash"
(action)="removeDigitalSignature()"
text="digital-signature-screen.action.delete"
type="primary"
></redaction-icon-button>
<div
(click)="loadDigitalSignatureAndInitializeForm()"
translate="digital-signature-screen.action.reset"
*ngIf="!digitalSignatureExists"
class="all-caps-label cancel"
></div>
</div>
</form>
</div>

22
apps/red-ui/src/app/screens/admin/digital-signature-screen/digital-signature-screen.component.scss
View File

@ -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,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)

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

@ -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 = <string>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() {}
}

6
apps/red-ui/src/app/upload-download/file-download.service.ts
View File

@ -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(() => {});
}
});
}

5
apps/red-ui/src/app/utils/functions.ts
View File

@ -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;
}

12
apps/red-ui/src/assets/i18n/en.json
View File

@ -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."
}
}
}

1
libs/red-ui-http/src/lib/model/digitalSignature.ts
View File

@ -12,6 +12,7 @@
export interface DigitalSignature {
base64EncodedPrivateKey?: string;
certificateName?: string;
contactInfo?: string;
location?: string;
password?: string;