all screens are fixed with minor changes need to be updated

hypersign-protocol · Dec 6, 2024 · 59692ad · 59692ad
1 parent 36562b9
commit 59692ad
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 139 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -101,7 +101,7 @@ export default {
           id: 7,
           isActive: false,
           stepName: 'UserConsent',
-          name: 'Provide User Consent',
+          name: 'User Consent',
           previous: 6,
           isEnabled: true,
           stepTitle: 'Provide consent of your data to be shared with the verifier app',

diff --git a/src/components/commons/InfoMessage.vue b/src/components/commons/InfoMessage.vue
@@ -1,9 +1,9 @@
 <template>
-  <p class="consent-message">
+  <div class="consent-message">
     <span>
       {{ message }}
     </span>
-  </p>
+  </div>
 </template>
 
 <script>
@@ -20,8 +20,7 @@ export default {
 <style type="text/css" scoped>
 .consent-message {
   color: grey;
-  /* padding: 5px; */
-  padding-top: 5px;
+  padding: 5px;
   font-size: x-small;
 }
 </style>
diff --git a/src/components/commons/MessageBox.vue b/src/components/commons/MessageBox.vue
@@ -3,7 +3,7 @@
   bottom: 9%;
   width: 100%;
   height: 100%;
-  border-radius: 2px 2px 20px 20px;
+  border-radius: 2px 2px 2px 2px;
   z-index: 100;
   text-align: left;
   padding-left: 5px;

diff --git a/src/components/commons/NavBar.vue b/src/components/commons/NavBar.vue
@@ -8,9 +8,45 @@
           </v-btn>
           <v-toolbar-title class="grey--text text--darken-4"> {{ getActiveStep.name }} ({{ getActiveStep.id - length - lengthToMinus }}/{{ kycStepsLength }}) </v-toolbar-title>
           <v-spacer></v-spacer>
-          <v-btn icon light>
-            <v-icon color="grey darken-2">mdi-magnify</v-icon>
-          </v-btn>
+          <v-menu bottom left offset-y="true">
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn icon text v-bind="attrs" v-on="on">
+                <!-- <i class="bi bi-list"></i> -->
+                <i class="bi bi-three-dots-vertical"></i>
+              </v-btn>
+            </template>
+            <!-- <v-list>
+              <v-list-item>
+                <v-list-item-title>Item 1</v-list-item-title>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title>Item 2</v-list-item-title>
+              </v-list-item>
+            </v-list> -->
+            <v-card class="mx-auto" max-width="300" tile>
+              <v-list dense>
+                <v-subheader>MENU</v-subheader>
+                <v-list-item-group v-model="selectedItem" color="primary">
+                  <v-list-item>
+                    <v-list-item-icon>
+                      <i class="bi bi-list"></i>
+                    </v-list-item-icon>
+                    <v-list-item-content>
+                      <v-list-item-title>Item 1</v-list-item-title>
+                    </v-list-item-content>
+                  </v-list-item>
+                  <v-list-item>
+                    <v-list-item-icon>
+                      <i class="bi bi-list"></i>
+                    </v-list-item-icon>
+                    <v-list-item-content>
+                      <v-list-item-title>Item 2</v-list-item-title>
+                    </v-list-item-content>
+                  </v-list-item>
+                </v-list-item-group>
+              </v-list>
+            </v-card>
+          </v-menu>
         </v-toolbar>
       </v-card>
     </v-col>

diff --git a/src/components/commons/Preview.vue b/src/components/commons/Preview.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="kyc-container">
-    <!-- <PageHeading :header="'Preview'" :subHeader="'Please verify if your data is correct before sumitting'" /> -->
+    <!-- <v-row>
+      <v-col>
+        <InfoMessage message="Please verify if your informations are correct" class="notShowOnMobile" />
+        <InfoMessage message="Verify Your Information" class="showOnMobile" />
+      </v-col>
+    </v-row> -->
+    <div class="row">
+      <div class="col-md-12">
+        <InfoMessage message="Please verify if your informations are correct" class="notShowOnMobile" />
+        <!-- <InfoMessage message="Verify Your Information" class="showOnMobile" /> -->
+      </div>
+    </div>
     <div class="row">
       <div class="col-md-12" style="text-align: left">
-        <InfoMessage message="Please verify if your informations are correct" />
         <v-card class="preview profile-card">
           <div class="profile-image">
-            <v-avatar size="100">
+            <v-avatar size="100" class="elevation-3">
               <img :src="`data:image/png;base64, ${$store.state.kycExtractedData.extractionRaw.ocr.FACE}`" />
             </v-avatar>
           </div>
@@ -24,31 +34,6 @@
               </template>
             </v-simple-table>
           </div>
-          <!-- <div class="row center">
-            <div class="col-4">
-              <div class="mt-1" style="align-items: baseline">
-                <v-badge overlap bordered bottom color="green accent-5" dot offset-x="15" offset-y="15" :content="$store.state.kycExtractedData.extractionRaw.ocr.OVERALL_RATING">
-                  <v-avatar size="100">
-                    <img :src="`data:image/png;base64, ${$store.state.kycExtractedData.extractionRaw.ocr.FACE}`" />
-                  </v-avatar>
-                </v-badge>
-              </div>
-            </div>
-            <div class="col-12">
-              <v-simple-table style="text-align: left">
-                <template v-slot:default>
-                  <tbody>
-                    <tr v-for="(data, idx) in Object.entries(extractedData)" v-bind:key="idx">
-                      <td>
-                        <strong>{{ snakeToPascal(data[0]) }}</strong>
-                      </td>
-                      <td style="">{{ data[1] }}</td>
-                    </tr>
-                  </tbody>
-                </template>
-              </v-simple-table>
-            </div>
-          </div> -->
         </v-card>
       </div>
     </div>
@@ -85,7 +70,6 @@ export default {
       isToast: false,
     }
   },
-
   methods: {
     ...mapActions(['verifyResult']),
     ...mapMutations(['nextStep', 'previousStep']),
@@ -159,30 +143,34 @@ export default {
   overflow-y: scroll;
 }
 
+.showOnMobile {
+  display: none;
+}
+.notShowOnMobile {
+  display: block;
+}
 @media (max-width: 768px) {
   .preview {
     max-height: 500px;
   }
+  .showOnMobile {
+    display: block;
+  }
+  .notShowOnMobile {
+    display: none;
+  }
 }
 
 .profile-image {
   position: fixed;
-  top: 30px; /* Adjusted so half the image is outside the card */
+  top: 82px; /* Adjusted so half the image is outside the card */
   left: 50%;
   transform: translateX(-50%);
-  width: 100px; /* Adjust the size of the image */
-  height: 100px; /* Adjust the size of the image */
-  border-radius: 50%;
-  border: 4px solid #fff; /* Optional border around the image */
-  background: #fff;
+  /* border-radius: 50%; */
+  /* border: 4px solid #fff; */
+  /* background: #fff; */
   overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.profile-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
 }
 
 .profile-details {

diff --git a/src/components/commons/authButtons/ConnectWalletButton.vue b/src/components/commons/authButtons/ConnectWalletButton.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <button type="button" class="btn btn-outline-dark btn-lg mb-2" @click="connectWallet()" :disabled="isDisable">
+    <v-btn type="button" class="btn btn-outline-dark btn-lg mb-2" @click="connectWallet()" :disabled="isDisable">
       <img src="../../../assets/keplr.jpeg" class="rounded" style="width: 20px" alt="Avatar" />
       Connect Keplr Wallet
-    </button>
+    </v-btn>
   </div>
 </template>
 <script>

diff --git a/src/components/commons/authButtons/ConnectWalletButtonDiam.vue b/src/components/commons/authButtons/ConnectWalletButtonDiam.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <button type="button" class="btn btn-outline-dark btn-lg mb-2" @click="connectWallet()" :disabled="isDisable || !ifDiamInstalled">
+    <v-btn type="button" class="btn btn-outline-dark btn-lg mb-2" @click="connectWallet()" :disabled="isDisable || !ifDiamInstalled">
       <img :src="getChainDetail().logoUrl" class="rounded" style="width: 20px" alt="Avatar" />
       Connect DIAM Wallet
-    </button>
+    </v-btn>
     <small style="color: indianred; text-decoration: underline" v-if="!ifDiamInstalled"><a href="https://chromewebstore.google.com/detail/diam-wallet/oakkognifoojdbfjaccegangippipdmn?hl=en" target="_blank">DIAM Wallet extention</a> not installed in your browser</small>
   </div>
 </template>

diff --git a/src/components/e-kyc/Result.vue b/src/components/e-kyc/Result.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card-body">
     <PageHeading :header="'Congratulations!'" style="text-align: center" />
-    <div class="center" style="margin-top: 3%">
+    <div class="center mt-3">
       <div class="row" v-if="getFinalResult">
         <div class="col-md-12 center">
           <ul style="list-style-type: none">
@@ -12,7 +12,7 @@
               <h5>Your identity is verified!</h5>
             </li>
             <li>
-              <h6>You will be redirected back to verifier app in {{ maxTimeOut }}</h6>
+              <h6>You will be redirected back to the verifier app in {{ maxTimeOut }}</h6>
             </li>
           </ul>
         </div>

diff --git a/src/components/e-kyc/UserConsent.vue b/src/components/e-kyc/UserConsent.vue
@@ -2,76 +2,99 @@
   <div>
     <div class="card-body min-h-36">
       <load-ing :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></load-ing>
-      <PageHeading :header="'User Consent'" style="text-align: center" />
-
-      <div class="widget-card widget-card-width" v-if="getPresentationRequestParsed">
-        <div class="row">
-          <div class="col-md-2">
-            <img :src="getPresentationRequestParsed.logoUrl" class="avatar" v-if="getPresentationRequestParsed.logoUrl" />
-            <i class="bi bi-robot avatar" style="font-size: xxx-large; display: inline-block" v-else></i>
-          </div>
-          <div class="col-md-10" style="text-align: left; font-size: large">
-            <div class="row center-text-align" v-if="getPresentationRequestParsed.domain">
-              <div class="col-md-12">
-                {{ getPresentationRequestParsed.domain }}
-              </div>
+      <!-- <PageHeading :header="'User Consent'" style="text-align: center" /> -->
+      <div class="kyc-container">
+        <v-card class="mx-auto" outlined style="text-align: start">
+          <v-list-item three-line>
+            <v-list-item-content>
+              <div v-if="getPresentationRequestParsed.domain">{{ getPresentationRequestParsed.domain }}</div>
+              <v-list-item-subtitle v-if="getPresentationRequestParsed.reason">{{ getPresentationRequestParsed.reason }}</v-list-item-subtitle>
+              <v-list-item-subtitle v-else>The verifier app needs the following information to allow you use their serivce</v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-avatar tile size="80">
+              <img :src="getPresentationRequestParsed.logoUrl" class="avatar" v-if="getPresentationRequestParsed.logoUrl" />
+              <i class="bi bi-robot avatar" style="font-size: xxx-large; display: inline-block" v-else></i>
+            </v-list-item-avatar>
+          </v-list-item>
+        </v-card>
+        <!-- <v-card class="widget-card widget-card-width" v-if="getPresentationRequestParsed">
+          <div class="row">
+            <div class="col-md-2">
+              <img :src="getPresentationRequestParsed.logoUrl" class="avatar" v-if="getPresentationRequestParsed.logoUrl" />
+              <i class="bi bi-robot avatar" style="font-size: xxx-large; display: inline-block" v-else></i>
             </div>
-            <div class="row center-text-align" style="color: grey; font-size: smaller">
-              <div class="col-md-12">
-                <span v-if="getPresentationRequestParsed.reason">
-                  {{ getPresentationRequestParsed.reason }}
-                </span>
-                <span v-else> verifier app needs your information to allow you serivce </span>
+            <div class="col-md-10" style="text-align: left; font-size: large">
+              <div class="row center-text-align" v-if="getPresentationRequestParsed.domain">
+                <div class="col-md-12">
+                  {{ getPresentationRequestParsed.domain }}
+                </div>
+              </div>
+              <div class="row center-text-align" style="color: grey; font-size: smaller">
+                <div class="col-md-12">
+                  <span v-if="getPresentationRequestParsed.reason">
+                    {{ getPresentationRequestParsed.reason }}
+                  </span>
+                  <span v-else>The verifier app needs the following information to allow you use their serivce </span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </v-card> -->
       </div>
+      <div class="mt-1" style="overflow-y: auto; max-height: 335px; text-align: left">
+        <v-list two-line subheader>
+          <v-list-item link v-for="eachCredential in getTrustedIssuersCredentials" v-bind:key="eachCredential.id">
+            <v-list-item-avatar style="border: 1px solid lightgrey">
+              <v-avatar>
+                <!-- <i class="bi bi-clipboard-check"></i> -->
+                <i class="bi bi-person-bounding-box" v-if="eachCredential.type[1] == 'PersonhoodCredential'"></i>
+                <i class="bi bi-calendar3-week" v-if="eachCredential.type[1] == 'DateOfBirthCredential'"></i>
+                <i class="bi bi-globe" v-if="eachCredential.type[1] == 'CitizenshipCredential'"></i>
+                <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'PassportCredential'"></i>
+                <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'GovernmentIdCredential'"></i>
+                <i class="bi bi-person-vcard" v-if="eachCredential.type[1].includes('zkProof') && !eachCredential.type[1].includes('SbtCredential') && listOfEnabledZkCredential"></i>
+                <i class="bi bi-person-badge" v-if="eachCredential.type[1].includes('SbtCredential')"></i>
+              </v-avatar>
+            </v-list-item-avatar>
 
-      <div class="widget-card widget-card-width mt-1" style="overflow-y: auto; max-height: 335px">
-        <div class="list-group mb-1 list-group-flush">
+            <v-list-item-content>
+              <v-list-item-title class="text-overline">{{ eachCredential.type[1] }}</v-list-item-title>
+              <v-list-item-subtitle>{{ shorten(eachCredential.id) }}</v-list-item-subtitle>
+            </v-list-item-content>
+
+            <v-list-item-action>
+              <v-btn icon ripple>
+                <v-switch :input-value="shouldShare(eachCredential)" flat disabled></v-switch>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+        <!-- <div class="list-group mb-1 list-group-flush" style="display: none">
           <a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start" v-for="eachCredential in getTrustedIssuersCredentials" v-bind:key="eachCredential.id">
             <div class="d-flex w-100 justify-content-between">
               <h5 class="mb-1">{{ eachCredential.type[1] }}</h5>
               <small>
                 <div class="form-check form-switch">
                   <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" :checked="shouldShare(eachCredential)" disabled />
                 </div>
-                <!-- <i class="bi bi-person-bounding-box" v-if="eachCredential.type[1] == 'PersonhoodCredential'"></i>
+                <i class="bi bi-person-bounding-box" v-if="eachCredential.type[1] == 'PersonhoodCredential'"></i>
                 <i class="bi bi-calendar3-week" v-if="eachCredential.type[1] == 'DateOfBirthCredential'"></i>
                 <i class="bi bi-globe" v-if="eachCredential.type[1] == 'CitizenshipCredential'"></i>
                 <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'PassportCredential'"></i>
                 <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'GovernmentIdCredential'"></i>
                 <i class="bi bi-person-vcard" v-if="eachCredential.type[1].includes('zkProof') && !eachCredential.type[1].includes('SbtCredential') && listOfEnabledZkCredential"></i>
-                <i class="bi bi-person-badge" v-if="eachCredential.type[1].includes('SbtCredential')"></i> -->
+                <i class="bi bi-person-badge" v-if="eachCredential.type[1].includes('SbtCredential')"></i>
               </small>
             </div>
             <p style="text-align: left"><InfoMessage :message="shorten(eachCredential.id)"></InfoMessage></p>
-            <!-- <small style="text-align: left"><InfoMessage :message="'Valid Until: 12/12/2202'"></InfoMessage></small> -->
+            <small style="text-align: left"><InfoMessage :message="'Valid Until: 12/12/2202'"></InfoMessage></small>
           </a>
-          <!-- <li class="list-group-item d-flex justify-content-between align-items-center" v-for="eachCredential in getTrustedIssuersCredentials" v-bind:key="eachCredential.id">
-            <i class="bi bi-person-bounding-box" v-if="eachCredential.type[1] == 'PersonhoodCredential'"></i>
-            <i class="bi bi-calendar3-week" v-if="eachCredential.type[1] == 'DateOfBirthCredential'"></i>
-            <i class="bi bi-globe" v-if="eachCredential.type[1] == 'CitizenshipCredential'"></i>
-            <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'PassportCredential'"></i>
-            <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'GovernmentIdCredential'"></i>
-            <i class="bi bi-person-vcard" v-if="eachCredential.type[1].includes('zkProof') && !eachCredential.type[1].includes('SbtCredential') && listOfEnabledZkCredential"></i>
-            <i class="bi bi-person-badge" v-if="eachCredential.type[1].includes('SbtCredential')"></i>
-            {{ eachCredential.type[1] }}
-            <InfoMessage :message="eachCredential.id"></InfoMessage>
-            <div class="form-check form-switch">
-              <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" :checked="shouldShare(eachCredential)" disabled />
-            </div>
-          </li> -->
-        </div>
+        </div> -->
       </div>
       <div class="mt-1">
-        <button class="btn btn-outline-dark" @click="submit()"><i class="bi bi-check-circle"></i> Authorize</button>
+        <v-btn class="btn btn-outline-dark" @click="submit()"><i class="bi bi-check-circle"></i> Authorize</v-btn>
       </div>
     </div>
-    <div class="footer">
-      <MessageBox :msg="toastMessage" :type="toastType" :action="isToast ? 'show' : 'hide'" />
-    </div>
   </div>
 </template>