sky Identification Angular Demo

angular.json

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

package-lock.json

@@ -16,7 +16,9 @@
         "@angular/platform-browser": "^16.2.0",
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
+        "jquery": "^3.7.1",
         "rxjs": "~7.8.0",
+        "skyid-sdk-web": "^1.1.2",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
       },
@@ -7613,6 +7615,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -11126,6 +11133,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/skyid-sdk-web": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/skyid-sdk-web/-/skyid-sdk-web-1.1.2.tgz",
+      "integrity": "sha512-Uuoi4tbcfUmaUQAQTti/CE40+xzklt7cljc8AZ1kZInHYa1enZmsNop2VbVqHt78cg/0/K7kasQdIDRP/URoxQ=="
+    },
     "node_modules/slash": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",

package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "jquery": "^3.7.1",
     "rxjs": "~7.8.0",
+    "skyid-sdk-web": "^1.1.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },

src/app/app.component.css

+h1 {
+    text-align: center;
+}
+h2 {
+    margin: 0;
+}
+#multi-step-form-container {
+    margin-top: 5rem;
+}
+.text-center {
+    text-align: center;
+}
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+.pl-0 {
+    padding-left: 0;
+}
+.button {
+    padding: 0.7rem 1.5rem;
+    border: 1px solid #4361ee;
+    background-color: #4361ee;
+    color: #fff;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.submit-btn {
+    border: 1px solid #0e9594;
+    background-color: #0e9594;
+}
+.mt-3 {
+    margin-top: 2rem;
+}
+.d-none {
+    display: none;
+}
+.form-step {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    padding: 3rem;
+}
+.font-normal {
+    font-weight: normal;
+}
+ul.form-stepper {
+    counter-reset: section;
+    margin-bottom: 3rem;
+}
+ul.form-stepper .form-stepper-circle {
+    position: relative;
+}
+ul.form-stepper .form-stepper-circle span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+}
+.form-stepper-horizontal {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+ul.form-stepper > li:not(:last-of-type) {
+    margin-bottom: 0.625rem;
+    -webkit-transition: margin-bottom 0.4s;
+    -o-transition: margin-bottom 0.4s;
+    transition: margin-bottom 0.4s;
+}
+.form-stepper-horizontal > li:not(:last-of-type) {
+    margin-bottom: 0 !important;
+}
+.form-stepper-horizontal li {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: start;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+}
+.form-stepper-horizontal li:not(:last-child):after {
+    position: relative;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    height: 1px;
+    content: "";
+    top: 32%;
+}
+.form-stepper-horizontal li:after {
+    background-color: #dee2e6;
+}
+.form-stepper-horizontal li.form-stepper-completed:after {
+    background-color: #4da3ff;
+}
+.form-stepper-horizontal li:last-child {
+    flex: unset;
+}
+ul.form-stepper li a .form-stepper-circle {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    margin-right: 0;
+    line-height: 1.7rem;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.38);
+    border-radius: 50%;
+}
+.form-stepper .form-stepper-active .form-stepper-circle {
+    background-color: #4361ee !important;
+    color: #fff;
+}
+.form-stepper .form-stepper-active .label {
+    color: #4361ee !important;
+}
+.form-stepper .form-stepper-active .form-stepper-circle:hover {
+    background-color: #4361ee !important;
+    color: #fff !important;
+}
+.form-stepper .form-stepper-unfinished .form-stepper-circle {
+    background-color: #f8f7ff;
+}
+.form-stepper .form-stepper-completed .form-stepper-circle {
+    background-color: #0e9594 !important;
+    color: #fff;
+}
+.form-stepper .form-stepper-completed .label {
+    color: #0e9594 !important;
+}
+.form-stepper .form-stepper-completed .form-stepper-circle:hover {
+    background-color: #0e9594 !important;
+    color: #fff !important;
+}
+.form-stepper .form-stepper-active span.text-muted {
+    color: #fff !important;
+}
+.form-stepper .form-stepper-completed span.text-muted {
+    color: #fff !important;
+}
+.form-stepper .label {
+    font-size: 1rem;
+    margin-top: 0.5rem;
+}
+.form-stepper a {
+    cursor: default;
+}
+
+#smart_ocr_get_info{
+    width: 200px;
+    background-color: #4361ee;
+    border-radius: 50pc;
+    color: white;
+    /* text-align: center; */
+    height: 30px;
+    margin: auto;
+    cursor: pointer;
+    /* justify-content: center; */
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    align-items: center;
+}
+
+input[type="file"] {
+    position: relative;
+  }
+  
+  input[type="file"]::file-selector-button {
+    width: 136px;
+    color: transparent;
+  }
+  
+  /* Faked label styles and icon */
+  input[type="file"]::before {
+    position: absolute;
+    pointer-events: none;
+    top: 10px;
+    left: 16px;
+    height: 20px;
+    width: 20px;
+    content: "";
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
+  }
+  
+  input[type="file"]::after {
+    position: absolute;
+    pointer-events: none;
+    top: 11px;
+    left: 40px;
+    color: #0964b0;
+    content: "Upload File";
+  }
+  
+  /* ------- From Step 1 ------- */
+  
+  /* file upload button */
+  input[type="file"]::file-selector-button {
+    border-radius: 4px;
+    padding: 0 16px;
+    height: 40px;
+    cursor: pointer;
+    background-color: white;
+    border: 1px solid rgba(0, 0, 0, 0.16);
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
+    margin-right: 16px;
+    transition: background-color 200ms;
+  }
+  
+  /* file upload button hover state */
+  input[type="file"]::file-selector-button:hover {
+    background-color: #f3f4f6;
+  }
+  
+  /* file upload button active state */
+  input[type="file"]::file-selector-button:active {
+    background-color: #e5e7eb;
+  }
+  
+  /* ------------------------ */
+  
+  /* default boilerplate to center input */
+  body {
+    /* min-height: 100vh;
+    max-width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5vmax;
+    box-sizing: border-box; */
+  }
+  .main_container{
+    background-color: #E6E6E6;
+}
+  /* spiner  */
+
+  .loader {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 48px;
+    height: 48px;
+    margin: auto;
+    border: 5px solid #FFF;
+    border-bottom-color: #4361ee;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    }
+
+    @keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+    } 
+
+    .IndatacoreIdentity{
+        display: flex;
+        margin: auto;
+        background-color: #263269;
+        width: 70px;
+        padding: 10px;
+        border-radius: 20px;
+      }
+    /* drag and drop style  */
+
+    
\ No newline at end of file

