@chimera-pe/react-saas 0.0.1 → 0.0.3

package/src/components/Error.jsx

@@ -1,31 +0,0 @@
-import {Box,Alert,AlertTitle} from "@mui/material";
-import {useTranslate} from "react-polyglot";
-import PropTypes from "prop-types";
-
-const Error = ({titulo,texto,align = "center",severity = "error"}) => {
-	const translate = useTranslate();
-
-	return (
-		<Box sx={{
-			display: "flex",
-			flexDirection: "column",
-			flexGrow: 1,
-			justifyContent: "center",
-			alignItems: align
-		}}>
-			<Alert severity={severity}>
-				<AlertTitle>{translate(titulo)}</AlertTitle>
-				{texto && translate(texto)}
-			</Alert>
-		</Box>
-	);
-};
-
-Error.propTypes={
-	titulo: PropTypes.string.isRequired,
-	texto: PropTypes.string,
-	align: PropTypes.string,
-	severity: PropTypes.string
-};
-
-export default Error;

package/src/components/Idioma.jsx

@@ -1,48 +0,0 @@
-import {useEffect} from "react";
-import {useDispatch,useSelector} from "react-redux";
-import {I18n} from "react-polyglot";
-import {enGB,es} from "date-fns/locale"
-import {LocalizationProvider} from "@mui/x-date-pickers";
-import {AdapterDateFns} from "@mui/x-date-pickers/AdapterDateFns";
-import {cambiarIdioma} from "../redux";
-import saasMessages from "../i18n";
-
-const supportedLocales={en: enGB,es};
-
-const IdiomaInner=({messages,children}) => {
-	const idioma=useSelector(store => store.ui.idioma);
-
-	return (
-		<I18n locale={idioma} messages={messages[idioma]}>
-			<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={supportedLocales[idioma]}>
-				{children}
-			</LocalizationProvider>
-		</I18n>
-	);
-};
-
-const Idioma=({messages,idioma,children}) => {
-	const dispatch=useDispatch();
-
-	useEffect(() => {
-		if(idioma){
-			dispatch(cambiarIdioma(idioma));
-		}
-	},[dispatch,idioma]);
-
-	const m={};
-	Object.keys(messages).forEach(key => {
-		m[key]={
-			...messages[key],
-			saas: saasMessages[key]
-		};
-	});
-
-	return (
-		<IdiomaInner messages={m}>
-			{children}
-		</IdiomaInner>
-	);
-};
-
-export default Idioma;

package/src/components/Inicializar.jsx

@@ -1,64 +0,0 @@
-import {useEffect} from "react";
-import {Box} from "@mui/material";
-import {useDispatch,useSelector} from "react-redux";
-import {inicializar} from "../redux";
-import Cargando from "./Cargando";
-import Error from "./Error";
-import Notificacion from "./Notificacion";
-import Idioma from "./Idioma";
-import Tema from "./Tema";
-import MainRouter from "./MainRouter";
-
-const InicializarInner = ({devURL,children}) => {
-	const aplicacion = useSelector(store => store.aplicacion);
-
-	return (
-		<Box sx={{
-			display: "flex",
-			flexDirection: "column",
-			minHeight: "100vh",
-			justifyContent: "flex-start",
-			backgroundColor: "background.default"
-		}}>
-			{aplicacion.inicializando ?
-				<Cargando />
-				: (aplicacion.error || !aplicacion.inicializado) ?
-					<Error titulo={"saas.inicializar.error.titulo"} texto={"saas.inicializar.error.mensaje"} />
-					:
-					<>
-						<MainRouter devURL={devURL} requiereLogin={aplicacion.instancia.requiereLogin}>
-							{children}
-						</MainRouter>
-						<Notificacion />
-					</>
-			}
-		</Box>
-	);
-};
-
-const Inicializar = ({
-	aplicacion,
-	devSaasURL,
-	devAuthURL,
-	messages,
-	idioma,
-	children
-}) => {
-	const dispatch = useDispatch();
-
-	useEffect(() => {
-		dispatch(inicializar({devURL: devSaasURL,aplicacion: aplicacion}));
-	},[dispatch,aplicacion,devSaasURL]);
-
-	return (
-		<Idioma messages={messages} idioma={idioma}>
-			<Tema>
-				<InicializarInner devURL={devAuthURL}>
-					{children}
-				</InicializarInner>
-			</Tema>
-		</Idioma>
-	);
-};
-
-export default Inicializar;

