fix: styling & small bugs

Author: henrychea

README.md

@@ -4,6 +4,23 @@ This repository holds code example for IDVerse's [IDV Platform](https://idvplatf
 
 The SDK documentation is available at [idvplatform.docs.idverse.com/docs/getting-started](https://idvplatform.docs.idverse.com/docs/getting-started).
 
+## Quick Start
+
+- Make sure you have [Node.js](https://nodejs.org/) installed
+- Download the built SDK from your Tenant session
+- Extract the `sdk-build-******.zip` and copy `idverse-sdk-browser` folder to the `sdk-integration-examples` folder
+- For each app you will need to run `npm install` to get all the dependencies then update the code below with parameters with those from your Tenant session:
+
+```jsx
+<idverse-sdk-ui
+  session-url="YOUR_SESSION_URL"
+  session-token="YOUR_SESSION_TOKEN"
+  session-build-id="YOUR_SESSION_BUILD_ID"
+></idverse-sdk-ui>
+```
+
+- Run the app with `npm run host` (your app will be available on the local network for testing with other devices as well)
+
 ## Example Apps
 
 - [IDKit Core Web SDK using Angular](./sdk-integration-examples/web-sdk/angular)

sdk-integration-examples/web-sdk/angular/face-scan/angular.json

@@ -89,5 +89,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

sdk-integration-examples/web-sdk/angular/face-scan/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "host": "ng serve --host 0.0.0.0 --port 4200 --ssl true",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
@@ -18,8 +19,8 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
-    "@idverse/idverse-sdk-browser": "file:../../..",
-    "@idverse/idverse-sdk-ui": "file:../../../ui",
+    "@idverse/idverse-sdk-browser": "file:../../../idverse-sdk-browser",
+    "@idverse/idverse-sdk-ui": "file:../../../idverse-sdk-browser/ui",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

sdk-integration-examples/web-sdk/angular/face-scan/src/app/app.component.html

@@ -1,7 +1,7 @@
 <div id="root">
   <div>
     <a href="https://idverse.com" target="_blank">
-      <img src="/logo.svg" className="logo" alt="IDVerse logo" />
+      <img src="/logo.svg" class="logo" alt="IDVerse logo" />
     </a>
   </div>
   <h1>Simple Face Scan with Angluar</h1>
@@ -11,19 +11,26 @@ <h1>Simple Face Scan with Angluar</h1>
   <div class="card" *ngIf="!loading">
     <button (click)="onhandleStart()">Start Face Scan</button>
   </div>
+  <div class="card" *ngIf="resultData === 1">
+    <button (click)="onClose()">Close</button>
+  </div>
   <idv-modal *ngIf="errorText" warning visible heading="An error occurred.">
     <p>{{ errorText }}</p>
     <div>
-      <idv-button (click)="onClearError()" label="Close" variant="primary outline"></idv-button>
+      <idv-button
+        (click)="onClearError()"
+        label="Close"
+        variant="primary outline"
+      ></idv-button>
     </div>
   </idv-modal>
-  <app-details *ngIf="resultData" [details]="resultData" (onClose)="onClose()"
-    (onTryAgain)="onTryAgain()"></app-details>
-
-  <idverse-sdk-ui session-url="https://sessions.au.idkit.com/v1" session-token="a0dab893-c77d-54f7-96c1-f31ebbdaba4a"
-    build-id="1234567890"></idverse-sdk-ui>
+  <idverse-sdk-ui
+    session-url="YOUR_SESSION_URL"
+    session-token="YOUR_SESSION_TOKEN"
+    session-build-id="YOUR_SESSION_BUILD_ID"
+  ></idverse-sdk-ui>
 
   <p class="read-the-docs">Click on the IDVerse logo to learn more</p>
 </div>
 
-<router-outlet />
+<router-outlet />

sdk-integration-examples/web-sdk/angular/face-scan/src/app/app.component.scss

@@ -12,14 +12,6 @@
   transition: filter 300ms;
 }
 
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

sdk-integration-examples/web-sdk/angular/face-scan/src/app/app.component.ts

@@ -1,60 +1,56 @@
-import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RouterOutlet } from "@angular/router";
 import {
   IdverseSdkUiCustomEvent,
   SdkError,
   FaceScanRecognizerResult,
-} from '@idverse/idverse-sdk-browser/ui';
+} from "@idverse/idverse-sdk-browser/ui";
 import { SdkType } from "@idverse/idverse-sdk-browser";
 
