feat: implement password reset functionality and global search feature
- Added forgot password and reset password APIs in the LMS service. - Created database migrations for password reset tokens and xAPI statements. - Implemented global search functionality with indexing for courses, lessons, discussions, and announcements. - Developed frontend pages for forgot password and reset password. - Introduced SCORM player component to handle xAPI statements tracking.
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
import { GraduationCap, Mail, ArrowLeft, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [sent, setSent] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setLoading(true);
|
||||
try {
|
||||
await lmsApi.forgotPassword(email.trim().toLowerCase());
|
||||
setSent(true);
|
||||
} catch {
|
||||
setError("Ocurrió un error. Intenta nuevamente.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-gradient-to-br dark:from-slate-950 dark:via-indigo-950 dark:to-slate-950 flex items-center justify-center p-4 transition-colors">
|
||||
<div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-indigo-600 rounded-2xl mb-4 shadow-lg shadow-indigo-600/30">
|
||||
<GraduationCap className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-black text-slate-900 dark:text-white mb-2">Recuperar contraseña</h1>
|
||||
<p className="text-slate-500 dark:text-indigo-200/60 text-sm">
|
||||
Ingresa tu correo y te enviaremos un enlace de restablecimiento.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-white/5 backdrop-blur-xl border border-slate-200 dark:border-white/10 shadow-xl rounded-3xl p-8">
|
||||
{sent ? (
|
||||
<div className="text-center py-4">
|
||||
<CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
|
||||
<p className="text-slate-700 dark:text-slate-300 font-medium">
|
||||
Si el correo existe en nuestro sistema, recibirás un enlace para restablecer tu contraseña.
|
||||
</p>
|
||||
<p className="text-slate-400 text-sm mt-2">Revisa tu bandeja de entrada o spam.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Correo Electrónico
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors"
|
||||
placeholder="nombre@correo.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
disabled={loading}
|
||||
type="submit"
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Enviando..." : "Enviar enlace"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<a href="/auth/login" className="inline-flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
|
||||
<ArrowLeft className="w-3 h-3" />
|
||||
Volver al inicio de sesión
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -109,6 +109,13 @@ export default function ExperienceLoginPage() {
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="••••••••" />
|
||||
</div>
|
||||
{isLogin && (
|
||||
<div className="text-right pt-1">
|
||||
<a href="/auth/forgot-password" className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
|
||||
¿Olvidaste tu contraseña?
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">{error}</div>}
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, Suspense } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
import { GraduationCap, Lock, CheckCircle } from "lucide-react";
|
||||
|
||||
function ResetPasswordForm() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const token = searchParams.get("token") ?? "";
|
||||
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
if (password.length < 8) {
|
||||
setError("La contraseña debe tener al menos 8 caracteres.");
|
||||
return;
|
||||
}
|
||||
if (password !== confirm) {
|
||||
setError("Las contraseñas no coinciden.");
|
||||
return;
|
||||
}
|
||||
if (!token) {
|
||||
setError("Token inválido o ausente.");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
await lmsApi.resetPassword(token, password);
|
||||
setSuccess(true);
|
||||
setTimeout(() => router.push("/auth/login"), 3000);
|
||||
} catch {
|
||||
setError("El enlace es inválido o ha expirado. Solicita uno nuevo.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-gradient-to-br dark:from-slate-950 dark:via-indigo-950 dark:to-slate-950 flex items-center justify-center p-4 transition-colors">
|
||||
<div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-indigo-600 rounded-2xl mb-4 shadow-lg shadow-indigo-600/30">
|
||||
<GraduationCap className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-black text-slate-900 dark:text-white mb-2">Nueva contraseña</h1>
|
||||
<p className="text-slate-500 dark:text-indigo-200/60 text-sm">
|
||||
Elige una contraseña segura de al menos 8 caracteres.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-white/5 backdrop-blur-xl border border-slate-200 dark:border-white/10 shadow-xl rounded-3xl p-8">
|
||||
{success ? (
|
||||
<div className="text-center py-4">
|
||||
<CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
|
||||
<p className="text-slate-700 dark:text-slate-300 font-medium">
|
||||
¡Contraseña actualizada correctamente!
|
||||
</p>
|
||||
<p className="text-slate-400 text-sm mt-2">Redirigiendo al inicio de sesión...</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Nueva Contraseña
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Confirmar Contraseña
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
required
|
||||
type="password"
|
||||
value={confirm}
|
||||
onChange={e => setConfirm(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
disabled={loading}
|
||||
type="submit"
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Guardando..." : "Guardar nueva contraseña"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<ResetPasswordForm />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import AudioResponsePlayer from "@/components/blocks/AudioResponsePlayer";
|
||||
import RolePlayingPlayer from "@/components/blocks/RolePlayingPlayer";
|
||||
import PeerReviewPlayer from "@/components/blocks/PeerReviewPlayer";
|
||||
import MermaidViewer from "@/components/blocks/MermaidViewer";
|
||||
import ScormPlayer from "@/components/blocks/ScormPlayer";
|
||||
import InteractiveTranscript from "@/components/InteractiveTranscript";
|
||||
import AITutor from "@/components/AITutor";
|
||||
import LessonLockedView from "@/components/LessonLockedView";
|
||||
@@ -507,6 +508,15 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
);
|
||||
case 'mermaid':
|
||||
return <MermaidViewer block={block} />;
|
||||
case 'scorm':
|
||||
return (
|
||||
<ScormPlayer
|
||||
lessonId={params.lessonId}
|
||||
courseId={params.id}
|
||||
title={block.title || lesson.title}
|
||||
launchUrl={block.launch_url || block.url || lesson.content_url || ""}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div className="p-4 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl text-xs font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
|
||||
}
|
||||
@@ -521,17 +531,26 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
</div>
|
||||
) : (lesson.content_url) ? (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
|
||||
<MediaPlayer
|
||||
id="main-media-fallback"
|
||||
lessonId={params.lessonId}
|
||||
title={lesson.title}
|
||||
url={lesson.content_url}
|
||||
media_type={(lesson.content_type as any) || 'video'}
|
||||
onTimeUpdate={setCurrentTime}
|
||||
initialPlayCount={0}
|
||||
isGraded={lesson.is_graded}
|
||||
hasTranscription={!!lesson.transcription}
|
||||
/>
|
||||
{lesson.content_type === 'scorm' || lesson.content_type === 'xapi' ? (
|
||||
<ScormPlayer
|
||||
lessonId={params.lessonId}
|
||||
courseId={params.id}
|
||||
title={lesson.title}
|
||||
launchUrl={lesson.content_url}
|
||||
/>
|
||||
) : (
|
||||
<MediaPlayer
|
||||
id="main-media-fallback"
|
||||
lessonId={params.lessonId}
|
||||
title={lesson.title}
|
||||
url={lesson.content_url}
|
||||
media_type={(lesson.content_type as any) || 'video'}
|
||||
onTimeUpdate={setCurrentTime}
|
||||
initialPlayCount={0}
|
||||
isGraded={lesson.is_graded}
|
||||
hasTranscription={!!lesson.transcription}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-20 text-center glass-card border-dashed border-black/10 dark:border-white/10">
|
||||
|
||||
@@ -5,20 +5,74 @@ import Image from "next/image";
|
||||
import { useBranding } from "@/context/BrandingContext";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { LogOut, Globe, Menu, X, Sun, Moon } from "lucide-react";
|
||||
import { LogOut, Globe, Menu, X, Sun, Moon, Search } from "lucide-react";
|
||||
import NotificationCenter from "./NotificationCenter";
|
||||
import { useState } from "react";
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { getImageUrl } from "@/lib/api";
|
||||
import { getImageUrl, lmsApi } from "@/lib/api";
|
||||
|
||||
export default function AppHeader() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { branding } = useBranding();
|
||||
const { user, logout } = useAuth();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const router = useRouter();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
// ── Búsqueda global ──
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState<Array<{ id: string; kind: string; title: string; snippet?: string; url: string; course_title?: string }>>([]);
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const runSearch = useCallback(async (q: string) => {
|
||||
if (!q.trim() || q.length < 2) { setSearchResults([]); return; }
|
||||
setSearchLoading(true);
|
||||
try {
|
||||
const res = await lmsApi.globalSearch(q);
|
||||
setSearchResults(res.results ?? []);
|
||||
} catch {
|
||||
setSearchResults([]);
|
||||
} finally {
|
||||
setSearchLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTimer.current) clearTimeout(searchTimer.current);
|
||||
searchTimer.current = setTimeout(() => runSearch(searchQuery), 350);
|
||||
return () => { if (searchTimer.current) clearTimeout(searchTimer.current); };
|
||||
}, [searchQuery, runSearch]);
|
||||
|
||||
// Cerrar al hacer click fuera
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
|
||||
setSearchOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
|
||||
function handleSearchSelect(url: string) {
|
||||
setSearchOpen(false);
|
||||
setSearchQuery("");
|
||||
setSearchResults([]);
|
||||
router.push(url);
|
||||
}
|
||||
|
||||
const kindLabel: Record<string, string> = {
|
||||
course: "Curso",
|
||||
lesson: "Lección",
|
||||
discussion: "Foro",
|
||||
announcement: "Anuncio",
|
||||
};
|
||||
|
||||
// Use platform_name if available, otherwise name, otherwise default
|
||||
const platformName = branding?.platform_name || branding?.name || 'Academia';
|
||||
|
||||
@@ -46,6 +100,56 @@ export default function AppHeader() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Búsqueda global */}
|
||||
{user && (
|
||||
<div ref={searchRef} className="relative hidden md:block">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={e => { setSearchQuery(e.target.value); setSearchOpen(true); }}
|
||||
onFocus={() => setSearchOpen(true)}
|
||||
placeholder="Buscar cursos, lecciones..."
|
||||
className="w-56 lg:w-72 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl py-2 pl-9 pr-3 text-sm text-slate-700 dark:text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
{searchOpen && searchQuery.length >= 2 && (
|
||||
<div className="absolute top-full mt-2 left-0 w-80 lg:w-96 bg-white dark:bg-slate-900 border border-black/10 dark:border-white/10 rounded-2xl shadow-2xl z-[200] overflow-hidden">
|
||||
{searchLoading ? (
|
||||
<div className="p-4 text-sm text-gray-400 text-center">Buscando...</div>
|
||||
) : searchResults.length === 0 ? (
|
||||
<div className="p-4 text-sm text-gray-400 text-center">Sin resultados para "{searchQuery}"</div>
|
||||
) : (
|
||||
<ul className="max-h-80 overflow-y-auto divide-y divide-black/5 dark:divide-white/5">
|
||||
{searchResults.map(r => (
|
||||
<li key={`${r.kind}-${r.id}`}>
|
||||
<button
|
||||
onClick={() => handleSearchSelect(r.url)}
|
||||
className="w-full px-4 py-3 text-left hover:bg-blue-50 dark:hover:bg-white/5 transition-colors flex flex-col gap-0.5"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 px-1.5 py-0.5 rounded">
|
||||
{kindLabel[r.kind] ?? r.kind}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-slate-800 dark:text-white truncate">{r.title}</span>
|
||||
</div>
|
||||
{r.snippet && (
|
||||
<p className="text-xs text-gray-400 truncate pl-0.5">{r.snippet}</p>
|
||||
)}
|
||||
{r.course_title && r.kind !== 'course' && (
|
||||
<p className="text-xs text-gray-500 truncate pl-0.5">en {r.course_title}</p>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && (
|
||||
<nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
|
||||
<Link href="/" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
|
||||
type Props = {
|
||||
lessonId: string;
|
||||
courseId: string;
|
||||
title: string;
|
||||
launchUrl: string;
|
||||
};
|
||||
|
||||
export default function ScormPlayer({ lessonId, courseId, title, launchUrl }: Props) {
|
||||
const [status, setStatus] = useState<string>("Iniciando contenido SCORM...");
|
||||
|
||||
const safeLaunchUrl = useMemo(() => {
|
||||
// Permitimos rutas relativas (proxy local) o URLs absolutas http/https
|
||||
if (!launchUrl) return "";
|
||||
if (launchUrl.startsWith("/")) return launchUrl;
|
||||
if (launchUrl.startsWith("http://") || launchUrl.startsWith("https://")) return launchUrl;
|
||||
return "";
|
||||
}, [launchUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
const onMessage = async (event: MessageEvent) => {
|
||||
const data = event.data;
|
||||
if (!data || typeof data !== "object") return;
|
||||
|
||||
const maybeVerb =
|
||||
data.verb ||
|
||||
data?.statement?.verb?.id ||
|
||||
data?.event ||
|
||||
data?.type;
|
||||
|
||||
const maybeObjectId =
|
||||
data.object_id ||
|
||||
data?.statement?.object?.id ||
|
||||
data?.objectId ||
|
||||
lessonId;
|
||||
|
||||
// Filtramos ruido y sólo procesamos eventos potencialmente xAPI/SCORM
|
||||
if (!maybeVerb) return;
|
||||
|
||||
const normalizedVerb = String(maybeVerb).toLowerCase();
|
||||
const looksRelevant =
|
||||
normalizedVerb.includes("xapi") ||
|
||||
normalizedVerb.includes("scorm") ||
|
||||
normalizedVerb.includes("completed") ||
|
||||
normalizedVerb.includes("passed") ||
|
||||
normalizedVerb.includes("progress") ||
|
||||
normalizedVerb.includes("initialized") ||
|
||||
normalizedVerb.includes("terminated") ||
|
||||
normalizedVerb.includes("launched");
|
||||
|
||||
if (!looksRelevant) return;
|
||||
|
||||
const score =
|
||||
typeof data?.result?.score?.scaled === "number"
|
||||
? Number(data.result.score.scaled) * 100
|
||||
: typeof data?.score === "number"
|
||||
? Number(data.score)
|
||||
: undefined;
|
||||
|
||||
const progress =
|
||||
typeof data?.progress === "number"
|
||||
? Number(data.progress)
|
||||
: typeof data?.result?.extensions?.progress === "number"
|
||||
? Number(data.result.extensions.progress)
|
||||
: undefined;
|
||||
|
||||
const completed =
|
||||
data?.completed === true ||
|
||||
data?.result?.completion === true ||
|
||||
normalizedVerb.includes("completed") ||
|
||||
normalizedVerb.includes("passed");
|
||||
|
||||
try {
|
||||
await lmsApi.trackXapiStatement({
|
||||
course_id: courseId,
|
||||
lesson_id: lessonId,
|
||||
verb: String(maybeVerb),
|
||||
object_id: String(maybeObjectId),
|
||||
score,
|
||||
progress,
|
||||
completed,
|
||||
raw_statement: data,
|
||||
});
|
||||
|
||||
if (completed) {
|
||||
setStatus("Contenido completado. Progreso registrado.");
|
||||
} else if (typeof progress === "number") {
|
||||
setStatus(`Progreso SCORM: ${Math.round(progress)}%`);
|
||||
} else {
|
||||
setStatus("Actividad SCORM en curso...");
|
||||
}
|
||||
} catch {
|
||||
setStatus("No se pudo registrar un evento xAPI.");
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", onMessage);
|
||||
return () => window.removeEventListener("message", onMessage);
|
||||
}, [courseId, lessonId]);
|
||||
|
||||
if (!safeLaunchUrl) {
|
||||
return (
|
||||
<div className="p-6 rounded-2xl border border-red-200 dark:border-red-900/40 bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-300">
|
||||
No hay una URL SCORM válida para esta lección.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-black uppercase tracking-wider text-slate-700 dark:text-slate-200">SCORM/xAPI Player</h3>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">{status}</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl overflow-hidden border border-black/10 dark:border-white/10 bg-black/5 dark:bg-black/30">
|
||||
<iframe
|
||||
title={title || "SCORM content"}
|
||||
src={safeLaunchUrl}
|
||||
className="w-full h-[72vh] bg-white"
|
||||
allow="fullscreen"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -224,9 +224,22 @@ export interface Block {
|
||||
initial_code?: string;
|
||||
solution?: string;
|
||||
test_cases?: { description: string; expected: string }[];
|
||||
// SCORM/xAPI fields
|
||||
launch_url?: string;
|
||||
metadata?: any;
|
||||
}
|
||||
|
||||
export interface TrackXapiPayload {
|
||||
course_id: string;
|
||||
lesson_id: string;
|
||||
verb: string;
|
||||
object_id: string;
|
||||
score?: number;
|
||||
progress?: number;
|
||||
completed?: boolean;
|
||||
raw_statement?: unknown;
|
||||
}
|
||||
|
||||
export interface CourseInstructor {
|
||||
id: string;
|
||||
course_id: string;
|
||||
@@ -607,6 +620,31 @@ export const lmsApi = {
|
||||
});
|
||||
},
|
||||
|
||||
async forgotPassword(email: string): Promise<{ message: string }> {
|
||||
return apiFetch('/auth/forgot-password', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email })
|
||||
});
|
||||
},
|
||||
|
||||
async resetPassword(token: string, new_password: string): Promise<{ message: string }> {
|
||||
return apiFetch('/auth/reset-password', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ token, new_password })
|
||||
});
|
||||
},
|
||||
|
||||
async globalSearch(q: string, limit = 20): Promise<{ query: string; total: number; results: Array<{ id: string; kind: string; title: string; snippet?: string; url: string; course_id?: string; course_title?: string }> }> {
|
||||
return apiFetch(`/search?q=${encodeURIComponent(q)}&limit=${limit}`);
|
||||
},
|
||||
|
||||
async trackXapiStatement(payload: TrackXapiPayload): Promise<{ id: string; message: string }> {
|
||||
return apiFetch('/xapi/statements', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
},
|
||||
|
||||
async getMe(): Promise<User> {
|
||||
return apiFetch('/auth/me', {}, false);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user