package/src/components/Login.jsx

@@ -1,202 +0,0 @@
-import {useEffect} from "react";
-import {useSelector,useDispatch} from "react-redux";
-import {Navigate,useLocation} from "react-router-dom";
-import {
-	Box,
-	Container,
-	Grid,
-	Typography,
-	Card,
-	CardHeader,
-	CardContent,
-	InputAdornment,
-	Button,
-	CircularProgress,
-	AppBar,
-	Toolbar,
-	Link
-} from "@mui/material";
-import {Email,Lock} from "@mui/icons-material";
-import {Form} from "react-final-form";
-import {TextField} from "mui-rff";
-import {useTranslate} from "react-polyglot";
-import {requestToken} from "../redux";
-import {useCheckLogin,useNotificar} from "../hooks";
-
-const FormularioLogin = ({devURL}) => {
-	const dispatch = useDispatch();
-	const translate = useTranslate();
-	const notificar = useNotificar();
-	const {cargando,error} = useSelector(store => store.login);
-	const instancia = useSelector(store => store.aplicacion.instancia);
-
-	const submit = values => {
-		dispatch(requestToken({
-			devURL: devURL,
-			clientCredentials: instancia.clientCredentials,
-			data: {
-				correo: values.correo,
-				password: values.password
-			}
-		}));
-	};
-
-	const validate = values => {
-		const errors = {correo: undefined,password: undefined};
-
-		if(!values.correo) {
-			errors.correo = translate("saas.login.validacion.correo");
-		}
-		if(!values.password) {
-			errors.password = translate("saas.login.validacion.password");
-		}
-		return errors;
-	};
-
-	useEffect(() => {
-		if(error) {
-			notificar("saas.login.error","error");
-		}
-	},[notificar,error]);
-
-	return (
-		<Form
-			onSubmit={submit}
-			validate={validate}
-			render={({handleSubmit}) => (
-				<form onSubmit={handleSubmit}>
-					<TextField
-						id="correo"
-						name="correo"
-						label={translate("saas.login.correo")}
-						variant="outlined"
-						autoComplete="off"
-						disabled={cargando}
-						autoFocus
-						InputProps={{
-							startAdornment: (
-								<InputAdornment position="start">
-									<Email color="primary" />
-								</InputAdornment>
-							)
-						}}
-					/>
-					<TextField
-						id="password"
-						name="password"
-						type="password"
-						label={translate("saas.login.password")}
-						variant="outlined"
-						autoComplete="current-password"
-						disabled={cargando}
-						InputProps={{
-							startAdornment: (
-								<InputAdornment position="start">
-									<Lock color="primary" />
-								</InputAdornment>
-							)
-						}}
-					/>
-					<Grid container>
-						<Grid item xs={6}></Grid>
-						<Grid item xs={6} align="right">
-							<Button
-								variant="contained"
-								color="primary"
-								type="submit"
-								disabled={cargando}
-							>
-								{cargando ?
-									<CircularProgress size={24} thickness={4} />
-									:
-									translate("saas.login.ingresar")
-								}
-							</Button>
-						</Grid>
-					</Grid>
-				</form>
-			)}
-		/>
-	);
-};
-
-const Login = ({devURL}) => {
-	const instancia = useSelector(store => store.aplicacion.instancia);
-	const translate = useTranslate();
-	const location = useLocation();
-	const autenticado = useCheckLogin(devURL);
-	const {from} = location.state || {from: {pathname: "/"}};
-
-	if(!instancia.requiereLogin || autenticado) {
-		return <Navigate to={from} />;
-	}
-
-	return (
-		<Box sx={{
-			position: "relative",
-			display: "flex",
-			flexDirection: "column",
-			flexGrow: 1,
-			minHeight: "100vh",
-			backgroundColor: "primary.main",
-			"&::before": {
-				content: '""',
-				backgroundImage: `url(${instancia.logo})`,
-				backgroundSize: "contain",
-				backgroundRepeat: "no-repeat",
-				backgroundPosition: "right",
-				position: "absolute",
-				top: "20%",
-				bottom: 0,
-				right: 0,
-				width: "50%",
-				opacity: 0.02,
-				filter: "grayscale(100%)"
-			}
-		}}>
-			<Box sx={{
-				display: "flex",
-				justifyContent: "center",
-				alignItems: "center",
-				flexGrow: 1
-			}}>
-				<Container maxWidth="md">
-					<Grid container spacing={3}>
-						<Grid item xs={12} lg={5} align="center">
-							<img src={instancia.logo} alt={instancia.nombre} style={{maxWidth: "100%"}} />
-							<Typography variant="h3" align="center">{translate("aplicacion.nombre",{smart_count: 1})}</Typography>
-							<Typography variant="h5" align="center">{instancia.nombre}</Typography>
-						</Grid>
-						<Grid item xs={12} lg={7} sx={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							zIndex: 5
-						}}>
-							<Card elevation={5}>
-								<CardHeader title={translate("saas.login.titulo")} titleTypographyProps={{align: "center"}} />
-								<CardContent sx={{
-									"& .MuiTextField-root": {
-										mb: 2
-									},
-								}}>
-									<FormularioLogin devURL={devURL} />
-								</CardContent>
-							</Card>
-						</Grid>
-					</Grid>
-				</Container>
-			</Box>
-			<AppBar position="static" color="primary">
-				<Toolbar sx={{justifyContent: "center"}}>
-					<Typography variant="caption">
-						{translate("saas.copy")}
-						<Link href="//chimera.com.pe" color="inherit" target="_blank" rel="noreferrer">Chimera Software</Link>
-					</Typography>
-				</Toolbar>
-			</AppBar>
-		</Box>
-	);
-};
-
-export default Login;