-import '@idverse/idverse-sdk-browser/ui';
-import { DetailsComponent } from './details/details.component';
+import "@idverse/idverse-sdk-browser/ui";
 
 @Component({
-  selector: 'app-root',
+  selector: "app-root",
   standalone: true,
-  imports: [RouterOutlet, CommonModule, DetailsComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
+  imports: [RouterOutlet, CommonModule],
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.scss",
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppComponent {
-  title = 'angluar-id-scan';
+  title = "angluar-id-scan";
   private idverseSdk: HTMLIdverseSdkUiElement | null = null;
   loading: boolean = true;
   ready: boolean = false;
   errorText: string | null = null;
   resultData: FaceScanRecognizerResult | null = null;
 
   private onSdkReady = () => {
-    this.loading = false;
-    this.ready = true;
-    console.log('Successfully loaded');
+    console.log("Successfully loaded");
   };
 
-  private onScanSuccess = (
-    ev: IdverseSdkUiCustomEvent<any>
-  ) => {
+  private onScanSuccess = (ev: IdverseSdkUiCustomEvent<any>) => {
     console.log(ev.detail);
-    const res =
-      ev as unknown as IdverseSdkUiCustomEvent<any>;
-    this.resultData = res.detail;
+    const res = ev as unknown as IdverseSdkUiCustomEvent<any>;
+    this.resultData = res.detail.result.status;
   };
 
   private onScanFail = (ev: IdverseSdkUiCustomEvent<any>) => {
-    console.log('failed to scan.', ev);
+    console.log("failed to scan.", ev);
     this.errorText = ev.detail.toString();
   };
 
   private onError = (e: IdverseSdkUiCustomEvent<SdkError>) => {
     this.loading = false;
-    console.error('SDKError', e.detail);
+    console.error("SDKError", e.detail);
     this.errorText = e.detail.message.toString();
   };
 
   private onAuthenticated = (ev: IdverseSdkUiCustomEvent<any>) => {
-    console.log('authenticated', ev);
+    console.log("authenticated", ev);
+    this.loading = false;
+    this.ready = true;
   };
 
   private closeSession = () => {
@@ -72,19 +68,18 @@ export class AppComponent {
 
   ngOnInit() {
     this.idverseSdk = document.querySelector(
-      'idverse-sdk-ui'
+      "idverse-sdk-ui"
     ) as HTMLIdverseSdkUiElement;
     if (!this.idverseSdk) {
-      throw 'idverse-sdk-ui tag does not exist';
+      throw "idverse-sdk-ui tag does not exist";
     }
     this.idverseSdk.recognizers = [SdkType.FaceScan];
-    this.idverseSdk.enableDFA = false;
-    this.idverseSdk.enableFaceMatch = false;
-    this.idverseSdk.addEventListener('ready', this.onSdkReady);
-    this.idverseSdk.addEventListener('fatalError', this.onError);
-    this.idverseSdk.addEventListener('scanFail', this.onScanFail);
-    this.idverseSdk.addEventListener('scanSuccess', this.onScanSuccess);
-    this.idverseSdk.addEventListener('authenticated', this.onAuthenticated);
+
+    this.idverseSdk.addEventListener("ready", this.onSdkReady);
+    this.idverseSdk.addEventListener("fatalError", this.onError);
+    this.idverseSdk.addEventListener("scanFail", this.onScanFail);
+    this.idverseSdk.addEventListener("scanSuccess", this.onScanSuccess);
+    this.idverseSdk.addEventListener("authenticated", this.onAuthenticated);
   }
 
   onhandleStart() {