From 08cbe6825e64804e368f9172a1edadae47dc128b Mon Sep 17 00:00:00 2001
From: Lucas ONeil <lucasoneil@gmail.com>
Date: Tue, 14 May 2024 16:28:26 -0700
Subject: [PATCH 1/2] Dependency updates

Signed-off-by: Lucas ONeil <lucasoneil@gmail.com>
---
 demo/vue/app/frontend/package-lock.json | 24 ++++++++++++------------
 demo/vue/app/frontend/package.json      |  6 +++---
 demo/vue/app/package-lock.json          |  8 ++++----
 demo/vue/app/package.json               |  2 +-
 oidc-controller/requirements.txt        |  6 +++---
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/demo/vue/app/frontend/package-lock.json b/demo/vue/app/frontend/package-lock.json
index 15404a3f..050a7ab5 100644
--- a/demo/vue/app/frontend/package-lock.json
+++ b/demo/vue/app/frontend/package-lock.json
@@ -13,7 +13,7 @@
         "@bcgov/bc-sans": "^2.1.0",
         "@vue/eslint-config-prettier": "^9.0.0",
         "axios": "^1.6.8",
-        "core-js": "^3.37.0",
+        "core-js": "^3.37.1",
         "eslint": "^8.57.0",
         "eslint-plugin-prettier": "^5.1.3",
         "keycloak-js": "^15.1.1",
@@ -31,11 +31,11 @@
         "@vue/cli-service": "^5.0.8",
         "@vue/test-utils": "^1.3.0",
         "axios-mock-adapter": "^1.22.0",
-        "eslint-plugin-vue": "^9.25.0",
+        "eslint-plugin-vue": "^9.26.0",
         "eslint-plugin-vuetify": "^1.1.0",
         "lodash": "^4.17.21",
         "prettier": "^3.2.5",
-        "sass": "^1.75.0",
+        "sass": "^1.77.1",
         "sass-loader": "^14.2.1",
         "vue-cli-plugin-vuetify": "^2.5.8",
         "vue-template-compiler": "^2.7.16",
@@ -5993,9 +5993,9 @@
       "dev": true
     },
     "node_modules/core-js": {
-      "version": "3.37.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz",
-      "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==",
+      "version": "3.37.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
+      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -7068,9 +7068,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.25.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.25.0.tgz",
-      "integrity": "sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==",
+      "version": "9.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
+      "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -14128,9 +14128,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.75.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
-      "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
+      "version": "1.77.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz",
+      "integrity": "sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
diff --git a/demo/vue/app/frontend/package.json b/demo/vue/app/frontend/package.json
index 2c9797f4..3ad9c733 100644
--- a/demo/vue/app/frontend/package.json
+++ b/demo/vue/app/frontend/package.json
@@ -21,7 +21,7 @@
     "@bcgov/bc-sans": "^2.1.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "axios": "^1.6.8",
-    "core-js": "^3.37.0",
+    "core-js": "^3.37.1",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
     "keycloak-js": "^15.1.1",
@@ -39,11 +39,11 @@
     "@vue/cli-service": "^5.0.8",
     "@vue/test-utils": "^1.3.0",
     "axios-mock-adapter": "^1.22.0",
-    "eslint-plugin-vue": "^9.25.0",
+    "eslint-plugin-vue": "^9.26.0",
     "eslint-plugin-vuetify": "^1.1.0",
     "lodash": "^4.17.21",
     "prettier": "^3.2.5",
-    "sass": "^1.75.0",
+    "sass": "^1.77.1",
     "sass-loader": "^14.2.1",
     "vue-cli-plugin-vuetify": "^2.5.8",
     "vue-template-compiler": "^2.7.16",
diff --git a/demo/vue/app/package-lock.json b/demo/vue/app/package-lock.json
index 94d30488..748f2414 100644
--- a/demo/vue/app/package-lock.json
+++ b/demo/vue/app/package-lock.json
@@ -22,7 +22,7 @@
         "fs-extra": "^11.2.0",
         "js-yaml": "^4.1.0",
         "jsonwebtoken": "^9.0.2",
-        "keycloak-connect": "^24.0.3",
+        "keycloak-connect": "^24.0.4",
         "winston": "^3.13.0",
         "winston-transport": "^4.7.0"
       },
