KYC: ignore all message events that do not contain status field i…

…n event data (#3598) * Fix(KYC): ignore all message events that do not contain status in the event data * Fix(KYC): remove event listener on unmount * Fix(KYC): add waiting for the manual verification response * WIP(KYC): add terms and conditions dialog (#3610) * (KYC): add terms and condetions dialog * KYC(TC): rephrase dialog words * Update packages/playground/src/components/KycVerifier.vue Co-authored-by: Amira <[email protected]> --------- Co-authored-by: Amira <[email protected]> --------- Co-authored-by: Amira <[email protected]>
threefoldtech · Nov 11, 2024 · a9a62b8 · a9a62b8
1 parent 06a9b97
commit a9a62b8
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 31 deletions.
diff --git a/packages/playground/src/components/KycVerifier.vue b/packages/playground/src/components/KycVerifier.vue
@@ -1,24 +1,58 @@
 <template>
-  <v-dialog
-    v-if="!loading && token"
-    fullscreen
-    :model-value="moduleValue"
-    @update:model-value="handleUpdateDialog($event)"
-    width="100%"
-    class="w-100 h-100 d-flex justify-center align-center"
-  >
-    <iframe
-      id="iframe"
-      allowfullscreen
-      style="width: 100%; height: 100%; border: none"
-      :src="`https://ui.idenfy.com/?authToken=${token}`"
-      allow="camera"
-    />
+  <v-dialog opacity="0" :model-value="moduleValue">
+    <v-dialog
+      v-if="!loading && agreed && token"
+      fullscreen
+      :model-value="kycDialog"
+      @update:model-value="handleUpdateDialog($event)"
+      width="100%"
+      class="w-100 h-100 d-flex justify-center align-center"
+    >
+      <iframe
+        id="iframe"
+        allowfullscreen
+        style="width: 100%; height: 100%; border: none"
+        :src="`https://ui.idenfy.com/?authToken=${token}`"
+        allow="camera"
+      />
+    </v-dialog>
+    <v-dialog
+      v-model="agreementDialog"
+      @update:model-value="($event: boolean) => !$event ? handleUpdateDialog($event) : undefined"
+      max-width="700"
+    >
+      <v-card>
+        <v-card-title class="bg-primary d-flex align-center">
+          <v-icon icon="mdi-security" />
+          <div class="pl-2">Terms & Conditions</div>
+        </v-card-title>
+
+        <v-card-text class="pb-0">
+          We use iDenfy to verify your identity.
+          <br />
+          Please ensure you review iDenfy’s <span class="font-weight-bold">Security and Compliance</span>, which includes
+          their <span class="font-weight-bold">Terms & Conditions, Privacy Policy</span>, and other relevant documents.
+          <v-checkbox hide-details v-model="agreedCheckbox">
+            <template v-slot:label>
+              <div>
+                I have read and agreed to
+
+                <a href="https://www.idenfy.com/security/" target="_blank" @click.stop> iDenfy Terms & Conditions</a>.
+              </div>
+            </template>
+          </v-checkbox>
+        </v-card-text>
+        <v-card-actions class="justify-end my-1 mr-2">
+          <v-btn color="anchor" @click="handleAgreementDialog(false)">Cancel</v-btn>
+          <v-btn :disabled="!agreedCheckbox" @click="handleAgreementDialog(true)">Continue</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-dialog>
 </template>
 <script lang="ts">
 import { KycErrors } from "@threefold/types";
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 
 import { useKYC } from "@/stores/kyc";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
@@ -35,19 +69,37 @@ export default {
       required: true,
     },
   },
