Merge pull request #184 from chrishiguto/feature/add-unauth-routes-an…

…d-more-customization

feat: add unauth routes and more customization to rockets provider an…

packages/react-material-ui/package.json

@@ -39,7 +39,8 @@
     "json-schema": "0.4.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.198",

packages/react-material-ui/src/components/RocketsProvider/index.tsx

@@ -7,8 +7,12 @@ import {
   RocketsLayoutProps,
 } from './types';
 import { ThemeProvider } from '../../styles';
-import { ThemeProviderProps } from '@emotion/react';
+import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import { themeLight } from '../../styles/theme';
+import { ToastContainer } from 'react-toastify';
+import { injectStyle } from 'react-toastify/dist/inject-style';
+
+injectStyle();
 
 export type RocketsProps = {
   /**
@@ -63,7 +67,13 @@ const RocketsProvider = ({
       baseUrl={dataProvider.apiUrl}
       onRefreshTokenError={auth.handleRefreshTokenError}
     >
-      <ThemeProvider theme={themeLight}>
+      <ThemeProvider theme={theme ?? themeLight}>
+        <ToastContainer
+          hideProgressBar
+          position="top-center"
+          limit={3}
+          autoClose={3000}
+        />
         <AuthProvider onSuccess={auth.onAuthSuccess} onError={auth.onAuthError}>
           {children}
         </AuthProvider>

packages/react-material-ui/src/components/RocketsProvider/utils.ts

@@ -1,3 +1,4 @@
+import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import { RocketsAuthProps, RocketsDataProviderProps } from './types';
 
 type RocketsConfig = {
@@ -9,6 +10,8 @@ type RocketsConfig = {
    * Configuration for authentication.
    */
   auth: Partial<RocketsAuthProps>;
+
+  theme?: ThemeProviderProps['theme'];
 };
 
 /**

packages/react-navigation/package.json

@@ -26,7 +26,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.26.0",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

packages/react-navigation/src/components/ForgotPasswordRoute.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Navigate } from 'react-router';
+import { useAuth } from '@concepta/react-auth-provider';
+import { AuthModule } from '@concepta/react-material-ui/';
+import { toast } from 'react-toastify';
+
+type ForgotPasswordRouteProps = {
+  home: string;
+};
+
+const ForgotPasswordRoute = ({ home }: ForgotPasswordRouteProps) => {
+  const { accessToken: authAccessToken } = useAuth();
+
+  const accessToken = authAccessToken ?? localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    return <Navigate to={home} replace />;
+  }
+
+  return (
+    <AuthModule
+      route="forgotPassword"
+      moduleProps={{
+        signInPath: '/sign-in',
+        onSuccess: () => toast.success('Success!'),
+        onError: (error: any) =>
+          toast.error(
+            error?.response?.data?.message ||
+              'An error has occurred. Please try again later or contact support for assistance.',
+          ),
+      }}
+    />
+  );
+};
+
+export default ForgotPasswordRoute;

packages/react-navigation/src/components/ResetPasswordRoute.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Navigate } from 'react-router';
+import { useAuth } from '@concepta/react-auth-provider';
+import { AuthModule } from '@concepta/react-material-ui/';
+import { toast } from 'react-toastify';
+
+type ResetPasswordRouteProps = {
+  home: string;
+};
+
+const ResetPasswordRoute = ({ home }: ResetPasswordRouteProps) => {
+  const { accessToken: authAccessToken } = useAuth();
+
+  const accessToken = authAccessToken ?? localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    return <Navigate to={home} replace />;
+  }
+
+  return (
+    <AuthModule
+      route="resetPassword"
+      moduleProps={{
+        signInPath: '/sign-in',
+        onSuccess: () => toast.success('Success!'),
+        onError: (error: any) =>
+          toast.error(
+            error?.response?.data?.message ||
+              'An error has occurred. Please try again later or contact support for assistance.',
+          ),
+      }}
+    />
+  );
+};
+
+export default ResetPasswordRoute;

packages/react-navigation/src/components/Router.tsx

@@ -22,6 +22,9 @@ const router = (
     menuItems: DrawerItemProps[],
     children: ReactNode,
   ) => ReactNode,
+  renderSignUp?: (home: string) => ReactNode,
+  renderForgotPassword?: (home: string) => ReactNode,
+  renderResetPassword?: (home: string) => ReactNode,
 ) => {
   const firstRoute = routes[0];
 
@@ -35,6 +38,9 @@ const router = (
               routes={routes}
               items={items}
               renderAppBar={renderAppBar}
+              renderSignUp={renderSignUp}
+              renderForgotPassword={renderForgotPassword}
+              renderResetPassword={renderResetPassword}
             />
           </AdminProvider>
         }
@@ -43,18 +49,26 @@ const router = (
   );
 };
 
-const Router = ({
-  children,
-  AdminProvider,
-  renderAppBar,
-}: {
+type RouterProps = {
   children: ReactElement[];
   AdminProvider: ComponentType<PropsWithChildren<{ home: string }>>;
   renderAppBar?: (
     menuItems: DrawerItemProps[],
     children: ReactNode,
   ) => ReactNode;
-}) => {
+  renderSignUp?: (home: string) => ReactNode;
+  renderForgotPassword?: (home: string) => ReactNode;
+  renderResetPassword?: (home: string) => ReactNode;
+};
+
+const Router = ({
+  children,
+  AdminProvider,
+  renderAppBar,
+  renderSignUp,
+  renderForgotPassword,
+  renderResetPassword,
+}: RouterProps) => {
   const items = Children.map(children, (child) => {
     return {
       id: child.props.id,
@@ -65,7 +79,15 @@ const Router = ({
 
   return (
     <RouterProvider
-      router={router(AdminProvider, children, items, renderAppBar)}
+      router={router(
+        AdminProvider,
+        children,
+        items,
+        renderAppBar,
+        renderSignUp,
+        renderForgotPassword,
+        renderResetPassword,
+      )}
     />
   );
 };

packages/react-navigation/src/components/RoutesRoot.tsx

@@ -3,6 +3,9 @@ import { Route, Routes, Navigate } from 'react-router-dom';
 import LoginRoute from './LoginRoute';
 import { DrawerItemProps } from '@concepta/react-material-ui';
 import DefaultRoute from './DefaultRoute';
+import SignUpRoute from './SignUpRoute';
+import ResetPasswordRoute from './ResetPasswordRoute';
+import ForgotPasswordRoute from './ForgotPasswordRoute';
 
 type RoutesRootProps = {
   items: DrawerItemProps[];
@@ -11,16 +14,56 @@ type RoutesRootProps = {
     menuItems: DrawerItemProps[],
     children: ReactNode,
   ) => ReactNode;
+  renderSignUp?: (home: string) => ReactNode;
+  renderForgotPassword?: (home: string) => ReactNode;
+  renderResetPassword?: (home: string) => ReactNode;
 };
 
-const RoutesRoot = ({ routes, items, renderAppBar }: RoutesRootProps) => {
+const RoutesRoot = ({
+  routes,
+  items,
+  renderAppBar,
+  renderSignUp,
+  renderForgotPassword,
+  renderResetPassword,
+}: RoutesRootProps) => {
   return (
     <Routes>
       <Route path="/" element={<Navigate to={routes[0].props.id} replace />} />
       <Route
         path="/sign-in"
         element={<LoginRoute home={routes[0].props.id} />}
       />
+      <Route
+        path="/sign-up"
+        element={
+          renderSignUp ? (
+            renderSignUp(routes[0].props.id)
+          ) : (
+            <SignUpRoute home={routes[0].props.id} />
+          )
+        }
+      />
+      <Route
+        path="/forgot-password"
+        element={
+          renderForgotPassword ? (
+            renderForgotPassword(routes[0].props.id)
+          ) : (
+            <ForgotPasswordRoute home={routes[0].props.id} />
+          )
+        }
+      />
+      <Route
+        path="/reset-password"
+        element={
+          renderResetPassword ? (
+            renderResetPassword(routes[0].props.id)
+          ) : (
+            <ResetPasswordRoute home={routes[0].props.id} />
+          )
+        }
+      />
       {Children.map(routes, (child) => {
         return (
           <Route

packages/react-navigation/src/components/SignUpRoute.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Navigate } from 'react-router';
+import { useAuth } from '@concepta/react-auth-provider';
+import { AuthModule } from '@concepta/react-material-ui/';
+import { toast } from 'react-toastify';
+
+type SignUpRouteProps = {
+  home: string;
+};
+
+const SignUpRoute = ({ home }: SignUpRouteProps) => {
+  const { accessToken: authAccessToken } = useAuth();
+
+  const accessToken = authAccessToken ?? localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    return <Navigate to={home} replace />;
+  }
+
+  return (
+    <AuthModule
+      route="signUp"
+      moduleProps={{
+        signInPath: '/sign-in',
+        onSuccess: () => toast.success('Success!'),
+        onError: (error: any) =>
+          toast.error(
+            error?.response?.data?.message ||
+              'An error has occurred. Please try again later or contact support for assistance.',
+          ),
+      }}
+    />
+  );
+};
+
+export default SignUpRoute;

yarn.lock

@@ -1739,6 +1739,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
+    react-toastify: "npm:^10.0.5"
   peerDependencies:
     "@concepta/react-auth-provider": ^1.0.0-alpha.23
     "@concepta/react-data-provider": ^1.0.0-alpha.23
@@ -1764,6 +1765,7 @@ __metadata:
     react-dom: "npm:^18.2.0"
     react-router: "npm:^6.26.0"
     react-router-dom: "npm:^6.26.0"
+    react-toastify: "npm:^10.0.5"
   peerDependenciesMeta:
     "@types/react":
       optional: true
@@ -15887,6 +15889,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^10.0.5":
+  version: 10.0.5
+  resolution: "react-toastify@npm:10.0.5"
+  dependencies:
+    clsx: "npm:^2.1.0"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 10c0/66c68ec3d6c017d9f32652d73bb925224921c6a80b629b9d481430d5b4fd504abb7a99995a64b9aef0fc31326c74f3cbe088b3287b978dd0c355079c4bbf4158
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"