fcarra/Condopay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Login.tsx

Browse Source
This commit is contained in:
frakarr
2026-01-09 23:37:01 +01:00
committed by GitHub
parent 7f78a0d80a
commit b90aab82ca
1 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
pages/Login.tsx
View File

@@ -3,8 +3,13 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { CondoService } from '../services/mockDb'; import { CondoService } from '../services/mockDb';
import { Building, Lock, Mail, AlertCircle } from 'lucide-react'; import { Building, Lock, Mail, AlertCircle } from 'lucide-react';
import { BrandingConfig } from '../types';
export const LoginPage: React.FC = () => { interface LoginProps {
branding?: BrandingConfig;
}
export const LoginPage: React.FC<LoginProps> = ({ branding }) => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -26,30 +31,46 @@ export const LoginPage: React.FC = () => {
} }
}; };
const appName = branding?.appName || 'CondoPay';
const logoUrl = branding?.logoUrl;
const bgUrl = branding?.loginBackgroundUrl;
return ( return (
<div className="min-h-screen bg-slate-50 flex items-center justify-center p-4"> <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 relative overflow-hidden">
<div className="bg-white rounded-2xl shadow-xl w-full max-w-sm sm:max-w-md overflow-hidden"> {/* Dynamic Background */}
<div className="bg-blue-600 p-8 text-center"> {bgUrl && (
<div className="inline-flex p-3 bg-white/20 rounded-xl mb-4"> <div className="absolute inset-0 z-0">
<Building className="w-10 h-10 text-white" /> <img src={bgUrl} alt="Background" className="w-full h-full object-cover opacity-30" />
<div className="absolute inset-0 bg-blue-900/40 backdrop-blur-sm"></div>
</div> </div>
<h1 className="text-2xl font-bold text-white">CondoPay</h1> )}
<p className="text-blue-100 mt-2">Gestione Condominiale Semplice</p>
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-sm sm:max-w-md overflow-hidden relative z-10 transition-all">
<div className="bg-blue-600 p-8 text-center flex flex-col items-center">
<div className="inline-flex p-3 bg-white/20 rounded-2xl mb-4 shadow-inner">
{logoUrl ? (
<img src={logoUrl} alt="Logo" className="w-14 h-14 object-contain" />
) : (
<Building className="w-10 h-10 text-white" />
)}
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">{appName}</h1>
<p className="text-blue-100 mt-2 text-sm font-medium">Gestione Condominiale Semplice</p>
</div> </div>
<div className="p-6 sm:p-8"> <div className="p-8">
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{error && ( {error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm flex items-center gap-2"> <div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm flex items-center gap-3 border border-red-100">
<AlertCircle className="w-4 h-4 flex-shrink-0" /> <AlertCircle className="w-5 h-5 flex-shrink-0" />
{error} {error}
</div> </div>
)} )}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-2">Email</label> <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Email</label>
<div className="relative"> <div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Mail className="h-5 w-5 text-slate-400" /> <Mail className="h-5 w-5 text-slate-400" />
</div> </div>
<input <input
@@ -57,16 +78,16 @@ export const LoginPage: React.FC = () => {
required required
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className="block w-full pl-10 pr-3 py-2.5 border border-slate-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" className="block w-full pl-11 pr-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all text-slate-700 font-medium"
placeholder="admin@condominio.it" placeholder="admin@condominio.it"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-2">Password</label> <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Password</label>
<div className="relative"> <div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Lock className="h-5 w-5 text-slate-400" /> <Lock className="h-5 w-5 text-slate-400" />
</div> </div>
<input <input
@@ -74,7 +95,7 @@ export const LoginPage: React.FC = () => {
required required
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="block w-full pl-10 pr-3 py-2.5 border border-slate-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" className="block w-full pl-11 pr-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all text-slate-700 font-medium"
placeholder="••••••••" placeholder="••••••••"
/> />
</div> </div>
@@ -83,14 +104,14 @@ export const LoginPage: React.FC = () => {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 transition-colors" className="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-xl shadow-lg shadow-blue-200 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 transition-all hover:scale-[1.02] active:scale-[0.98]"
> >
{loading ? 'Accesso in corso...' : 'Accedi'} {loading ? 'Accesso in corso...' : 'Accedi'}
</button> </button>
</form> </form>
<div className="mt-6 text-center text-xs text-slate-400"> <div className="mt-8 text-center text-xs text-slate-400 font-medium">
&copy; 2024 CondoPay Manager &copy; {new Date().getFullYear()} {appName} Manager
</div> </div>
</div> </div>
</div> </div>