Merge pull request #77 from hypersign-protocol/bugfix-kycwebpageGenrator

Bugfix kycwebpage genrator

Author: Vishwas1

src/views/playground/KYCWebpageGenerator.vue

@@ -41,6 +41,46 @@
   border: 1px solid #ffeaa7;
 }
 
+/* Modal styles */
+.hf-modal .modal-content.hf-modal-content {
+  border-radius: 12px;
+  border: 1px solid #e9ecef;
+}
+.hf-modal-header {
+  border-bottom: 1px solid #f1f3f4;
+}
+.hf-modal-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 16px;
+}
+.confirm-body {
+  padding: 8px 6px 0 6px;
+}
+.confirm-url {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  align-items: center;
+  gap: 8px;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+.confirm-url code {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 16px;
+}
+
 /* Link Display Styles */
 .link-display {
   display: flex;
@@ -753,9 +793,10 @@ textarea.form-control {
 
 .url-section {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
   justify-content: flex-end;
-  gap: 10px;
+  gap: 6px;
 }
 
 .url-section h6 {
@@ -765,6 +806,11 @@ textarea.form-control {
   color: #2c3e50;
 }
 
+.url-section .status-badge {
+  align-self: flex-end;
+  margin-top: 4px;
+}
+
 /* Two Column Layout */
 .form-layout {
   display: flex;
@@ -1011,8 +1057,12 @@ textarea.form-control {
       <v-col>
         <HfButtons name="Save Configuration" @executeAction="saveConfiguration()" v-if="!this.kycWebpageConfigTemp._id"
           style="float:right"></HfButtons>
-        <HfButtons name="Update Configuration" @executeAction="updateConfiguration()" style="float:right" v-else>
-        </HfButtons>
+        <div v-else>
+          <b-button variant="link" class="danger" @click="openDeleteModal()" style="float:right;"
+            title="Delete Configuration"><i class="fa fa-trash"></i></b-button>
+          <HfButtons name="Update Configuration" @executeAction="updateConfiguration()" style="float:right" class="mx-1">
+          </HfButtons>
+        </div>
       </v-col>
     </v-row>
 
@@ -1027,9 +1077,6 @@ textarea.form-control {
                 <i class="fa fa-building"></i>
               </div>
             </div>
-            <span class="status-badge" :class="getStatusClass()">
-              {{ getStatusText() }}
-            </span>
             <div class="company-info">
               <h4>{{ getSelectedService ? getSelectedService.appName : 'Your Business Name' }}</h4>
               <p>{{ kycWebpageConfigTemp.pageTitle || 'KYC Verification' }}</p>
@@ -1047,10 +1094,47 @@ textarea.form-control {
             <div class="link-display" v-else>
               <span class="link-text">URL will be generated after saving</span>
             </div>
+            <span class="status-badge" :class="getStatusClass()">
+              {{ getStatusText() }}
+            </span>
           </div>
         </div>
       </div>
 
+      <!-- Delete confirmation modal -->
+      <b-modal
+        v-model="showDeleteModal"
+        hide-footer
+        centered
+        size="md"
+        dialog-class="hf-modal"
+        content-class="hf-modal-content"
+        header-class="hf-modal-header"
+      >
+        <template #modal-title>
+          <div class="hf-modal-title">
+            <i class="fa fa-exclamation-triangle" style="color:#dc3545;margin-right:8px;"></i>
+            Delete KYC Page?
+          </div>
+        </template>
+        <div class="confirm-body">
+          <p class="mb-2">You're about to remove this KYC page configuration.</p>
+          <div class="confirm-url" v-if="kycWebpageConfigTemp.generatedUrl">
+            <span>URL</span>
+            <code>{{ kycWebpageConfigTemp.generatedUrl }}</code>
+          </div>
+          <div class="confirm-url" v-else>
+            <span>URL</span>
+            <code>Not generated yet</code>
+          </div>
+          <p class="mt-2" style="color:#6b7280;">This action cannot be undone.</p>
+        </div>
+        <div class="modal-actions">
+          <b-button variant="outline-secondary" @click="showDeleteModal=false">Cancel</b-button>
+          <b-button variant="danger" @click="confirmDelete"><i class="fa fa-trash mr-1"></i>Delete</b-button>
+        </div>
+      </b-modal>
+
       <!-- Expiry Warning -->
       <div v-if="showExpiryWarning" class="warning-alert">
         <i class="fa fa-exclamation-triangle"></i>
@@ -1177,7 +1261,7 @@ textarea.form-control {
                         </div>
                         <div>
                           <h3 class="brand-name">{{ getSelectedService ? getSelectedService.appName : 'Your Business Name' }}</h3>
-                          <div class="brand-subtitle">Identity Verification Platform</div>
+                          <div class="brand-subtitle">{{ kycWebpageConfigTemp.pageTitle || 'Identity Verification Platform' }}</div>
                         </div>
                       </div>
 
@@ -1277,6 +1361,7 @@ export default {
       fullPage: true,
       isLoading: false,
       previewMode: "desktop",
+      showDeleteModal: false,
       kycWebpageConfigTemp: {
         pageTitle: "KYC Verification",
         pageDescription: "",
@@ -1303,6 +1388,14 @@ export default {
       this.kycWebpageConfigTemp.selectedTheme = theme;
     },
 
+    openDeleteModal() {
+      this.showDeleteModal = true;
+    },
+
+    async confirmDelete() {
+      await this.deleteConfiguration();
+    },
+
     generateUniqueId() {
       return 'kyc_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
     },
@@ -1423,6 +1516,23 @@ export default {
         this.isLoading = false;
         this.notifyErr(e);
       }
+    },
+
+    async deleteConfiguration() {
+      try {
+        if (!this.kycWebpageConfigTemp || !this.kycWebpageConfigTemp._id) {
+          return this.notifyErr('No configuration to delete');
+        }
+        this.isLoading = true;
+        await this.deleteKYCWebpageConfig({ _id: this.kycWebpageConfigTemp._id });
+        this.showDeleteModal = false;
+        this.notifySuccess('KYC webpage configuration deleted successfully!');
+        await this.fetchKYCWebpageConfig();
+        this.isLoading = false;
+      } catch (e) {
+        this.isLoading = false;
+        this.notifyErr(e);
+      }
     }
   },