@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/pages/Profile.tsx

@@ -0,0 +1,394 @@
+import { FC, useEffect, useState } from 'react';
+//import { Button as LoadingButton } from "@mui/material";
+
+import { Button, Card, CardContent, CardHeader, Grid, Typography } from '@mui/material';
+
+import {
+	Form,
+	useRefresh,
+	Loading,
+	useNotify,
+	useGetIdentity,
+	TextInput,
+} from 'react-admin';
+
+import { useDispatch } from 'react-redux';
+import { DASH_REDUX_ACTIONS } from 'dash-admin-state';
+
+import React from 'react';
+import useAxios from '../hooks/axios';
+import SingleImageUploader from './SingleImageUploader';
+import { useAuthContext } from '../contexts/auth';
+import UserPreferences from "../components/user/UserPreferences";
+
+const Profile: FC = (_props) => {
+	const [currTab, setCurrTab] = useState('auth/update/info');
+	const [isLoading, setIsLoading] = useState(false);
+	//const { identity, isLoading: identityLoading } = useGetIdentity();
+    
+    const { user, fetchAuth } = useAuthContext(); // Add fetchCompleteAuth here
+	const [avatar, setAvatar] = useState({ rawFile: null, urlFile: '' });
+	const notify = useNotify();
+	
+	const { axios } = useAxios();
+	const refresh = useRefresh();
+
+	const dispatch = useDispatch();
+
+	useEffect(() => {
+		dispatch(
+			DASH_REDUX_ACTIONS.updatePage({
+				title: 'Perfil',
+				//icon:
+				subTitle: 'Configuración de perfil',
+			}),
+		);
+	}, []);
+
+	const validateUserCreation = (values) => {
+		const errors: any = {};
+		if (currTab === 'auth/update/password') {
+			if (
+				(values.password || values.password_confirmation) &&
+				!values.current_password
+			) {
+				errors.current_password = 'El campo es requerido';
+			}
+			if (
+				values.current_password &&
+				(!values.password || !values.password_confirmation)
+			) {
+				errors.password = 'El campo es requerido';
+				errors.password_confirmation = 'El campo es requerido';
+			}
+			if (values.password_confirmation !== values.password) {
+				errors.password = 'Las contraseñas no coinciden';
+				errors.password_confirmation = 'Las contraseñas no coinciden';
+			}
+		}
+
+		return errors;
+	};
+
+	const handleSubmit = async (values) => {
+		setIsLoading(true);
+		
+		const formData = new FormData();
+
+		const passwords = {
+			current_password: values.current_password,
+			password: values.password,
+			password_confirmation: values.password_confirmation,
+		};
+
+		// Append all user info fields to formData
+		if (values.name) { formData.append('name', values.name); }
+		if (values.lastname) { formData.append('lastname', values.lastname); }
+		if (values.email) { formData.append('email', values.email); }
+		if (avatar.rawFile) { formData.append('avatar', avatar.rawFile); }
+		formData.append('_method', 'put');
+
+		try {
+			if (currTab === 'auth/update/info') {
+				await axios.post(currTab, formData, {
+					headers: { 'Content-Type': 'multipart/form-data' },
+				});
+			} else {
+				await axios.put(currTab, passwords);
+			}
+			
+			
+			   
+			// Refresh the auth context with updated user data
+			try {
+           
+				await fetchAuth();
+				console.log('Auth context refreshed after profile update');
+			} catch (authError) {
+				console.error('Faileds to refresh auth context:', authError);
+				// Don't show error to user as the main operation succeeded
+			}
+
+            notify('Usuario actualizado correctamente', { type:'success' });
+			refresh();
+		} catch (error: any) {
+
+        
+			// Handle backend error messages gracefully
+			let mainMessage = error?.response?.data?.message || error?.body?.message || '';
+			let fieldErrors = error?.response?.data?.errors || error?.body?.errors || error;
+			if (mainMessage) {
+				notify(`Error al actualizar el usuario, ${mainMessage}`, { type: 'error' });
+			} else {
+				notify('Error al actualizar el usuario', { type: 'error' });
+			}
+			if (fieldErrors && typeof fieldErrors === 'object') {
+				const errors: any = {};
+				Object.keys(fieldErrors).forEach((key) => {
+					errors[key] = Array.isArray(fieldErrors[key])
+						? fieldErrors[key].join(' , ')
+						: fieldErrors[key];
+				});
+				return errors;
+			}
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const handleInfoSubmit = () => {
+		setCurrTab('auth/update/info');
+	};
+
+	const handlePasswordSubmit = () => {
+		setCurrTab('auth/update/password');
+	};
+
+	return (
+		<div className='dash-profile'>
+       
+			{/*Page Header
+      <Row>
+        <Col xs={24} md={12}>
+          <div className="dash-mb-2">
+            <h2 className="dash-page-title">Perfil</h2>
+          </div>
+        </Col>
+      </Row>
+      */}
+ 
+
+			{user ? (
+				<Form
+					onSubmit={handleSubmit}
+					validate={validateUserCreation}
+					defaultValues={{ name: user?.name, email: user?.email, lastname: user?.lastname }}
+					className='dash-form'
+				>
+                   
+					<div className='dash-card-content dash-module dash-card-profile'>
+                      
+						<Grid 
+							container 
+							spacing={{ xs: 2, md: 3 }}
+							sx={{ minHeight: '400px' }}
+						>
+							{/* Profile Image Section */}
+							<Grid 
+								size={{ xs: 12, md: 4 }}
+								display="flex"
+								justifyContent="center"
+								alignItems="center"
+							>
+								<CardContent
+									sx={{
+										height: '100%',
+										display: 'flex',
+										flexDirection: 'column',
+										justifyContent: 'center',
+										alignItems: 'center',
+										width: '100%',
+									}}
+								>
+									{/*<div className='dash-profile-img'>
+										{identity.image_url || avatar.urlFile ? (
+											<img src={avatar.urlFile || identity.image_url} alt='' />
+										) : (
+											<div className='dash-profile-icon'>
+												<Icon.User size={'90px'} color={'#fff'} />
+											</div>
+										)}
+										<IconButton
+											aria-label='upload picture'
+											component='label'
+											className='dash-profile-edit'
+										>
+											<input
+												hidden
+												accept='image/*'
+												type='file'
+												onChange={(e) =>
+													setAvatar({
+														rawFile: e.target.files[0],
+														urlFile: URL.createObjectURL(e.target.files[0]),
+													})
+												}
+											/>
+											<Icon.PenTool
+												size={'22px'}
+												color={'#000'}
+												style={{ opacity: '0.6' }}
+											/>
+										</IconButton>
+											</div>*/}
+                                   
+                                   {"<!-- F -->"}
+									<SingleImageUploader 
+										currentUrl={user?.image_path} 
+										onChange={(file: File) => {
+											setAvatar({
+												rawFile: file,
+												urlFile: URL.createObjectURL(file),
+											});
+										}}  
+                                        classNamePrefix='dash-profile'
+									/>
+									<Typography 
+										className='dash-profile-name' 
+										variant='h2'
+										sx={{ mt: 2, textAlign: 'center' }}
+									>
+										{`${user?.name || ''}`}
+									</Typography>
+									<Typography
+										variant="body2"
+										sx={{
+											display: 'block',
+											textAlign: 'center',
+											fontSize: '14px',
+											opacity: 0.54,
+											mt: 1,
+										}}
+									>
+										{/* Cargo, telefono, etc. */}
+									</Typography>
+								</CardContent>
+							</Grid>
+
+							{/* User Info Section */}
+							<Grid size={{ xs: 12, md: 4 }}>
+								<CardHeader 
+									sx={{ padding: '16px 25px 0' }} 
+									title='Info' 
+								/>
+								<CardContent sx={{ padding: '25px' }}>
+									<Grid container spacing={2}>
+										<Grid size={12}>
+											<TextInput
+												source='name'
+												label='Nombre'
+												variant='outlined'
+												fullWidth
+											/>
+										</Grid>
+										<Grid size={12}>
+											<TextInput
+												source='lastname'
+												label='Apellido'
+												variant='outlined'
+												fullWidth
+											/>
+										</Grid>
+										<Grid size={12}>
+											<TextInput
+												source='email'
+												label='Email'
+												variant='outlined'
+												fullWidth
+											/>
+										</Grid>
+										<Grid size={12} sx={{ mt: 2 }}>
+											<Button
+												onClick={handleInfoSubmit}
+												disabled={isLoading}
+												variant='contained'
+												type='submit'
+												fullWidth
+												sx={{
+													position: 'relative',
+													'&.Mui-disabled': {
+														backgroundColor: 'primary.main',
+														opacity: 0.7,
+														color: 'white'
+													}
+												}}
+											>
+												{isLoading && currTab === 'auth/update/info' ? 'Guardando...' : 'Guardar'}
+											</Button>
+										</Grid>
+									</Grid>
+								</CardContent>
+							</Grid>
+
+							{/* Password Section */}
+							<Grid size={{ xs: 12, md: 4 }}>
+								<CardHeader
+									sx={{ padding: '16px 25px 0' }}
+									title='Contraseñas'
+								/>
+								<CardContent sx={{ padding: '25px' }}>
+									<Grid container spacing={2}>
+										<Grid size={12}>
+											<TextInput
+												type='password'
+												source='current_password'
+												label='Contraseña actual'
+												variant='outlined'
+												fullWidth
+											/>
+										</Grid>
+										<Grid size={12}>
+											<TextInput
+												type='password'
+												source='password'
+												label='Nueva contraseña'
+												variant='outlined'
+												fullWidth
+											/>
+										</Grid>
+										<Grid size={12}>
+											<TextInput
+												label='Repita nueva contraseña'
+												type='password'
+												source='password_confirmation'
+												variant='outlined'
+												fullWidth
+											/>
+										</Grid>
+										<Grid size={12} sx={{ mt: 2 }}>
+											<Button
+												onClick={handlePasswordSubmit}
+												disabled={isLoading}
+												variant='contained'
+												type='submit'
+												fullWidth
+												sx={{
+													position: 'relative',
+													'&.Mui-disabled': {
+														backgroundColor: 'primary.main',
+														opacity: 0.7,
+														color: 'white'
+													}
+												}}
+											>
+												{isLoading && currTab === 'auth/update/password' ? 'Guardando Contraseñas...' : 'Guardar Contraseñas'}
+											</Button>
+										</Grid>
+									</Grid>
+								</CardContent>
+							</Grid>
+
+							{/* User Preferences Section */}
+							<Grid size={{ xs: 12
+                             }}>
+								<CardHeader
+									sx={{ padding: '16px 25px 0' }}
+									title='Preferencias'
+								/>
+								<CardContent sx={{ padding: '25px' }}>
+									<UserPreferences />
+								</CardContent>
+							</Grid>
+						</Grid>
+					</div>
+			
+				</Form>
+				
+			) : (
+				<Loading />
+			)}
+		</div>
+	);
+};
+
+export default Profile;

package/src/pages/RecoverPassword.tsx

@@ -0,0 +1,166 @@
+import { Button, Input, InputLabel, TextField, Alert, IconButton, Grid, Dialog, DialogContent, DialogActions, Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { Layout } from 'react-admin';
+import { useNotify, useRedirect } from 'react-admin';
+import useAxios from '../hooks/axios';
+import { FullLayoutMarkup } from '../default-theme';
+import getType from '../utils/getType';
+import MUISimpleJsonTable from '../components/misc/MuiSimpleJsonTable';
+import HomeIcon from '@mui/icons-material/Home';
+import { getCookie, removeCookie, setCookie,clearAllCookies  } from '../../src/utils/cookies';
+import { dashStorage } from 'dash-utils';
+
+const RecoverPassword = ({  }: {  }) => {
+	const [email, setEmail] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState('');
+	const [success, setSuccess] = useState(false);
+	const { axios } = useAxios();
+	const redirect = useRedirect();
+		const notify = useNotify();
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError('');
+		setLoading(true);
+		try {
+			const { data } = await axios.post(`password/email`, {
+				email,
+			});
+			setSuccess(true);
+			notify(data.message, { type: 'success' });
+		} catch (error: any) {
+			let errorMsg = 'Ha ocurrido un error';
+			if (error?.response?.data) {
+				const resp = error.response.data;
+				// Prefer error from errors.email, then message, then fallback
+				if (resp.errors && resp.errors.email && resp.errors.email.length > 0) {
+					errorMsg = resp.errors.email[0];
+				} else if (resp.message) {
+					errorMsg = resp.message;
+				}
+			} else if (error?.message) {
+				errorMsg = error.message;
+			}
+			setError(errorMsg);
+			notify(errorMsg, { type: 'warning' });
+		} finally {
+			setLoading(false);
+		}
+	};
+
+    useEffect(() => {
+        dashStorage.clear();
+        clearAllCookies();
+    }, [])
+
+	return (
+		<FullLayoutMarkup>
+			<Box
+				sx={{
+					//height: '100vh',
+					display: 'flex',
+					alignItems: 'flex-start', // align to top
+					justifyContent: 'center',
+					pt: 8, // thick top margin
+				}}
+			>
+				<Box
+					sx={{
+						width: '100%',
+						maxWidth: 420,
+						mx: 'auto',
+					}}
+				>
+					{success ? (
+						<Box
+							sx={{
+								display: 'flex',
+								flexDirection: 'column',
+								alignItems: 'center',
+								justifyContent: 'center',
+								boxShadow: 3,
+								borderRadius: 2,
+								p: 4,
+								minWidth: 320,
+								minHeight: 200,
+								bgcolor: 'background.paper',
+								mt: 8, // thick top margin
+								mx: 'auto',
+							}}
+						>
+							<h1 className="dash-app-login-form-title" style={{ margin: 0 }}>Recuperar Contraseña</h1>
+							<Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+								Si el correo existe en nuestro sistema, recibirás un enlace para restablecer tu contraseña.
+							</Alert>
+							<Button
+								variant="contained"
+								color="primary"
+								onClick={() => redirect('/login')}
+								sx={{ mt: 2 }}
+							>
+								Ir al Login
+							</Button>
+						</Box>
+					) : (
+						<form onSubmit={handleSubmit} className='dash-app-login-form'>
+							<Grid container sx={{ mb:4, mt:2 }} spacing={2} alignItems="center">
+                                {/* @ts-ignore */}
+								<Grid item xs={2}>
+									<IconButton
+										color={'primary'}
+										size={'large'}
+										onClick={() => redirect('/')}
+									>
+										<HomeIcon />
+									</IconButton>
+								</Grid>
+                                {/* @ts-ignore */}
+								<Grid item xs={10}>
+									<h1 className="dash-app-login-form-title" style={{ margin: 0 }}>Recuperar Contraseña</h1>
+								</Grid>
+							</Grid>
+
+							{error && (
+								<Alert severity="error" sx={{ mb: 2 }}>
+									{error}
+								</Alert>
+							)}
+
+							<div className='dash-app-form-item'>
+								<TextField
+									fullWidth
+									variant='outlined'
+									label='Email'
+									placeholder='Email'
+									required
+									value={email}
+									inputProps={{type:'email'}}
+									onChange={(e) => setEmail(e.target.value)}
+									className='dash-app-form-item-input'
+									autoComplete="username"
+									name="email"
+									type="email"
+									id="email"
+								/>
+							</div>
+
+							<div className='dash-app-form-item mt-1'>
+								<Button
+									type='submit'
+									variant='contained'
+									disabled={loading}
+									sx={{ mb: 2, width: '100%' }}
+								>
+									{loading ? 'Cargando...' : 'Resetear Contraseña'}
+								</Button>
+							</div>
+						</form>
+					)}
+				</Box>
+			</Box>
+		</FullLayoutMarkup>
+	);
+};
+
+export default RecoverPassword;

package/src/pages/SingleImageUploader.tsx

@@ -0,0 +1,55 @@
+import { IconButton } from '@mui/material';
+import { FC, useState } from 'react';
+import { Upload } from '@mui/icons-material';
+import React from 'react';
+export interface ISingleImageUploader {
+	classNamePrefix?: string;
+	currentUrl?: string;
+	onChange?:  (file:File) => void
+}
+
+const SingleImageUploader:FC<ISingleImageUploader> = (props) => {
+
+	const { classNamePrefix = 'default', currentUrl = 'single-image-uploader', onChange } = props;
+
+	const [localFile, setLocalFile] = useState(null);
+
+	return <div className={`single-image-uploader ${classNamePrefix}-img`}>
+		{localFile || currentUrl ? (
+			<img src={localFile || currentUrl} alt='' />
+		) : (
+			<div className={`${classNamePrefix}-icon`}>
+				{/*<Image />*/}
+			</div>
+		)}
+		<IconButton
+			aria-label='upload image'
+			component='label'
+			className={`${classNamePrefix}-edit`}
+		>
+            
+            <Upload style={{ opacity: '0.6' }} />
+            
+			<input
+				hidden
+				accept='image/*'
+				type='file'
+				onChange={e => {
+												
+					setLocalFile(URL.createObjectURL(e.target.files[0]));
+
+					if (onChange) {
+						onChange(e.target.files[0]);
+					}
+													
+				}}
+			/>
+										
+			{/*<Edit
+				style={{ opacity: '0.6' }}
+			/>*/}
+		</IconButton>
+	</div>;
+};
+
+export default SingleImageUploader;