-  emits: ["update:moduleValue", "loaded"],
+  emits: ["update:moduleValue", "update:loading"],
   setup(props, { emit }) {
     const kyc = useKYC();
     const token = ref("");
-
+    const kycDialog = ref(false);
+    const agreementDialog = ref(true);
+    const agreed = ref(false);
+    const agreedCheckbox = ref(false);
     const handleUpdateDialog = (event: boolean) => {
       emit("update:moduleValue", event);
     };
-
+    const handleAgreementDialog = (agreed: boolean) => {
+      console.log("agreed", agreed);
+      if (!agreed) handleUpdateDialog(false);
+      else {
+        agreementDialog.value = false;
+        getToken();
+      }
+    };
+    const handleUpdateLoading = (event: boolean) => {
+      emit("update:loading", event);
+    };
     const getToken = async () => {
       try {
+        handleUpdateLoading(true);
+        agreed.value = true;
         if (!kyc.client) throw new Error("KYC client is not initialized");
+        await new Promise(r => setTimeout(r, 3000)); // wait for the dialog to be closed
         token.value = await kyc.client.getToken();
+        window.addEventListener("message", handleReceiveMessage, false);
+        kycDialog.value = true;
       } catch (e) {
         handleUpdateDialog(false);
         if (e instanceof KycErrors.AlreadyVerified) {
@@ -58,12 +110,14 @@ export default {
         createCustomToast((e as KycErrors.TFGridKycError).message, ToastType.danger);
         console.error(e);
       } finally {
-        emit("loaded");
+        handleUpdateLoading(false);
       }
     };
 
-    const handleReceiveMessage = (event: MessageEvent) => {
+    const handleReceiveMessage = async (event: MessageEvent) => {
+      if (event.data?.status == undefined || event.data?.manualStatus == "waiting") return;
       window.removeEventListener("message", handleReceiveMessage, false);
+      await new Promise(r => setTimeout(r, 5000)); // wait for the verification to be completed
       handleUpdateDialog(false); // close the dialog
       if (!event.data.status) console.error("Can't check the verification status", event.data);
       const status = (event.data.status as string).toLowerCase();
@@ -73,11 +127,17 @@ export default {
       } else if (status === "failed") createCustomToast("Verification failed, Please try again", ToastType.danger);
       else if (status === "unverified") createCustomToast("Verification canceled", ToastType.info);
     };
-    window.addEventListener("message", handleReceiveMessage, false);
-    onMounted(getToken);
+    onMounted(() => (agreementDialog.value = true));
+    onUnmounted(() => window.removeEventListener("message", handleReceiveMessage, false));
     return {
+      kycDialog,
+      getToken,
       handleUpdateDialog,
+      handleAgreementDialog,
       token,
+      agreementDialog,
+      agreed,
+      agreedCheckbox,
     };
   },
 };

diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
@@ -3,7 +3,7 @@
     <KycVerifier
       v-if="kycDialog"
       :loading="kycDialogLoading"
-      @loaded="kycDialogLoading = false"
+      @update:loading="kycDialogLoading = $event"
       :moduleValue="kycDialog"
       @update:moduleValue="kycDialog = $event"
     />
@@ -143,7 +143,8 @@
                         :align-center="true"
                         :class="'d-flex align-center'"
                         location="end"
-                      /></div></v-list-item
+                      />
+                    </div> </v-list-item
                 ></v-col>
               </v-row>
               <v-row class="row-style">
@@ -160,17 +161,14 @@
                           text="Verify now"
                           size="small"
                           color="warning"
-                          @click="
-                            kycDialog = true;
-                            kycDialogLoading = true;
-                          "
+                          @click="kycDialog = true"
                           :loading="kycDialogLoading"
                         >
                           <template #prepend>
                             <v-icon>mdi-shield-plus</v-icon>
                           </template>
                         </v-btn>
-                        <p v-if="insufficientBalance" class="mt-1 text-caption text-red">
+                        <p v-if="balance && insufficientBalance" class="mt-1 text-caption text-red">
                           You need to have at least 100 TFT
                         </p>
                       </div>
@@ -179,7 +177,8 @@
                         :align-center="true"
                         :class="'d-flex align-center'"
                         location="end"
-                      /></div></v-list-item
+                      />
+                    </div> </v-list-item
                 ></v-col>
               </v-row>
             </v-list>
@@ -431,6 +430,7 @@ export default {
   .custom-list {
     font-size: 13px !important;
   }
+
   .edit_pen {
     display: inline-block !important;
   }