feat: implement bulk ID card generation via Excel upload and individual form processing with Supabase storage integration #6
+169
-22
@@ -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 EmployeeCard from "./components/EmployeeCard";
|
||||||
import IdCardGenerator from "./Generator";
|
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 (
|
return (
|
||||||
|
<AuthContext.Provider value={{ user, signOut, loading }}>
|
||||||
<BrowserRouter>
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
<Routes>
|
);
|
||||||
|
}
|
||||||
<Route
|
|
||||||
path="/empleado-id/"
|
function ProtectedRoute({ children }) {
|
||||||
element={<IdCardGenerator />}
|
const { user, signOut, loading } = useAuth();
|
||||||
/>
|
const location = useLocation();
|
||||||
|
|
||||||
<Route
|
if (loading) return null;
|
||||||
path="/empleado-id/:employeeNumber"
|
|
||||||
element={<EmployeeCard />}
|
if (!user) {
|
||||||
/>
|
return <Navigate to="/empleado-id/login" state={{ from: location }} replace />;
|
||||||
|
}
|
||||||
</Routes>
|
|
||||||
|
if (!user.email?.endsWith(ALLOWED_DOMAIN)) {
|
||||||
</BrowserRouter>
|
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>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { createClient } from "@supabase/supabase-js";
|
import { createClient } from "@supabase/supabase-js";
|
||||||
|
|
||||||
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
|
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);
|
||||||
Reference in New Issue
Block a user