Merge pull request #232 from Dias999/feature/Auth_enhancements

Feature/auth enhancements
conceptadev · Sep 17, 2024 · cbee0ff · cbee0ff
2 parents 140e582 + 17ff2aa
commit cbee0ff
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 178 deletions.
diff --git a/packages/react-data-provider/src/ClientProvider.tsx b/packages/react-data-provider/src/ClientProvider.tsx
@@ -30,7 +30,7 @@ const ClientProvider = ({
   onRefreshTokenError,
   children,
 }: Props) => {
-  const [baseUrl, setBaseUrl] = useState<string>();
+  const [baseUrl, setBaseUrl] = useState<string>(outerBaseUrl || '');
 
   useEffect(() => {
     if (outerBaseUrl) {

diff --git a/packages/react-material-ui/src/components/submodules/AuthForm/index.tsx b/packages/react-material-ui/src/components/submodules/AuthForm/index.tsx
@@ -38,10 +38,12 @@ type Route = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword';
 type Query = {
   uri?: string;
   method?: string;
-  onSuccess?: (data: unknown) => void;
-  onError?: (error: unknown) => void;
+  onSuccess?: ((data: unknown) => void) | null;
+  onError?: ((error: unknown) => void) | null;
 };
 
+type FormData = Record<string, unknown> | null;
+
 export interface AuthFormSubmoduleProps {
   route: Route;
   query?: Query;
@@ -50,7 +52,7 @@ export interface AuthFormSubmoduleProps {
   formSchema?: RJSFSchema;
   formUiSchema?: UiSchema;
   advancedProperties?: Record<string, AdvancedProperty>;
-  formData?: Record<string, unknown> | null;
+  formData?: FormData;
   signInRequestPath?: string;
   signInPath?: string;
   signUpPath?: string;
@@ -61,6 +63,7 @@ export interface AuthFormSubmoduleProps {
   hideLogo?: boolean;
   headerComponent?: ReactNode;
   overrideDefaults?: boolean;
+  submitDataFormatter?: (data: FormData) => FormData;
 }
 
 const renderTitle = (title: string | ReactNode) => {
@@ -110,9 +113,9 @@ const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
         // request para /me
 
         // set no user using setUser
-        props.query?.onSuccess(data);
+        props.query?.onSuccess?.(data);
       },
-      onError: props.query?.onError,
+      onError: (error) => props.query?.onError?.(error),
     },
   );
 
@@ -121,12 +124,19 @@ const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
 
     if (props.route === 'signIn') {
       const { username, password } = fields;
-      doLogin({ username, password, loginPath: props.signInRequestPath });
+      const loginData = props.submitDataFormatter
+        ? props.submitDataFormatter(fields)
+        : { username, password, loginPath: props.signInRequestPath };
+      doLogin(loginData);
       return;
     }
 
     if (props.route === 'resetPassword') {
-      await performRequest({ ...fields, passcode });
+      const fieldsWithPasscode = { ...fields, passcode };
+      const resetPassData = props.submitDataFormatter
+        ? props.submitDataFormatter(fieldsWithPasscode)
+        : fieldsWithPasscode;
+      await performRequest(resetPassData);
       return;
     }
 
@@ -163,32 +173,39 @@ const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
           {!props.hideTitle && renderTitle(props.title ?? defaultRouteTitle)}
 
           <SchemaForm.Form
-            schema={{
-              ...defaultFormSchema,
-              ...props.formSchema,
-              required: props.overrideDefaults
-                ? props.formSchema?.required || []
-                : [
-                    ...(defaultFormSchema.required || []),
-                    ...(props.formSchema?.required || []),
-                  ],
-              properties: props.overrideDefaults
-                ? props.formSchema?.properties || {}
+            schema={
+              props.overrideDefaults && props.formSchema
+                ? props.formSchema
                 : {
-                    ...(defaultFormSchema.properties || {}),
-                    ...(props.formSchema?.properties || {}),
-                  },
-            }}
-            uiSchema={{ ...defaultAuthUiSchema, ...props.formUiSchema }}
+                    ...defaultFormSchema,
+                    ...props.formSchema,
+                    required: [
+                      ...(defaultFormSchema.required || []),
+                      ...(props.formSchema?.required || []),
+                    ],
+                    properties: {
+                      ...defaultFormSchema.properties,
+                      ...props.formSchema?.properties,
+                    },
+                  }
+            }
+            uiSchema={
+              props.overrideDefaults && props.formUiSchema
+                ? props.formUiSchema
+                : { ...defaultAuthUiSchema, ...props.formUiSchema }
+            }
             validator={validator}
             formData={props.formData || formData}
             onChange={({ formData }) => setFormData(formData)}
             onSubmit={handleSubmit}
             noHtml5Validate={true}
             showErrorList={false}
             advancedProperties={props.advancedProperties}
-            customValidate={(formData, errors) =>
-              validateForm(formData, errors, props.customValidation || [])
+            customValidate={
+              props.customValidation
+                ? (formData, errors) =>
+                    validateForm(formData, errors, props.customValidation)
+                : undefined
             }
             widgets={widgets}
           >

diff --git a/packages/react-navigation/src/components/AuthRoute.tsx b/packages/react-navigation/src/components/AuthRoute.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Navigate } from 'react-router';
+import { useAuth } from '@concepta/react-auth-provider';
+import { AuthModule, AuthModuleProps } from '@concepta/react-material-ui/';
+import { toast } from 'react-toastify';
+
+type Route = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword';
+
+type AuthRouteProps = {
+  home: string;
+  moduleProps?: AuthModuleProps;
+  route: Route;
+};
+
+const AuthRoute = (props: AuthRouteProps) => {
+  const { home, moduleProps, route } = props;
+  const { accessToken: authAccessToken } = useAuth();
+
+  const accessToken = authAccessToken ?? localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    return <Navigate to={home} replace />;
+  }
+
+  const query: AuthModuleProps['query'] = {
+    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.',
+      ),
+    ...props.moduleProps?.query,
+  };
+
+  const routeProps: Record<Route, AuthModuleProps> = {
+    resetPassword: {
+      route: 'resetPassword',
+      signInPath: '/sign-in',
+      query,
+    },
+    forgotPassword: {
+      route: 'forgotPassword',
+      signInPath: '/sign-in',
+      query,
+    },
+    signIn: {
+      route: 'signIn',
+    },
+    signUp: {
+      route: 'signUp',
+      signInPath: '/sign-in',
+      query,
+    },
+  };
+
+  return (
+    <AuthModule
+      {...routeProps[route]}
+      {...{
+        ...moduleProps,
+        query:
+          props.moduleProps.overrideDefaults && props.moduleProps?.query
+            ? props.moduleProps?.query
+            : routeProps[route].query,
+      }}
+    />
+  );
+};
+
+export default AuthRoute;
diff --git a/packages/react-navigation/src/components/ForgotPasswordRoute.tsx b/packages/react-navigation/src/components/ForgotPasswordRoute.tsx
diff --git a/packages/react-navigation/src/components/LoginRoute.tsx b/packages/react-navigation/src/components/LoginRoute.tsx
diff --git a/packages/react-navigation/src/components/ResetPasswordRoute.tsx b/packages/react-navigation/src/components/ResetPasswordRoute.tsx
diff --git a/packages/react-navigation/src/components/Router.tsx b/packages/react-navigation/src/components/Router.tsx
@@ -12,11 +12,8 @@ import {
   NavbarProps,
 } from '@concepta/react-material-ui/';
 
-import LoginRoute from './LoginRoute';
 import DefaultRoute from './DefaultRoute';
-import SignUpRoute from './SignUpRoute';
-import ResetPasswordRoute from './ResetPasswordRoute';
-import ForgotPasswordRoute from './ForgotPasswordRoute';
+import AuthRoute from './AuthRoute';
 
 export type AuthModule = {
   signIn?: AuthModuleProps;
@@ -90,25 +87,34 @@ const Router = ({
       element: renderSignIn ? (
         renderSignIn(home)
       ) : (
-        <LoginRoute home={home} moduleProps={authModuleProps?.signIn} />
+        <AuthRoute
+          home={home}
+          moduleProps={authModuleProps?.signIn}
+          route="signIn"
+        />
       ),
     },
     {
       path: '/sign-up',
       element: renderSignUp ? (
         renderSignUp(home)
       ) : (
-        <SignUpRoute home={home} moduleProps={authModuleProps?.signUp} />
+        <AuthRoute
+          home={home}
+          moduleProps={authModuleProps?.signUp}
+          route="signUp"
+        />
       ),
     },
     {
       path: '/forgot-password',
       element: renderForgotPassword ? (
         renderForgotPassword(home)
       ) : (
-        <ForgotPasswordRoute
+        <AuthRoute
           home={home}
           moduleProps={authModuleProps?.forgotPassword}
+          route={'forgotPassword'}
         />
       ),
     },
@@ -117,9 +123,10 @@ const Router = ({
       element: renderResetPassword ? (
         renderResetPassword(home)
       ) : (
-        <ResetPasswordRoute
+        <AuthRoute
           home={home}
           moduleProps={authModuleProps?.resetPassword}
+          route="resetPassword"
         />
       ),
     },