mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 19:26:33 +00:00
update
This commit is contained in:
5t4l1n
@@ -0,0 +1,453 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useParams, useRouter } from "next/navigation"
|
||||
import { Calendar, User, BookOpen, Wallet, Award, Share2, Download, CheckCircle, AlertCircle } from "lucide-react"
|
||||
import { toast } from "react-hot-toast"
|
||||
|
||||
interface Certificate {
|
||||
certificate_id: string
|
||||
share_code: string
|
||||
user_name: string
|
||||
student_name: string
|
||||
course_title: string
|
||||
mentor_name: string
|
||||
instructor_name: string
|
||||
completion_date: string
|
||||
wallet_address?: string
|
||||
issued_by: string
|
||||
view_count: number
|
||||
blockchain_hash?: string
|
||||
public_url?: string
|
||||
verification_url?: string
|
||||
is_verified: boolean
|
||||
is_revoked: boolean
|
||||
}
|
||||
|
||||
export default function CertificatePage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const [certificate, setCertificate] = useState<Certificate | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const certificateId = params?.id as string
|
||||
|
||||
useEffect(() => {
|
||||
if (certificateId) {
|
||||
fetchCertificate(certificateId)
|
||||
}
|
||||
}, [certificateId])
|
||||
|
||||
const fetchCertificate = async (id: string) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
console.log(`🔍 Fetching certificate with ID: ${id}`)
|
||||
|
||||
let response = null
|
||||
|
||||
// Try verify endpoint first
|
||||
try {
|
||||
console.log(`🔍 Trying verify endpoint: /api/certificate/verify/${id}`)
|
||||
response = await fetch(`http://127.0.0.1:5000/api/certificate/verify/${id}`)
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.success && data.verified) {
|
||||
console.log('✅ Found certificate by verify endpoint')
|
||||
setCertificate(data.certificate)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Verify endpoint failed, trying next...')
|
||||
}
|
||||
|
||||
// Try direct ID endpoint
|
||||
try {
|
||||
console.log(`🔍 Trying direct endpoint: /api/certificate/${id}`)
|
||||
response = await fetch(`http://127.0.0.1:5000/api/certificate/${id}`)
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
console.log('✅ Found certificate by direct endpoint')
|
||||
setCertificate(data.certificate)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Direct endpoint failed')
|
||||
}
|
||||
|
||||
console.error('❌ Certificate not found in any endpoint')
|
||||
setError("Certificate not found")
|
||||
setLoading(false)
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error fetching certificate:', error)
|
||||
setError("Failed to load certificate")
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownloadPDF = () => {
|
||||
if (!certificate) return
|
||||
|
||||
try {
|
||||
const certificateHTML = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Certificate - ${certificate.user_name}</title>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.certificate {
|
||||
background: white;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 60px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 8px solid #4f46e5;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #4f46e5;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 48px;
|
||||
color: #1f2937;
|
||||
font-weight: 700;
|
||||
margin: 40px 0;
|
||||
padding: 20px 0;
|
||||
border-top: 3px solid #4f46e5;
|
||||
border-bottom: 3px solid #4f46e5;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 28px;
|
||||
color: #1f2937;
|
||||
margin: 20px 0;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cert-id {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-top: 20px;
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #f9fafb;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.mentor-section {
|
||||
margin-top: 50px;
|
||||
padding-top: 30px;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.mentor-name {
|
||||
font-size: 18px;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="certificate">
|
||||
<div style="font-size: 60px; margin-bottom: 20px;">🏆</div>
|
||||
<h1 class="title">CERTIFICATE OF COMPLETION</h1>
|
||||
|
||||
<div style="font-size: 18px; color: #6b7280; margin-bottom: 30px;">This is to certify that</div>
|
||||
|
||||
<div class="student-name">${certificate.user_name}</div>
|
||||
|
||||
<div style="font-size: 18px; color: #6b7280; margin-bottom: 20px;">has successfully completed the course</div>
|
||||
<div class="course-title">"${certificate.course_title}"</div>
|
||||
|
||||
<div style="font-size: 16px; color: #374151; margin: 20px 0;">
|
||||
✅ Completed on: ${new Date(certificate.completion_date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div class="mentor-section">
|
||||
<div style="width: 200px; height: 2px; background: #6b7280; margin: 0 auto 10px auto;"></div>
|
||||
<div class="mentor-name">${certificate.mentor_name}</div>
|
||||
<div style="font-size: 14px; color: #6b7280; margin-top: 5px;">Course Instructor</div>
|
||||
</div>
|
||||
|
||||
<div class="cert-id">
|
||||
<strong>Certificate ID: ${certificate.certificate_id}</strong><br>
|
||||
OpenLearnX Learning Platform<br>
|
||||
<span style="color: #7c3aed;">🔒 Blockchain Verified Completion</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
const printWindow = window.open('', '_blank')
|
||||
if (printWindow) {
|
||||
printWindow.document.write(certificateHTML)
|
||||
printWindow.document.close()
|
||||
|
||||
printWindow.onload = () => {
|
||||
setTimeout(() => {
|
||||
printWindow.print()
|
||||
printWindow.close()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
toast.success("Certificate PDF download initiated!")
|
||||
} else {
|
||||
toast.error("Popup blocked. Please allow popups and try again.")
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('PDF generation error:', error)
|
||||
toast.error("Failed to generate PDF")
|
||||
}
|
||||
}
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!certificate) return
|
||||
|
||||
const shareText = `🎓 Check out my certificate of completion for "${certificate.course_title}" from OpenLearnX!\n\nStudent: ${certificate.user_name}\nCertificate ID: ${certificate.certificate_id}\n\n#OpenLearnX #Certificate #Learning`
|
||||
const shareUrl = window.location.href
|
||||
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: `Certificate - ${certificate.course_title}`,
|
||||
text: shareText,
|
||||
url: shareUrl
|
||||
})
|
||||
|
||||
// Track share
|
||||
try {
|
||||
await fetch(`http://127.0.0.1:5000/api/certificate/share/${certificate.certificate_id}`, {
|
||||
method: 'POST'
|
||||
})
|
||||
} catch (e) {
|
||||
console.log('Share tracking failed:', e)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Share cancelled')
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await navigator.clipboard.writeText(`${shareText}\n\n${shareUrl}`)
|
||||
toast.success("Certificate link copied to clipboard!")
|
||||
|
||||
// Track share
|
||||
try {
|
||||
await fetch(`http://127.0.0.1:5000/api/certificate/share/${certificate.certificate_id}`, {
|
||||
method: 'POST'
|
||||
})
|
||||
} catch (e) {
|
||||
console.log('Share tracking failed:', e)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Failed to copy link")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-indigo-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Loading certificate...</p>
|
||||
<p className="text-sm text-gray-500 mt-2">Certificate ID: {certificateId}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-red-50 to-pink-100 flex items-center justify-center">
|
||||
<div className="text-center max-w-md mx-auto p-8">
|
||||
<AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">Certificate Not Found</h1>
|
||||
<p className="text-gray-600 mb-4">{error}</p>
|
||||
<p className="text-sm text-gray-500 mb-6">Certificate ID: {certificateId}</p>
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
|
||||
>
|
||||
Go to Homepage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!certificate) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-600">No certificate data available</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 py-12 px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-green-500" />
|
||||
<h1 className="text-3xl font-bold text-gray-900">Verified Certificate</h1>
|
||||
</div>
|
||||
<p className="text-gray-600">This certificate has been verified on the blockchain</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-12 border-8 border-indigo-200 relative overflow-hidden">
|
||||
|
||||
<div className="absolute top-6 right-6 bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span>Verified</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
|
||||
<div className="text-8xl mb-6">🏆</div>
|
||||
|
||||
<h2 className="text-5xl font-bold text-indigo-600 mb-6 font-serif">
|
||||
CERTIFICATE OF COMPLETION
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-gray-600 mb-8">This is to certify that</p>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="text-6xl font-bold text-gray-900 mb-4 border-t-4 border-b-4 border-indigo-300 py-6 capitalize font-serif">
|
||||
{certificate.user_name}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">Student</p>
|
||||
</div>
|
||||
|
||||
<p className="text-xl text-gray-600 mb-4">has successfully completed the course</p>
|
||||
<h3 className="text-3xl font-semibold text-gray-900 mb-8 italic font-serif">
|
||||
"{certificate.course_title}"
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-8 p-6 bg-indigo-50 rounded-xl">
|
||||
<div className="text-center">
|
||||
<Calendar className="w-8 h-8 text-indigo-600 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600">Completion Date</p>
|
||||
<p className="font-semibold text-gray-900">
|
||||
{new Date(certificate.completion_date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Award className="w-8 h-8 text-indigo-600 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600">Certificate ID</p>
|
||||
<p className="font-mono font-semibold text-indigo-600 text-sm">
|
||||
{certificate.certificate_id}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<User className="w-8 h-8 text-indigo-600 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600">Views</p>
|
||||
<p className="font-semibold text-gray-900">{certificate.view_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 pt-8 border-t-2 border-gray-200">
|
||||
<div className="flex justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-48 h-0.5 bg-gray-400 mb-3 mx-auto"></div>
|
||||
<p className="text-xl font-semibold text-gray-700">
|
||||
{certificate.mentor_name}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">Course Instructor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||
<p className="text-sm text-gray-500">
|
||||
<strong>{certificate.issued_by}</strong><br/>
|
||||
Digital Certificate of Achievement<br/>
|
||||
<span className="text-purple-600">🔒 Blockchain Verified</span>
|
||||
</p>
|
||||
{certificate.blockchain_hash && (
|
||||
<p className="text-xs text-gray-400 mt-2 font-mono break-all">
|
||||
Blockchain Hash: {certificate.blockchain_hash}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 mt-8">
|
||||
<button
|
||||
onClick={handleDownloadPDF}
|
||||
className="flex items-center justify-center space-x-2 px-8 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium transition-colors"
|
||||
>
|
||||
<Download className="w-5 h-5" />
|
||||
<span>Download PDF</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className="flex items-center justify-center space-x-2 px-8 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition-colors"
|
||||
>
|
||||
<Share2 className="w-5 h-5" />
|
||||
<span>Share Certificate</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-8 text-sm text-gray-500">
|
||||
<p>This certificate can be verified at any time using the certificate ID above.</p>
|
||||
<p className="mt-2">Powered by OpenLearnX • Secured by Blockchain Technology</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { Loader2, Play, Clock, BookOpen, ChevronDown, ChevronRight, User, Users,
|
||||
import { toast } from "react-hot-toast"
|
||||
import api from "@/lib/api"
|
||||
import { useAuth } from "@/context/auth-context"
|
||||
import { CertificateModal } from "@/components/certificate-modal"
|
||||
|
||||
type Course = {
|
||||
id: string
|
||||
@@ -60,6 +61,9 @@ export default function CoursePage() {
|
||||
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null)
|
||||
const [expandedModules, setExpandedModules] = useState<{ [moduleId: string]: boolean }>({})
|
||||
const [completed, setCompleted] = useState(false)
|
||||
|
||||
// ✅ Certificate Modal State
|
||||
const [showCertificateModal, setShowCertificateModal] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user && !firebaseUser) {
|
||||
@@ -320,9 +324,10 @@ export default function CoursePage() {
|
||||
return allLessons.length > 0 && allLessons[allLessons.length - 1].id === selectedLessonId
|
||||
}
|
||||
|
||||
// ✅ Updated markComplete function to show certificate modal
|
||||
const markComplete = () => {
|
||||
setCompleted(true)
|
||||
toast.success("Course Completed! 🎉")
|
||||
setShowCertificateModal(true) // Show certificate modal instead of just toast
|
||||
}
|
||||
|
||||
const getTotalLessons = () => {
|
||||
@@ -638,13 +643,19 @@ export default function CoursePage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Completion Message */}
|
||||
{completed && (
|
||||
{/* ✅ Updated Completion Message */}
|
||||
{completed && !showCertificateModal && (
|
||||
<div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-6 text-center">
|
||||
<div className="text-green-700">
|
||||
<div className="text-4xl mb-2">🎉</div>
|
||||
<h3 className="text-xl font-bold mb-2">Congratulations!</h3>
|
||||
<p>You have successfully completed this course. Certificate coming soon!</p>
|
||||
<p className="mb-4">You have successfully completed this course!</p>
|
||||
<button
|
||||
onClick={() => setShowCertificateModal(true)}
|
||||
className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
|
||||
>
|
||||
Get Your Certificate 🏆
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -731,6 +742,19 @@ export default function CoursePage() {
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ Certificate Modal */}
|
||||
{showCertificateModal && course && (
|
||||
<CertificateModal
|
||||
isOpen={showCertificateModal}
|
||||
onClose={() => setShowCertificateModal(false)}
|
||||
courseTitle={course.title}
|
||||
courseMentor={course.mentor}
|
||||
courseId={course.id}
|
||||
userId={user?.uid || firebaseUser?.uid || 'anonymous'}
|
||||
walletId={user?.wallet || firebaseUser?.uid || 'no-wallet'} // Adjust based on your user structure
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,584 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { X, Download, Share2, Award, Calendar, User, BookOpen, Wallet, CheckCircle } from "lucide-react"
|
||||
import { toast } from "react-hot-toast"
|
||||
|
||||
interface Certificate {
|
||||
certificate_id: string
|
||||
token_id?: string
|
||||
user_name: string
|
||||
course_title: string
|
||||
mentor_name: string
|
||||
completion_date: string
|
||||
wallet_id?: string
|
||||
verification_url?: string
|
||||
share_code?: string
|
||||
public_url?: string
|
||||
unique_url?: string
|
||||
message?: string
|
||||
}
|
||||
|
||||
interface CertificateModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
courseTitle: string
|
||||
courseMentor: string
|
||||
courseId: string
|
||||
userId: string
|
||||
walletId: string
|
||||
}
|
||||
|
||||
export function CertificateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
courseTitle,
|
||||
courseMentor,
|
||||
courseId,
|
||||
userId,
|
||||
walletId
|
||||
}: CertificateModalProps) {
|
||||
const [step, setStep] = useState<'input' | 'generating' | 'completed'>('input')
|
||||
const [userName, setUserName] = useState('')
|
||||
const [certificate, setCertificate] = useState<Certificate | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleGenerateCertificate = async () => {
|
||||
if (!userName.trim()) {
|
||||
toast.error("Please enter your name")
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setStep('generating')
|
||||
|
||||
try {
|
||||
console.log('🎓 Generating certificate for STUDENT:', userName.trim())
|
||||
|
||||
const response = await fetch('http://127.0.0.1:5000/api/certificate/mint', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_name: userName.trim(),
|
||||
course_id: courseId,
|
||||
wallet_id: walletId,
|
||||
user_id: userId,
|
||||
course_title: courseTitle
|
||||
})
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
console.log('✅ Certificate API response:', data)
|
||||
|
||||
const certificateData = data.certificate
|
||||
|
||||
const certificateWithWallet = {
|
||||
certificate_id: certificateData.certificate_id,
|
||||
token_id: certificateData.token_id,
|
||||
user_name: certificateData.user_name,
|
||||
course_title: certificateData.course_title,
|
||||
mentor_name: certificateData.mentor_name,
|
||||
completion_date: certificateData.completion_date,
|
||||
wallet_id: walletId,
|
||||
verification_url: certificateData.verification_url,
|
||||
share_code: certificateData.share_code,
|
||||
public_url: certificateData.public_url,
|
||||
unique_url: certificateData.unique_url,
|
||||
message: certificateData.message
|
||||
}
|
||||
|
||||
console.log('🎯 Certificate data:', certificateWithWallet)
|
||||
console.log('🆔 Unique Certificate ID:', certificateWithWallet.certificate_id)
|
||||
|
||||
setCertificate(certificateWithWallet)
|
||||
setStep('completed')
|
||||
toast.success(`Certificate generated for ${certificateWithWallet.user_name}! 🎉`)
|
||||
} else {
|
||||
const error = await response.json()
|
||||
console.error('❌ Certificate error:', error)
|
||||
toast.error(error.error || "Failed to generate certificate")
|
||||
setStep('input')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Certificate generation error:', error)
|
||||
toast.error("Failed to generate certificate. Please check your connection.")
|
||||
setStep('input')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownloadCertificate = async () => {
|
||||
if (!certificate) return
|
||||
|
||||
try {
|
||||
const certificateHTML = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Certificate - ${certificate.user_name}</title>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.certificate {
|
||||
background: white;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 60px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 8px solid #4f46e5;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #4f46e5;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 48px;
|
||||
color: #1f2937;
|
||||
font-weight: 700;
|
||||
margin: 40px 0;
|
||||
padding: 20px 0;
|
||||
border-top: 3px solid #4f46e5;
|
||||
border-bottom: 3px solid #4f46e5;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 28px;
|
||||
color: #1f2937;
|
||||
margin: 20px 0;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wallet-container {
|
||||
background: #f3f4f6;
|
||||
border: 2px dashed #9333ea;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin: 25px auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.wallet-address {
|
||||
font-size: 14px;
|
||||
color: #7c3aed;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 16px;
|
||||
color: #374151;
|
||||
margin: 20px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mentor-section {
|
||||
margin-top: 50px;
|
||||
padding-top: 30px;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.mentor-name {
|
||||
font-size: 18px;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cert-id {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-top: 20px;
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #f9fafb;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.trophy {
|
||||
font-size: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="certificate">
|
||||
<div class="trophy">🏆</div>
|
||||
<h1 class="title">CERTIFICATE OF COMPLETION</h1>
|
||||
|
||||
<div class="subtitle">This is to certify that</div>
|
||||
|
||||
<div class="student-name">${certificate.user_name}</div>
|
||||
|
||||
<div class="wallet-container">
|
||||
<div style="font-size: 14px; color: #374151; margin-bottom: 8px; font-weight: 600;">Blockchain Wallet Address</div>
|
||||
<div class="wallet-address">${certificate.wallet_id}</div>
|
||||
</div>
|
||||
|
||||
<div class="subtitle">has successfully completed the course</div>
|
||||
<div class="course-title">"${certificate.course_title}"</div>
|
||||
|
||||
<div class="date">✅ Completed on: ${new Date(certificate.completion_date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}</div>
|
||||
|
||||
<div class="mentor-section">
|
||||
<div style="width: 200px; height: 2px; background: #6b7280; margin: 0 auto 10px auto;"></div>
|
||||
<div class="mentor-name">${certificate.mentor_name}</div>
|
||||
<div style="font-size: 14px; color: #6b7280; margin-top: 5px;">Course Instructor</div>
|
||||
</div>
|
||||
|
||||
<div class="cert-id">
|
||||
<strong>Certificate ID: ${certificate.certificate_id}</strong><br>
|
||||
OpenLearnX Learning Platform<br>
|
||||
<span style="color: #7c3aed;">🔒 Blockchain Verified Completion</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
const printWindow = window.open('', '_blank')
|
||||
if (printWindow) {
|
||||
printWindow.document.write(certificateHTML)
|
||||
printWindow.document.close()
|
||||
|
||||
printWindow.onload = () => {
|
||||
setTimeout(() => {
|
||||
printWindow.print()
|
||||
printWindow.close()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
toast.success("Certificate PDF download initiated! Use your browser's print dialog to save as PDF.")
|
||||
} else {
|
||||
toast.error("Popup blocked. Please allow popups and try again.")
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('PDF generation error:', error)
|
||||
toast.error("Failed to generate PDF")
|
||||
}
|
||||
}
|
||||
|
||||
const handleShareCertificate = async () => {
|
||||
if (!certificate) return
|
||||
|
||||
const shareText = `🎓 I just completed "${certificate.course_title}" on OpenLearnX!\n\n👤 Student: ${certificate.user_name}\n🏆 Certificate ID: ${certificate.certificate_id}\n🔗 View: ${certificate.public_url || window.location.origin + certificate.unique_url}\n\n#OpenLearnX #Blockchain #Learning`
|
||||
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: `Certificate of Completion - ${certificate.course_title}`,
|
||||
text: shareText,
|
||||
url: certificate.public_url || `${window.location.origin}${certificate.unique_url}`
|
||||
})
|
||||
|
||||
// Track share
|
||||
try {
|
||||
await fetch(`http://127.0.0.1:5000/api/certificate/share/${certificate.certificate_id}`, {
|
||||
method: 'POST'
|
||||
})
|
||||
} catch (e) {
|
||||
console.log('Share tracking failed:', e)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Share cancelled')
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareText)
|
||||
toast.success("Certificate details copied to clipboard!")
|
||||
|
||||
// Track share
|
||||
try {
|
||||
await fetch(`http://127.0.0.1:5000/api/certificate/share/${certificate.certificate_id}`, {
|
||||
method: 'POST'
|
||||
})
|
||||
} catch (e) {
|
||||
console.log('Share tracking failed:', e)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Failed to copy certificate details")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setStep('input')
|
||||
setUserName('')
|
||||
setCertificate(null)
|
||||
setLoading(false)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
|
||||
{/* Step 1: Name Input */}
|
||||
{step === 'input' && (
|
||||
<>
|
||||
<div className="px-8 py-6 border-b border-gray-200 flex justify-between items-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-full flex items-center justify-center">
|
||||
<Award className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Generate Certificate</h2>
|
||||
<p className="text-gray-600">You've completed the course!</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleClose} className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="text-6xl mb-4">🎉</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">Congratulations!</h3>
|
||||
<p className="text-gray-600">
|
||||
You have successfully completed <strong>"{courseTitle}"</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-6 mb-8">
|
||||
<h4 className="font-semibold text-gray-900 mb-4">Course Details:</h4>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-center text-gray-700">
|
||||
<BookOpen className="w-4 h-4 mr-3 text-indigo-600" />
|
||||
<span><strong>Course:</strong> {courseTitle}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-700">
|
||||
<User className="w-4 h-4 mr-3 text-indigo-600" />
|
||||
<span><strong>Instructor:</strong> {courseMentor}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-700">
|
||||
<Calendar className="w-4 h-4 mr-3 text-indigo-600" />
|
||||
<span><strong>Completed:</strong> {new Date().toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex items-start text-gray-700">
|
||||
<Wallet className="w-4 h-4 mr-3 mt-0.5 text-purple-600" />
|
||||
<div>
|
||||
<span><strong>Wallet:</strong></span>
|
||||
<div className="font-mono text-xs text-purple-600 mt-1 break-all">
|
||||
{walletId}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Enter your full name for the certificate: *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
placeholder="e.g., John Smith"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-lg"
|
||||
autoFocus
|
||||
maxLength={50}
|
||||
/>
|
||||
<div className="flex justify-between items-center mt-2">
|
||||
<p className="text-xs text-gray-500">
|
||||
Your name will appear prominently on the certificate.
|
||||
</p>
|
||||
<span className="text-xs text-gray-400">
|
||||
{userName.length}/50
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerateCertificate}
|
||||
disabled={!userName.trim() || loading}
|
||||
className="flex-1 px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-all"
|
||||
>
|
||||
{loading ? 'Generating...' : 'Generate Certificate'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 2: Generating */}
|
||||
{step === 'generating' && (
|
||||
<div className="px-8 py-12 text-center">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-indigo-600 mx-auto mb-6"></div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">Generating Your Certificate</h3>
|
||||
<p className="text-gray-600">Creating unique certificate ID and blockchain verification...</p>
|
||||
<div className="mt-4 flex items-center justify-center space-x-2 text-sm text-gray-500">
|
||||
<div className="w-2 h-2 bg-indigo-600 rounded-full animate-bounce"></div>
|
||||
<div className="w-2 h-2 bg-indigo-600 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
|
||||
<div className="w-2 h-2 bg-indigo-600 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Certificate Generated */}
|
||||
{step === 'completed' && certificate && (
|
||||
<>
|
||||
<div className="px-8 py-6 border-b border-gray-200 flex justify-between items-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Certificate Ready!</h2>
|
||||
<p className="text-gray-600">For: {certificate.user_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleClose} className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<div className="bg-gradient-to-br from-purple-50 to-indigo-50 border-4 border-indigo-200 rounded-xl p-8 mb-8 text-center relative overflow-hidden">
|
||||
<div className="absolute top-4 right-4 bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-semibold flex items-center space-x-1">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
<span>Verified</span>
|
||||
</div>
|
||||
|
||||
<div className="text-4xl mb-4">🏆</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">CERTIFICATE OF COMPLETION</h3>
|
||||
<p className="text-gray-600 mb-6">This is to certify that</p>
|
||||
|
||||
<div className="mb-6">
|
||||
<h4 className="text-4xl font-bold text-indigo-600 mb-3 border-b-2 border-indigo-300 pb-2 inline-block capitalize">
|
||||
{certificate.user_name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 mt-2">Student</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-gray-500 mb-2">Blockchain Wallet Address:</p>
|
||||
<div className="bg-purple-100 border-2 border-dashed border-purple-300 rounded-lg p-3 mx-auto max-w-md">
|
||||
<p className="text-purple-700 font-mono text-sm break-all">
|
||||
{certificate.wallet_id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-2">has successfully completed the course</p>
|
||||
<h5 className="text-xl font-semibold text-gray-900 mb-4 italic">"{certificate.course_title}"</h5>
|
||||
|
||||
<div className="text-sm text-gray-500 mb-6">
|
||||
<p>Completed on: {new Date(certificate.completion_date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-indigo-200">
|
||||
<div className="flex justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-32 h-0.5 bg-gray-400 mb-2 mx-auto"></div>
|
||||
<p className="text-base font-semibold text-gray-700">
|
||||
{certificate.mentor_name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">Course Instructor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-indigo-200">
|
||||
<div className="bg-gray-50 rounded-lg p-4 border">
|
||||
<p className="text-sm font-semibold text-gray-700 mb-2">🆔 Unique Certificate ID:</p>
|
||||
<p className="text-lg font-mono font-bold text-indigo-600 bg-white px-3 py-2 rounded border">
|
||||
{certificate.certificate_id}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-4">
|
||||
<strong>OpenLearnX Learning Platform</strong><br/>
|
||||
<span className="text-purple-600">🔒 Blockchain Verified Completion</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<button
|
||||
onClick={handleDownloadCertificate}
|
||||
className="flex items-center justify-center space-x-2 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium transition-colors"
|
||||
>
|
||||
<Download className="w-5 h-5" />
|
||||
<span>Download PDF</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleShareCertificate}
|
||||
className="flex items-center justify-center space-x-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition-colors"
|
||||
>
|
||||
<Share2 className="w-5 h-5" />
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
🎉 Your certificate with unique ID <strong>{certificate.certificate_id}</strong> has been generated!
|
||||
</p>
|
||||
{certificate.unique_url && (
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
View at: <a href={certificate.unique_url} className="text-indigo-600 hover:underline">{certificate.unique_url}</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -45,6 +45,7 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "1.0.4",
|
||||
"crypto-js": "^4.2.0",
|
||||
"date-fns": "4.1.0",
|
||||
"embla-carousel-react": "8.5.1",
|
||||
"ethers": "latest",
|
||||
@@ -72,6 +73,7 @@
|
||||
"zod": "^3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
|
||||
Generated
+16
@@ -116,6 +116,9 @@ importers:
|
||||
cmdk:
|
||||
specifier: 1.0.4
|
||||
version: 1.0.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
crypto-js:
|
||||
specifier: ^4.2.0
|
||||
version: 4.2.0
|
||||
date-fns:
|
||||
specifier: 4.1.0
|
||||
version: 4.1.0
|
||||
@@ -192,6 +195,9 @@ importers:
|
||||
specifier: ^3.24.1
|
||||
version: 3.25.76
|
||||
devDependencies:
|
||||
'@types/crypto-js':
|
||||
specifier: ^4.2.2
|
||||
version: 4.2.2
|
||||
'@types/node':
|
||||
specifier: ^22
|
||||
version: 22.16.5
|
||||
@@ -1404,6 +1410,9 @@ packages:
|
||||
'@swc/helpers@0.5.15':
|
||||
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
|
||||
|
||||
'@types/crypto-js@4.2.2':
|
||||
resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
|
||||
|
||||
'@types/d3-array@3.2.1':
|
||||
resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
|
||||
|
||||
@@ -1651,6 +1660,9 @@ packages:
|
||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
crypto-js@4.2.0:
|
||||
resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
|
||||
|
||||
cssesc@3.0.0:
|
||||
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
|
||||
engines: {node: '>=4'}
|
||||
@@ -4120,6 +4132,8 @@ snapshots:
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
|
||||
'@types/crypto-js@4.2.2': {}
|
||||
|
||||
'@types/d3-array@3.2.1': {}
|
||||
|
||||
'@types/d3-color@3.1.3': {}
|
||||
@@ -4375,6 +4389,8 @@ snapshots:
|
||||
shebang-command: 2.0.0
|
||||
which: 2.0.2
|
||||
|
||||
crypto-js@4.2.0: {}
|
||||
|
||||
cssesc@3.0.0: {}
|
||||
|
||||
csstype@3.1.3: {}
|
||||
|
||||
Reference in New Issue
Block a user