chore: force signing modal#456

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

Merged
coodos merged 1 commit into from
Nov 21, 2025
Merged

chore: force signing modal #456

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
328 changes: 291 additions & 37 deletions platforms/eReputation/client/src/components/modals/reference-modal.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
const [selectedTarget, setSelectedTarget] = useState<any>(null);
const [referenceText, setReferenceText] = useState("");
const [referenceType, setReferenceType] = useState("");
const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
const [eventSource, setEventSource] = useState<EventSource | null>(null);
const { toast } = useToast();
const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
const response = await apiClient.post('/api/references', data);
return response.data;
},
onSuccess: () => {
toast({
title: "Reference Submitted",
description: "Your professional reference has been successfully submitted.",
});
queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
onOpenChange(false);
resetForm();
onSuccess: (data) => {
// Reference created, now we need to sign it
if (data.signingSession) {
setSigningSession(data.signingSession);
setSigningStatus("pending");
const expiresAt = new Date(data.signingSession.expiresAt);
const now = new Date();
const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
setTimeRemaining(Math.max(0, secondsRemaining));
startSSEConnection(data.signingSession.sessionId);
} else {
// Fallback if no signing session (shouldn't happen)
toast({
title: "Reference Created",
description: "Your reference has been created. Please sign it to complete.",
});
}
},
onError: (error) => {
if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
},
});

const startSSEConnection = (sessionId: string) => {
// Prevent multiple SSE connections
if (eventSource) {
eventSource.close();
}

// Connect to the backend SSE endpoint for signing status
const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

const newEventSource = new EventSource(sseUrl);

newEventSource.onopen = () => {
console.log("SSE connection established for reference signing");
};

newEventSource.onmessage = (e) => {
try {
const data = JSON.parse(e.data);

if (data.type === "signed" && data.status === "completed") {
setSigningStatus("signed");
newEventSource.close();

toast({
title: "Reference Signed!",
description: "Your eReference has been successfully signed and submitted.",
});

queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

// Close modal and reset after a short delay
setTimeout(() => {
onOpenChange(false);
resetForm();
}, 1500);
} else if (data.type === "expired") {
setSigningStatus("expired");
newEventSource.close();
toast({
title: "Session Expired",
description: "The signing session has expired. Please try again.",
variant: "destructive",
});
} else if (data.type === "security_violation") {
setSigningStatus("security_violation");
newEventSource.close();
toast({
title: "eName Verification Failed",
description: "eName verification failed. Please check your eID.",
variant: "destructive",
});
} else {
console.log("SSE message:", data);
}
} catch (error) {
console.error("Error parsing SSE data:", error);
}
};

newEventSource.onerror = (error) => {
console.error("SSE connection error:", error);
setSigningStatus("error");
};

setEventSource(newEventSource);
};

// Countdown timer
useEffect(() => {
if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
const timer = setInterval(() => {
setTimeRemaining(prev => {
if (prev <= 1) {
setSigningStatus("expired");
if (eventSource) {
eventSource.close();
}
return 0;
}
return prev - 1;
});
}, 1000);

return () => clearInterval(timer);
}
}, [signingStatus, timeRemaining, signingSession, eventSource]);

// Cleanup on unmount
useEffect(() => {
return () => {
if (eventSource) {
eventSource.close();
}
};
}, [eventSource]);

// Reset signing state when modal closes
useEffect(() => {
if (!open) {
if (eventSource) {
eventSource.close();
setEventSource(null);
}
setSigningSession(null);
setSigningStatus("pending");
setTimeRemaining(900);
}
}, [open, eventSource]);

