Merge pull request #170 from brunomous/feature/custom-auth-form-header

Change structure of auth form header and title
conceptadev · Aug 12, 2024 · 685435c · 685435c
2 parents 3c19caa + 4690eb3
commit 685435c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/packages/react-material-ui/src/components/submodules/AuthForm/index.tsx b/packages/react-material-ui/src/components/submodules/AuthForm/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import type { RJSFSchema, UiSchema } from '@rjsf/utils';
 import type { IChangeEvent } from '@rjsf/core';
@@ -38,7 +38,8 @@ interface AuthFormSubmoduleProps {
   route: string;
   queryUri?: string;
   queryMethod?: string;
-  title?: string;
+  title?: string | ReactNode;
+  hideTitle?: boolean;
   formSchema?: RJSFSchema;
   formUiSchema?: UiSchema;
   advancedProperties?: Record<string, AdvancedProperty>;
@@ -50,11 +51,32 @@ interface AuthFormSubmoduleProps {
   customValidation?: ValidationRule<Record<string, string>>[];
   submitButtonTitle?: string;
   logoSrc?: string;
+  hideLogo?: boolean;
+  headerComponent?: ReactNode;
   onSuccess?: (data: unknown) => void;
   onError?: (error: unknown) => void;
   overrideDefaults?: boolean;
 }
 
+const renderTitle = (title: string | ReactNode) => {
+  if (typeof title === 'string') {
+    return (
+      <Text
+        variant="h4"
+        fontFamily="Inter"
+        fontSize={30}
+        fontWeight={800}
+        mt={1}
+        gutterBottom
+      >
+        {title}
+      </Text>
+    );
+  }
+
+  return title;
+};
+
 const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
   const [formData, setFormData] = useState<Record<string, unknown>>({});
 
@@ -122,19 +144,14 @@ const AuthFormSubmodule = (props: AuthFormSubmoduleProps) => {
 
   return (
     <Container maxWidth="xs" sx={{ textAlign: 'center', padding: '48px 0' }}>
-      <Image src={props.logoSrc || '/logo.svg'} alt="logo" />
+      {!props.hideLogo && (
+        <Image src={props.logoSrc || '/logo.svg'} alt="logo" />
+      )}
+
+      {props.headerComponent || null}
 
       <Card sx={{ padding: '24px', marginTop: '32px' }}>
-        <Text
-          variant="h4"
-          fontFamily="Inter"
-          fontSize={30}
-          fontWeight={800}
-          mt={1}
-          gutterBottom
-        >
-          {props.title || defaultRouteTitle}
-        </Text>
+        {!props.hideTitle && renderTitle(props.title ?? defaultRouteTitle)}
 
         <SchemaForm.Form
           schema={{

diff --git a/packages/react-material-ui/src/modules/auth/index.tsx b/packages/react-material-ui/src/modules/auth/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import type { RJSFSchema, UiSchema } from '@rjsf/utils';
 
@@ -16,22 +16,25 @@ import {
 type Route = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword';
 
 interface FormProps {
+  title?: string | ReactNode;
+  hideTitle?: boolean;
   formSchema?: RJSFSchema;
   formUiSchema?: UiSchema;
   customValidation?: ValidationRule<Record<string, string>>[];
   overrideDefaults?: boolean;
+  submitButtonTitle?: string;
 }
 
 interface ModuleProps {
-  title?: string;
+  headerComponent?: ReactNode;
   signInRequestPath?: string;
   forgotPasswordPath?: string;
   signUpPath?: string;
   signInPath?: string;
   queryUri?: string;
   queryMethod?: string;
-  submitButtonTitle?: string;
   logoSrc?: string;
+  hideLogo?: boolean;
   onSuccess?: (data: unknown) => void;
   onError?: (error: unknown) => void;
 }