Skip to content

Feature/kyc webpage generator #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
didintern wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature/kyc webpage generator #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18a02a2
Merge pull request #76 from hypersign-protocol/bugfix-kycwebpageGenrator
Vishwas1 Aug 21, 2025
da48ee7
fix: Fixed the state persist problem when stwitching between apps, fo…
didintern Aug 22, 2025
45271e0
Fix: KYCWebPageGenerator - Changed the menu text to KYC Verifier, - S…
didintern Aug 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App copy.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@

<v-list-item @click="goTo('/studio/settings')" title="Settings">
<v-icon left>mdi-cog</v-icon>
<v-list-item-title>Settings</v-list-item-title>
<v-list-item-title>Settings1</v-list-item-title>
</v-list-item>

<v-list-item @click="goTo('/studio/dashboard')" title="Home">
Expand Down
3 changes: 2 additions & 1 deletion src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@
</template>

<style>

.v-sidebar-menu .vsm--link_level-1 .vsm--icon {
font-size: 16px;
width: 40px !important;
Expand Down Expand Up @@ -558,7 +559,7 @@ export default {
},
{
href: "/studio/kyc-webpage-generator/" + this.getSelectedService.appId,
title: "KYC Verifier Configuration",
title: "KYC Verifier ",
icon: "fa fa-globe",
},
]
Expand Down
4 changes: 4 additions & 0 deletions src/store/mainStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,10 @@ const mainStore = {
},
setSelectedAppId: (state, payload) => {
state.selectedServiceId = payload;
// Clear app-specific configs when switching apps
state.kycWebpageConfig = {};
state.webhookConfig = {};
state.onChainConfig = {};
},

setDIDList(state, payload) {
Expand Down
193 changes: 180 additions & 13 deletions src/views/playground/KYCWebpageGenerator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,84 @@
border-radius: 4px;
margin-bottom: 0;
min-width: 280px;
position: relative;
}

/* Status Icon Styles */
.status-icon {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
position: relative;
cursor: help;
animation: pulse 2s infinite;
}

.status-icon.active {
background-color: #28a745;
box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
}

.status-icon.expired {
background-color: #dc3545;
box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}

.status-icon.warning {
background-color: #ffc107;
box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}

.status-icon.not-created {
background-color: #6c757d;
box-shadow: 0 0 8px rgba(108, 117, 125, 0.6);
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
}
70% {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}

/* Status Tooltip */
.status-tooltip {
position: fixed;
background: #333;
color: white;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 99999;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transform: translateX(-50%);
}

.status-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #333;
}

.status-icon:hover + .status-tooltip {
opacity: 1;
visibility: visible;
}

