fix(authenticator): force new password header and footer (#4235)

aws-amplify · Jul 18, 2023 · c3a418d · c3a418d
1 parent f2ff87f
commit c3a418d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/.changeset/quiet-vans-bow.md b/.changeset/quiet-vans-bow.md
@@ -0,0 +1,7 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(authenticator-react): force new password header and footer
+
+Adding Header and Footer components to ForceNewPassword screen
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -27,7 +27,11 @@ export const ForceNewPassword = ({
   const {
     components: {
       // @ts-ignore
-      ForceNewPassword: { FormFields = ForceNewPassword.FormFields },
+      ForceNewPassword: {
+        FormFields = ForceNewPassword.FormFields,
+        Header = ForceNewPassword.Header,
+        Footer = ForceNewPassword.Footer,
+      },
     },
   } = useCustomComponents();
 
@@ -42,7 +46,7 @@ export const ForceNewPassword = ({
         onBlur={handleBlur}
       >
         <Flex as="fieldset" direction="column" isDisabled={isPending}>
-          <Heading level={3}>{getChangePasswordText()}</Heading>
+          <Header />
 
           <FormFields />
 
@@ -66,12 +70,22 @@ export const ForceNewPassword = ({
           >
             {getBackToSignInText()}
           </Button>
+
+          <Footer />
         </Flex>
       </form>
     </RouteContainer>
   );
 };
 
-ForceNewPassword.FormFields = function FormFields() {
+ForceNewPassword.FormFields = function FormFields(): JSX.Element | null {
   return <DefaultFormFields />;
 };
+
+ForceNewPassword.Header = function Header(): JSX.Element | null {
+  return <Heading level={4}>{getChangePasswordText()}</Heading>;
+};
+
+ForceNewPassword.Footer = function Footer(): JSX.Element | null {
+  return null;
+};
diff --git a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
@@ -9,17 +9,17 @@ import { ConfirmResetPassword, ResetPassword } from '../../ResetPassword';
 
 // use the very generic name of Components as this is a temporary interface and is not exported
 interface Components {
-  Footer?: () => JSX.Element;
-  FormFields?: () => JSX.Element;
-  Header?: () => JSX.Element;
+  Footer?: () => JSX.Element | null;
+  FormFields?: () => JSX.Element | null;
+  Header?: () => JSX.Element | null;
 }
 
 export interface DefaultComponents extends Omit<Components, 'FormFields'> {
   ConfirmSignIn?: Omit<Components, 'FormFields'>;
   ConfirmSignUp?: Omit<Components, 'FormFields'>;
   ConfirmResetPassword?: Omit<Components, 'FormFields'>;
   ConfirmVerifyUser?: Omit<Components, 'FormFields'>;
-  ForceNewPassword?: Pick<Components, 'FormFields'>;
+  ForceNewPassword?: Components;
   ResetPassword?: Omit<Components, 'FormFields'>;
   SetupTOTP?: Omit<Components, 'FormFields'>;
   SignIn?: Omit<Components, 'FormFields'>;
@@ -65,6 +65,8 @@ export const defaultComponents: DefaultComponents = {
     Footer: ConfirmVerifyUser.Footer,
   },
   ForceNewPassword: {
+    Header: ForceNewPassword.Header,
+    Footer: ForceNewPassword.Footer,
     FormFields: ForceNewPassword.FormFields,
   },
   ResetPassword: {