From b90aab82caaecaea8e20b7a9737a2e6a2a98c9fc Mon Sep 17 00:00:00 2001
From: frakarr <fcarra79@gmail.com>
Date: Fri, 9 Jan 2026 23:37:01 +0100
Subject: [PATCH] Update Login.tsx

---
 pages/Login.tsx | 61 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 20 deletions(-)

diff --git a/pages/Login.tsx b/pages/Login.tsx
index e0b2e79..6282c87 100644
--- a/pages/Login.tsx
+++ b/pages/Login.tsx
@@ -3,8 +3,13 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CondoService } from '../services/mockDb';
 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 [password, setPassword] = 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 (
-    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm sm:max-w-md overflow-hidden">
-        <div className="bg-blue-600 p-8 text-center">
-          <div className="inline-flex p-3 bg-white/20 rounded-xl mb-4">
-            <Building className="w-10 h-10 text-white" />
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Dynamic Background */}
+      {bgUrl && (
+          <div className="absolute inset-0 z-0">
+              <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>
-          <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 className="p-6 sm:p-8">
+        <div className="p-8">
           <form onSubmit={handleSubmit} className="space-y-6">
             {error && (
-              <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm flex items-center gap-2">
-                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+              <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-5 h-5 flex-shrink-0" />
                 {error}
               </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="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" />
                 </div>
                 <input
@@ -57,16 +78,16 @@ export const LoginPage: React.FC = () => {
                   required
                   value={email}
                   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"
                 />
               </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="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" />
                 </div>
                 <input
@@ -74,7 +95,7 @@ export const LoginPage: React.FC = () => {
                   required
                   value={password}
                   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="••••••••"
                 />
               </div>
@@ -83,14 +104,14 @@ export const LoginPage: React.FC = () => {
             <button
               type="submit"
               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'}
             </button>
           </form>
 
-          <div className="mt-6 text-center text-xs text-slate-400">
-            &copy; 2024 CondoPay Manager
+          <div className="mt-8 text-center text-xs text-slate-400 font-medium">
+            &copy; {new Date().getFullYear()} {appName} Manager
           </div>
         </div>
       </div>