@@ -7556,9 +7556,9 @@
       }
     },
     "node_modules/keycloak-connect": {
-      "version": "24.0.3",
-      "resolved": "https://registry.npmjs.org/keycloak-connect/-/keycloak-connect-24.0.3.tgz",
-      "integrity": "sha512-kG3JH9MvttJMyGgXAvfxBj4/G5PAIFZQBNjaZ0gVcE28qspRpUKAazLnFj1L7oISOeSVXFEF4JJBwDPbnNeGKg==",
+      "version": "24.0.4",
+      "resolved": "https://registry.npmjs.org/keycloak-connect/-/keycloak-connect-24.0.4.tgz",
+      "integrity": "sha512-MaXcNEvvNM7z4QBw2oBAj7iAkH8BFMIO3REP6eXok5C6CfKC0ljS4byeXic6EQ0tBT5OtV9s4Xcv4aCqSWHtZA==",
       "dependencies": {
         "jwk-to-pem": "^2.0.0"
       },
diff --git a/demo/vue/app/package.json b/demo/vue/app/package.json
index b2871cd4..0a78fb82 100644
--- a/demo/vue/app/package.json
+++ b/demo/vue/app/package.json
@@ -44,7 +44,7 @@
     "fs-extra": "^11.2.0",
     "js-yaml": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
-    "keycloak-connect": "^24.0.3",
+    "keycloak-connect": "^24.0.4",
     "winston": "^3.13.0",
     "winston-transport": "^4.7.0"
   },
diff --git a/oidc-controller/requirements.txt b/oidc-controller/requirements.txt
index 03a43722..f3d69eef 100644
--- a/oidc-controller/requirements.txt
+++ b/oidc-controller/requirements.txt
@@ -1,7 +1,7 @@
-fastapi==0.110.3
-jinja2==3.1.3
+fastapi==0.111.0
+jinja2==3.1.4
 oic==1.7.0
-pymongo==4.7.1
+pymongo==4.7.2
 pyop==3.4.1
 python-multipart==0.0.9 # required by fastapi to serve/upload files
 qrcode[pil]==7.4.2

From 64c3fbf43886c69821bf6fd6b756333858fabbc9 Mon Sep 17 00:00:00 2001
From: Lucas ONeil <lucasoneil@gmail.com>
Date: Tue, 14 May 2024 16:29:24 -0700
Subject: [PATCH 2/2] Deep link pending

Signed-off-by: Lucas ONeil <lucasoneil@gmail.com>

tweak

Signed-off-by: Lucas ONeil <lucasoneil@gmail.com>
---
 .../api/templates/verified_credentials.html   | 425 +++++++++---------
 1 file changed, 221 insertions(+), 204 deletions(-)

diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 7e3acc7e..c04320f6 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -2,9 +2,11 @@
 <html>
   <head>
     <title>Scan QR Code</title>
-    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" 
-      integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" 
-      crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.socket.io/4.7.5/socket.io.min.js"
+      integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
+      crossorigin="anonymous"
+    ></script>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
     <meta
@@ -55,7 +57,7 @@
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
       }
