v1.4: Segurança multi-tenant, file serving via API e UX humanizada
- Validação cross-tenant no login e rotas protegidas
- File serving via /api/files/{bucket}/{path} (eliminação DNS)
- Mensagens de erro humanizadas inline (sem pop-ups)
- Middleware tenant detection via headers customizados
- Upload de logos retorna URLs via API
- README atualizado com changelog v1.4 completo
This commit is contained in:
Erik Silva
@@ -3,26 +3,29 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input, Checkbox } from "@/components/ui";
|
||||
import toast, { Toaster } from 'react-hot-toast';
|
||||
import { saveAuth, isAuthenticated, getToken, clearAuth } from '@/lib/auth';
|
||||
import { API_ENDPOINTS } from '@/lib/api';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { LoginBranding } from '@/components/auth/LoginBranding';
|
||||
import {
|
||||
EnvelopeIcon,
|
||||
LockClosedIcon,
|
||||
ShieldCheckIcon,
|
||||
BoltIcon,
|
||||
UserGroupIcon,
|
||||
ChartBarIcon,
|
||||
ExclamationCircleIcon,
|
||||
CheckCircleIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
|
||||
|
||||
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
|
||||
const setGradientVariables = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuperAdmin, setIsSuperAdmin] = useState(false);
|
||||
const [subdomain, setSubdomain] = useState<string>('');
|
||||
const [errorMessage, setErrorMessage] = useState<string>('');
|
||||
const [successMessage, setSuccessMessage] = useState<string>('');
|
||||
const [formData, setFormData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
@@ -37,22 +40,6 @@ export default function LoginPage() {
|
||||
setSubdomain(sub);
|
||||
setIsSuperAdmin(superAdmin);
|
||||
|
||||
// Aplicar tema: dash sempre padrão; tenants aplicam o salvo ou vindo via query param
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const themeParam = searchParams.get('theme');
|
||||
|
||||
if (superAdmin) {
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
} else {
|
||||
const stored = localStorage.getItem(`agency-theme:${sub}`);
|
||||
const gradient = themeParam || stored || DEFAULT_GRADIENT;
|
||||
setGradientVariables(gradient);
|
||||
|
||||
if (themeParam) {
|
||||
localStorage.setItem(`agency-theme:${sub}`, gradient);
|
||||
}
|
||||
}
|
||||
|
||||
if (isAuthenticated()) {
|
||||
// Validar token antes de redirecionar para evitar loops
|
||||
const token = getToken();
|
||||
@@ -80,19 +67,27 @@ export default function LoginPage() {
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setErrorMessage('');
|
||||
setSuccessMessage('');
|
||||
|
||||
// Validações do lado do cliente
|
||||
if (!formData.email) {
|
||||
toast.error('Por favor, insira seu email');
|
||||
setErrorMessage('Por favor, insira seu email para continuar.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
toast.error('Por favor, insira um email válido');
|
||||
setErrorMessage('Ops! O formato do email não parece correto. Por favor, verifique e tente novamente.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.password) {
|
||||
toast.error('Por favor, insira sua senha');
|
||||
setErrorMessage('Por favor, insira sua senha para acessar sua conta.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.password.length < 3) {
|
||||
setErrorMessage('A senha parece muito curta. Por favor, verifique se digitou corretamente.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -111,8 +106,19 @@ export default function LoginPage() {
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || 'Credenciais inválidas');
|
||||
const error = await response.json().catch(() => ({}));
|
||||
|
||||
// Mensagens humanizadas para cada tipo de erro
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
setErrorMessage('Email ou senha incorretos. Por favor, verifique seus dados e tente novamente.');
|
||||
} else if (response.status >= 500) {
|
||||
setErrorMessage('Estamos com problemas no servidor no momento. Por favor, tente novamente em alguns instantes.');
|
||||
} else {
|
||||
setErrorMessage(error.message || 'Algo deu errado ao tentar fazer login. Por favor, tente novamente.');
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
@@ -121,57 +127,60 @@ export default function LoginPage() {
|
||||
|
||||
console.log('Login successful:', data.user);
|
||||
|
||||
toast.success('Login realizado com sucesso! Redirecionando...');
|
||||
setSuccessMessage('Login realizado com sucesso! Redirecionando você agora...');
|
||||
|
||||
setTimeout(() => {
|
||||
const target = isSuperAdmin ? '/superadmin' : '/dashboard';
|
||||
window.location.href = target;
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Erro ao fazer login. Verifique suas credenciais.');
|
||||
console.error('Login error:', error);
|
||||
setErrorMessage('Não conseguimos conectar ao servidor. Verifique sua conexão com a internet e tente novamente.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#FFFFFF',
|
||||
color: '#000000',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #E5E5E5',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ef4444',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
icon: '✓',
|
||||
style: {
|
||||
background: '#10B981',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
{/* Script inline para aplicar cor primária ANTES do React */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
try {
|
||||
const cachedPrimary = localStorage.getItem('agency-primary-color');
|
||||
if (cachedPrimary) {
|
||||
function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? parseInt(result[1], 16) + ' ' + parseInt(result[2], 16) + ' ' + parseInt(result[3], 16)
|
||||
: null;
|
||||
}
|
||||
|
||||
const primaryRgb = hexToRgb(cachedPrimary);
|
||||
|
||||
if (primaryRgb) {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty('--brand-color', cachedPrimary);
|
||||
root.style.setProperty('--gradient', 'linear-gradient(135deg, ' + cachedPrimary + ', ' + cachedPrimary + ')');
|
||||
root.style.setProperty('--brand-rgb', primaryRgb);
|
||||
root.style.setProperty('--brand-strong-rgb', primaryRgb);
|
||||
root.style.setProperty('--brand-hover-rgb', primaryRgb);
|
||||
}
|
||||
}
|
||||
} catch(e) {}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<LoginBranding />
|
||||
<div className="flex min-h-screen">
|
||||
{/* Lado Esquerdo - Formulário */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo mobile */}
|
||||
<div className="lg:hidden text-center mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--brand-color)' }}>
|
||||
<h1 className="text-3xl font-bold text-white">
|
||||
{isSuperAdmin ? 'aggios' : subdomain}
|
||||
</h1>
|
||||
@@ -198,13 +207,36 @@ export default function LoginPage() {
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{/* Mensagem de Erro */}
|
||||
{errorMessage && (
|
||||
<div className="flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
|
||||
<ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-800 dark:text-red-300 leading-relaxed">
|
||||
{errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mensagem de Sucesso */}
|
||||
{successMessage && (
|
||||
<div className="flex items-start gap-3 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
|
||||
<CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-green-800 dark:text-green-300 leading-relaxed">
|
||||
{successMessage}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
leftIcon="ri-mail-line"
|
||||
leftIcon={<EnvelopeIcon className="w-5 h-5" />}
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, email: e.target.value });
|
||||
setErrorMessage(''); // Limpa o erro ao digitar
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -212,9 +244,12 @@ export default function LoginPage() {
|
||||
label="Senha"
|
||||
type="password"
|
||||
placeholder="Digite sua senha"
|
||||
leftIcon="ri-lock-line"
|
||||
leftIcon={<LockClosedIcon className="w-5 h-5" />}
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, password: e.target.value });
|
||||
setErrorMessage(''); // Limpa o erro ao digitar
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -228,7 +263,7 @@ export default function LoginPage() {
|
||||
<Link
|
||||
href="/recuperar-senha"
|
||||
className="text-[14px] font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
|
||||
style={{ color: 'var(--brand-color)' }}
|
||||
>
|
||||
Esqueceu a senha?
|
||||
</Link>
|
||||
@@ -251,7 +286,7 @@ export default function LoginPage() {
|
||||
<a
|
||||
href="http://dash.localhost/cadastro"
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
|
||||
style={{ color: 'var(--brand-color)' }}
|
||||
>
|
||||
Cadastre sua agência
|
||||
</a>
|
||||
@@ -262,7 +297,7 @@ export default function LoginPage() {
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--brand-color)' }}>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-12 text-white">
|
||||
<div className="max-w-md text-center">
|
||||
<h1 className="text-5xl font-bold mb-6">
|
||||
@@ -276,22 +311,22 @@ export default function LoginPage() {
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-6 text-left">
|
||||
<div>
|
||||
<i className="ri-shield-check-line text-3xl mb-2"></i>
|
||||
<ShieldCheckIcon className="w-8 h-8 mb-2" />
|
||||
<h3 className="font-semibold mb-1">Seguro</h3>
|
||||
<p className="text-sm opacity-80">Proteção de dados</p>
|
||||
</div>
|
||||
<div>
|
||||
<i className="ri-speed-line text-3xl mb-2"></i>
|
||||
<BoltIcon className="w-8 h-8 mb-2" />
|
||||
<h3 className="font-semibold mb-1">Rápido</h3>
|
||||
<p className="text-sm opacity-80">Performance otimizada</p>
|
||||
</div>
|
||||
<div>
|
||||
<i className="ri-team-line text-3xl mb-2"></i>
|
||||
<UserGroupIcon className="w-8 h-8 mb-2" />
|
||||
<h3 className="font-semibold mb-1">Colaborativo</h3>
|
||||
<p className="text-sm opacity-80">Trabalho em equipe</p>
|
||||
</div>
|
||||
<div>
|
||||
<i className="ri-line-chart-line text-3xl mb-2"></i>
|
||||
<ChartBarIcon className="w-8 h-8 mb-2" />
|
||||
<h3 className="font-semibold mb-1">Insights</h3>
|
||||
<p className="text-sm opacity-80">Relatórios detalhados</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user