Merge pull request #178 from brunomous/feature/auth-module-props

Restructure Auth Module props

packages/react-material-ui/src/components/submodules/AuthForm/index.tsx

@@ -33,10 +33,16 @@ const widgets = {
   TextWidget: CustomTextFieldWidget,
 };
 
+type Query = {
+  uri?: string;
+  method?: string;
+  onSuccess?: (data: unknown) => void;
+  onError?: (error: unknown) => void;
+};
+
 interface AuthFormSubmoduleProps {
   route: string;
-  queryUri?: string;
-  queryMethod?: string;
+  query?: Query;
   title?: string | ReactNode;
   hideTitle?: boolean;
   formSchema?: RJSFSchema;
@@ -52,8 +58,6 @@ interface AuthFormSubmoduleProps {
   logoSrc?: string;
   hideLogo?: boolean;
   headerComponent?: ReactNode;
-  onSuccess?: (data: unknown) => void;
-  onError?: (error: unknown) => void;
   overrideDefaults?: boolean;
 }
 
@@ -90,18 +94,18 @@ const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
       post: post,
       patch: patch,
       put: put,
-    }[props.queryMethod || 'post'] || post;
+    }[props.query?.method || 'post'] || post;
 
   const { execute: performRequest, isPending: isLoadingRequest } = useQuery(
     (body: Record<string, unknown>) =>
       query({
-        uri: props.queryUri || '',
+        uri: props.query?.uri || '',
         body,
       }),
     false,
     {
-      onSuccess: props.onSuccess,
-      onError: props.onError,
+      onSuccess: props.query?.onSuccess,
+      onError: props.query?.onError,
     },
   );
 
@@ -111,13 +115,11 @@ const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
     if (props.route === 'signIn') {
       const { username, password } = fields;
       doLogin({ username, password, loginPath: props.signInRequestPath });
-
       return;
     }
 
     if (props.route === 'resetPassword') {
       await performRequest({ ...fields, passcode });
-
       return;
     }
 

packages/react-material-ui/src/modules/auth/README.md

@@ -16,14 +16,14 @@ For the module to work out of the box, a minimal configuration is required, layi
 
 With this implementation, a form with `username` and `password` fields should appear in the screen, performing a request for `API_URL/auth/login`, which can be modified by passing a value to the `signInRequestPath` prop. This is available only for the `signIn` route, as the request performed in this flow is made by a custom `doLogin` method, present in the `useAuth` hook imported from the `@concepta/react-auth-provider` package.
 
-The request url and method can be modified passing both the `queryUri` and `queryMethod` props inside a `moduleProps` object, as follows:
+The request url and method can be modified passing a `query` object as props, as follows:
 
 ```jsx
 <AuthModule
   route="signIn"
-  moduleProps={{
-    queryUri: '/auth/sign-in',
-    queryMethod: 'post',
+  query={{
+    uri: '/auth/sign-in',
+    method: 'post',
   }}
 />
 ```
@@ -112,12 +112,12 @@ Each field of an auth form can be validated in a custom way by passing an array
 
 ## Action feedback
 
-To use custom handlers for success/error on any auth form, the `onSuccess` and `onError` props can be passed to the `moduleProps` object, as follows:
+To use custom handlers for success/error on any auth form, the `onSuccess` and `onError` props can be passed to the `query` object, as follows:
 
 ```jsx
 <AuthModule
   route="signIn"
-  moduleProps={{
+  query={{
     onSuccess: () => window.alert('Success!'),
     onError: (error) => window.alert(error?.response?.data?.message),
   }}
@@ -138,7 +138,7 @@ No link prop is avalable for the Reset Password page, as this flow is made by a
 
 ## Other modifications
 
-Some parts of the page like logo and title can be modified by passing custom props to the `moduleProps` object, as follows:
+Some parts of the page like logo and title can be modified by passing custom props to the component, as follows:
 
 - `title`: modifies the title displayed in each page, overriding the default title that corresponds to the page;
 - `submitButtonTitle`: changes the text displayed in the form's submit button;

packages/react-material-ui/src/modules/auth/constants.ts

@@ -2,24 +2,32 @@ export const signInModuleProps = {
   signInRequestPath: '/auth/login',
   forgotPasswordPath: '/forgot-password',
   signUpPath: '/sign-up',
-  queryMethod: '',
-  queryUri: '',
+  query: {
+    uri: '',
+    method: '',
+  },
 };
 
 export const signUpModuleProps = {
   signInPath: '/sign-in',
-  queryMethod: 'post',
-  queryUri: '/user',
+  query: {
+    uri: '/user',
+    method: 'post',
+  },
 };
 
 export const forgotPasswordModuleProps = {
   signInPath: '/sign-in',
-  queryMethod: 'post',
-  queryUri: '/auth/recovery/password',
+  query: {
+    uri: '/auth/recovery/password',
+    method: 'post',
+  },
 };
 
 export const resetPasswordModuleProps = {
   signInPath: '/sign-in',
-  queryMethod: 'patch',
-  queryUri: '/auth/recovery/password',
+  query: {
+    uri: '/auth/recovery/password',
+    method: 'patch',
+  },
 };

packages/react-material-ui/src/modules/auth/index.tsx

@@ -15,6 +15,13 @@ import {
 
 type Route = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword';
 
+type Query = {
+  uri?: string;
+  method?: string;
+  onSuccess?: (data: unknown) => void;
+  onError?: (error: unknown) => void;
+};
+
 interface FormProps {
   title?: string | ReactNode;
   hideTitle?: boolean;
@@ -25,24 +32,17 @@ interface FormProps {
   submitButtonTitle?: string;
 }
 
-interface ModuleProps {
+interface AuthModuleProps {
+  route: Route;
+  query?: Query;
   headerComponent?: ReactNode;
   signInRequestPath?: string;
   forgotPasswordPath?: string;
   signUpPath?: string;
   signInPath?: string;
-  queryUri?: string;
-  queryMethod?: string;
   logoSrc?: string;
   hideLogo?: boolean;
-  onSuccess?: (data: unknown) => void;
-  onError?: (error: unknown) => void;
-}
-
-interface AuthModuleProps {
-  route: Route;
   formProps?: FormProps;
-  moduleProps?: ModuleProps;
 }
 
 const AuthModule = (props: AuthModuleProps) => {
@@ -53,12 +53,17 @@ const AuthModule = (props: AuthModuleProps) => {
     resetPassword: resetPasswordModuleProps,
   }[props.route];
 
+  const authQuery = {
+    ...defaultModuleProps.query,
+    ...props.query,
+  };
+
   return (
     <AuthFormSubmodule
-      route={props.route}
       {...props.formProps}
       {...defaultModuleProps}
-      {...props.moduleProps}
+      {...props}
+      query={authQuery}
     />
   );
 };