Update-loading-and-face-match (#4)

* fix: loading state and facematch state

* fix: missing .gitignore

* fix: update info text & component names

Author: henrychea

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

@@ -28,6 +28,7 @@ export class AppComponent {
 
   private onSdkReady = () => {
     console.log("Successfully loaded");
+    this.loading = false;
   };
 
   private onScanSuccess = (ev: IdverseSdkUiCustomEvent<any>) => {
@@ -83,7 +84,14 @@ export class AppComponent {
   }
 
   onhandleStart() {
-    if (this.idverseSdk && this.ready) this.idverseSdk.startFaceScan();
+    if (this.idverseSdk && this.ready) {
+      this.loading = true;
+      try {
+        this.idverseSdk.startFaceScan();
+      } catch (e) {
+        console.error(e);
+      }
+    }
   }
   onClearError() {
     this.errorText = null;

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

@@ -30,6 +30,7 @@ export class AppComponent {
 
   private onSdkReady = () => {
     console.log("Successfully loaded");
+    this.loading = false;
   };
 
   private onScanSuccess = (ev: IdverseSdkUiCustomEvent<any>) => {
@@ -72,7 +73,8 @@ export class AppComponent {
     }
     this.idverseSdk.recognizers = [SdkType.IDScan];
     this.idverseSdk.enableDFA = true;
-    this.idverseSdk.enableFaceMatch = true;
+    // INFO: Set to true when IDScan is used in combination with FaceScan, and a Face Match result is required.
+    this.idverseSdk.enableFaceMatch = false;
 
     this.idverseSdk.addEventListener("ready", this.onSdkReady);
     this.idverseSdk.addEventListener("fatalError", this.onError);
@@ -83,10 +85,14 @@ export class AppComponent {
 
   onhandleStart(state: boolean) {
     this.scanBothSides = state;
-
     if (this.idverseSdk && this.ready) {
+      this.loading = true;
       this.idverseSdk.setScanBothSides(state);
-      this.idverseSdk.startIDScan();
+      try {
+        this.idverseSdk.startIDScan();
+      } catch (e) {
+        console.error(e);
+      }
     }
   }
   onClearError() {

sdk-integration-examples/web-sdk/react/face-scan/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

sdk-integration-examples/web-sdk/react/face-scan/src/App.tsx

@@ -77,6 +77,7 @@ function App() {
 
   const handleStart = async () => {
     if (!idverseSDK || !ready) return;
+    setLoading(true);
     try {
       idverseSDK.startFaceScan();
     } catch (e) {

sdk-integration-examples/web-sdk/react/id-scan/src/App.tsx

@@ -67,7 +67,8 @@ function App() {
     }
     sdk.recognizers = [SdkType.IDScan];
     sdk.enableDFA = true;
-    sdk.enableFaceMatch = true;
+    // INFO: Set to true when IDScan is used in combination with FaceScan, and a Face Match result is required.
+    sdk.enableFaceMatch = false;
 
     sdk.addEventListener("ready", onSdkReady);
     sdk.addEventListener("fatalError", onError);
@@ -83,6 +84,7 @@ function App() {
     if (!idverseSDK || !ready) return;
     setScanBothSides(state);
     idverseSDK.setScanBothSides(state);
+    setLoading(true);
     try {
       idverseSDK.startIDScan();
     } catch (e) {

sdk-integration-examples/web-sdk/vue/face-scan/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HelloWorld from "./components/HelloWorld.vue";
+import Main from "./components/Main.vue";
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import HelloWorld from "./components/HelloWorld.vue";
       <img src="/logo.svg" class="logo" alt="Idverse logo" />
     </a>
   </div>
-  <HelloWorld />
+  <Main />
 </template>
 
 <style scoped>

sdk-integration-examples/web-sdk/vue/face-scan/src/components/HelloWorld.vue renamed to sdk-integration-examples/web-sdk/vue/face-scan/src/components/Main.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import Details from "./Details.vue";
 import "@idverse/idverse-sdk-browser/ui";
 import {
   FaceScanRecognizerResult,
@@ -17,6 +16,7 @@ const idverseSDK = ref<HTMLIdverseSdkUiElement | null>(null);
 
 const onSdkReady = () => {
   console.log("Successfully loaded");
+  loading.value = false;
 };
 
 const onScanSuccess = (ev: IdverseSdkUiCustomEvent<any>) => {
@@ -47,6 +47,7 @@ const closeSession = () => {
 
 const handleStart = async () => {
   if (!idverseSDK.value || !ready.value) return;
+  loading.value = true;
   try {
     idverseSDK.value.startFaceScan();
   } catch (e) {

sdk-integration-examples/web-sdk/vue/id-scan/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HelloWorld from "./components/HelloWorld.vue";
+import Main from "./components/Main.vue";
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import HelloWorld from "./components/HelloWorld.vue";
       <img src="/logo.svg" class="logo" alt="Idverse logo" />
     </a>
   </div>
-  <HelloWorld />
+  <Main />
 </template>
 
 <style scoped>

sdk-integration-examples/web-sdk/vue/id-scan/src/components/HelloWorld.vue renamed to sdk-integration-examples/web-sdk/vue/id-scan/src/components/Main.vue

@@ -18,6 +18,7 @@ const idverseSDK = ref<HTMLIdverseSdkUiElement | null>(null);
 
 const onSdkReady = () => {
   console.log("Successfully loaded");
+  loading.value = false;
 };
 
 const onScanSuccess = (ev: IdverseSdkUiCustomEvent<any>) => {
@@ -48,6 +49,7 @@ const closeSession = () => {
 
 const handleStart = async (state: boolean) => {
   if (!idverseSDK || !ready) return;
+  loading.value = true;
   scanBothSides.value = state;
   idverseSDK.value?.setScanBothSides(state);
   try {
@@ -76,7 +78,8 @@ onMounted(() => {
 
   sdk.recognizers = [SdkType.IDScan];
   sdk.enableDFA = true;
-  sdk.enableFaceMatch = true;
+  // INFO: Set to true when IDScan is used in combination with FaceScan, and a Face Match result is required.
+  sdk.enableFaceMatch = false;
 
   sdk.addEventListener("ready", onSdkReady);
   sdk.addEventListener("fatalError", onError);