@dashadmin/dash-app-common 1.3.24 → 1.3.26

package/src/defaults/pages/DashDefaultLogin.tsx

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button as LoadingButton } from "@mui/material";
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { useNavigate } from 'react-router';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import Visibility from '@mui/icons-material/Visibility';
+
+// Import FullLayoutMarkup - this doesn't need react-admin context
+import FullLayoutMarkup from 'dash-admin/src/default-theme/FullLayoutMarkup';
+import { AuthPersistenceService } from 'dash-auth';
+// Import the singleton instance
+import authService from 'dash-admin/src/contexts/auth/DASHAuthenticationService';
+import { dashStorage } from 'dash-utils';
+
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
+interface LoginFormData {
+	email: string;
+	password: string;
+}
+
+const LoginPage: React.FC = () => {
+	const navigate = useNavigate();
+
+	const validateEmail = (value: string) => {
+		return EMAIL_REGEX.test(value);
+	};
+
+	// Check authentication status WITHOUT react-admin hooks
+	const [loggedIn, setLoggedIn] = useState(() => {
+		const isValidAuth = AuthPersistenceService.isAuthValid();
+		const storageAuthenticated = JSON.parse(dashStorage.getItem('authenticated') || 'false');
+		return isValidAuth && storageAuthenticated;
+	});
+
+	const [loginLoading, setLoginLoading] = useState(false);
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+	const [showPassword, setShowPassword] = useState(false);
+
+	const form = useForm<LoginFormData>();
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = form;
+
+	// Re-check auth status on mount
+	useEffect(() => {
+		const isValidAuth = AuthPersistenceService.isAuthValid();
+		const storageAuthenticated = JSON.parse(dashStorage.getItem('authenticated') || 'false');
+		
+		if (isValidAuth && storageAuthenticated) {
+			console.log('User is already authenticated');
+			setLoggedIn(true);
+		} else {
+			console.log('User is not authenticated');
+			setLoggedIn(false);
+		}
+	}, []);
+
+	const handleClickShowPassword = () => setShowPassword((show) => !show);
+	
+	const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+		event.preventDefault();
+	};
+
+	async function onSubmit(data: LoginFormData) {
+		const password = data.password;
+		setLoginLoading(true);
+		setErrorMessage(null);
+
+		try {
+			console.log('Attempting login with DASHAuthenticationService...');
+			const response = await authService.login({
+				username: data.email,
+				password,
+				redirect: window.location.pathname
+			});
+
+			console.log('Login response:', response);
+
+			if (!response.success) {
+				throw new Error(response.error || 'Login failed');
+			}
+
+			console.log('Login successful!');
+			setLoginLoading(false);
+			setLoggedIn(true);
+
+			// Navigate to redirect URL or home
+			if (response.redirectAfterLogin) {
+				console.log('Redirecting to:', response.redirectAfterLogin);
+				navigate(response.redirectAfterLogin);
+			} else {
+				navigate('/');
+			}
+		} catch (error: any) {
+			console.error('Login error:', error);
+			setLoginLoading(false);
+			
+			let eMessage = 'Credenciales inválidas';
+			if (error?.response?.data?.message) {
+				eMessage = error.response.data.message;
+			} else if (error?.error) {
+				eMessage = error.error;
+			} else if (error?.message) {
+				eMessage = error.message;
+			}
+			setErrorMessage(eMessage);
+		}
+	}
+
+	const horizontal_logo = AuthPersistenceService.getTenantImages()?.horizontal_logo?.original;
+	const banner = AuthPersistenceService.getTenantImages()?.banner?.original;
+
+	return (
+		<FullLayoutMarkup 
+			logo={horizontal_logo} 
+			loginBackground={banner}
+		>
+			<>
+				{!loggedIn ? (
+					<form
+						onSubmit={handleSubmit(onSubmit)}
+						className='dash-app-login-form'
+					>
+						{/*<h1 className='dash-app-login-form-title'>
+							Ingresar
+						</h1>*/}
+						
+						<div className='dash-app-form-item'>
+							<TextField
+								label='Email'
+								placeholder='Email'
+								required
+								{...register('email', { validate: validateEmail })}
+								className='dash-app-form-item-input'
+							/>
+							{errors.email && (
+								<span style={{ color: 'red' }}>
+									{errors.email.message ? String(errors.email.message) : "Email inválido"}
+								</span>
+							)}
+						</div>
+
+						<div className='dash-app-form-item'>
+							<TextField
+								label='Contraseña'
+								placeholder='Contraseña'
+								{...register('password')}
+								className='dash-app-form-item-input'
+								InputProps={{
+									autoComplete: 'password',
+									type: showPassword ? 'text' : 'password',
+									endAdornment: (
+										<InputAdornment position='end'>
+											<IconButton
+												aria-label='toggle password visibility'
+												onClick={handleClickShowPassword}
+												onMouseDown={handleMouseDownPassword}
+												edge='end'
+											>
+												{showPassword ? <VisibilityOff /> : <Visibility />}
+											</IconButton>
+										</InputAdornment>
+									),
+								}}
+							/>
+							{errors.password && (
+								<span style={{ color: 'red' }}>
+									{errors.password.message ? String(errors.password.message) : "Contraseña Inválida"}
+								</span>
+							)}
+							
+							<Link
+								className='link link--secondary'
+								style={{ marginLeft: 'auto' }}
+								href='/reset-password'
+							>
+								Resetear contraseña
+							</Link>
+						</div>
+
+						{errorMessage && (
+							<Box sx={{ mb: 2 }}>
+								<Alert severity="error" variant="filled">
+									{errorMessage}
+								</Alert>
+							</Box>
+						)}
+
+						<div className='dash-app-form-item mt-1'>
+							<LoadingButton
+								style={{ marginBottom: '21px' }}
+								className='submit'
+								type='submit'
+								disabled={loginLoading}
+								variant='contained'
+							>
+								{loginLoading ? 'Cargando...' : 'Ingresar'}
+							</LoadingButton>
+						</div>
+					</form>
+				) : (
+					<>
+						<div className='dash-app-form-item'>
+							Ya se encuentra logueado
+						</div>
+						<Button onClick={() => navigate('/')}>
+							Ir al Home
+						</Button>
+					</>
+				)}
+			</>
+		</FullLayoutMarkup>
+	);
+};
+
+export default LoginPage;

