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">
|
||||
|
||||
Reference in New Issue
Block a user