feat: implement Supabase OAuth authentication with domain-restricted login and protected routes

Reviewed-on: #4

src/App.jsx

@@ -1,29 +1,176 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
+import { supabase } from "./services/supabase";
+import { useEffect, useState, createContext, useContext } from "react";
+import Login from "./components/Login";
 import EmployeeCard from "./components/EmployeeCard";
 import IdCardGenerator from "./Generator";
+import "./components/Login.css";
 
-export default function App() {
+const AuthContext = createContext(null);
+
+export const useAuth = () => useContext(AuthContext);
+
+const ALLOWED_DOMAIN = "@gomezleemarketing.com";
+const GLM_LOGO = "https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png";
+
+function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!supabase) {
+      console.warn("Supabase no configurado - falta VITE_SUPABASE_ANON_KEY");
+      setLoading(false);
+      return;
+    }
+
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signOut = async () => {
+    if (supabase) await supabase.auth.signOut();
+  };
+
+  if (loading) {
+    return (
+      <div style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#EEF6E8',
+        fontFamily: 'Arial, sans-serif'
+      }}>
+        <div style={{
+          width: 40, height: 40, border: '3px solid #D0D0D0',
+          borderTopColor: '#6CC24A', borderRadius: '50%',
+          animation: 'spin 0.8s linear infinite'
+        }} />
+      </div>
+    );
+  }
 
   return (
-
-    <BrowserRouter>
-
-      <Routes>
-
-        <Route
-          path="/employee"
-          element={<IdCardGenerator />}
-        />
-
-        <Route
-          path="/employee/:employeeNumber"
-          element={<EmployeeCard />}
-        />
-
-      </Routes>
-
-    </BrowserRouter>
-
+    <AuthContext.Provider value={{ user, signOut, loading }}>
+      {children}
+    </AuthContext.Provider>
   );
+}
 