package/src/components/MainRouter.jsx

@@ -1,35 +0,0 @@
-import {
-	BrowserRouter,
-	Routes,
-	Route,
-	Navigate,
-	useLocation
-} from "react-router-dom";
-import {useCheckLogin} from "../hooks";
-import Login from "./Login";
-
-const RequiereAuth = ({devURL,redirectTo,children}) => {
-	const location = useLocation();
-	const autenticado = useCheckLogin(devURL);
-
-	return autenticado ? children : <Navigate to={redirectTo} state={{from: location}} replace />;
-};
-
-const MainRouter = ({devURL,requiereLogin,children}) => (
-	<BrowserRouter>
-		<Routes>
-			<Route path="/login" element={<Login devURL={devURL} />} />
-			<Route
-				path="/*"
-				element={requiereLogin ? (
-					<RequiereAuth devURL={devURL} redirectTo="/login">
-						{children}
-					</RequiereAuth>
-				) : children
-				}
-			/>
-		</Routes>
-	</BrowserRouter>
-);
-
-export default MainRouter;

package/src/components/Notificacion.jsx

@@ -1,36 +0,0 @@
-import {useEffect,useState} from "react";
-import {useSelector,useDispatch} from "react-redux";
-import {Snackbar,Alert} from "@mui/material";
-import {useTranslate} from "react-polyglot";
-import {ocultarNotificacion} from "../redux";
-
-const Notificacion=() => {
-	const [open,setOpen]=useState(false);
-	const dispatch=useDispatch();
-	const translate=useTranslate();
-	const notificacion=useSelector(store => store.notificaciones[0]);
-
-	useEffect(() => {
-		setOpen(!!notificacion);
-	},[notificacion]);
-
-	const handleClose=() => {
-		setOpen(false);
-		dispatch(ocultarNotificacion());
-	};
-
-	return (
-		<Snackbar
-			open={open}
-			message={notificacion && notificacion.mensaje && notificacion.tipo === "default" && translate(notificacion.mensaje)}
-			autoHideDuration={5000}
-			onClose={handleClose}
-		>
-		{notificacion && notificacion.mensaje && notificacion.tipo !== "default" &&
-			<Alert severity={notificacion.tipo}>{translate(notificacion.mensaje)}</Alert>
-		}
-		</Snackbar>
-	);
-};
-
-export default Notificacion;

