feat: ajusta fluxo de cadastro para permitir que somente empresas precisem entrar com codigo de acesso
This commit is contained in:
NANDO9322
parent
3a0a2041a2
commit
f625b6cd6c
2 changed files with 174 additions and 6 deletions
|
|
@ -16,7 +16,7 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
const MOCK_ACCESS_CODE = "PHOTUM2025";
|
||||
|
||||
const handleRegisterClick = () => {
|
||||
setShowAccessCodeModal(true);
|
||||
setShowProfessionalPrompt(true);
|
||||
setAccessCode("");
|
||||
setCodeError("");
|
||||
};
|
||||
|
|
@ -29,7 +29,7 @@ export const Home: React.FC<HomeProps> = ({ 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<HomeProps> = ({ onEnter }) => {
|
|||
if (isProfessional) {
|
||||
window.location.href = "/cadastro-profissional";
|
||||
} else {
|
||||
window.location.href = "/cadastro";
|
||||
setShowAccessCodeModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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<LoginProps> = ({ 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<LoginProps> = ({ onNavigate }) => {
|
|||
Não tem uma conta?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onNavigate?.("cadastro")}
|
||||
onClick={handleRegisterClick}
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "#B9CF33" }}
|
||||
>
|
||||
|
|
@ -252,6 +288,138 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Modal de Código de Acesso */}
|
||||
{
|
||||
showAccessCodeModal && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
||||
onClick={() => setShowAccessCodeModal(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 animate-fade-in-scale"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Código de Acesso
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowAccessCodeModal(false)}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Digite o código de acesso fornecido pela empresa para continuar
|
||||
com o cadastro.
|
||||
</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Código de Acesso *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={accessCode}
|
||||
onChange={(e) => {
|
||||
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 && (
|
||||
<p className="text-red-500 text-sm mt-2">{codeError}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-sm text-yellow-800">
|
||||
<strong>Atenção:</strong> O código de acesso é fornecido pela
|
||||
empresa e tem validade temporária.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowAccessCodeModal(false)}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleVerifyCode} className="flex-1">
|
||||
Verificar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/* Modal de Escolha de Tipo de Cadastro */}
|
||||
{
|
||||
showProfessionalPrompt && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
||||
onClick={() => setShowProfessionalPrompt(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 animate-fade-in-scale"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Tipo de Cadastro
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowProfessionalPrompt(false)}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Você é um profissional (fotógrafo/cinegrafista) ou um cliente?
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => handleProfessionalChoice(true)}
|
||||
className="w-full p-4 border-2 border-[#492E61] bg-[#492E61]/5 hover:bg-[#492E61]/10 rounded-xl transition-colors text-left group"
|
||||
>
|
||||
<h3 className="font-semibold text-[#492E61] mb-1">
|
||||
Sou Profissional
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Cadastro para fotógrafos e cinegrafistas
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleProfessionalChoice(false)}
|
||||
className="w-full p-4 border-2 border-[#B9CF33] bg-[#B9CF33]/5 hover:bg-[#B9CF33]/10 rounded-xl transition-colors text-left group"
|
||||
>
|
||||
<h3 className="font-semibold text-[#492E61] mb-1">
|
||||
Sou Cliente
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Cadastro para solicitar serviços
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue