diff --git a/frontend/pages/Home.tsx b/frontend/pages/Home.tsx index a999db8..4173a27 100644 --- a/frontend/pages/Home.tsx +++ b/frontend/pages/Home.tsx @@ -16,7 +16,7 @@ export const Home: React.FC = ({ onEnter }) => { const MOCK_ACCESS_CODE = "PHOTUM2025"; const handleRegisterClick = () => { - setShowAccessCodeModal(true); + setShowProfessionalPrompt(true); setAccessCode(""); setCodeError(""); }; @@ -29,7 +29,7 @@ export const Home: React.FC = ({ onEnter }) => { if (accessCode.toUpperCase() === MOCK_ACCESS_CODE) { setShowAccessCodeModal(false); - setShowProfessionalPrompt(true); + window.location.href = "/cadastro"; } else { setCodeError("Código de acesso inválido ou expirado"); } @@ -40,7 +40,7 @@ export const Home: React.FC = ({ onEnter }) => { if (isProfessional) { window.location.href = "/cadastro-profissional"; } else { - window.location.href = "/cadastro"; + setShowAccessCodeModal(true); } }; diff --git a/frontend/pages/Login.tsx b/frontend/pages/Login.tsx index acb8779..fbb5e78 100644 --- a/frontend/pages/Login.tsx +++ b/frontend/pages/Login.tsx @@ -1,8 +1,8 @@ import React, { useState } from "react"; import { useAuth } from "../contexts/AuthContext"; import { Button } from "../components/Button"; -import { Input } from "../components/Input"; import { UserRole } from "../types"; +import { X } from "lucide-react"; interface LoginProps { onNavigate?: (page: string) => void; @@ -16,6 +16,42 @@ export const Login: React.FC = ({ onNavigate }) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); + // Registration Modal States + const [showAccessCodeModal, setShowAccessCodeModal] = useState(false); + const [accessCode, setAccessCode] = useState(""); + const [showProfessionalPrompt, setShowProfessionalPrompt] = useState(false); + const [codeError, setCodeError] = useState(""); + const MOCK_ACCESS_CODE = "PHOTUM2025"; + + const handleRegisterClick = () => { + setShowProfessionalPrompt(true); + setAccessCode(""); + setCodeError(""); + }; + + const handleVerifyCode = () => { + if (accessCode.trim() === "") { + setCodeError("Por favor, digite o código de acesso"); + return; + } + + if (accessCode.toUpperCase() === MOCK_ACCESS_CODE) { + setShowAccessCodeModal(false); + window.location.href = "/cadastro"; + } else { + setCodeError("Código de acesso inválido ou expirado"); + } + }; + + const handleProfessionalChoice = (isProfessional: boolean) => { + setShowProfessionalPrompt(false); + if (isProfessional) { + window.location.href = "/cadastro-profissional"; + } else { + setShowAccessCodeModal(true); + } + }; + const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); @@ -84,7 +120,7 @@ export const Login: React.FC = ({ onNavigate }) => { Não tem uma conta?{" "} + + +

+ Digite o código de acesso fornecido pela empresa para continuar + com o cadastro. +

+ +
+ + { + setAccessCode(e.target.value.toUpperCase()); + setCodeError(""); + }} + onKeyPress={(e) => e.key === "Enter" && handleVerifyCode()} + className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent uppercase" + placeholder="Digite o código" + autoFocus + /> + {codeError && ( +

{codeError}

+ )} +
+ +
+

+ Atenção: O código de acesso é fornecido pela + empresa e tem validade temporária. +

+
+ +
+ + +
+ + + ) + } + + {/* Modal de Escolha de Tipo de Cadastro */} + { + showProfessionalPrompt && ( +
setShowProfessionalPrompt(false)} + > +
e.stopPropagation()} + > +
+

+ Tipo de Cadastro +

+ +
+ +

+ Você é um profissional (fotógrafo/cinegrafista) ou um cliente? +

+ +
+ + + +
+
+
+ ) + } + ); };