-     .qr-code {
+      .qr-code {
         display: flex;
         justify-content: center;
         position: relative;
@@ -163,7 +165,7 @@
         border-color: var(--bs-primary);
         --bs-btn-hover-color: var(--bs-primary);
         --bs-btn-active-bg: #fff;
-        --bs-btn-hover-bg:  #fff;
+        --bs-btn-hover-bg: #fff;
       }
       /* Mobile device */
       .mobile-device {
@@ -181,24 +183,26 @@
           <!-- If the BC_ID is clicked on 10 times in a row, display the link textbox -->
           <div v-html="svgContent" v-on:click="bcIdClicks++"></div>
         </nav>
-        <h1 class="my-2">
-          [[ headerText ]]
-        </h1>
+        <h1 class="my-2">[[ headerText ]]</h1>
         <div class="d-flex flex-row justify-content-center">
-          <status-description key="state.current" :current-state="state.current"> </status-description>
+          <status-description
+            key="state.current"
+            :current-state="state.current"
+          >
+          </status-description>
         </div>
         <div class="mx-3">
-          <error-message v-if="failed"></error-message >
+          <error-message v-if="failed"></error-message>
           <!-- BC Wallet deep link if the user agent is a mobile device -->
           <div v-if="mobileDevice && !failed">
             <a
               id="deep-link-button"
               href="{{wallet_deep_link}}"
-              type="submit"
               class="btn btn-lg btn-block btn-primary w-100 my-2 rounded-1"
               title="Open BC Wallet"
               target="_blank"
               :class="{disabled: state.disableDeeplink}"
+              v-on:click="deepLinkOpen"
             >
               BC Wallet
             </a>
@@ -215,11 +219,12 @@ <h1 class="my-2">
           </div>
         </div>
         <div v-if="displayQr && !failed">
-          <div v-if="state.current === 'intro'" class="d-flex flex-row justify-content-center">
+          <div
+            v-if="state.current === 'intro'"
+            class="d-flex flex-row justify-content-center"
+          >
             <div class="header-desc intro my-2">
-              <div class="qr-code-image">
-                {{add_asset("hand-qrcode.svg")}}
-              </div>
+              <div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
               <div class="text-start mx-2">
                 Scanning this QR code will send you a request to share your
                 information
@@ -276,15 +281,15 @@ <h1 class="my-2">
           <a
             title="Download BC Wallet"
             href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
-          >Download the BC Wallet app
+            >Download the BC Wallet app
           </a>
         </p>
       </div>
     </div>
-    </div>
 
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   </body>
+
   <!-- Components -->
   <script type="text/x-template" id="status-description">
     <div v-if="status">
@@ -326,108 +331,123 @@ <h1 class="my-2">
     </div>
   </script>
   <script type="text/javascript">
-   const { createApp, ref, reactive, computed, watch } = Vue;
+    const { createApp, ref, reactive, computed, watch } = Vue;
 
-   /**
-    * @typedef  {"intro" |"verified" | "failed" | "pending"| "expired" |"abandoned"} AppStates
-    */
-   const state = reactive({
-     /**
-      * @type {AppStates}
-      */
-     current: "intro",
-     showSpinner: false,
-     showScanned: false,
-     showRefresh: false,
-     disableDeeplink: false,
-   });
-   const getBrowser = () => {
-     let userAgent = navigator.userAgent || navigator.vendor;
+    /**
+     * @typedef  {"intro" |"verified" | "failed" | "pending"| "expired" |"abandoned"} AppStates
+     */
+    const state = reactive({
+      /**
+       * @type {AppStates}
+       */
+      current: "intro",
+      showSpinner: false,
+      showScanned: false,
+      showRefresh: false,
+      disableDeeplink: false,
+    });
+    const getBrowser = () => {
+      let userAgent = navigator.userAgent || navigator.vendor;
 
-     if (/android/i.test(userAgent)) {
-       return "Android";
-     }
+      if (/android/i.test(userAgent)) {
+        return "Android";
+      }
 
-     if (
-       /iPad|iPhone|iPod/.test(userAgent) ||
-       (/Macintosh/.test(userAgent) && "ontouchend" in document) ||
-       (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ||
-       (navigator.vendor && navigator.vendor.indexOf("Apple") > -1)
-     ) {
-       return "iOS";
-     }
+      if (
+        /iPad|iPhone|iPod/.test(userAgent) ||
+        (/Macintosh/.test(userAgent) && "ontouchend" in document) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ||
+        (navigator.vendor && navigator.vendor.indexOf("Apple") > -1)
+      ) {
+        return "iOS";
+      }
 
-     return "unknown";
-   };
+      return "unknown";
+    };
 
-   const app = createApp({
-     data() {
-       const mobileDevice = ref(
-         getBrowser() === "Android" || getBrowser() === "iOS" ? true : false
-       );
-       const failed = computed(() => state.current === "failed")
+    const app = createApp({
+      data() {
+        const mobileDevice = ref(
+          getBrowser() === "Android" || getBrowser() === "iOS" ? true : false
+        );
+        const failed = computed(() => state.current === "failed");
 
-       return {
-         mobileDevice,
-         state,
-         failed,
-         headerText: mobileDevice.value ? "Continue with:" : "Scan with a Digital Wallet",
-         displayQr: mobileDevice.value ? false : true,
-         svgContent: `{{add_asset("BCID_H_rgb_rev.svg")}}`,
-         bcIdClicks: 0,
-         socket: null,
-       };
-     },
-     methods: {
-       // Only used on mobile devices to toggle the qrcode using the button
-       toggleQr() {
-         this.displayQr = !this.displayQr;
-       },
-       reload() {
-         window.location.reload(true);
-       },
-     },
-     mounted() {
-       /**
-        * Initialize the Websocket
-        */
-       this.socket = io(location.host, {
-         path: "/ws/socket.io",
-         autoConnect: false,
-       });
+        return {
+          mobileDevice,
+          state,
+          failed,
+          headerText: mobileDevice.value
+            ? "Continue with:"
+            : "Scan with a Digital Wallet",
+          displayQr: mobileDevice.value ? false : true,
+          svgContent: `{{add_asset("BCID_H_rgb_rev.svg")}}`,
+          bcIdClicks: 0,
+          socket: null,
+        };
+      },
+      methods: {
+        deepLinkOpen() {
+          this.setUiStates("pending");
+        },
+        // Only used on mobile devices to toggle the qrcode using the button
+        toggleQr() {
+          this.displayQr = !this.displayQr;
+        },
+        reload() {
+          window.location.reload(true);
+        },
+        setUiStates(status) {
+          state.current = status;
+          state.showSpinner = status === "pending";
+          state.showScanned = ["pending", "verified"].includes(status);
+          state.showRefresh = ["abandoned", "expired", "failed"].includes(
+            status
+          );
+          state.disableDeeplink = [
+            "abandoned",
+            "expired",
+            "pending",
+            "verified",
+          ].includes(status);
+        }
+      },
+      mounted() {
+        /**
+         * Initialize the Websocket
+         */
+        this.socket = io(location.host, {
+          path: "/ws/socket.io",
+          autoConnect: false,
+        });
 
-       this.socket.on("connect", () => {
-         this.socket.emit("initialize", { pid: "{{pid}}" });
-       });
+        this.socket.on("connect", () => {
+          this.socket.emit("initialize", { pid: "{{pid}}" });
+        });
 
-       this.socket.on("status", (data) => {
-         console.log("Toggling state", data.status);
-         state.current = data.status
-         state.showSpinner = data.status === "pending";
-         state.showScanned = ["verified", "pending"].includes(data.status);
-         state.showRefresh = ["failed", "expired", "abandoned"].includes(data.status);
-         state.disableDeeplink =  ["expired", "success"].includes(data.status)
-         console.log("Toggling state", this.state);
-       });
+        this.socket.on("status", (data) => {
+          console.log("Toggling state", data.status);
+          this.setUiStates(data.status);
+          console.log("Toggling state", this.state);
+        });
 
-       this.socket.connect();
-       let timer;
+        this.socket.connect();
+        let timer;
 
-       /**
-        * Check status through polling
-        * This functionality is mostly replaced by the websocket.
-        * However, it is still used to trigger the api to calculate
-        * if the proof has expired or not. The websocket in turn handles
-        * all other functionality.
-        */
-       const checkStatus = () => {
-         const host = window.location.origin;
-         const url = host + "{{challenge_poll_uri}}" + "/{{pid}}";
+        /**
+         * Check status through polling
+         * This functionality is mostly replaced by the websocket.
+         * However, it is still used to trigger the api to calculate
+         * if the proof has expired or not. The websocket in turn handles
+         * all other functionality.
+         */
+        const checkStatus = () => {
+          const host = window.location.origin;
+          const url = host + "{{challenge_poll_uri}}" + "/{{pid}}";
 
-         fetch(url)
-           .then((res) => res.json())
-           .then((data) => {
-             /*
+          fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+              /*
                 Possible states:
                 - not_started
                 - pending
@@ -435,102 +455,99 @@ <h1 class="my-2">
                 - failed
                 - expired
               */
-             if (["verified", "failed", "expired"].includes(data.proof_status)) {
-               clearInterval(timer);
-             }
-           })
-           .catch((err) => {
-             console.log("Server responded with an error.", err);
-           });
-       };
-
-       /**
-        * Until something better comes along... check status every 2 seconds
-        */
-       timer = setInterval(() => {
-         checkStatus();
-       }, 2000);
+              if (
+                ["verified", "failed", "expired"].includes(data.proof_status)
+              ) {
+                clearInterval(timer);
+              }
+            })
+            .catch((err) => {
+              console.log("Server responded with an error.", err);
+            });
+        };
 
-     },
-     delimiters: ["[[", "]]"],
-
-   })
-   const updateStatus = (currentState) => {
-     console.log(currentState)
-     switch (currentState) {
-       case "verified":
-         setTimeout(() => {
-           window.location.replace("{{callback_url}}", { method: "POST" });
-         }, 2000);
-         return {
-           className: "success",
-           icon: `{{add_asset("circle-check.svg")}}`,
-           title: "Success!",
-           text: "You will be redirected shortly.",
-         }
-       case "failed":
-         return {
-           className: "failed",
-           icon: `{{add_asset("circle-x.svg")}}`,
-           title:"Proof not accepted.",
-           link: "Please try again.",
-         }
-       case "expired":
-         return {
-           className: "expired",
-           icon: `{{add_asset("expired.svg")}}`,
-           title: "Proof has expired.",
-           link: "Refresh Proof",
-         }
-       case "abandoned":
-         return {
-           className: "abandoned",
-           icon: `{{add_asset("circle-x.svg")}}`,
-           title: "Proof declined",
-           link: "Try again" ,
-         }
-         // The proof has been pending for too long
-       case "timeout":
-         return {
-           className: "pending",
-           icon: `{{add_asset("hourglass.svg")}}`,
-           title: "Proof is pending.",
-           text: "Taking too long?",
-           link: "Try again.",
-         }
-       case "pending":
-         setInterval(() => {
-           if (state.current === "pending")
-             state.current = "timeout";
-         }, 60000)
-         return {
-           className: "pending",
-           icon: `{{add_asset("hourglass.svg")}}`,
-           title: "Proof is pending.",
-         }
-     }
-     return null
-   }
-   app.component( "error-message", {
-       template: `#error-message`,
-   })
-   app.component(
-     "status-description",
-     {
-       template: `#status-description`,
-       props: {
-         currentState: {
-           required: true
-       }},
-       setup(props) {
-         const status = computed(() => updateStatus(props.currentState))
-         return {
-           status
-         }
-       },
-       delimiters: ["[[", "]]"],
-
-   })
-   app.mount("#app");
+        /**
+         * Until something better comes along... check status every 2 seconds
+         */
+        timer = setInterval(() => {
+          checkStatus();
+        }, 2000);
+      },
+      delimiters: ["[[", "]]"],
+    });
+    const updateStatus = (currentState) => {
+      console.log(currentState);
+      switch (currentState) {
+        case "verified":
+          setTimeout(() => {
+            window.location.replace("{{callback_url}}", { method: "POST" });
+          }, 2000);
+          return {
+            className: "success",
+            icon: `{{add_asset("circle-check.svg")}}`,
+            title: "Success!",
+            text: "You will be redirected shortly.",
+          };
+        case "failed":
+          return {
+            className: "failed",
+            icon: `{{add_asset("circle-x.svg")}}`,
+            title: "Proof not accepted.",
+            link: "Please try again.",
+          };
+        case "expired":
+          return {
+            className: "expired",
+            icon: `{{add_asset("expired.svg")}}`,
+            title: "Proof has expired.",
+            link: "Refresh Proof",
+          };
+        case "abandoned":
+          return {
+            className: "abandoned",
+            icon: `{{add_asset("circle-x.svg")}}`,
+            title: "Proof declined",
+            link: "Try again",
+          };
+        // The proof has been pending for too long
+        case "timeout":
+          return {
+            className: "pending",
+            icon: `{{add_asset("hourglass.svg")}}`,
+            title: "Proof is pending.",
+            text: "Taking too long?",
+            link: "Try again.",
+          };
+        case "pending":
+          setInterval(() => {
+            if (state.current === "pending") state.current = "timeout";
+          }, 60000);
+          return {
+            className: "pending",
+            icon: `{{add_asset("hourglass.svg")}}`,
+            title: "Proof is pending.",
+          };
+      }
+      return null;
+    };
+    app.component("error-message", {
+      template: `#error-message`,
+    });
+    app.component("status-description", {
+      template: `#status-description`,
+      props: {
+        currentState: {
+          required: true,
+        },
+      },
+      setup(props) {
+        const status = computed(() => updateStatus(props.currentState));
+        return {
+          status,
+        };
+      },
+      delimiters: ["[[", "]]"],
+    });
+    app.mount("#app");
   </script>
 </html>