.link-text {
Expand Down Expand Up @@ -419,6 +497,7 @@ textarea.form-control {
align-items: center;
justify-content: flex-start;
padding: 24px 12px 16px;
min-height: 100%;
}

.kyc-preview-card {
Expand Down Expand Up @@ -507,6 +586,7 @@ textarea.form-control {
margin-top: 18px;
font-size: 10px;
color: #374151;
text-align: center;
}

.powered-by {
Expand Down Expand Up @@ -637,27 +717,79 @@ textarea.form-control {
border-radius: 25px;
overflow: hidden;
border: 3px solid #333;
background: #333;
background: transparent;
height: 620px;
max-width: 360px;
margin: 0 auto;
position: relative;
}

/* Mobile preview theme backgrounds - apply to browser frame for consistent background */
.mobile-preview .preview-vibrant-theme .browser-frame {
background: linear-gradient(180deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.05) 100%) !important;
}

.mobile-preview .preview-dark-theme .browser-frame {
background: #0f172a !important;
}

.mobile-preview .preview-grey-theme .browser-frame {
background: linear-gradient(180deg, rgba(127,140,141,0.08) 0%, rgba(189,195,199,0.06) 100%) !important;
}

.mobile-preview .preview-light-theme .browser-frame {
background: #f5f7fb !important;
}

/* Mobile preview theme backgrounds - apply to browser content for full height */
.mobile-preview .preview-vibrant-theme .browser-content {
background: linear-gradient(180deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.05) 100%) !important;
min-height: calc(100% - 40px); /* Subtract header height */
height: calc(100% - 40px);
}

.mobile-preview .preview-dark-theme .browser-content {
background: #0f172a !important;
min-height: calc(100% - 40px);
height: calc(100% - 40px);
}

.mobile-preview .preview-grey-theme .browser-content {
background: linear-gradient(180deg, rgba(127,140,141,0.08) 0%, rgba(189,195,199,0.06) 100%) !important;
min-height: calc(100% - 40px);
height: calc(100% - 40px);
}

.mobile-preview .preview-light-theme .browser-content {
background: #f5f7fb !important;
min-height: calc(100% - 40px);
height: calc(100% - 40px);
}

/* Mobile preview specific styles for full height */
.mobile-preview .kyc-preview {
min-height: calc(100% - 40px); /* Match browser-content height */
padding: 16px 8px 12px;
height: 100%;
display: flex;
flex-direction: column;
}

.mobile-preview .browser-header {
padding: 8px;
border-radius: 22px 22px 0 0;
background: #333;
border-bottom: 1px solid #555;
background: #f8f9fb;
border-bottom: 1px solid #eef1f4;
}

.mobile-preview .browser-dots {
display: none;
}

.mobile-preview .browser-url {
background: #444;
border: 1px solid #555;
color: #ccc;
background: #ffffff;
border: 1px solid #e9ecef;
color: #666;
font-size: 10px;
padding: 3px 6px;
}
Expand Down Expand Up @@ -1086,17 +1218,18 @@ textarea.form-control {
<div class="header-right">
<div class="url-section">
<div class="link-display" v-if="kycWebpageConfigTemp._id">
<span class="status-icon" :class="getStatusIconClass()" @mouseenter="showStatusTooltip($event, getStatusText())" @mouseleave="hideStatusTooltip($event)"></span>
<span class="status-tooltip"></span>
<span class="link-text">{{ kycWebpageConfigTemp.generatedUrl || 'No URL generated' }}</span>
<button class="copy-btn" @click="copyToClipboard" v-if="kycWebpageConfigTemp.generatedUrl" title="Copy URL">
<i class="fa fa-copy"></i>
</button>
</div>
<div class="link-display" v-else>
<span class="link-text">URL will be generated after saving</span>
<span class="status-icon not-created" @mouseenter="showStatusTooltip($event, 'Not Created')" @mouseleave="hideStatusTooltip($event)"></span>
<span class="status-tooltip"></span>
</div>
<span class="status-badge" :class="getStatusClass()">
{{ getStatusText() }}
</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -1241,7 +1374,7 @@ textarea.form-control {
</div>
</div>

<div class="browser-frame" :class="`${previewMode}-preview`">
<div class="browser-frame" :class="`${previewMode}-preview preview-${kycWebpageConfigTemp.selectedTheme}-theme`">
<div class="browser-header">
<div class="browser-dots">
<span class="browser-dot red"></span>
Expand Down Expand Up @@ -1363,7 +1496,7 @@ export default {
previewMode: "desktop",
showDeleteModal: false,
kycWebpageConfigTemp: {
pageTitle: "KYC Verification",
pageTitle: "",
pageDescription: "",
expiryType: "3months",
customExpiryDate: "",
Expand Down Expand Up @@ -1431,6 +1564,9 @@ export default {
case 'custom':
if (this.kycWebpageConfigTemp.customExpiryDate) {
expiry = new Date(this.kycWebpageConfigTemp.customExpiryDate);
} else {
// No custom date chosen yet – signal undefined to avoid treating as expired
return undefined;
}
break;
}
Expand All @@ -1445,6 +1581,7 @@ export default {
if (!this.kycWebpageConfigTemp._id) return 'Not Created';

const daysRemaining = this.getDaysRemaining();
if (daysRemaining === undefined) return 'Active';
if (daysRemaining === 0) return 'Expired';
if (daysRemaining <= 7) return 'Expiring Soon';
return 'Active';
Expand All @@ -1454,11 +1591,41 @@ export default {
if (!this.kycWebpageConfigTemp._id) return 'status-warning';

const daysRemaining = this.getDaysRemaining();
if (daysRemaining === undefined) return 'status-active';
if (daysRemaining === 0) return 'status-expired';
if (daysRemaining <= 7) return 'status-warning';
return 'status-active';
},

getStatusIconClass() {
if (!this.kycWebpageConfigTemp._id) return 'not-created';

const daysRemaining = this.getDaysRemaining();
if (daysRemaining === undefined) return 'active';
if (daysRemaining === 0) return 'expired';
if (daysRemaining <= 7) return 'warning';
return 'active';
},

showStatusTooltip(event, statusText) {
const tooltip = event.target.nextElementSibling;
if (tooltip && tooltip.classList.contains('status-tooltip')) {
tooltip.textContent = statusText;
tooltip.style.left = event.pageX + 'px';
tooltip.style.top = (event.pageY - 40) + 'px';
tooltip.style.opacity = '1';
tooltip.style.visibility = 'visible';
}
},

hideStatusTooltip(event) {
const tooltip = event.target.nextElementSibling;
if (tooltip && tooltip.classList.contains('status-tooltip')) {
tooltip.style.opacity = '0';
tooltip.style.visibility = 'hidden';
}
},

validateField() {
if (!this.kycWebpageConfigTemp.pageTitle) {
throw new Error('Page title is required')
Expand Down Expand Up @@ -1548,9 +1715,9 @@ export default {
} else {
// Reset to default values if no config exists
this.kycWebpageConfigTemp = {
pageTitle: "KYC Verification",
pageTitle: "",
pageDescription: "",
expiryType: "3months",
expiryType: "1months",
customExpiryDate: "",
selectedTheme: "vibrant",
contactEmail: "",
Expand Down