Skip to content

S
SkyIdVueJsWithoutJQuery
Commit c794a639 authored by redwane mahjoubi's avatar redwane mahjoubi
Browse files
Options

version 1

parents
Pipeline #449 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 346 additions and 0 deletions
      README.md 0 → 100644
      View file @ c794a639
      # skyid-vuejs
      ## Project setup
      ```
      npm install
      ```
      ### Compiles and hot-reloads for development
      ```
      npm run serve
      ```
      ### Compiles and minifies for production
      ```
      npm run build
      ```
      ### Customize configuration
      See [Configuration Reference](https://cli.vuejs.org/config/).
      package-lock.json 0 → 100644
      View file @ c794a639
      This diff is collapsed.
      package.json 0 → 100644
      View file @ c794a639
      {
      "name": "skyid-vuejs",
      "version": "0.1.0",
      "private": true,
      "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build"
      },
      "dependencies": {
      "jquery": "^3.7.0",
      "skyid-sdk-web": "^1.1.1",
      "vue": "^2.6.11",
      "vue-router": "^3.2.0"
      },
      "devDependencies": {
      "@vue/cli-plugin-router": "~4.5.15",
      "@vue/cli-service": "~4.5.15",
      "vue-template-compiler": "^2.6.11"
      },
      "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
      ]
      }
      public/index.html 0 → 100644
      View file @ c794a639
      <!DOCTYPE html>
      <html lang="">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
      <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->
      </body>
      </html>
      src/App.vue 0 → 100644
      View file @ c794a639
      <template>
      <div id="app">
      <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      </div>
      <router-view/>
      </div>
      </template>
      <style>
      #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      }
      #nav {
      padding: 30px;
      }
      #nav a {
      font-weight: bold;
      color: #2c3e50;
      }
      #nav a.router-link-exact-active {
      color: #42b983;
      }
      </style>
      src/assets/skyid_impl_v1.js 0 → 100644
      View file @ c794a639
      This diff is collapsed.
      src/components/SKYID.vue 0 → 100644
      View file @ c794a639
      <template>
      <div class="wrapper">
      <div id="skyid_fa_document_container">
      <div id="skyid_document_browser">
      <label For="file-upload" class="custom-file-upload" id="doc_file_label">
      Charger votre document ici
      </label>
      <input id="file-upload" type="file" value="" accept="image/png, image/jpeg"/>
      <button id="skyid_da_smart_ocr_button" class="button-36" role="button">Extraire les information de document</button>
      <button id="skyid_fa_next" class="button-36" role="button">Suivant</button>
      <br/><br/>
      <img id="doc_img" src='../assets/no-img-placeholder.png' width="640px" height="480px" alt=""/>
      <p id="extracted_feilds"></p>
      </div>
      <div id="liveness_frame">
      <div id="skyid_liveness" ></div>
      <br/><br/>
      <button id="skyid_fa_start_button" class="button-36" role="button">Démarrer</button>
      <br/>
      <div id="msg"></div>
      </div>
      </div>
      </div>
      </template>
      <script>
      import $ from 'jquery';
      import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_v1.js' file
      export default {
      name: 'HelloWorld',
      props: {
      msg: String
      },
      mounted(){
      skyid_imp.initViewComponent()
      // init SDK
      skyid_imp.skyid_fa_remote_sdk_initialization()
      $( document ).ready(function() {
      $("#skyid_fa_document_container").show(500);
      $( "#skyid_da_smart_ocr_button" ).click(function() {
      skyid_imp.skyid_fa_auth_request_smart_ocr();
      $("#skyid_da_smart_ocr_button").prop('disabled', true);
      $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
      });
      $( "#skyid_fa_next" ).click(function() {
      $( "#skyid_fa_start_button" ).show()
      skyid_imp.show_matching_step();
      });
      $( "#skyid_fa_start_button" ).click(function() {
      // start SDK face analysis
      skyid_imp.start_face_scan() ;
      $( "#skyid_fa_start_button" ).hide();
      $( "#msg" ).html("Scanne de visage en cours ....");
      });
      });
      const fileSelector = document.getElementById('file-upload');
      fileSelector.addEventListener('change', (event) => {
      const myimage = event.target.files[0];
      skyid_imp.readImage(myimage);
      });
      // demo call
      skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679")
      }
      }
      </script>
      <!-- Add "scoped" attribute to limit CSS to this component only -->
      <style scoped>
      html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #f5f5f5;
      display: table;
      }
      footer {
      background-color: black;
      font-size:12px;
      display: table-row;
      padding: 20px;
      height: 0;
      font-family: Arial, Helvetica, sans-serif;
      }
      .column {
      float: left;
      padding: 20px;
      }
      /* Clear floats after the columns */
      .row:after {
      content: "";
      display: table;
      clear: both;
      }
      .button-36 {
      background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
      border-radius: 8px;
      border-style: none;
      box-sizing: border-box;
      color: #FFFFFF;
      cursor: pointer;
      flex-shrink: 0;
      font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
      font-size: 16px;
      font-weight: 500;
      height: 4rem;
      padding: 0 1.6rem;
      text-align: center;
      text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
      transition: all .5s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      }
      .button-36:hover {
      box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
      transition-duration: .1s;
      }
      @media (min-width: 768px) {
      .button-36 {
      padding: 0 2.6rem;
      }
      }
      input[type="file"] {
      display: none;
      }
      .custom-file-upload {
      border: 1px solid #ccc;
      background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
      border-radius: 8px;
      color: #FFFFFF;
      flex-shrink: 0;
      font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
      display: inline-block;
      padding: 6px 12px;
      cursor: pointer;
      }
      .custom-file-upload:hover {
      box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
      transition-duration: .1s;
      }
      #skyid_fa_document_container{
      margin: auto;
      width: 90%;
      text-align: center;
      }
      #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
      display: none;
      }
      #extracted_feilds{
      display:none;
      border: 2px solid #000;
      overflow: scroll;
      }
      #liveness_frame{
      display: none;
      text-align: center;
      }
      #skyid_liveness{
      display: flex;
      justify-content: center;
      }
      </style>
      src/main.js 0 → 100644
      View file @ c794a639
      import Vue from 'vue'
      import App from './App.vue'
      import router from './router'
      Vue.config.productionTip = false
      new Vue({
      router,
      render: function (h) { return h(App) }
      }).$mount('#app')
      src/router/index.js 0 → 100644
      View file @ c794a639
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      import Home from '../views/Home.vue'
      Vue.use(VueRouter)
      const routes = [
      {
      path: '/',
      name: 'Home',
      component: Home
      },
      {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
      }
      ]
      const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
      })
      export default router
      src/views/About.vue 0 → 100644
      View file @ c794a639
      <template>
      <div class="about">
      <h1>This is an about page</h1>
      </div>
      </template>
      src/views/Home.vue 0 → 100644
      View file @ c794a639
      <template>
      <div class="home">
      <img alt="Vue logo" src="../assets/logo.png">
      <SKYID />
      </div>
      </template>
      <script>
      // @ is an alias to /src
      import SKYID from '@/components/SKYID.vue'
      export default {
      name: 'Home',
      components: {
      SKYID
      }
      }
      </script>
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment