fix(experience): add sso form mode context provider for identifier si…

…gn-in/register pages
logto-io · Aug 21, 2024 · 8720eb3 · 8720eb3
1 parent 2caeaca
commit 8720eb3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/experience/src/components/IdentifierRegisterForm/index.test.tsx b/packages/experience/src/components/IdentifierRegisterForm/index.test.tsx
@@ -368,14 +368,14 @@ describe('<IdentifierRegisterForm />', () => {
         fireEvent.click(termsButton);
       });
 
-      await waitFor(() => {
-        expect(getSingleSignOnConnectorsMock).toBeCalledWith(email);
-      });
-
       act(() => {
         fireEvent.submit(submitButton);
       });
 
+      await waitFor(() => {
+        expect(getSingleSignOnConnectorsMock).toBeCalledWith(email);
+      });
+
       // Should not switch to the single sign-on mode
       expect(queryByText('action.single_sign_on')).toBeNull();
 
@@ -394,11 +394,13 @@ describe('<IdentifierRegisterForm />', () => {
         mockSsoConnectors
       );
       const emailInput = container.querySelector('input[name="id"]');
+      const termsButton = getByText('description.agree_with_terms');
 
       assert(emailInput, new Error('username input not found'));
 
       act(() => {
         fireEvent.change(emailInput, { target: { value: email } });
+        fireEvent.click(termsButton);
       });
 
       await waitFor(() => {

diff --git a/packages/experience/src/components/IdentifierRegisterForm/index.tsx b/packages/experience/src/components/IdentifierRegisterForm/index.tsx
@@ -71,19 +71,24 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
 
         setIdentifierInputValue({ type, value });
 
-        if (showSingleSignOnForm) {
-          await navigateToSingleSignOn();
+        if (
+          agreeToTermsPolicy &&
+          agreeToTermsPolicy !== AgreeToTermsPolicy.Automatic &&
+          !(await termsValidation())
+        ) {
           return;
         }
 
-        if (!(await termsValidation())) {
+        if (showSingleSignOnForm) {
+          await navigateToSingleSignOn();
           return;
         }
 
         await onSubmit(type, value);
       })(event);
     },
     [
+      agreeToTermsPolicy,
       clearErrorMessage,
       handleSubmit,
       navigateToSingleSignOn,

diff --git a/packages/experience/src/pages/IdentifierRegister/index.tsx b/packages/experience/src/pages/IdentifierRegister/index.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
 import FocusedAuthPageLayout from '@/Layout/FocusedAuthPageLayout';
+import SingleSignOnFormModeContextProvider from '@/Providers/SingleSignOnFormModeContextProvider';
 import IdentifierRegisterForm from '@/components/IdentifierRegisterForm';
 import { useSieMethods } from '@/hooks/use-sie';
 import { identifierInputDescriptionMap } from '@/utils/form';
@@ -36,7 +37,9 @@ const IdentifierRegister = () => {
         text: 'description.all_account_creation_options',
       }}
     >
-      <IdentifierRegisterForm signUpMethods={signUpMethods} />
+      <SingleSignOnFormModeContextProvider>
+        <IdentifierRegisterForm signUpMethods={signUpMethods} />
+      </SingleSignOnFormModeContextProvider>
     </FocusedAuthPageLayout>
   );
 };

diff --git a/packages/experience/src/pages/IdentifierSignIn/index.tsx b/packages/experience/src/pages/IdentifierSignIn/index.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
 import FocusedAuthPageLayout from '@/Layout/FocusedAuthPageLayout';
+import SingleSignOnFormModeContextProvider from '@/Providers/SingleSignOnFormModeContextProvider';
 import IdentifierSignInForm from '@/components/IdentifierSignInForm';
 import PasswordSignInForm from '@/components/PasswordSignInForm';
 import { identifierInputDescriptionMap } from '@/utils/form';
@@ -43,11 +44,13 @@ const IdentifierSignIn = () => {
         text: 'description.all_sign_in_options',
       }}
     >
-      {isPasswordOnly ? (
-        <PasswordSignInForm signInMethods={signInMethods.map(({ identifier }) => identifier)} />
-      ) : (
-        <IdentifierSignInForm signInMethods={signInMethods} />
-      )}
+      <SingleSignOnFormModeContextProvider>
+        {isPasswordOnly ? (
+          <PasswordSignInForm signInMethods={signInMethods.map(({ identifier }) => identifier)} />
+        ) : (
+          <IdentifierSignInForm signInMethods={signInMethods} />
+        )}
+      </SingleSignOnFormModeContextProvider>
     </FocusedAuthPageLayout>
   );
 };