package/src/components/SaasApp.jsx

@@ -1,30 +0,0 @@
-import {Provider} from "react-redux";
-import {store} from "../redux";
-import Inicializar from "./Inicializar";
-
-const SaasApp = ({
-	customReducers,
-	aplicacion,
-	devSaasURL,
-	devAuthURL,
-	dev = false,
-	idioma,
-	messages,
-	children
-}) => {
-	return (
-		<Provider store={store(customReducers)}>
-			<Inicializar
-				aplicacion={aplicacion}
-				devSaasURL={dev && devSaasURL}
-				devAuthURL={dev && devAuthURL}
-				idioma={idioma}
-				messages={messages}
-			>
-				{children}
-			</Inicializar>
-		</Provider>
-	);
-};
-
-export default SaasApp;

package/src/components/Tema.jsx

@@ -1,59 +0,0 @@
-import {useMemo,useEffect} from "react";
-import {useDispatch,useSelector} from "react-redux";
-import {CssBaseline,useMediaQuery} from "@mui/material";
-import {ThemeProvider,createTheme} from "@mui/material/styles";
-import {grey} from "@mui/material/colors";
-import {cambiarTema} from "../redux";
-
-const Tema=({children}) => {
-	const dispatch=useDispatch();
-	const {instancia}=useSelector(store => store.aplicacion);
-	const tema=useSelector(store => store.ui.tema);
-	const prefersDarkMode=useMediaQuery("(prefers-color-scheme: dark)");
-
-	useEffect(() => {
-		dispatch(cambiarTema(prefersDarkMode ? "dark" : "light"));
-	},[dispatch,prefersDarkMode]);
-
-	const theme=useMemo(() => createTheme({
-		palette: {
-			mode: tema,
-			primary: {
-				main: instancia.color.primary
-			},
-			secondary: {
-				main: instancia.color.secondary
-			},
-			error: {
-				main: instancia.color.error
-			},
-			warning: {
-				main: instancia.color.warning
-			},
-			info: {
-				main: instancia.color.info
-			},
-			success: {
-				main: instancia.color.success
-			},
-			...(tema === "light" && {
-				background: {
-					default: grey["A200"],
-					paper: grey[100]
-				}
-			})
-		},
-		shape: {
-			borderRadius: 6
-		}
-	}),[tema,instancia]);
-
-	return (
-		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			{children}
-		</ThemeProvider>
-	);
-};
-
-export default Tema;

package/src/components/index.jsx

@@ -1,9 +0,0 @@
-import Cargando from "./Cargando";
-import Error from "./Error";
-import SaasApp from "./SaasApp";
-
-export {
-	Cargando,
-	Error,
-	SaasApp
-};

package/src/hooks/index.jsx

@@ -1,7 +0,0 @@
-import useCheckLogin from "./useCheckLogin";
-import useNotificar from "./useNotificar";
-
-export {
-	useCheckLogin,
-	useNotificar
-};

package/src/hooks/useCheckLogin.jsx

@@ -1,24 +0,0 @@
-import {useEffect} from "react";
-import {useDispatch,useSelector} from "react-redux";
-import {logout, refreshToken} from "../redux";
-
-const useCheckLogin = (devURL) => {
-	const dispatch = useDispatch();
-	const login = useSelector(store => store.login);
-	const instancia = useSelector(store => store.aplicacion.instancia);
-
-	useEffect(() => {
-		if(login.autenticado && !!login.expiracion && new Date(login.expiracion) < new Date()){
-			if(login.refreshToken){
-				dispatch(refreshToken(devURL,instancia.clientCredentials,login.refreshToken));
-			}
-			else{
-				dispatch(logout());
-			}
-		}
-	},[devURL,instancia.clientCredentials,login,dispatch]);
-
-	return login.autenticado;
-};
-
-export default useCheckLogin;