+function ProtectedRoute({ children }) {
+  const { user, signOut, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) return null;
+
+  if (!user) {
+    return <Navigate to="/empleado-id/login" state={{ from: location }} replace />;
+  }
+
+  if (!user.email?.endsWith(ALLOWED_DOMAIN)) {
+    signOut();
+    return (
+      <div style={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#EEF6E8',
+        fontFamily: 'Arial, sans-serif',
+        padding: '20px',
+        textAlign: 'center'
+      }}>
+        <img src={GLM_LOGO} alt="GLM" style={{ maxWidth: 220, marginBottom: 24 }} />
+        <h1 style={{ color: '#4F758B', fontSize: 24, fontWeight: 700, marginBottom: 16 }}>
+          Acceso no autorizado
+        </h1>
+        <p style={{ color: '#6B8FA3', fontSize: 16, marginBottom: 24, maxWidth: 400 }}>
+          Solo se permite acceso con cuentas corporativas <strong>@gomezleemarketing.com</strong>.
+          Tu cuenta <strong>{user.email}</strong> no tiene permisos.
+        </p>
+        <button
+          onClick={signOut}
+          style={{
+            padding: '14px 32px',
+            fontSize: 15,
+            fontWeight: 600,
+            fontFamily: 'Arial',
+            color: '#fff',
+            background: '#4F758B',
+            border: 'none',
+            borderRadius: 10,
+            cursor: 'pointer'
+          }}
+        >
+          Cerrar sesión y volver a intentar
+        </button>
+      </div>
+    );
+  }
+
+  return children;
+}
+
+function PublicRoute({ children }) {
+  const { user, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) return null;
+
+  if (user?.email?.endsWith(ALLOWED_DOMAIN)) {
+    const from = location.state?.from?.pathname || '/empleado-id/';
+    return <Navigate to={from} replace />;
+  }
+
+  return children;
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="/empleado-id/login"
+            element={
+              <PublicRoute>
+                <Login />
+              </PublicRoute>
+            }
+          />
+
+          <Route
+            path="/empleado-id/"
+            element={
+              <ProtectedRoute>
+                <IdCardGenerator />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route
+            path="/empleado-id/:employeeNumber"
+            element={
+              <ProtectedRoute>
+                <EmployeeCard />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route path="*" element={<Navigate to="/empleado-id/" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  );
 }

src/Generator.css

@@ -273,7 +273,7 @@ body {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  display: none;
+  display: block;
 }
 
 .front-photo-frame .placeholder-svg {

src/Generator.jsx

@@ -46,8 +46,12 @@ export default function IdCardGenerator() {
     const [employeeId, setEmployeeId] = useState('');
     const [photoSrc, setPhotoSrc] = useState('');
     const [photoFile, setPhotoFile] = useState(null);
+    const [photoProcessing, setPhotoProcessing] = useState(false);
     const [downloadStatus, setDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
 
+    // Bloquea el botón Descargar hasta que nombre, puesto e ID estén llenos
+    const isFormComplete = name.trim() && role.trim() && employeeId.trim();
+
     // --- Estados Lote / Excel Masivo ───
     const [bulkEmployees, setBulkEmployees] = useState([]);
     const [bulkStatusText, setBulkStatusText] = useState('');
@@ -68,14 +72,65 @@ export default function IdCardGenerator() {
         }
     }, [employeeId]);
 
-    const handlePhotoUpload = (e) => {
+    const handlePhotoUpload = async (e) => {
         const file = e.target.files[0];
-        if (file) {
-            setPhotoFile(file);
-            setPhotoSrc(URL.createObjectURL(file));
+        if (!file) return;
+
+        setPhotoFile(file);
+        setPhotoSrc(URL.createObjectURL(file));
+        setPhotoProcessing(true);
+
+        try {
+            const editedBlob = await processPhotoWithAI(file);
+            const editedUrl = URL.createObjectURL(editedBlob);
+            setPhotoSrc(editedUrl);
+            setPhotoFile(new File([editedBlob], file.name, { type: editedBlob.type || 'image/jpeg' }));
+        } catch (error) {
+            console.error('Error al procesar la foto con IA en n8n:', error);
+            alert('No se pudo procesar la foto con IA. Se usará la foto original para la vista previa.');
+        } finally {
+            setPhotoProcessing(false);
         }
     };
 
+    const processPhotoWithAI = async (file) => {
+        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
+        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
+
+        const formData = new FormData();
+        formData.append('edited', file, file.name);
+        formData.append('name', name);
+        formData.append('role', role);
+        formData.append('employeeId', employeeId);
+        formData.append('fechaProcesado', new Date().toISOString());
+
+        const response = await fetch(N8N_WEBHOOK_URL, {
+            method: 'POST',
+            headers: {
+                'Authorization': TOKEN_SECRETO
+            },
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
+        }
+
+        const contentType = response.headers.get('content-type') || '';
+        if (contentType.includes('application/json')) {
+            const data = await response.json();
+            const bin = data.edited || data.data || data.foto_processed_base64 || data.photo || data.binary || (Array.isArray(data) && (data[0]?.edited || data[0]?.data));
+            const blobUrl = convertBinaryToBlobUrl(bin);
+            if (!blobUrl) throw new Error('n8n no devolvió un binario válido.');
+            const blob = await (await fetch(blobUrl)).blob();
+            return blob;
+        }
+
+        const blob = await response.blob();
+        if (!blob || blob.size === 0) throw new Error('n8n devolvió un binario vacío.');
+        return blob;
+    };
+
     const handleEmployeeIdChange = (e) => {
         const rawValue = e.target.value;
         const cleanValue = rawValue.replace(/[-\s]/g, '');
@@ -217,7 +272,7 @@ export default function IdCardGenerator() {
         if (bulkEmployees.length === 0) return;
 
         setBulkDownloadStatus({ processing: true, text: '🔄 Descargando...' });
-        setBulkStatusText('Conectando con n8n y descargando retratos optimizados por IA...');
+        setBulkStatusText('Descargando retratos...');
 
         try {
             const resultadosN8n = await enviarDatosAn8n(bulkEmployees);
@@ -253,7 +308,7 @@ export default function IdCardGenerator() {
                 }
             });
 
-            setBulkStatusText('🎉 ¡Lote de carnets guardado correctamente y registrado en Supabase!');
+            setBulkStatusText('🎉 ¡Lote de carnets guardado correctamente!');
             setBulkEmployees([]);
 
         } catch (error) {
@@ -394,8 +449,8 @@ export default function IdCardGenerator() {
                             <label>Puesto</label>
                             <input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
                         </div>
-                        <div className="upload-btn" onClick={() => fileInputRef.current.click()}>
-                            Subir foto del colaborador
+                        <div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
+                            {photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
                         </div>
                         <input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
                     </div>
@@ -447,7 +502,7 @@ export default function IdCardGenerator() {
 
                     <div className="panel-section">
                         <div className="panel-section-title">Exportar</div>
-                        <button className="export-btn blue" disabled={downloadStatus.processing} onClick={triggerDownload}>
+                        <button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
                             {downloadStatus.text}
                         </button>
                     </div>
@@ -461,7 +516,18 @@ export default function IdCardGenerator() {
                             <div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
                                 {photoSrc ? (
                                     <img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
-                                ) : (
+                                ) : (null)}
+                                {photoProcessing && (
+                                    <div style={{
+                                        position: 'absolute', inset: 0, display: 'flex',
+                                        alignItems: 'center', justifyContent: 'center',
+                                        background: 'rgba(0,0,0,0.45)', color: '#fff',
+                                        fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
+                                    }}>
+                                        ⏳ Editando foto con IA...
+                                    </div>
+                                )}
+                                {!photoSrc && (
                                     <svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
                                         <circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
                                         <path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />

src/components/Login.css

@@ -0,0 +1,163 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --azul-glm: #4F758B;
+    --azul-medio: #5B7F95;
+    --acero-claro: #6B8FA3;
+    --verde-glm: #6CC24A;
+    --verde-claro: #A4D65E;
+    --verde-bg: #EEF6E8;
+    --azul-seccion: #D6E8F4;
+    --gris-oscuro: #4A4A4A;
+    --gris-medio: #D0D0D0;
+    --gris-claro: #F5F5F5;
+    --blanco: #FFFFFF;
+    --naranja: #FF6A13;
+}
+
+.login-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: linear-gradient(135deg, var(--blanco) 0%, var(--gris-claro) 100%);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.login-page.loading .login-card {
+    pointer-events: none;
+    opacity: 0.8;
+}
+
+.login-card {
+    background: var(--blanco);
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(79, 117, 139, 0.12);
+    padding: 48px 40px;
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+    border: 1px solid var(--gris-medio);
+}
+
+.logo {
+    width: 180px;
+    height: auto;
+    margin-bottom: 24px;
+}
+
+.title {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--azul-glm);
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+}
+
+.subtitle {
+    font-size: 13px;
+    color: var(--acero-claro);
+    font-weight: 400;
+    margin-bottom: 24px;
+}
+
+.login-divider {
+    height: 2px;
+    background: var(--verde-glm);
+    margin: 24px 0;
+    border-radius: 1px;
+}
+
+.btn-google {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    width: 100%;
+    padding: 14px 24px;
+    background: var(--blanco);
+    border: 2px solid var(--gris-medio);
+    border-radius: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--gris-oscuro);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.btn-google:hover:not(:disabled) {
+    border-color: var(--verde-glm);
+    background: var(--verde-bg);
+    color: var(--azul-glm);
+    box-shadow: 0 4px 16px rgba(108, 194, 74, 0.2);
+    transform: translateY(-1px);
+}
+
+.btn-google:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.btn-google:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.google-icon {
+    flex-shrink: 0;
+}
+
+.domain-hint {
+    margin-top: 14px;
+    font-size: 12px;
+    color: var(--acero-claro);
+    font-weight: 500;
+}
+
+.error-message {
+    margin-top: 16px;
+    padding: 12px 16px;
+    background: #FDECEA;
+    border: 1px solid #F5C6CB;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #C0392B;
+    text-align: left;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--gris-medio);
+    border-top-color: var(--verde-glm);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 16px auto 0;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 480px) {
+    .login-card {
+        padding: 36px 24px;
+    }
+
+    .title {
+        font-size: 19px;
+    }
+
+    .logo {
+        width: 150px;
+    }
+}

src/components/Login.jsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '../services/supabase';
+import './Login.css';
+
+const ALLOWED_DOMAIN = '@gomezleemarketing.com';
+const GLM_LOGO = 'https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png';
+
+export default function Login() {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        supabase.auth.getSession().then(({ data: { session } }) => {
+            if (session?.user?.email?.endsWith(ALLOWED_DOMAIN)) {
+                navigate('/empleado-id/');
+            }
+        });
+    }, [navigate]);
+
+    const handleGoogleLogin = async () => {
+        setLoading(true);
+        setError('');
+
+        const redirectUrl = `${window.location.origin}/empleado-id/`;
+
+        const { error: authError } = await supabase.auth.signInWithOAuth({
+            provider: 'google',
+            options: {
+                redirectTo: redirectUrl,
+                queryParams: {
+                    hd: 'gomezleemarketing.com',
+                },
+            },
+        });
+
+        if (authError) {
+            setError(authError.message);
+            setLoading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="login-page loading">
+                <div className="login-card">
+                    <img src={GLM_LOGO} alt="GLM" className="logo" />
+                    <div className="spinner" />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="login-page">
+            <div className="login-card">
+                <img src={GLM_LOGO} alt="GomezLee Marketing" className="logo" />
+
+                <h1 className="title">GLM ID Card Generator</h1>
+                <p className="subtitle">GomezLee Marketing · Carnet Corporativo CR80</p>
+
+                <div className="login-divider" />
+
+                <button
+                    className="btn-google"
+                    onClick={handleGoogleLogin}
+                    disabled={loading}
+                >
+                    <svg className="google-icon" viewBox="0 0 24 24" width="20" height="20">
+                        <path
+                            fill="#4285F4"
+                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                        />
+                        <path
+                            fill="#34A853"
+                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                        />
+                        <path
+                            fill="#FBBC05"
+                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                        />
+                        <path
+                            fill="#EA4335"
+                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                        />
+                    </svg>
+                    <span>Continuar con Google</span>
+                </button>
+
+                <p className="domain-hint">Solo cuentas @gomezleemarketing.com</p>
+
+                {error && <div className="error-message">{error}</div>}
+            </div>
+        </div>
+    );
+}

src/script/script.jsx

@@ -132,7 +132,7 @@ export async function renderQRCode(employeeId, canvasElement) {
     document.body.appendChild(tmp);
 
     new QRCodeLib(tmp, {
-        text: `http://localhost:5173/employee/${cleanId}`,
+        text: `http://localhost:5173/empleado-id/${cleanId}`,
         width: 55,
         height: 55,
         colorDark: '#000000',
@@ -221,7 +221,7 @@ export async function downloadIDCards(config) {
     `;
 
     if (photoSrc) {
-        photoTagHtml = `<img src="${photoSrc}" crossorigin="anonymous" style="width:100%; height:100%; object-fit:cover; display:block;" />`;
+        photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${photoSrc}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
     }
 
     vFront.innerHTML = `
@@ -356,7 +356,7 @@ export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, o
         `;
 
         if (validatedPhotoUrl) {
-            photoTagHtml = `<img src="${validatedPhotoUrl}" crossorigin="anonymous" style="width:100%; height:100%; object-fit:cover; display:block;" />`;
+            photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${validatedPhotoUrl}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
         }
 
         vFront.innerHTML = `

src/services/supabase.js

@@ -1,6 +1,7 @@
 import { createClient } from "@supabase/supabase-js";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseKey = import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 
-export const supabase = createClient(supabaseUrl, supabaseKey);
+// Single client for auth (uses anon key)
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);

vite.config.js

@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/employee'
+  base: '/empleado-id/'
 })