rede5/photum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(client): integra autenticacao real e melhora fluxo de login

Browse source 
- Integra AuthContext com API do Backend (/auth/login e /auth/register)
- Implementa Modo Hibrido: Demo Users usam Mock, outros usam API Real
- Habilita campo de senha e adiciona toggle de visibilidade (olho)
- Conecta formulario de Registro ao backend
- Adiciona preenchimento automatico de senha para usuarios de demonstracao
- Mapeia status 'ativo' do usuario vindo da API
This commit is contained in:
NANDO9322 2025-12-10 19:00:49 -03:00
parent 7a300de997
commit cf0cf4e95f
4 changed files with 123 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
frontend/contexts/AuthContext.tsx
View file

@ -36,8 +36,9 @@ const MOCK_USERS: User[] = [
interface AuthContextType {
user: User | null;
login: (email: string) => Promise<boolean>;
login: (email: string, password?: string) => Promise<boolean>;
logout: () => void;
register: (data: { nome: string; email: string; senha: string; telefone: string }) => Promise<boolean>;
availableUsers: User[]; // Helper for the login screen demo
}
@ -46,24 +47,78 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null);
const login = async (email: string) => {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 800));
const foundUser = MOCK_USERS.find(u => u.email === email);
if (foundUser) {
setUser(foundUser);
const login = async (email: string, password?: string) => {
// 1. Check for Demo/Mock users first
const mockUser = MOCK_USERS.find(u => u.email === email);
if (mockUser) {
await new Promise(resolve => setTimeout(resolve, 800)); // Simulate delay
setUser({ ...mockUser, ativo: true });
return true;
}
return false;
// 2. Try Real API
try {
const response = await fetch(`${import.meta.env.VITE_API_URL}/auth/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, senha: password })
});
if (!response.ok) {
console.error('Login failed:', response.statusText);
return false;
}
const data = await response.json();
// Store token (optional, if you need it for other requests outside cookies)
// localStorage.setItem('token', data.access_token);
const backendUser = data.user;
// Map backend user to frontend User type
const mappedUser: User = {
id: backendUser.id,
email: backendUser.email,
name: backendUser.email.split('@')[0], // Fallback name or from profile if available
role: backendUser.role as UserRole,
ativo: backendUser.ativo,
// ... propagate other fields if needed or fetch profile
};
setUser(mappedUser);
return true;
} catch (err) {
console.error('Login error:', err);
return false;
}
};
const logout = () => {
setUser(null);
};
const register = async (data: { nome: string; email: string; senha: string; telefone: string }) => {
try {
const response = await fetch(`${import.meta.env.VITE_API_URL}/auth/register`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error || 'Falha no cadastro');
}
return true;
} catch (err) {
console.error('Registration error:', err);
throw err;
}
};
return (
<AuthContext.Provider value={{ user, login, logout, availableUsers: MOCK_USERS }}>
<AuthContext.Provider value={{ user, login, logout, register, availableUsers: MOCK_USERS }}>
{children}
</AuthContext.Provider>
);

36
frontend/pages/Login.tsx
View file

@ -12,6 +12,8 @@ interface LoginProps {
export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
const { login, availableUsers } = useAuth();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
@ -20,7 +22,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
setIsLoading(true);
setError('');
const success = await login(email);
const success = await login(email, password);
if (!success) {
setError('Usuário não encontrado. Tente um dos e-mails de demonstração.');
}
@ -29,6 +31,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
const fillCredentials = (userEmail: string) => {
setEmail(userEmail);
setPassword('123456'); // Dummy password to pass HTML5 validation
};
const getRoleLabel = (role: UserRole) => {
@ -95,16 +98,31 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
</label>
<div className="relative">
<input
type="password"
type={showPassword ? 'text' : 'password'}
placeholder="••••••••"
readOnly
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{ focusRing: '2px solid #5A4B81' }}
onFocus={(e) => e.target.style.borderColor = '#5A4B81'}
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
/>
<button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
{showPassword ? (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
</svg>
) : (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
)}
</button>
</div>
</div>

49
frontend/pages/Register.tsx
View file

@ -1,8 +1,8 @@
import React, { useState } from 'react';
import { Button } from '../components/Button';
import { Input } from '../components/Input';
import { InstitutionForm } from '../components/InstitutionForm';
import { useAuth } from '../contexts/AuthContext';
import { useData } from '../contexts/DataContext';
interface RegisterProps {
@ -10,7 +10,8 @@ interface RegisterProps {
}
export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
const { addInstitution, registerPendingUser } = useData();
const { register } = useAuth();
const { addInstitution } = useData();
const [formData, setFormData] = useState({
name: '',
email: '',
@ -64,21 +65,25 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
return;
}
// Simular registro - usuário ficará pendente de aprovação
setTimeout(() => {
registerPendingUser({
id: tempUserId,
name: formData.name,
try {
await register({
nome: formData.name,
email: formData.email,
phone: formData.phone,
registeredInstitution: undefined
senha: formData.password,
telefone: formData.phone
});
setIsLoading(false);
setIsPending(true);
}, 1500);
} catch (err: any) {
setIsLoading(false);
setError(err.message || 'Erro ao realizar cadastro');
}
};
const handleInstitutionSubmit = (institutionData: any) => {
const handleInstitutionSubmit = async (institutionData: any) => {
// Logic for adding institution remains (mock or need API for it too?),
// but user registration must be real.
// Assuming institution addition is still mock for now in DataContext.
const newInstitution = {
...institutionData,
id: `inst-${Date.now()}`,
@ -88,19 +93,25 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
setRegisteredInstitutionName(newInstitution.name);
setShowInstitutionForm(false);
// Complete registration - usuário ficará pendente de aprovação
// Complete registration via API
setIsLoading(true);
setTimeout(() => {
registerPendingUser({
id: tempUserId,
name: formData.name,
try {
await register({
nome: formData.name,
email: formData.email,
phone: formData.phone,
registeredInstitution: newInstitution.name
senha: formData.password,
telefone: formData.phone
// Note: The backend register endpoint currently doesn't accept institution data directly.
// We'd need to create the institution separately after logging in, but the user won't be able to login yet (pending).
// Or update backend to accept it.
// For now, we perform the user registration.
});
setIsLoading(false);
setIsPending(true);
}, 1500);
} catch (err: any) {
setIsLoading(false);
setError(err.message || 'Erro ao realizar cadastro');
}
};
// Show institution form modal

1
frontend/types.ts
View file

@ -43,6 +43,7 @@ export interface User {
registeredInstitution?: string; // Nome da instituição cadastrada durante o registro (se houver)
phone?: string; // Telefone do usuário
createdAt?: string; // Data de criação do cadastro
ativo?: boolean;
}
export interface Institution {