@applica-software-guru/react-admin 1.5.326 → 1.5.329

package/package.json

@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/lab": "5.0.0-alpha.148",
     "@mui/material": "5.15.17",
+    "@react-oauth/google": "^0.12.1",
     "dayjs": "^1.11.8",
     "framer-motion": "^10.12.17",
     "history": "^5.1.0",
@@ -107,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.326"
+  "version": "1.5.329"
 }

package/src/ApplicaAdmin.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/components';
 import { AppStateProvider } from '@/components/AppStateProvider';
 import { ThemeConfig, ThemeProvider } from '@/components/Layout/ThemeProvider';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import React, { useMemo } from 'react';
 import { AdminProps, AuthProvider, DataProvider, I18nProvider } from 'react-admin';
 import { QueryClient } from 'react-query';
@@ -53,6 +54,7 @@ function ApplicaAdmin({
   enablePasswordRecover = false,
   enableThemeToggler = false,
   enableLocaleSwitcher = false,
+  oauth = {},
   queryClient = defaultQueryClient,
   background,
   notificationAPI = 'entities/notification',
@@ -93,11 +95,12 @@ function ApplicaAdmin({
         version,
         background,
         enableRegistration,
-        enablePasswordRecover
+        enablePasswordRecover,
+        oauth
       });
     }
     return loginPage;
-  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover]);
+  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover, oauth]);
   const layout = useMemo(
     () => (props: any) => {
       const _logoMain = name ? <MainIcon title={name} /> : logoMain;
@@ -152,7 +155,7 @@ function ApplicaAdmin({
     );
   }
 
-  return (
+  const appContent = (
     <AppStateProvider>
       <MenuConfigProvider menu={menu}>
         <ThemeProvider initialConfig={themeConfig}>
@@ -171,6 +174,12 @@ function ApplicaAdmin({
       </MenuConfigProvider>
     </AppStateProvider>
   );
+
+  if (oauth.google?.clientId) {
+    return <GoogleOAuthProvider clientId={oauth.google.clientId}>{appContent}</GoogleOAuthProvider>;
+  } else {
+    return appContent;
+  }
 }
 
 type ApplicaAdminProps = AdminProps & {
@@ -309,6 +318,14 @@ type ApplicaAdminProps = AdminProps & {
    * Indicates whether the locale switcher should be displayed.
    */
   enableLocaleSwitcher: boolean;
+  /**
+   * Indicates which OAuth providers to enable and configurations.
+   */
+  oauth: {
+    google?: {
+      clientId: string;
+    };
+  };
 };
 
 export { ApplicaAdmin };

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, memo, useCallback, useMemo, useState } from 'react';
+import { FC, ReactElement, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { TablePagination, TablePaginationBaseProps, Theme, Toolbar, useMediaQuery } from '@mui/material';
 import {
@@ -20,6 +20,17 @@ const Pagination: FC<PaginationProps> = memo((props) => {
   const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const [currentPage, setCurrentPage] = useState(page - 1); // Stato per la UI
   const { hasCreate } = useResourceDefinition(props);
+  const [isSelectedPage, setIsSelectedPage] = useState(false);
+
+  useEffect(() => {
+    if (page !== currentPage + 1 && !isSelectedPage) {
+      setCurrentPage(page - 1);
+    }
+  }, [currentPage, isSelectedPage, page]);
+
+  useEffect(() => {
+    setIsSelectedPage(false);
+  }, [page]);
 
   const totalPages = useMemo(() => {
     return total != null ? Math.ceil(total / perPage) : undefined;
@@ -62,6 +73,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
         arrowSelected.includes('KeyboardArrowRightIcon');
 
       setCurrentPage(page);
+      setIsSelectedPage(true);
 
       if (isArrowClick) {
         // apply debounced API call for arrows clicks
@@ -71,7 +83,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
         setPage(page + 1);
       }
     },
-    [debouncedPageChange, setPage, translate, totalPages]
+    [debouncedPageChange, setPage, translate, totalPages, setIsSelectedPage]
   );
 
   const handlePerPageChange = useCallback(

package/src/components/ra-buttons/GoogleLoginButton.tsx

@@ -0,0 +1,76 @@
+import { ApplicaAuthProvider, AuthThirdPartyProviders } from '@applica-software-guru/iam-client';
+import { Box, useTheme } from '@mui/material';
+import { GoogleLogin } from '@react-oauth/google';
+import { useAuthProvider, useNotify } from 'ra-core';
+import { useNavigate } from 'react-router-dom';
+import { useEffect, useRef, useState } from 'react';
+import { debounce } from 'lodash';
+
+type GoogleLoginButtonProps = {
+  setLoading: (loading: boolean) => void;
+};
+
+function GoogleLoginButton({ setLoading }: GoogleLoginButtonProps) {
+  const theme = useTheme() as any;
+  const isDark = theme.palette.mode === 'dark';
+  const authProvider = useAuthProvider<ApplicaAuthProvider>();
+  const notify = useNotify();
+  const navigate = useNavigate();
+  const [boxWidth, setBoxWidth] = useState<string | number>(395);
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const debouncedUpdateButtonWidth = debounce(() => {
+      if (boxRef?.current) {
+        setBoxWidth(boxRef.current.offsetWidth);
+      }
+    }, 100);
+
+    debouncedUpdateButtonWidth();
+    window.addEventListener('resize', debouncedUpdateButtonWidth);
+
+    return () => {
+      window.removeEventListener('resize', debouncedUpdateButtonWidth);
+      debouncedUpdateButtonWidth.cancel();
+    };
+  }, [boxRef]);
+
+  function handleSuccess(response: any) {
+    setLoading(true);
+    authProvider
+      .thirdPartyLogin({ provider: AuthThirdPartyProviders.GOOGLE, payload: { credential: response.credential } })
+      .then(() => {
+        setLoading(false);
+        navigate('/');
+      })
+      .catch((error: any) => {
+        setLoading(false);
+        notify(
+          typeof error === 'string'
+            ? error
+            : typeof error === 'undefined' || !error.message
+            ? 'ra.auth.sign_in_error'
+            : error.message,
+          {
+            type: 'error',
+            messageArgs: {
+              _: typeof error === 'string' ? error : error && error.message ? error.message : undefined
+            }
+          }
+        );
+      });
+  }
+
+  function handleError() {
+    notify('ra.auth.sign_in_error', {
+      type: 'error'
+    });
+  }
+  return (
+    <Box sx={{ colorScheme: isDark ? 'light' : 'dark', width: '100%' }} ref={boxRef}>
+      <GoogleLogin theme="outline" width={boxWidth} onSuccess={handleSuccess} onError={handleError} />
+    </Box>
+  );
+}
+
+export { GoogleLoginButton };

package/src/components/ra-buttons/index.ts

@@ -4,4 +4,5 @@ export * from './CreateButton';
 export * from './CreateInDialogButton';
 export * from './DeleteWithConfirmButton';
 export * from './EditInDialogButton';
+export * from './GoogleLoginButton';
 export * from './ImpersonateUserButton';

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

@@ -2,10 +2,12 @@ import { BaseAuthProps } from './types';
 import { AuthBackground } from '@/components/AuthBackground';
 import { AuthWrapper } from '@/components/AuthWrapper';
 import { TextInput } from '@/components/ra-inputs';
-import { Button, CircularProgress, Grid, Link, Stack, Typography } from '@mui/material';
+import { Button, CircularProgress, Divider, Grid, Link, Stack, Typography } from '@mui/material';
 import { Form, required, useCheckAuth, useLogin, useNotify, useSafeSetState, useTranslate } from 'ra-core';
 import { useEffect } from 'react';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import _ from 'lodash';
+import { GoogleLoginButton } from '@/components/ra-buttons';
 
 type LoginPageProps = BaseAuthProps & {
   /**
@@ -39,6 +41,14 @@ type LoginPageProps = BaseAuthProps & {
    * If not specified, the react-admin home page is used.
    */
   redirectTo: string;
+  /**
+   * Indicates which OAuth providers to enable and configurations.
+   */
+  oauth?: {
+    google?: {
+      clientId: string;
+    };
+  };
 };
 function LoginPage({
   version,
@@ -47,6 +57,7 @@ function LoginPage({
   logo,
   enablePasswordRecover = false,
   enableRegistration = false,
+  oauth = {},
   redirectTo,
   background = <AuthBackground />
 }: LoginPageProps): JSX.Element {
@@ -56,6 +67,7 @@ function LoginPage({
   const notify = useNotify();
   const checkAuth = useCheckAuth();
   const navigate = useNavigate();
+
   useEffect(() => {
     checkAuth({}, false)
       .then(() => {
@@ -65,6 +77,7 @@ function LoginPage({
         // not authenticated, stay on the login page
       });
   }, [checkAuth, navigate]);
+
   function handleSubmit(values: any) {
     setLoading(true);
     login(values, redirectTo)
@@ -88,6 +101,7 @@ function LoginPage({
         );
       });
   }
+
   return (
     <AuthWrapper name={name} version={version} copy={copy} logo={logo} background={background}>
       <Grid container spacing={3}>
@@ -153,6 +167,18 @@ function LoginPage({
               </Button>
             </Grid>
           </Form>
+          {!_.isEmpty(oauth) ? (
+            <>
+              <Grid item xs={12} sx={{ mt: 2 }}>
+                <Divider />
+              </Grid>
+              {oauth.google ? (
+                <Grid item xs={12} sx={{ mt: 2, width: '100%' }}>
+                  <GoogleLoginButton setLoading={setLoading} />
+                </Grid>
+              ) : null}
+            </>
+          ) : null}
         </Grid>
       </Grid>
     </AuthWrapper>

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

@@ -26,7 +26,7 @@ function RegisterPage({ name, copy, version, logo, background }: BaseAuthProps)
         redirect('/login');
       })
       .catch((error: any) => {
-        notify(error, { type: 'error' });
+        notify(error.message || error, { type: 'error' });
       })
       .finally(() => setLoading(false));
   }

package/src/playground/App.jsx

@@ -41,6 +41,9 @@ function App() {
       enableRegistration
       enablePasswordRecover
       enableThemeToggler
+      oauth={{
+        google: { clientId: 'YOUR_CLIENT_ID' }
+      }}
     >
       <CustomRoutes>
         <Route path="/custom-page" element={<CustomPage />} />