src/app/app.component.ts

-import { Component } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+//@ts-ignore
+import * as  $  from 'jquery' ; 
+//@ts-ignore
+import {initViewComponent,skyid_fa_setup_sdkMethod , skyid_fa_auth_request_smart_ocr , skyid_fa_stop_webcam , startskyid_fa_start_face_scan , skyid_fa_auth_request_smart_ocr_recover} from '../assets/skyid_impl_v1.js'; //Location of 'skyid_impl_v1.js' file
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'sky_Identification_Angular_Demo';
-}
+export class AppComponent implements OnInit , AfterViewInit {
+  constructor(){
+    
+  }
+  ngAfterViewInit(): void {
+
+
+    $(document).ready(function () {
+      $('#smart_ocr_get_info').on('click' , function(){
+        skyid_fa_auth_request_smart_ocr()
+      })
+      const imageInput = $("#ocrimagge");
+      const uploadedImageocr = $("#uploadedImageocr");
+      const imageContainer = $("#imageContainer");
+
+      imageInput.on("change", function(this :any) {
+        const file = this.files[0]; // Get the selected file
+    
+        if (file) {
+          const imageURL = URL.createObjectURL(file);
+          uploadedImageocr.attr("src", imageURL);
+          imageContainer.css("display", "block"); // Make the container visible
+        }
+      });
+      
+
+    
+    })
+
+
+
+    function reloadall() {
+      const fileInput = $("#ocrimagge");
+      fileInput.val(null);
+  
+      const resultextractdata = $('#resultextractdata');
+      $('#uploadedImageocr').attr('src', 'assets/CINcrt.jpg');
+      resultextractdata.html('<pre> Download your national card (CIN - recto )  </pre>');
+  
+      const resultextfacemtchlvnssdata = $('#responseOneDisplayrealtimefacedetct');
+      resultextfacemtchlvnssdata.html('<pre></pre>');
+  
+      const resultexfacemtchdata = $('#responseOneDisplayrealtimefacedetcttow');
+      resultexfacemtchdata.html('<pre></pre');
+  
+      const step2 = 2;
+      const buttonstep2 = $(`button[step_number="${step2}"]`);
+      buttonstep2.prop('disabled', true);
+      buttonstep2.css('background', 'darkgray');
+  
+      const step3 = 3;
+      const buttonstep3 = $(`button[step_number="${step3}"]`);
+      buttonstep3.prop('disabled', true);
+      buttonstep3.css('background', 'darkgray');
+  }
+  
+  const navigateToFormStep = (stepNumber: any 
+    ) => {
+      if (stepNumber == 1) {
+          reloadall();
+      }
+      if (stepNumber == 2) {
+        skyid_fa_setup_sdkMethod() ; 
+    } else {
+        skyid_fa_stop_webcam() ;
+    }
+      $(".form-step").addClass("d-none");
+      $(".form-stepper-list").addClass("form-stepper-unfinished").removeClass("form-stepper-active form-stepper-completed");
+      $("#step-" + stepNumber).removeClass("d-none");
+      $(`li[step="${stepNumber}"]`).removeClass("form-stepper-unfinished form-stepper-completed").addClass("form-stepper-active");
+  
+      for (let index = 0; index < stepNumber; index++) {
+          const formStepCircle = $(`li[step="${index}"]`);
+          if (formStepCircle.length) {
+              formStepCircle.removeClass("form-stepper-unfinished form-stepper-active").addClass("form-stepper-completed");
+          }
+      }
+  };
+  $(".btn-navigate-form-step").on("click", function(this: any) {
+      const stepNumber = parseInt($(this).attr("step_number"));
+      navigateToFormStep(stepNumber);
+  });
+  $("#skyid_fa_start_button").on("click", function(this: any) {
+    startskyid_fa_start_face_scan()
+  });
+
+
+  
+  }
+  ngOnInit(): void {
+    initViewComponent()
+  }
+}
\ No newline at end of file