package/src/defaults/pages/Misc/DashDefaultNotFound.tsx

@@ -0,0 +1,96 @@
+/**
+ * Default Not Found Page (404)
+ * 
+ * Page displayed when a route is not found.
+ */
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+    Box, 
+    Typography, 
+    Button, 
+    Container,
+    Paper
+} from '@mui/material';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import HomeIcon from '@mui/icons-material/Home';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+interface DefaultNotFoundProps {
+    title?: string;
+    message?: string;
+    showHomeButton?: boolean;
+    showBackButton?: boolean;
+}
+
+const DefaultNotFound: React.FC<DefaultNotFoundProps> = ({
+    title = 'Page Not Found',
+    message = 'The page you are looking for does not exist or has been moved.',
+    showHomeButton = true,
+    showBackButton = true,
+}) => {
+    const navigate = useNavigate();
+
+    const handleGoBack = () => {
+        navigate(-1);
+    };
+
+    const handleGoHome = () => {
+        navigate('/');
+    };
+
+    return (
+        <Container maxWidth="sm">
+            <Paper 
+                elevation={0} 
+                sx={{ 
+                    p: 4, 
+                    textAlign: 'center',
+                    mt: 8
+                }}
+            >
+                <ErrorOutlineIcon 
+                    color="warning" 
+                    sx={{ fontSize: 100, mb: 3 }} 
+                />
+                
+                <Typography variant="h1" component="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+                    404
+                </Typography>
+                
+                <Typography variant="h5" component="h2" gutterBottom>
+                    {title}
+                </Typography>
+                
+                <Typography variant="body1" color="textSecondary" paragraph>
+                    {message}
+                </Typography>
+
+                <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
+                    {showBackButton && (
+                        <Button 
+                            variant="outlined" 
+                            startIcon={<ArrowBackIcon />}
+                            onClick={handleGoBack}
+                        >
+                            Go Back
+                        </Button>
+                    )}
+                    
+                    {showHomeButton && (
+                        <Button 
+                            variant="contained" 
+                            color="primary"
+                            startIcon={<HomeIcon />}
+                            onClick={handleGoHome}
+                        >
+                            Go to Home
+                        </Button>
+                    )}
+                </Box>
+            </Paper>
+        </Container>
+    );
+};
+
+export default DefaultNotFound;