const formatTime = (seconds: number): string => {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins}:${secs.toString().padStart(2, '0')}`;
};

const resetForm = () => {
setTargetType("");
setSearchQuery("");
setSelectedTarget(null);
setReferenceText("");
setReferenceType("");
setSigningSession(null);
setSigningStatus("pending");
setTimeRemaining(900);
if (eventSource) {
eventSource.close();
setEventSource(null);
}
};

const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
</DialogHeader>

<div className="p-3 sm:p-6 flex-1 overflow-y-auto">
<div className="space-y-4 sm:space-y-6">
{signingSession ? (
// Signing Interface
<div className="flex flex-col items-center justify-center space-y-6 py-8">
<div className="text-center">
<h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
<p className="text-sm text-fig/70">
Scan this QR code with your eID Wallet to sign your eReference
</p>
</div>

{signingSession.qrData && (
<>
{isMobileDevice() ? (
<div className="flex flex-col gap-4 items-center">
<a
href={getDeepLinkUrl(signingSession.qrData)}
className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
>
Sign eReference with eID Wallet
</a>
<div className="text-xs text-fig/70 text-center max-w-xs">
Click the button to open your eID wallet app and sign your eReference
</div>
</div>
) : (
<div className="bg-white p-4 rounded-xl border-2 border-fig/20">
<QRCodeSVG
value={signingSession.qrData}
size={200}
level="M"
includeMargin={true}
/>
</div>
)}
</>
)}

<div className="space-y-2 text-center">
<div className="flex items-center justify-center gap-2">
<svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
</svg>
<span className="text-sm text-fig/70">
Session expires in {formatTime(timeRemaining)}
</span>
</div>

{signingStatus === "signed" && (
<div className="flex items-center justify-center gap-2 text-green-600">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="font-bold">Reference Signed Successfully!</span>
</div>
)}

{signingStatus === "expired" && (
<div className="flex items-center justify-center gap-2 text-red-600">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
<span className="font-bold">Session Expired</span>
</div>
)}

{signingStatus === "security_violation" && (
<div className="flex items-center justify-center gap-2 text-red-600">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
<span className="font-bold">eName Verification Failed</span>
</div>
)}
</div>

{(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
<Button
onClick={() => {
setSigningSession(null);
setSigningStatus("pending");
setTimeRemaining(900);
if (eventSource) {
eventSource.close();
setEventSource(null);
}
}}
className="bg-fig hover:bg-fig/90 text-white"
>
Try Again
</Button>
)}
</div>
) : (
// Reference Form
<div className="space-y-4 sm:space-y-6">
{/* Target Selection */}
<div>
<h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
{referenceText.length} / 500 characters
</div>
</div>
</div>
</div>
)}
</div>

<div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
<div className="flex flex-col sm:flex-row gap-3">
{!signingSession && (
<div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
<div className="flex flex-col sm:flex-row gap-3">
<Button
variant="outline"
onClick={() => onOpenChange(false)}
disabled={submitMutation.isPending}
className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
>
Cancel
</Button>
<Button
onClick={handleSubmit}
disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
>
{submitMutation.isPending ? (
<>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
Creating...
</>
) : (
<>
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
</svg>
Sign & Submit eReference
</>
)}
</Button>
</div>
</div>
)}

{signingSession && signingStatus !== "signed" && (
<div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
<Button
variant="outline"
onClick={() => onOpenChange(false)}
disabled={submitMutation.isPending}
className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
onClick={() => {
setSigningSession(null);
setSigningStatus("pending");
if (eventSource) {
eventSource.close();
setEventSource(null);
}
}}
className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
>
Cancel
</Button>
<Button
onClick={handleSubmit}
disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
>
{submitMutation.isPending ? (
<>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
Submitting...
</>
) : (
<>
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
</svg>
Sign & Submit eReference
</>
)}
</Button>
</div>
</div>
)}
</DialogContent>
</Dialog>
);
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
chore: force signing modal#456

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

 Merged

coodos
merged 1 commit into

from

Nov 21, 2025
 Merged


chore: force signing modal
#456
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


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


328 changes: 291 additions & 37 deletions
platforms/eReputation/client/src/components/modals/reference-modal.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { apiClient } from "@/lib/apiClient";
import { QRCodeSVG } from "qrcode.react";
import { isMobileDevice, getDeepLinkUrl } from "@/lib/utils/mobile-detection";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
Expand DownExpand Up@@ -62,6 +64,10 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const [selectedTarget, setSelectedTarget] = useState<any>(null);
 const [referenceText, setReferenceText] = useState("");
 const [referenceType, setReferenceType] = useState("");
 const [signingSession, setSigningSession] = useState<{ sessionId: string; qrData: string; expiresAt: string } | null>(null);
 const [signingStatus, setSigningStatus] = useState<"pending" | "connecting" | "signed" | "expired" | "error" | "security_violation">("pending");
 const [timeRemaining, setTimeRemaining] = useState<number>(900); // 15 minutes in seconds
 const [eventSource, setEventSource] = useState<EventSource | null>(null);
 const { toast } = useToast();
 const queryClient = useQueryClient();

Expand DownExpand Up@@ -95,15 +101,23 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 const response = await apiClient.post('/api/references', data);
 return response.data;
 },
 onSuccess: () => {
 toast({
 title: "Reference Submitted",
 description: "Your professional reference has been successfully submitted.",
 });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });
 onOpenChange(false);
 resetForm();
 onSuccess: (data) => {
 // Reference created, now we need to sign it
 if (data.signingSession) {
 setSigningSession(data.signingSession);
 setSigningStatus("pending");
 const expiresAt = new Date(data.signingSession.expiresAt);
 const now = new Date();
 const secondsRemaining = Math.floor((expiresAt.getTime() - now.getTime()) / 1000);
 setTimeRemaining(Math.max(0, secondsRemaining));
 startSSEConnection(data.signingSession.sessionId);
 } else {
 // Fallback if no signing session (shouldn't happen)
 toast({
 title: "Reference Created",
 description: "Your reference has been created. Please sign it to complete.",
 });
 }
 },
 onError: (error) => {
 if (isUnauthorizedError(error)) {
Expand All@@ -125,12 +139,136 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 },
 });

 const startSSEConnection = (sessionId: string) => {
 // Prevent multiple SSE connections
 if (eventSource) {
 eventSource.close();
 }

 // Connect to the backend SSE endpoint for signing status
 const baseURL = import.meta.env.VITE_EREPUTATION_BASE_URL || "http://localhost:8765";
 const sseUrl = `${baseURL}/api/references/signing/session/${sessionId}/status`;

 const newEventSource = new EventSource(sseUrl);

 newEventSource.onopen = () => {
 console.log("SSE connection established for reference signing");
 };

 newEventSource.onmessage = (e) => {
 try {
 const data = JSON.parse(e.data);

 if (data.type === "signed" && data.status === "completed") {
 setSigningStatus("signed");
 newEventSource.close();

 toast({
 title: "Reference Signed!",
 description: "Your eReference has been successfully signed and submitted.",
 });

 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/stats"] });
 queryClient.invalidateQueries({ queryKey: ["/api/dashboard/activities"] });

 // Close modal and reset after a short delay
 setTimeout(() => {
 onOpenChange(false);
 resetForm();
 }, 1500);
 } else if (data.type === "expired") {
 setSigningStatus("expired");
 newEventSource.close();
 toast({
 title: "Session Expired",
 description: "The signing session has expired. Please try again.",
 variant: "destructive",
 });
 } else if (data.type === "security_violation") {
 setSigningStatus("security_violation");
 newEventSource.close();
 toast({
 title: "eName Verification Failed",
 description: "eName verification failed. Please check your eID.",
 variant: "destructive",
 });
 } else {
 console.log("SSE message:", data);
 }
 } catch (error) {
 console.error("Error parsing SSE data:", error);
 }
 };

 newEventSource.onerror = (error) => {
 console.error("SSE connection error:", error);
 setSigningStatus("error");
 };

 setEventSource(newEventSource);
 };

 // Countdown timer
 useEffect(() => {
 if (signingStatus === "pending" && timeRemaining > 0 && signingSession) {
 const timer = setInterval(() => {
 setTimeRemaining(prev => {
 if (prev <= 1) {
 setSigningStatus("expired");
 if (eventSource) {
 eventSource.close();
 }
 return 0;
 }
 return prev - 1;
 });
 }, 1000);

 return () => clearInterval(timer);
 }
 }, [signingStatus, timeRemaining, signingSession, eventSource]);

 // Cleanup on unmount
 useEffect(() => {
 return () => {
 if (eventSource) {
 eventSource.close();
 }
 };
 }, [eventSource]);

 // Reset signing state when modal closes
 useEffect(() => {
 if (!open) {
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 }
 }, [open, eventSource]);

 const formatTime = (seconds: number): string => {
 const mins = Math.floor(seconds / 60);
 const secs = seconds % 60;
 return `${mins}:${secs.toString().padStart(2, '0')}`;
 };

 const resetForm = () => {
 setTargetType("");
 setSearchQuery("");
 setSelectedTarget(null);
 setReferenceText("");
 setReferenceType("");
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 };

 const handleSearchChange = (value: string) => {
Expand DownExpand Up@@ -213,7 +351,101 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 </DialogHeader>

 <div className="p-3 sm:p-6 flex-1 overflow-y-auto">
 <div className="space-y-4 sm:space-y-6">
 {signingSession ? (
 // Signing Interface
 <div className="flex flex-col items-center justify-center space-y-6 py-8">
 <div className="text-center">
 <h3 className="text-xl font-black text-fig mb-2">Sign Your eReference</h3>
 <p className="text-sm text-fig/70">
 Scan this QR code with your eID Wallet to sign your eReference
 </p>
 </div>

 {signingSession.qrData && (
 <>
 {isMobileDevice() ? (
 <div className="flex flex-col gap-4 items-center">
 <a
 href={getDeepLinkUrl(signingSession.qrData)}
 className="px-6 py-3 bg-fig text-white rounded-xl hover:bg-fig/90 transition-colors text-center font-bold"
 >
 Sign eReference with eID Wallet
 </a>
 <div className="text-xs text-fig/70 text-center max-w-xs">
 Click the button to open your eID wallet app and sign your eReference
 </div>
 </div>
 ) : (
 <div className="bg-white p-4 rounded-xl border-2 border-fig/20">
 <QRCodeSVG
 value={signingSession.qrData}
 size={200}
 level="M"
 includeMargin={true}
 />
 </div>
 )}
 </>
 )}

 <div className="space-y-2 text-center">
 <div className="flex items-center justify-center gap-2">
 <svg className="w-4 h-4 text-fig/70" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
 </svg>
 <span className="text-sm text-fig/70">
 Session expires in {formatTime(timeRemaining)}
 </span>
 </div>

 {signingStatus === "signed" && (
 <div className="flex items-center justify-center gap-2 text-green-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Reference Signed Successfully!</span>
 </div>
 )}

 {signingStatus === "expired" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">Session Expired</span>
 </div>
 )}

 {signingStatus === "security_violation" && (
 <div className="flex items-center justify-center gap-2 text-red-600">
 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
 </svg>
 <span className="font-bold">eName Verification Failed</span>
 </div>
 )}
 </div>

 {(signingStatus === "expired" || signingStatus === "security_violation" || signingStatus === "error") && (
 <Button
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 setTimeRemaining(900);
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="bg-fig hover:bg-fig/90 text-white"
 >
 Try Again
 </Button>
 )}
 </div>
 ) : (
 // Reference Form
 <div className="space-y-4 sm:space-y-6">
 {/* Target Selection */}
 <div>
 <h4 className="text-base sm:text-lg font-black text-fig mb-3 sm:mb-4">Select eReference Target</h4>
Expand DownExpand Up@@ -342,40 +574,62 @@ export default function ReferenceModal({ open, onOpenChange }: ReferenceModalPro
 {referenceText.length} / 500 characters
 </div>
 </div>
 </div>
 </div>
 )}
 </div>

 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 {!signingSession && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <div className="flex flex-col sm:flex-row gap-3">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Creating...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
 </div>
 )}

 {signingSession && signingStatus !== "signed" && (
 <div className="border-t-2 border-fig/20 p-4 sm:p-6 bg-fig-10 -m-6 mt-0 rounded-b-xl flex-shrink-0">
 <Button 
 variant="outline" 
 onClick={() => onOpenChange(false)}
 disabled={submitMutation.isPending}
 className="order-2 sm:order-1 flex-1 border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12 opacity-80"
 onClick={() => {
 setSigningSession(null);
 setSigningStatus("pending");
 if (eventSource) {
 eventSource.close();
 setEventSource(null);
 }
 }}
 className="w-full border-2 border-fig/30 text-fig/70 hover:bg-fig-10 hover:border-fig/40 font-bold h-11 sm:h-12"
 >
 Cancel
 </Button>
 <Button 
 onClick={handleSubmit}
 disabled={submitMutation.isPending || !targetType || !selectedTarget || !referenceText.trim()}
 className="order-1 sm:order-2 flex-1 bg-fig hover:bg-fig/90 text-white font-bold h-11 sm:h-12 shadow-lg hover:shadow-xl transition-all duration-300"
 >
 {submitMutation.isPending ? (
 <>
 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
 Submitting...
 </>
 ) : (
 <>
 <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
 <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
 </svg>
 Sign & Submit eReference
 </>
 )}
 </Button>
 </div>
</div>
)}
 </DialogContent>
 </Dialog>
 );
Expand Down