@applica-software-guru/react-admin 1.0.63 → 1.0.64

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { Avatar, IconButton, Transitions } from '../../../@extended';
-import { Box, ButtonBase, CardContent, ClickAwayListener, Grid, Paper, Popper, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, ButtonBase, CardContent, ClickAwayListener, Grid, List, Paper, Popper, Stack, Tooltip, Typography } from '@mui/material';
+import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
 import { useAuthProvider, useDataProvider, useGetIdentity, useLogout } from 'react-admin';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -41,18 +42,13 @@ const Profile = () => {
   };
 
   const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const isImpersonating = false; // authProvider?.isImpersonating && authProvider?.isImpersonating() === true
   const logout = useLogout();
 
   const dataProvider = useDataProvider();
   const authProvider = useAuthProvider();
   const handleLogout = useCallback(() => {
-    if (isImpersonating) {
-      authProvider.stopImpersonate().then(() => (document.location.href = '/'));
-    } else {
-      logout();
-    }
-  }, [authProvider, isImpersonating, logout]);
+    logout();
+  }, [authProvider, logout]);
   const [profileImage, setProfileImage] = useState(null);
   useEffect(() => {
     async function fetchProfileImage() {
@@ -143,6 +139,15 @@ const Profile = () => {
                       </Grid>
                     </Grid>
                   </CardContent>
+                  <Grid container>
+                    <Grid item xs={12}>
+                      <List component="nav" sx={{ p: 0, '& .MuiListItemIcon-root': { minWidth: 32 } }}>
+                        <ChangePasswordButton />
+                        <LogoutButton />
+                        <StopImpersonateButton />
+                      </List>
+                    </Grid>
+                  </Grid>
                 </MainCard>
               </ClickAwayListener>
             </Paper>

package/src/components/Layout/Header/HeaderContent/buttons/ChangePasswordButton.tsx

@@ -0,0 +1,28 @@
+import { Dialog, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Fragment, useCallback, useState } from 'react';
+
+import { ChangePasswordForm } from '../../../../ra-forms';
+import { Key } from '@mui/icons-material';
+import { useTranslate } from 'ra-core';
+
+const ChangePasswordButton = () => {
+  const [open, setOpen] = useState(false);
+  const handleSuccess = useCallback(() => setOpen(false), [setOpen]);
+  const handleOpen = useCallback(() => setOpen(true), [setOpen]);
+  const translate = useTranslate();
+  return (
+    <Fragment>
+      <ListItemButton onClick={handleOpen}>
+        <ListItemIcon>
+          <Key />
+        </ListItemIcon>
+        <ListItemText primary={translate('ra.auth.change_password')} />
+      </ListItemButton>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
+        <ChangePasswordForm onSuccess={handleSuccess} />
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export default ChangePasswordButton;

package/src/components/Layout/Header/HeaderContent/buttons/LogoutButton.tsx

@@ -0,0 +1,23 @@
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { useLogout, useTranslate } from 'ra-core';
+
+import { Fragment } from 'react';
+import { LogoutOutlined } from '@mui/icons-material';
+
+const LogoutButton = () => {
+  const logout = useLogout();
+  const translate = useTranslate();
+
+  return (
+    <Fragment>
+      <ListItemButton onClick={logout}>
+        <ListItemIcon>
+          <LogoutOutlined />
+        </ListItemIcon>
+        <ListItemText primary={translate('ra.auth.logout')} />
+      </ListItemButton>
+    </Fragment>
+  );
+};
+
+export default LogoutButton;

package/src/components/Layout/Header/HeaderContent/buttons/StopImpersonateButton.tsx

@@ -0,0 +1,39 @@
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { useAuthProvider, useTranslate } from 'ra-core';
+
+import { LogoutOutlined } from '@mui/icons-material';
+
+const StopImpersonateButton = () => {
+  const translate = useTranslate();
+  const authProvider = useAuthProvider();
+  const stopImpersonating = useCallback(
+    () => authProvider.stopImpersonate().then(() => (document.location.href = '/')),
+    [authProvider?.stopImpersonating]
+  );
+  const [isImpersonating, setIsImpersonating] = useState(false);
+
+  useEffect(() => {
+    if (!authProvider.isImpersonating) {
+      return;
+    }
+    authProvider.isImpersonating().then((isImpersonating: boolean) => setIsImpersonating(isImpersonating));
+  }, [authProvider, setIsImpersonating]);
+
+  if (!isImpersonating) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <ListItemButton onClick={stopImpersonating}>
+        <ListItemIcon>
+          <LogoutOutlined />
+        </ListItemIcon>
+        <ListItemText primary={translate('ra.auth.stop_impersonate')} />
+      </ListItemButton>
+    </Fragment>
+  );
+};
+
+export default StopImpersonateButton;

package/src/components/Layout/Header/HeaderContent/buttons/index.jsx

@@ -0,0 +1,4 @@
+import ChangePasswordButton from './ChangePasswordButton';
+import LogoutButton from './LogoutButton';
+import StopImpersonateButton from './StopImpersonateButton';
+export { ChangePasswordButton, LogoutButton, StopImpersonateButton };

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

@@ -0,0 +1,66 @@
+import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify } 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';
+import { Toolbar } from '../ra-forms';
+import { useThemeConfig } from '../../hooks';
+
+export type ChangePasswordFormProps = {
+  onSuccess: () => void;
+};
+const ChangePasswordForm = ({ onSuccess }: ChangePasswordFormProps) => {
+  const { spacing } = useThemeConfig();
+  const [saving, setSaving] = useState(false);
+  const authProvider = useAuthProvider();
+  const notify = useNotify();
+  const handleSubmit = useCallback(
+    (data: any) => {
+      const { oldPassword, newPassword } = data;
+      setSaving(true);
+      authProvider
+        ?.changePassword(oldPassword, newPassword)
+        .then(() => {
+          notify('ra.auth.password_changed');
+          onSuccess();
+        })
+        .catch((error: string) => notify(error, { type: 'error' }))
+        .finally(() => setSaving(false));
+    },
+    [authProvider, onSuccess]
+  );
+  return (
+    <ResourceContextProvider value="user/change-password">
+      <EditContextProvider
+        value={{
+          record: {},
+          resource: 'user/change-password',
+          // @ts-ignore
+          save: handleSubmit
+        }}
+      >
+        <SimpleForm
+          onSubmit={handleSubmit}
+          toolbar={
+            <Toolbar>
+              <SaveButton disabled={saving} />
+            </Toolbar>
+          }
+        >
+          <Grid container spacing={spacing}>
+            <Grid item xs={12}>
+              <TextInput source="oldPassword" type="password" validate={required()} />
+            </Grid>
+            <Grid item xs={12}>
+              <TextInput source="newPassword" type="password" validate={required()} />
+            </Grid>
+          </Grid>
+        </SimpleForm>
+      </EditContextProvider>
+    </ResourceContextProvider>
+  );
+};
+
+export default ChangePasswordForm;

package/src/components/ra-forms/index.jsx

@@ -1,4 +1,5 @@
 import CardForm from './CardForm';
+import ChangePasswordForm from './ChangePasswordForm';
 import Edit from './Edit';
 import FormHeader from './FormHeader';
 import LongForm from './LongForm';
@@ -6,4 +7,4 @@ import SimpleForm from './SimpleForm';
 import SimpleFormIterator from './SimpleFormIterator';
 import TabbedForm from './TabbedForm';
 import Toolbar from './Toolbar';
-export { CardForm, Edit, FormHeader, LongForm, SimpleForm, SimpleFormIterator, TabbedForm, Toolbar };
+export { CardForm, ChangePasswordForm, Edit, FormHeader, LongForm, SimpleForm, SimpleFormIterator, TabbedForm, Toolbar };

package/src/components/ra-pages/ActivatePage.tsx

@@ -23,11 +23,11 @@ const ActivatePage = ({ name, version, background }: BaseAuthProps) => {
       .activate(token)
       .then(() => {
         notify('ra.auth.activate_success', { type: 'info' });
-        _.delay(() => navigate('/login'), 3000);
+        _.delay(() => navigate('/login'), 1000);
       })
       .catch((error: any) => {
         notify(error, { type: 'error' });
-        _.delay(() => navigate('/login'), 3000);
+        _.delay(() => navigate('/login'), 1000);
       });
   }, [token]);
   return (