package/src/defaults/pages/Misc/DashDefaultServerError.tsx

@@ -0,0 +1,102 @@
+/**
+ * Default Server Error Page (500)
+ * 
+ * Page displayed when a server error occurs.
+ */
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+    Box, 
+    Typography, 
+    Button, 
+    Container,
+    Paper
+} from '@mui/material';
+import ReportProblemIcon from '@mui/icons-material/ReportProblem';
+import HomeIcon from '@mui/icons-material/Home';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+interface DefaultServerErrorProps {
+    title?: string;
+    message?: string;
+    showHomeButton?: boolean;
+    showRetryButton?: boolean;
+    onRetry?: () => void;
+}
+
+const DefaultServerError: React.FC<DefaultServerErrorProps> = ({
+    title = 'Server Error',
+    message = 'Something went wrong on our end. Please try again later.',
+    showHomeButton = true,
+    showRetryButton = true,
+    onRetry,
+}) => {
+    const navigate = useNavigate();
+
+    const handleRetry = () => {
+        if (onRetry) {
+            onRetry();
+        } else {
+            window.location.reload();
+        }
+    };
+
+    const handleGoHome = () => {
+        navigate('/');
+    };
+
+    return (
+        <Container maxWidth="sm">
+            <Paper 
+                elevation={0} 
+                sx={{ 
+                    p: 4, 
+                    textAlign: 'center',
+                    mt: 8
+                }}
+            >
+                <ReportProblemIcon 
+                    color="error" 
+                    sx={{ fontSize: 100, mb: 3 }} 
+                />
+                
+                <Typography variant="h1" component="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+                    500
+                </Typography>
+                
+                <Typography variant="h5" component="h2" gutterBottom>
+                    {title}
+                </Typography>
+                
+                <Typography variant="body1" color="textSecondary" paragraph>
+                    {message}
+                </Typography>
+
+                <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
+                    {showRetryButton && (
+                        <Button 
+                            variant="contained" 
+                            color="primary"
+                            startIcon={<RefreshIcon />}
+                            onClick={handleRetry}
+                        >
+                            Try Again
+                        </Button>
+                    )}
+                    
+                    {showHomeButton && (
+                        <Button 
+                            variant="outlined"
+                            startIcon={<HomeIcon />}
+                            onClick={handleGoHome}
+                        >
+                            Go to Home
+                        </Button>
+                    )}
+                </Box>
+            </Paper>
+        </Container>
+    );
+};
+
+export default DefaultServerError;

package/src/defaults/pages/Misc/DashDefaultUnauthorized.tsx

@@ -0,0 +1,116 @@
+/**
+ * Default Unauthorized Page (403)
+ * 
+ * Page displayed when a user lacks permission to access a resource.
+ */
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+    Box, 
+    Typography, 
+    Button, 
+    Container,
+    Paper
+} from '@mui/material';
+import LockIcon from '@mui/icons-material/Lock';
+import HomeIcon from '@mui/icons-material/Home';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import LoginIcon from '@mui/icons-material/Login';
+
+interface DefaultUnauthorizedProps {
+    title?: string;
+    message?: string;
+    showHomeButton?: boolean;
+    showBackButton?: boolean;
+    showLoginButton?: boolean;
+    isLoggedIn?: boolean;
+}
+
+const DefaultUnauthorized: React.FC<DefaultUnauthorizedProps> = ({
+    title = 'Access Denied',
+    message = 'You do not have permission to access this page.',
+    showHomeButton = true,
+    showBackButton = true,
+    showLoginButton = true,
+    isLoggedIn = false,
+}) => {
+    const navigate = useNavigate();
+
+    const handleGoBack = () => {
+        navigate(-1);
+    };
+
+    const handleGoHome = () => {
+        navigate('/');
+    };
+
+    const handleGoLogin = () => {
+        navigate('/login');
+    };
+
+    return (
+        <Container maxWidth="sm">
+            <Paper 
+                elevation={0} 
+                sx={{ 
+                    p: 4, 
+                    textAlign: 'center',
+                    mt: 8
+                }}
+            >
+                <LockIcon 
+                    color="error" 
+                    sx={{ fontSize: 100, mb: 3 }} 
+                />
+                
+                <Typography variant="h1" component="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+                    403
+                </Typography>
+                
+                <Typography variant="h5" component="h2" gutterBottom>
+                    {title}
+                </Typography>
+                
+                <Typography variant="body1" color="textSecondary" paragraph>
+                    {message}
+                </Typography>
+
+                <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
+                    {showBackButton && (
+                        <Button 
+                            variant="outlined" 
+                            startIcon={<ArrowBackIcon />}
+                            onClick={handleGoBack}
+                        >
+                            Go Back
+                        </Button>
+                    )}
+                    
+                    {showHomeButton && (
+                        <Button 
+                            variant="contained" 
+                            color="primary"
+                            startIcon={<HomeIcon />}
+                            onClick={handleGoHome}
+                        >
+                            Go to Home
+                        </Button>
+                    )}
+                    
+                    {showLoginButton && !isLoggedIn && (
+                        <Button 
+                            variant="outlined" 
+                            color="primary"
+                            startIcon={<LoginIcon />}
+                            onClick={handleGoLogin}
+                        >
+                            Login
+                        </Button>
+                    )}
+                </Box>
+            </Paper>
+        </Container>
+    );
+};
+
+export default DefaultUnauthorized;

