chore(verification): added response status to the refresh Verificatio…

…n frontend
eclipse-tractusx · Jul 1, 2024 · a8660ec · a8660ec
1 parent afdcffb
commit a8660ec
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 63 deletions.
diff --git a/dpp-frontend/src/assets/styles/components/general/passportHeader.scss b/dpp-frontend/src/assets/styles/components/general/passportHeader.scss
@@ -30,6 +30,9 @@
   margin-top: 6em;
   padding: 14px 42px 14px 42px;
 }
+.reload-verification {
+  padding-top: 16px;
+}
 .proof_list {
   padding-left: 12px;
 }

diff --git a/dpp-frontend/src/components/passport/PassportHeader.vue b/dpp-frontend/src/components/passport/PassportHeader.vue
@@ -137,6 +137,25 @@
                 </div>
               </div>
             </div>
+            <div class="reload-verification" v-if="reloadVerificationData">
+              <li class="verification" v-if="reloadVerificationData.status">
+                <span class="verification-label"> {{ $t("passportHeader.status") }}: </span>
+                <span class="verification-value">
+                  {{
+                    reloadVerificationData.status === 200
+                      ? $t("passportHeader.verified")
+                      : $t("passportHeader.unverified")
+                  }}
+                  <!-- {{ reloadVerificationData.status }} -->
+                </span>
+              </li>
+              <li class="verification" v-if="reloadVerificationData.message">
+                <span class="verification-label"> {{ $t("passportHeader.message") }}: </span>
+                <span class="verification-value">
+                  {{ reloadVerificationData.message }}
+                </span>
+              </li>
+            </div>
           </ul>
           <div class="btn-wrapper">
             <v-btn
@@ -189,6 +208,10 @@ export default {
   data() {
     return {
       verificationData: this.$props.verification,
+      reloadVerificationData: {
+        message: "Passport verified",
+        status: 200,
+      },
       aspect: this.$props.vcAspect,
       auth: inject("authentication"),
     };
@@ -200,59 +223,12 @@ export default {
     },
     reloadVerification() {
       this.backendService = new BackendService();
-      this.backendService.reloadVerification(this.auth, this.aspect);
+      let result = this.backendService.reloadVerification(this.auth, this.aspect);
+      result.then((response) => {
+        this.reloadVerificationData.status = response.status;
+        this.reloadVerificationData.message = response.message;
+      });
     },
   },
 };
 </script>
-
-<style>
-.id-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 100%;
-  margin-top: 6em;
-  padding: 14px 42px 14px 42px;
-}
-.proof_list {
-  padding-left: 12px;
-}
-.id-wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  line-break: anywhere;
-}
-.btn-background {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-ul {
-  margin-bottom: 36px;
-}
-.id {
-  font-size: 14px;
-  line-height: 36px;
-  font-weight: bold;
-}
-.verification {
-  padding-bottom: 16px;
-}
-.verification-value {
-  font-weight: 600;
-}
-
-@media (max-width: 820px) {
-  .id-container {
-    padding: 14px 42px 88px 42px;
-  }
-  .id-wrapper {
-    margin-top: 42px;
-  }
-}
-</style>
diff --git a/dpp-frontend/src/services/BackendService.js b/dpp-frontend/src/services/BackendService.js
@@ -466,18 +466,10 @@ export default class BackendService {
     }
 
     async reloadVerification(authentication, body) {
-        console.log(body);
-        console.log(this.getHeaders(authentication));
         return new Promise((resolve) => {
             axios
-                .post(`${BACKEND_URL}/api/verification/verify`, body, {
-                    headers: {
-                        Accept: "application/vc+ld+json",
-                        Authorization: "Bearer " + authentication.getAccessToken(),
-                    },
-                })
+                .post(`${BACKEND_URL}/api/verification/verify`, body, this.getHeaders(authentication))
                 .then((response) => {
-                    console.log(response.data);
                     resolve(response.data);
                 })
                 .catch((e) => {

diff --git a/dpp-frontend/src/translations/de.json b/dpp-frontend/src/translations/de.json
@@ -153,6 +153,11 @@
     "issuedAt": "Ausgestellt am",
     "expirationDate": "Läuft ab am",
     "reloadVerification": "Verifizierung aktualisieren",
+    "verified": "Verifiziert",
+    "status": "Status",
+    "message": "Nachricht",
+    "error": "Fehler",
+    "unverified": "Nicht Verifiziert",
     "proof": "Nachweis",
     "type": "Typ",
     "wallet": "Brieftasche",
@@ -533,4 +538,4 @@
       "media": "Medien"
     }
   }
-}
+}
diff --git a/dpp-frontend/src/translations/en.json b/dpp-frontend/src/translations/en.json
@@ -153,6 +153,11 @@
     "issuedAt": "Issued at",
     "expirationDate": "Expires at",
     "reloadVerification": "Refresh verification",
+    "verified": "Verified",
+    "status": "Status",
+    "message": "Message",
+    "error": "Error",
+    "unverified": "Not Verified",
     "proof": "Proof",
     "type": "Type",
     "wallet": "Wallet",
@@ -533,4 +538,4 @@
       "media": "Media"
     }
   }
-}
+}