RC-8: create profile page
This commit is contained in:
@@ -1,36 +1,386 @@
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FusePageSimple from '@fuse/core/FusePageSimple';
|
||||
import DemoContent from '@fuse/core/DemoContent';
|
||||
import _ from '@lodash';
|
||||
import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import Button from '@mui/material/Button';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { selectUser, updateUserSettings } from 'app/store/userSlice';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import * as yup from 'yup';
|
||||
import { toBase64 } from 'src/app/utils';
|
||||
|
||||
const MAX_PICTURE_SIZE = 5000000;
|
||||
const AVAILABLE_MEDIA_TYPES = ['image/png', 'image/jpeg'];
|
||||
|
||||
const Root = styled(FusePageSimple)(({ theme }) => ({
|
||||
'& .FusePageSimple-header': {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
borderBottomWidth: 1,
|
||||
borderStyle: 'solid',
|
||||
borderColor: theme.palette.divider,
|
||||
},
|
||||
'& .FusePageSimple-header': {},
|
||||
'& .FusePageSimple-toolbar': {},
|
||||
'& .FusePageSimple-content': {},
|
||||
'& .FusePageSimple-content': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
'& .FusePageSimple-sidebarHeader': {},
|
||||
'& .FusePageSimple-sidebarContent': {},
|
||||
}));
|
||||
|
||||
function ProfilePage(props) {
|
||||
const { t } = useTranslation('profilePage');
|
||||
function ProfilePage({ t }) {
|
||||
const dispatch = useDispatch();
|
||||
const user = useSelector(selectUser);
|
||||
|
||||
const defaultValues = {
|
||||
photoURL: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
displayName: '',
|
||||
email: '',
|
||||
mobileNumber: '',
|
||||
information: '',
|
||||
address: '',
|
||||
...user.data,
|
||||
};
|
||||
const schema = yup.object().shape({
|
||||
photoURL: yup.string().notRequired(),
|
||||
firstName: yup
|
||||
.string()
|
||||
.max(150, t('max_length_error', { length: 150 }))
|
||||
.trim()
|
||||
.notRequired(),
|
||||
lastName: yup
|
||||
.string()
|
||||
.max(150, t('max_length_error', { length: 150 }))
|
||||
.trim()
|
||||
.notRequired(),
|
||||
displayName: yup
|
||||
.string()
|
||||
.required(t('display_name_error'))
|
||||
.max(30, t('max_length_error', { length: 30 }))
|
||||
.trim(),
|
||||
email: yup
|
||||
.string()
|
||||
.matches(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g, t('email_error'))
|
||||
.required(t('email_error'))
|
||||
.max(40, t('max_length_error', { length: 40 })),
|
||||
mobileNumber: yup
|
||||
.string()
|
||||
.matches(/^(?=(.*\d){7,})\+?(\d[\d-. ]+)?(\([\d-. ]+\))?[\d-. ]+\d$/, {
|
||||
message: t('mobile_number_error'),
|
||||
excludeEmptyString: true,
|
||||
})
|
||||
.max(20, t('max_length_error', { length: 20 }))
|
||||
.notRequired(),
|
||||
information: yup
|
||||
.string()
|
||||
.max(300, t('max_length_error', { length: 300 }))
|
||||
.trim()
|
||||
.notRequired(),
|
||||
address: yup
|
||||
.string()
|
||||
.max(150, t('max_length_error', { length: 150 }))
|
||||
.trim()
|
||||
.notRequired(),
|
||||
});
|
||||
|
||||
const { control, formState, watch, setValue, handleSubmit, setError, reset } = useForm({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
resolver: yupResolver(schema),
|
||||
});
|
||||
const { dirtyFields, errors } = formState;
|
||||
|
||||
const uploadPicture = async (event) => {
|
||||
const { target } = event;
|
||||
if (target.files && target.files[0]) {
|
||||
const file = target.files[0];
|
||||
if (file.size > MAX_PICTURE_SIZE) {
|
||||
return setError('photoURL', { type: 'custom', message: t('picture_size_error') });
|
||||
}
|
||||
|
||||
if (!AVAILABLE_MEDIA_TYPES.includes(file.type)) {
|
||||
return setError('photoURL', {
|
||||
type: 'custom',
|
||||
message: t('picture_extensions_error'),
|
||||
});
|
||||
}
|
||||
|
||||
const base64 = await toBase64(file);
|
||||
setValue('photoURL', base64, { shouldDirty: true });
|
||||
} else {
|
||||
setError('photoURL', { type: 'custom', message: 'Choose a file please' });
|
||||
}
|
||||
};
|
||||
|
||||
const deletePicture = () => setValue('photoURL', '', { shouldDirty: true });
|
||||
|
||||
const onSubmit = (data) => {
|
||||
dispatch(updateUserSettings(data)).catch((error) => {
|
||||
setError('root', {
|
||||
type: 'manual',
|
||||
message: error.message,
|
||||
});
|
||||
});
|
||||
reset(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Root
|
||||
// header={
|
||||
// <div className="p-24">
|
||||
// <h4>{t('TITLE')}</h4>
|
||||
// </div>
|
||||
// }
|
||||
content={
|
||||
<div className="p-24">
|
||||
<h4>Content</h4>
|
||||
<br />
|
||||
<DemoContent />
|
||||
<div className="w-full p-60">
|
||||
<form name="profileForm" noValidate onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex items-end mb-68">
|
||||
<Paper className="relative w-[240px] h-[240px] mr-20 bg-common-disabled overflow-hidden">
|
||||
{watch('photoURL') && (
|
||||
<img
|
||||
src={watch('photoURL')}
|
||||
alt="user"
|
||||
className="absolute w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
<div className="grid grid-cols-[200px_minmax(0,_1fr)] gap-x-40 gap-y-28">
|
||||
<Controller
|
||||
name="photoURL"
|
||||
control={control}
|
||||
render={({ field: { name, ref, onBlur } }) => (
|
||||
<label htmlFor="input-file">
|
||||
<input
|
||||
id="input-file"
|
||||
name={name}
|
||||
ref={ref}
|
||||
type="file"
|
||||
accept={AVAILABLE_MEDIA_TYPES.join(', ')}
|
||||
style={{ display: 'none' }}
|
||||
onBlur={onBlur}
|
||||
onChange={uploadPicture}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
component="span"
|
||||
color="secondary"
|
||||
className="text-lg rounded-xl border-2 border-secondary-main shadow hover:shadow-hover hover:shadow-secondary-main hover:border-2 ease-in-out duration-300"
|
||||
aria-label={t('upload_picture_btn')}
|
||||
size="small"
|
||||
fullWidth
|
||||
>
|
||||
{t('upload_picture_btn')}
|
||||
</Button>
|
||||
</label>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
variant="text"
|
||||
color="secondary"
|
||||
className="justify-self-start min-w-fit text-base"
|
||||
aria-label={t('delete_picture')}
|
||||
disabled={!watch('photoURL')}
|
||||
size="small"
|
||||
onClick={deletePicture}
|
||||
>
|
||||
<FuseSvgIcon className="mr-10">heroicons-outline:trash</FuseSvgIcon>
|
||||
{t('delete_picture')}
|
||||
</Button>
|
||||
<ul className="col-span-2 text-lg">
|
||||
<li className="bullet">{t('first_picture_req')}</li>
|
||||
<li className="bullet">{t('second_picture_req')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-x-24 gap-y-32 w-full mb-48">
|
||||
<Controller
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-2"
|
||||
label={t('first_name')}
|
||||
type="text"
|
||||
error={!!errors.firstName}
|
||||
helperText={errors?.firstName?.message}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-2"
|
||||
label={t('last_name')}
|
||||
type="text"
|
||||
error={!!errors.lastName}
|
||||
helperText={errors?.lastName?.message}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="displayName"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-2"
|
||||
label={t('display_name')}
|
||||
type="text"
|
||||
error={!!errors.displayName}
|
||||
helperText={errors?.displayName?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-3"
|
||||
label={t('email')}
|
||||
type="email"
|
||||
error={!!errors.email}
|
||||
helperText={errors?.email?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="mobileNumber"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-3"
|
||||
label={t('mobile_number')}
|
||||
type="tel"
|
||||
error={!!errors.mobileNumber}
|
||||
helperText={errors?.mobileNumber?.message}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="information"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-3"
|
||||
label={t('information')}
|
||||
type="text"
|
||||
error={!!errors.information}
|
||||
helperText={errors?.information?.message}
|
||||
variant="outlined"
|
||||
multiline
|
||||
rows={7}
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
// eslint-disable-next-line react/jsx-no-duplicate-props
|
||||
inputProps={{
|
||||
sx: {
|
||||
padding: '16.5px 14px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="address"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="col-span-3"
|
||||
label={t('address')}
|
||||
type="text"
|
||||
error={!!errors.address}
|
||||
helperText={errors?.address?.message}
|
||||
variant="outlined"
|
||||
multiline
|
||||
rows={7}
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
// eslint-disable-next-line react/jsx-no-duplicate-props
|
||||
inputProps={{
|
||||
sx: {
|
||||
padding: '16.5px 14px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center gap-10 w-full">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="max-w-320 text-base uppercase rounded-xl"
|
||||
aria-label={t('save_changes')}
|
||||
disabled={_.isEmpty(dirtyFields) || !_.isEmpty(errors)}
|
||||
type="submit"
|
||||
size="large"
|
||||
>
|
||||
{t('save_changes')}
|
||||
</Button>
|
||||
{errors.root?.message && (
|
||||
<p className="text-l text-error-main">{errors.root?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
scroll="content"
|
||||
@@ -38,4 +388,4 @@ function ProfilePage(props) {
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfilePage;
|
||||
export default withTranslation('profilePage')(ProfilePage);
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { lazy } from 'react';
|
||||
import i18next from 'i18next';
|
||||
|
||||
import authRoles from '../../../configs/authRoles';
|
||||
import en from './i18n/en';
|
||||
import Profile from './Profile';
|
||||
|
||||
i18next.addResourceBundle('en', 'profilePage', en);
|
||||
|
||||
const Profile = lazy(() => import('./Profile'));
|
||||
|
||||
const ProfileConfig = {
|
||||
settings: {
|
||||
layout: {
|
||||
@@ -22,28 +24,3 @@ const ProfileConfig = {
|
||||
};
|
||||
|
||||
export default ProfileConfig;
|
||||
|
||||
/**
|
||||
* Lazy load Example
|
||||
*/
|
||||
/*
|
||||
import React from 'react';
|
||||
|
||||
const Example = lazy(() => import('./Example'));
|
||||
|
||||
const ExampleConfig = {
|
||||
settings: {
|
||||
layout: {
|
||||
config: {},
|
||||
},
|
||||
},
|
||||
routes: [
|
||||
{
|
||||
path: 'example',
|
||||
element: <Example />,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default ExampleConfig;
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user