@applica-software-guru/react-admin 1.0.75 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/Layout/Header/HeaderContent/Profile.jsx

@@ -27,7 +27,7 @@ const Profile = () => {
   const theme = useTheme();
 
   const { identity } = useGetIdentity();
-  const hasProfilePic = identity !== undefined && identity.image !== null && identity.image !== '';
+  const hasProfilePic = identity !== undefined && identity.image && identity.image !== null && identity.image !== '';
   const anchorRef = useRef(null);
   const [open, setOpen] = useState(false);
   const handleToggle = () => {

package/src/components/Layout/index.jsx

@@ -1,22 +1,27 @@
 import 'simplebar/dist/simplebar.css';
 
-import { Box, Container, Toolbar, useMediaQuery } from '@mui/material';
+import { Box, Container, Dialog, Toolbar, useMediaQuery } from '@mui/material';
 import { useBreadcrumbs, useMenuConfig, useThemeConfig } from '../../hooks';
 import { useEffect, useState } from 'react';
 
 import Breadcrumbs from '../@extended/Breadcrumbs';
+import { ChangePasswordForm } from '../ra-forms';
 import Drawer from './Drawer';
 import Footer from './Footer';
 import Header from './Header';
 import HorizontalBar from './Drawer/HorizontalBar';
 import { Outlet } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { useGetIdentity } from 'ra-core';
 import { useTheme } from '@mui/material/styles';
 
 const Layout = ({ children, name, version, logoMain, logoIcon, notification, enableNotification }) => {
   const theme = useTheme();
   const { openDrawer } = useMenuConfig();
   const { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
+  const { identity } = useGetIdentity();
+  const [needToChangePassword, setNeedToChangePassword] = useState(false);
+
   const matchDownLG = useMediaQuery(theme.breakpoints.down('xl'));
   const downLG = useMediaQuery(theme.breakpoints.down('lg'));
   const { container, miniDrawer, menuOrientation, isHorizontalLayout } = useThemeConfig();
@@ -28,6 +33,7 @@ const Layout = ({ children, name, version, logoMain, logoIcon, notification, ena
     setOpen(!open);
     openDrawer(!open);
   };
+  useEffect(() => setNeedToChangePassword(identity?.needToChangePassword === true), [identity]);
   useEffect(() => {
     if (!miniDrawer) {
       setOpen(!matchDownLG);
@@ -41,6 +47,8 @@ const Layout = ({ children, name, version, logoMain, logoIcon, notification, ena
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [drawerOpen]);
 
+  const handlePasswordChange = () => setNeedToChangePassword(false);
+
   return (
     <Box sx={{ display: 'flex', width: '100%' }}>
       <Header
@@ -68,6 +76,9 @@ const Layout = ({ children, name, version, logoMain, logoIcon, notification, ena
             flexDirection: 'column'
           }}
         >
+          <Dialog open={needToChangePassword} maxWidth="xs" fullWidth>
+            <ChangePasswordForm onSuccess={handlePasswordChange} firstAccess />
+          </Dialog>
           {!isLoading && (
             <Breadcrumbs
               titleBottom

package/src/components/ra-forms/ChangePasswordForm.tsx

@@ -1,7 +1,7 @@
-import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify } from 'ra-core';
+import { Alert, AlertTitle, Grid } from '@mui/material';
+import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify, useTranslate } from 'ra-core';
 import { useCallback, useState } from 'react';
 
-import { Grid } from '@mui/material';
 import { SaveButton } from 'ra-ui-materialui';
 import SimpleForm from './SimpleForm';
 import { TextInput } from '../ra-inputs';
@@ -10,11 +10,13 @@ import { useThemeConfig } from '../../hooks';
 
 export type ChangePasswordFormProps = {
   onSuccess: () => void;
+  firstAccess?: boolean;
 };
-const ChangePasswordForm = ({ onSuccess }: ChangePasswordFormProps) => {
+const ChangePasswordForm = ({ onSuccess, firstAccess }: ChangePasswordFormProps) => {
   const { spacing } = useThemeConfig();
   const [saving, setSaving] = useState(false);
   const authProvider = useAuthProvider();
+  const translate = useTranslate();
   const notify = useNotify();
   const handleSubmit = useCallback(
     (data: any) => {
@@ -50,6 +52,14 @@ const ChangePasswordForm = ({ onSuccess }: ChangePasswordFormProps) => {
           }
         >
           <Grid container spacing={spacing}>
+            {firstAccess === true && (
+              <Grid item xs={12}>
+                <Alert severity="warning">
+                  <AlertTitle>{translate('ra.auth.first_access.change_password')}</AlertTitle>
+                  {translate('ra.auth.first_access.change_password_helper')}
+                </Alert>
+              </Grid>
+            )}
             <Grid item xs={12}>
               <TextInput source="oldPassword" type="password" validate={required()} />
             </Grid>