optimizations/visualization

- chagning some idatsignparams for more readabiliy - adding working demo
terrexgroup · Nov 29, 2023 · 82f3d98 · 82f3d98
1 parent 1be215f
commit 82f3d98
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 131 deletions.
diff --git a/projects/ngx-idat-sign-demo/src/app/app.component.html b/projects/ngx-idat-sign-demo/src/app/app.component.html
@@ -1,3 +1,18 @@
 <div class="demo-wrapper">
-    <ngx-idat-sign class="signer" [pdfBase64]="this.pdfBase64" [parameters]="this.params"></ngx-idat-sign>
+    <ngx-idat-sign *ngIf="this.signInProgress" class="signer" [pdfBase64]="this.pdfBase64" [parameters]="this.params" (error)="this.signError($event)" (success)="this.signSuccess($event)"></ngx-idat-sign>
+    <div class="start-sign-btn" *ngIf="!this.signInProgress" (click)="startSign()">
+      <h1>Start Signing Process</h1>
+      <h4>Click here to sign a demo pdf</h4>
+    </div>
+    <div class="error-wrapper" *ngIf="this.error">
+        <h1>Signing process failed!</h1>
+        <h2>Signation process failed with the following parameters</h2>
+        <span>message: {{this.error.message}}</span><br>
+        <span>cause: {{this.error.cause}}</span>
+    </div>
+    <div class="success-wrapper" *ngIf="this.signedPdfUrl">
+        <h1>Signing process successful!</h1>
+        <h2>The signation process was successful</h2>
+        <span>URL with the signed PDF: <a [href]="this.signedPdfUrl" target="_blank">{{this.signedPdfUrl}}</a></span>
+    </div>
 </div>
diff --git a/projects/ngx-idat-sign-demo/src/app/app.component.scss b/projects/ngx-idat-sign-demo/src/app/app.component.scss
@@ -1,5 +1,7 @@
 .demo-wrapper {
     display: flex;
+    flex-direction: column;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     width: 100%;
     height: 100%;
     align-items: center;
@@ -8,4 +10,30 @@
         width: 400px;
         height: 400px;
     }
+
+    .start-sign-btn {
+        background-color: rgba($color: #364dfc, $alpha: 0.8);
+        color: white;
+        border-radius: 10px;
+        padding: 20px;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    .error-wrapper {
+        border: 3px solid rgb(248, 11, 11);
+        border-radius: 5px;
+        margin-top: 20px;
+        padding: 15px;
+        text-align: center;
+        background-color: rgba($color: rgb(248, 11, 11), $alpha: 0.2);
+    }
+    .success-wrapper {
+        border: 3px solid rgb(11, 248, 27);
+        border-radius: 5px;
+        margin-top: 20px;
+        padding: 15px;
+        text-align: center;
+        background-color: rgba($color: rgb(11, 248, 27), $alpha: 0.2);
+    }
 }