package/src/hooks/useNotificar.jsx

@@ -1,12 +0,0 @@
-import {useCallback} from "react";
-import {useDispatch} from "react-redux";
-import {mostrarNotificacion} from "../redux";
-
-const useNotificar = () => {
-	const dispatch = useDispatch();
-	return useCallback((mensaje,tipo = "default") => {
-		dispatch(mostrarNotificacion({mensaje,tipo}));
-	},[dispatch]);
-};
-
-export default useNotificar;

package/src/i18n/es.jsx

@@ -1,22 +0,0 @@
-const es={
-	inicializar: {
-		error: {
-			titulo: "Error iniciando aplicación",
-			mensaje: "No fue posible conectarnos con el servicio"
-		}
-	},
-	login: {
-		titulo: "Acceder al sistema",
-		correo: "Correo electrónico",
-		password: "Contraseña",
-		ingresar: "Acceder",
-		validacion: {
-			correo: "Debe ingresar una dirección de correo",
-			password: "Debe ingresar una contraseña"
-		},
-		error: "Usuario o contraseña incorrectos"
-	},
-	copy: "Todos los derechos reservados "
-};
-
-export default es;

package/src/i18n/index.jsx

@@ -1,7 +0,0 @@
-import es from "./es";
-
-const messages={
-	es: es
-};
-
-export default messages;

package/src/index.js

@@ -1,12 +0,0 @@
-import {SaasApp} from "./components";
-import {useNotificar} from "./hooks";
-import {Cargando,Error} from "./components";
-import {logout} from "./redux";
-
-export {
-	SaasApp,
-	useNotificar,
-	Cargando,
-	Error,
-	logout
-};

package/src/redux/index.jsx

@@ -1,17 +0,0 @@
-import {store} from "./store";
-import {inicializar} from "./inicializarSlice";
-import {refreshToken,requestToken,logout} from "./loginSlice";
-import {mostrarNotificacion,ocultarNotificacion} from "./notificacionSlice";
-import {cambiarIdioma,cambiarTema} from "./uiSlice";
-
-export {
-	store,
-	inicializar,
-	refreshToken,
-	requestToken,
-	logout,
-	mostrarNotificacion,
-	ocultarNotificacion,
-	cambiarIdioma,
-	cambiarTema
-};

package/src/redux/inicializarSlice.jsx

@@ -1,57 +0,0 @@
-import {createSlice,createAsyncThunk} from "@reduxjs/toolkit";
-import {identidadApi} from "../api/inicializarApi";
-
-const colorDefault = {
-	primary: "#1C6CCC",
-	secondary: "#17A7FF",
-	error: "#f44336",
-	warning: "#ff9800",
-	info: "#2196f3",
-	success: "#4caf50"
-};
-
-const inicializarSlice = createSlice({
-	name: "inicializar",
-	initialState: {
-		inicializando: true,
-		inicializado: false,
-		instancia: {
-			color: colorDefault
-		},
-		error: null
-	},
-	extraReducers(builder) {
-		builder
-			.addCase(inicializar.pending,state => {
-				state.inicializando = true;
-			})
-			.addCase(inicializar.fulfilled,(state,action) => {
-				state.inicializando = false;
-				state.inicializado = true;
-				state.instancia = {
-					...action.payload,
-					abreviatura: action.payload.nombre.match(/\b([A-Z])/g).join(""),
-					color: {
-						...colorDefault,
-						...action.payload.color
-					}
-				};
-				state.error = null;
-			})
-			.addCase(inicializar.rejected,(state,action) => {
-				state.inicializando = false;
-				state.inicializado = false;
-				state.instancia = {
-					color: colorDefault
-				};
-				state.error = action.payload;
-			});
-	}
-});
-
-export const inicializar = createAsyncThunk("inicializar",async (payload) => {
-	const response = await identidadApi(payload.devURL,payload.aplicacion);
-	return response.data;
-});
-
-export default inicializarSlice.reducer;