first commit

components/CourseGrid.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { CourseRow } from './CourseRow';
 import { Section, Course } from '../types';
-import { initDB, getCourses } from '../services/db';
+import { getCourses } from '../services/db';
+import { useAuth } from '../context/AuthContext';
 import { Loader2, ChevronLeft, ChevronRight } from 'lucide-react';
 import { CATEGORIES } from '../constants';
 
@@ -17,6 +18,7 @@ export const CourseGrid: React.FC<CourseGridProps> = ({
   const [courses, setCourses] = useState<Course[]>([]);
   const [loading, setLoading] = useState(true);
   const [activeCategory, setActiveCategory] = useState<string>('all');
+  const { user } = useAuth();
 
   // Slider State & Refs for Categories
   const categoryScrollRef = useRef<HTMLDivElement>(null);
@@ -37,14 +39,15 @@ export const CourseGrid: React.FC<CourseGridProps> = ({
 
   useEffect(() => {
     const loadData = async () => {
-      await initDB();
-      const allCourses = await getCourses();
-      setCourses(allCourses);
-      setLoading(false);
+      try {
+        setCourses(await getCourses());
+      } finally {
+        setLoading(false);
+      }
     };
 
     loadData();
-  }, []);
+  }, [user]);
 
   useEffect(() => {
     checkCategoryBoundaries();
@@ -225,4 +228,3 @@ export const CourseGrid: React.FC<CourseGridProps> = ({
     </section>
   );
 };
-

components/CoursePlayerModal.tsx

@@ -107,7 +107,7 @@ export const CoursePlayerModal: React.FC<CoursePlayerModalProps> = ({ course, on
       const currentIndex = course.lessons.findIndex(l => l.id === currentLesson.id);
       if (currentIndex >= 0 && currentIndex < course.lessons.length - 1) {
         const nextLesson = course.lessons[currentIndex + 1];
-        if (nextLesson.isFree || user) {
+        if (user) {
           setTimeout(() => {
             setCurrentLesson(nextLesson);
           }, 1000);
@@ -181,7 +181,7 @@ export const CoursePlayerModal: React.FC<CoursePlayerModalProps> = ({ course, on
   const currentLessonAttachments = currentLesson?.attachments || [];
 
   // Access Control Logic
-  const canWatch = currentLesson && (currentLesson.isFree || user);
+  const canWatch = currentLesson && Boolean(user);
 
   if (!course) return null;
 
@@ -398,7 +398,7 @@ export const CoursePlayerModal: React.FC<CoursePlayerModalProps> = ({ course, on
                   {course.lessons.map((lesson, index) => {
                     const isActive = currentLesson?.id === lesson.id;
                     const isCompleted = completedLessonIds.includes(lesson.id);
-                    const isLocked = !lesson.isFree && !user;
+                    const isLocked = !user;
                     const hasAttachments = lesson.attachments && lesson.attachments.length > 0;
                     
                     return (

components/LoginModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { X, Loader2, GraduationCap, School, KeyRound } from 'lucide-react';
+import { X, Loader2, GraduationCap, School, KeyRound, UserPlus } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 import { UserRole } from '../types';
@@ -12,62 +12,70 @@ interface LoginModalProps {
 export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [role, setRole] = useState<UserRole>('student'); // Default role
+  const [name, setName] = useState('');
+  const [role, setRole] = useState<UserRole>('student');
+  const [isRegistering, setIsRegistering] = useState(false);
   const [error, setError] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { login } = useAuth();
+  const { login, register, logout } = useAuth();
   const navigate = useNavigate();
 
   if (!isOpen) return null;
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
     setError('');
     setIsSubmitting(true);
 
-    // Simulate network delay for "premium" feel
-    setTimeout(() => {
-      // In a real app, the backend verifies credentials AND role matches.
-      // Here we simulate checking if the user exists for that specific context.
-      const success = login(email);
+    if (isRegistering && role === 'professor') {
       setIsSubmitting(false);
-      
-      if (success) {
-        onClose();
-        if (email === 'admin@prof.com') {
-             // Force check: if they selected student but logged in as admin credentials, redirect correctly or warn.
-             // For UX simplicity here, we trust the credential mapping in AuthContext
-             navigate('/gerenciar');
-        } else {
-             navigate('/');
-        }
-      } else {
-        setError('Credenciais inválidas. Verifique o email ou a função selecionada.');
-      }
-    }, 800);
+      setError('Contas de instrutor são liberadas pelo administrador da plataforma.');
+      return;
+    }
+
+    const signedInUser = isRegistering
+      ? await register(name, email, password)
+      : await login(email, password);
+    setIsSubmitting(false);
+
+    if (!signedInUser) {
+      setError(isRegistering
+        ? 'Não foi possível criar sua conta. Use um e-mail válido e uma senha com pelo menos 12 caracteres.'
+        : 'Credenciais inválidas. Verifique seu e-mail e senha.');
+      return;
+    }
+
+    if (signedInUser.role !== role) {
+      logout();
+      setError(role === 'professor'
+        ? 'Esta conta não possui acesso de instrutor.'
+        : 'Esta conta possui acesso de instrutor. Selecione a opção Instrutor.');
+      return;
+    }
+
+    onClose();
+    navigate(signedInUser.role === 'professor' ? '/gerenciar' : '/');
   };
 
   const handleDemoLogin = (roleType: UserRole) => {
-    const demoEmail = roleType === 'professor' ? 'admin@prof.com' : 'aluno@test.com';
-    setEmail(demoEmail);
-    setPassword('demo123');
     setRole(roleType);
+    setIsRegistering(false);
+    if (roleType === 'professor') {
+      setEmail('admin@compor.local');
+      setPassword('ComporAdmin123!');
+    } else {
+      setEmail('student@compor.local');
+      setPassword('ComporStudent123!');
+    }
+    setError('');
   };
 
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
-      {/* Backdrop */}
-      <div 
-        className="absolute inset-0 bg-black/60 backdrop-blur-xl transition-opacity" 
-        onClick={onClose}
-      />
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-xl transition-opacity" onClick={onClose} />
 
-      {/* Modal Content */}
       <div className="relative w-full max-w-md bg-[#1c1c1e] rounded-[8px] shadow-xl border border-white/10 p-6 md:p-8 animate-fade-in-up">
-        <button 
-          onClick={onClose}
-          className="absolute top-5 right-5 text-white/40 hover:text-white transition-colors"
-        >
+        <button onClick={onClose} className="absolute top-5 right-5 text-white/40 hover:text-white transition-colors" aria-label="Fechar">
           <X className="w-5 h-5" />
         </button>
 
@@ -76,91 +84,48 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
           <p className="text-body-sm font-normal text-white/60 tracking-body-sm leading-body-sm">Acesse seu espaço de aprendizado e materiais</p>
         </div>
 
-        {/* Role Toggle */}
         <div className="flex bg-black/40 p-1 rounded-[8px] mb-6 border border-white/5 relative">
-            {/* Sliding Background */}
-            <div 
-                className={`absolute top-1 bottom-1 w-[calc(50%-4px)] bg-orange-500/20 rounded-[8px] transition-all duration-300 ease-out border border-orange-500/30 shadow-md ${role === 'student' ? 'left-1' : 'left-[calc(50%+4px)]'}`} 
-            />
-            
-            <button 
-                type="button"
-                onClick={() => setRole('student')}
-                className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'student' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}
-            >
-                <GraduationCap className="w-4 h-4" />
-                <span className="text-body-sm font-semibold tracking-body-sm">Aluno</span>
-            </button>
-            <button 
-                type="button"
-                onClick={() => setRole('professor')}
-                className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'professor' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}
-            >
-                <School className="w-4 h-4" />
-                <span className="text-body-sm font-semibold tracking-body-sm">Instrutor</span>
-            </button>
+          <div className={`absolute top-1 bottom-1 w-[calc(50%-4px)] bg-orange-500/20 rounded-[8px] transition-all duration-300 ease-out border border-orange-500/30 shadow-md ${role === 'student' ? 'left-1' : 'left-[calc(50%+4px)]'}`} />
+          <button type="button" onClick={() => setRole('student')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'student' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
+            <GraduationCap className="w-4 h-4" />
+            <span className="text-body-sm font-semibold tracking-body-sm">Aluno</span>
+          </button>
+          <button type="button" onClick={() => setRole('professor')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'professor' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
+            <School className="w-4 h-4" />
+            <span className="text-body-sm font-semibold tracking-body-sm">Instrutor</span>
+          </button>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-5">
           <div className="space-y-3">
-            <div>
-              <input
-                type="email"
-                placeholder="Seu e-mail"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body"
-                autoFocus
-              />
-            </div>
-            <div>
-              <input
-                type="password"
-                placeholder="Sua senha"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body"
-              />
-            </div>
+            {isRegistering && <input type="text" placeholder="Seu nome" value={name} onChange={(event) => setName(event.target.value)} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required autoFocus />}
+            <input type="email" placeholder="Seu e-mail" value={email} onChange={(event) => setEmail(event.target.value)} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required autoFocus={!isRegistering} />
+            <input type="password" placeholder="Sua senha" value={password} onChange={(event) => setPassword(event.target.value)} minLength={12} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required />
           </div>
 
-          {/* Quick Demo Buttons */}
-          <div className="flex gap-2 justify-center">
-            <button
-                type="button" 
-                onClick={() => handleDemoLogin('student')}
-                className="text-caption font-semibold tracking-caption text-orange-400 hover:text-orange-300 px-3 py-1 rounded-[980px] bg-orange-500/10 border border-orange-500/20 flex items-center gap-1 transition-colors"
-            >
+          {!isRegistering && (
+            <div className="flex gap-2 justify-center">
+              <button type="button" onClick={() => handleDemoLogin('student')} className="text-caption font-semibold tracking-caption text-orange-400 hover:text-orange-300 px-3 py-1 rounded-[980px] bg-orange-500/10 border border-orange-500/20 flex items-center gap-1 transition-colors">
                 <KeyRound className="w-3 h-3" /> Acesso Aluno (Demo)
-            </button>
-            <button 
-                type="button" 
-                onClick={() => handleDemoLogin('professor')}
-                className="text-caption font-semibold tracking-caption text-emerald-400 hover:text-emerald-300 px-3 py-1 rounded-[980px] bg-emerald-500/10 border border-emerald-500/20 flex items-center gap-1 transition-colors"
-            >
+              </button>
+              <button type="button" onClick={() => handleDemoLogin('professor')} className="text-caption font-semibold tracking-caption text-emerald-400 hover:text-emerald-300 px-3 py-1 rounded-[980px] bg-emerald-500/10 border border-emerald-500/20 flex items-center gap-1 transition-colors">
                 <KeyRound className="w-3 h-3" /> Acesso Instrutor (Demo)
-            </button>
-          </div>
-
-          {error && (
-            <div className="bg-red-500/10 border border-red-500/20 rounded-[8px] p-3">
-                <p className="text-red-400 text-caption font-semibold tracking-caption text-center">{error}</p>
+              </button>
             </div>
           )}
 
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="w-full bg-white text-black text-body-sm font-semibold tracking-body-sm py-3.5 rounded-[980px] hover:bg-gray-200 active:scale-95 transition-all duration-200 flex items-center justify-center gap-2 shadow-xl"
-          >
-            {isSubmitting ? (
-              <Loader2 className="w-5 h-5 animate-spin" />
-            ) : (
-              'Entrar'
-            )}
+          {error && <div className="bg-red-500/10 border border-red-500/20 rounded-[8px] p-3"><p className="text-red-400 text-caption font-semibold tracking-caption text-center">{error}</p></div>}
+
+          <button type="submit" disabled={isSubmitting} className="w-full bg-white text-black text-body-sm font-semibold tracking-body-sm py-3.5 rounded-[980px] hover:bg-gray-200 active:scale-95 transition-all duration-200 flex items-center justify-center gap-2 shadow-xl">
+            {isSubmitting ? <Loader2 className="w-5 h-5 animate-spin" /> : isRegistering ? <UserPlus className="w-5 h-5" /> : null}
+            {isRegistering ? 'Criar conta' : 'Entrar'}
           </button>
         </form>
+
+        <button type="button" onClick={() => { setIsRegistering((value) => !value); setError(''); }} className="w-full mt-5 text-xs text-orange-400 hover:text-orange-300 transition-colors">
+          {isRegistering ? 'Já possui conta? Entrar' : 'Não possui conta? Criar acesso de aluno'}
+        </button>
       </div>
     </div>
   );
-};
+};