package/src/defaults/pages/Misc/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Misc Pages Module
+ * 
+ * Exports all default miscellaneous pages (error pages, etc).
+ */
+export { default as DashDefaultNotFound } from './DashDefaultNotFound';
+export { default as DashDefaultUnauthorized } from './DashDefaultUnauthorized';
+export { default as DashDefaultServerError } from './DashDefaultServerError';

package/src/defaults/pages/Static/DashDefaultPrivacyPage.tsx

@@ -0,0 +1,85 @@
+/**
+ * Default Privacy Policy Page
+ * 
+ * Privacy policy page template.
+ */
+import React from 'react';
+import DashDefaultStaticPage from './DashDefaultStaticPage';
+
+
+interface DefaultPrivacyPageProps {
+    companyName?: string;
+    effectiveDate?: string;
+    contactEmail?: string;
+    content?: string | React.ReactNode;
+}
+
+const DefaultPrivacyPage: React.FC<DefaultPrivacyPageProps> = ({
+    companyName = 'Our Company',
+    effectiveDate = new Date().toLocaleDateString(),
+    contactEmail = 'privacy@example.com',
+    content,
+}) => {
+    const defaultContent = (
+        <div>
+            <p><strong>Effective Date:</strong> {effectiveDate}</p>
+            
+            <h2>1. Information We Collect</h2>
+            <p>
+                We collect information you provide directly to us, such as when you create an 
+                account, make a purchase, or contact us for support.
+            </p>
+            
+            <h2>2. How We Use Your Information</h2>
+            <p>
+                We use the information we collect to provide, maintain, and improve our services, 
+                process transactions, and send you technical notices and support messages.
+            </p>
+            
+            <h2>3. Information Sharing</h2>
+            <p>
+                We do not share your personal information with third parties except as described 
+                in this privacy policy or with your consent.
+            </p>
+            
+            <h2>4. Data Security</h2>
+            <p>
+                We take reasonable measures to help protect information about you from loss, theft, 
+                misuse, unauthorized access, disclosure, alteration, and destruction.
+            </p>
+            
+            <h2>5. Your Rights</h2>
+            <p>
+                You have the right to access, correct, or delete your personal information. 
+                You may also have the right to restrict or object to certain processing of your data.
+            </p>
+            
+            <h2>6. Cookies</h2>
+            <p>
+                We use cookies and similar tracking technologies to track activity on our service 
+                and hold certain information to improve and analyze our service.
+            </p>
+            
+            <h2>7. Changes to This Policy</h2>
+            <p>
+                We may update this privacy policy from time to time. We will notify you of any 
+                changes by posting the new privacy policy on this page.
+            </p>
+            
+            <h2>8. Contact Us</h2>
+            <p>
+                If you have any questions about this Privacy Policy, please contact us at{' '}
+                <a href={`mailto:${contactEmail}`}>{contactEmail}</a>.
+            </p>
+        </div>
+    );
+
+    return (
+        <DashDefaultStaticPage 
+            title="Privacy Policy"
+            content={content || defaultContent}
+        />
+    );
+};
+
+export default DefaultPrivacyPage;