sysadminix/rentalcalculator
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RC-7: update auth pages and profile components

Browse Source
This commit is contained in:
evgeniywas
2023-08-06 15:28:50 +01:00
parent 2160d206e9
commit 425a9abe92
6 changed files with 137 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/@fuse/core/FuseLayout/FuseLayout.js
View File

@@ -52,15 +52,15 @@ const inputGlobalStyles = (
// textDecoration: 'none',
// },
// },
'[class*="MuiOutlinedInput-root"]': {
borderRadius: `${theme.spacing('10px')}!important`,
},
'[class^="border"]': {
borderColor: theme.palette.divider,
},
'[class*="border"]': {
borderColor: theme.palette.divider,
},
// '[class*="MuiOutlinedInput-root"]': {
// borderRadius: `${theme.spacing('10px')}`,
// },
// '[class^="border"]': {
// borderColor: theme.palette.divider,
// },
// '[class*="border"]': {
// borderColor: theme.palette.divider,
// },
'[class*="divide-"] > :not([hidden]) ~ :not([hidden])': {
borderColor: theme.palette.divider,
},

21
src/app/main/authPages/forgot-password/ForgotPasswordPage.js
View File

@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { forwardRef } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { withTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
@@ -15,6 +16,19 @@ const defaultValues = {
email: '',
};
const StyledTextField = forwardRef((props, ref) => (
<TextField
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
borderRadius: '10px',
},
}}
{...props}
ref={ref}
/>
));
function ForgotPasswordPage({ t }) {
const schema = yup.object().shape({
email: yup.string().email(t('email_error')).required(t('email_error')),
@@ -63,7 +77,7 @@ function ForgotPasswordPage({ t }) {
name="email"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
label={t('email')}
type="email"
@@ -72,11 +86,6 @@ function ForgotPasswordPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>

30
src/app/main/authPages/sign-in/SignInPage.js
View File

@@ -7,6 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import Paper from '@mui/material/Paper';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { forwardRef } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { withTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
@@ -20,6 +21,19 @@ const defaultValues = {
remember: false,
};
const StyledTextField = forwardRef((props, ref) => (
<TextField
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
borderRadius: '10px',
},
}}
{...props}
ref={ref}
/>
));
function SignInPage({ t }) {
const schema = yup.object().shape({
email: yup.string().email(t('email_error')).required(t('email_error')),
@@ -72,7 +86,7 @@ function SignInPage({ t }) {
name="email"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="mb-28"
label={t('email')}
@@ -83,11 +97,6 @@ function SignInPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -96,7 +105,7 @@ function SignInPage({ t }) {
name="password"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="mb-28"
label={t('password')}
@@ -106,11 +115,6 @@ function SignInPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -146,7 +150,7 @@ function SignInPage({ t }) {
variant="contained"
color="secondary"
className="w-[220px] mt-32 text-base uppercase rounded-xl"
aria-label="Sign in"
aria-label={t('sign_in_btn')}
disabled={_.isEmpty(dirtyFields) || !isValid}
type="submit"
size="large"

42
src/app/main/authPages/sign-up/SignUpPage.js
View File

@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { forwardRef } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { withTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
@@ -18,6 +19,19 @@ const defaultValues = {
passwordConfirm: '',
};
const StyledTextField = forwardRef((props, ref) => (
<TextField
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
borderRadius: '10px',
},
}}
{...props}
ref={ref}
/>
));
function SignUpPage({ t }) {
const schema = yup.object().shape({
name: yup.string().required(t('name_error')),
@@ -78,7 +92,7 @@ function SignUpPage({ t }) {
name="name"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="mb-28"
label={t('name')}
@@ -89,11 +103,6 @@ function SignUpPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -102,7 +111,7 @@ function SignUpPage({ t }) {
name="email"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="mb-28"
label={t('email')}
@@ -112,11 +121,6 @@ function SignUpPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -125,7 +129,7 @@ function SignUpPage({ t }) {
name="password"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="mb-28"
label={t('password')}
@@ -135,11 +139,6 @@ function SignUpPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -148,7 +147,7 @@ function SignUpPage({ t }) {
name="passwordConfirm"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="mb-28"
label={t('password_confirm')}
@@ -158,11 +157,6 @@ function SignUpPage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>

55
src/app/main/navigationPages/profile/Profile.js
View File

@@ -12,6 +12,7 @@ import { withTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import * as yup from 'yup';
import { toBase64 } from 'src/app/utils';
import { forwardRef } from 'react';
const MAX_PICTURE_SIZE = 5000000;
const AVAILABLE_MEDIA_TYPES = ['image/png', 'image/jpeg'];
@@ -26,6 +27,19 @@ const Root = styled(FusePageSimple)(({ theme }) => ({
'& .FusePageSimple-sidebarContent': {},
}));
const StyledTextField = forwardRef((props, ref) => (
<TextField
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
borderRadius: '10px',
},
}}
{...props}
ref={ref}
/>
));
function ProfilePage({ t }) {
const dispatch = useDispatch();
const user = useSelector(selectUser);
@@ -193,7 +207,7 @@ function ProfilePage({ t }) {
name="firstName"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="col-span-2"
label={t('first_name')}
@@ -202,11 +216,6 @@ function ProfilePage({ t }) {
helperText={errors?.firstName?.message}
variant="outlined"
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -215,7 +224,7 @@ function ProfilePage({ t }) {
name="lastName"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="col-span-2"
label={t('last_name')}
@@ -224,11 +233,6 @@ function ProfilePage({ t }) {
helperText={errors?.lastName?.message}
variant="outlined"
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -237,7 +241,7 @@ function ProfilePage({ t }) {
name="displayName"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="col-span-2"
label={t('display_name')}
@@ -247,11 +251,6 @@ function ProfilePage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -260,7 +259,7 @@ function ProfilePage({ t }) {
name="email"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="col-span-3"
label={t('email')}
@@ -270,11 +269,6 @@ function ProfilePage({ t }) {
variant="outlined"
required
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -283,7 +277,7 @@ function ProfilePage({ t }) {
name="mobileNumber"
control={control}
render={({ field }) => (
<TextField
<StyledTextField
{...field}
className="col-span-3"
label={t('mobile_number')}
@@ -292,11 +286,6 @@ function ProfilePage({ t }) {
helperText={errors?.mobileNumber?.message}
variant="outlined"
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
},
}}
/>
)}
/>
@@ -318,8 +307,9 @@ function ProfilePage({ t }) {
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
padding: 0,
background: (theme) => theme.palette.background.paper,
borderRadius: '10px',
},
}}
// eslint-disable-next-line react/jsx-no-duplicate-props
@@ -349,8 +339,9 @@ function ProfilePage({ t }) {
fullWidth
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
padding: 0,
background: (theme) => theme.palette.background.paper,
borderRadius: '10px',
},
}}
// eslint-disable-next-line react/jsx-no-duplicate-props

55
src/app/main/shared-components/SearchInput.js Normal file
View File

@@ -0,0 +1,55 @@
import { forwardRef, memo, useCallback } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import _ from '@lodash';
const StyledTextField = forwardRef((props, ref) => (
<TextField
InputProps={{
sx: {
background: (theme) => theme.palette.background.paper,
borderRadius: '15px',
borderColor: (theme) => theme.palette.secondary.light,
borderWidth: '1px',
boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.25)',
},
}}
{...props}
ref={ref}
/>
));
function SearchInput({ mode, placeholder, btnText, query, onType, onSearch }) {
const isSimpleMode = mode === 'simple';
const debouncedOnType = useCallback(_.debounce(onType, 250), [onType]);
return (
<form className="flex items-center gap-20">
<StyledTextField
type="text"
variant="outlined"
className="max-w-[620px] w-full bourder-0"
defaultValue={query}
placeholder={placeholder}
onChange={debouncedOnType}
/>
{isSimpleMode && (
<Button
variant="contained"
color="inherit"
className="text-center text-base text-primary-light font-semibold tracking-widest uppercase rounded-2xl bg-secondary-light shadow hover:shadow-hover hover:shadow-secondary-light ease-in-out duration-300"
aria-label={btnText}
type="button"
size="large"
onClick={onSearch}
>
{btnText}
</Button>
)}
</form>
);
}
export default memo(SearchInput);