Merge pull request #550 from etn-ccis/bug/546-registration-not-working

fixed the content collapsing in registration workflow

login-workflow/example/App.tsx

@@ -54,14 +54,13 @@ export const App = (): JSX.Element => {
             getAccessToken() // eslint-disable-next-line
                 .then((res) => console.log(res.access_token)) // eslint-disable-next-line
                 .catch((err) => console.log(err));
-        } catch (error) { // eslint-disable-next-line
+        } catch (error) {
+            // eslint-disable-next-line
             console.error('Okta error for access token', error);
         }
     };
 
     useEffect(() => {
-
-
         EventEmitter.addListener('signInSuccess', handleSignInSuccess);
 
         return () => {

login-workflow/example/okta.config.js

@@ -1,10 +1,10 @@
 export default {
-        oidc: {
+    oidc: {
         clientId: process.env.OKTA_CLIENT_ID,
         redirectUri: process.env.OKTA_REDIRECT_URI,
         endSessionRedirectUri: process.env.OKTA_LOGOUT_REDIRECT_URI,
         discoveryUri: process.env.OKTA_ISSUER,
         scopes: ['openid', 'profile', 'offline_access', 'groups'],
         requireHardwareBackedKeyStore: false,
-}
-};
+    },
+};

login-workflow/example/src/components/UserMenuComponent.tsx

@@ -58,13 +58,13 @@ export const UserMenuComponent: React.FC<UserMenuExampleProps> = (props) => {
     const logout = async (): Promise<void> => {
         LocalStorage.clearAuthCredentials();
         try {
-        await signOut();
-        await revokeAccessToken();
-        await clearTokens();
+            await signOut();
+            await revokeAccessToken();
+            await clearTokens();
         } catch (_error) {
             // eslint-disable-next-line no-console
             console.log(_error as Error);
-        } 
+        }
         app.onUserNotAuthenticated();
     };
     const handleLogout = (): void => {

login-workflow/example/src/screens/ChangePassword.tsx

@@ -11,10 +11,10 @@ export const ChangePassword = (): JSX.Element => {
         try {
             await revokeAccessToken();
             await clearTokens();
-            } catch (_error) {
-                // eslint-disable-next-line no-console
-                console.log(_error as Error);
-            } 
+        } catch (_error) {
+            // eslint-disable-next-line no-console
+            console.log(_error as Error);
+        }
         app.onUserNotAuthenticated();
         // below line is not need for okta workflow
         // app.setLoginData({ email: '', rememberMe: false });

login-workflow/example/src/screens/OktaLogin.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Image } from 'react-native';
-import { OktaAuthContextProvider, OktaLoginScreenProps, OktaRedirectLoginScreen } from '@brightlayer-ui/react-native-auth-workflow';
+import {
+    OktaAuthContextProvider,
+    OktaLoginScreenProps,
+    OktaRedirectLoginScreen,
+} from '@brightlayer-ui/react-native-auth-workflow';
 import { useApp } from '../contexts/AppContextProvider';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -13,43 +17,43 @@ export const OktaLogin: React.FC<React.PropsWithChildren<OktaLoginScreenProps>>
 
     return (
         <OktaAuthContextProvider
-                language={app.language}
-                i18n={i18nAppInstance}
-                navigate={(destination: -1 | string) => {
-                    if (typeof destination === 'string') {
-                        switch (destination) {
-                            case 'SelfRegister':
-                            case 'RegisterInvite':
-                                navigation.navigate('RegistrationProviderExample', { screen: destination });
-                                break;
-                            default:
-                                navigation.navigate(destination);
-                                break;
-                        }
-                    } else if (destination === -1) {
-                        navigation.goBack();
+            language={app.language}
+            i18n={i18nAppInstance}
+            navigate={(destination: -1 | string) => {
+                if (typeof destination === 'string') {
+                    switch (destination) {
+                        case 'SelfRegister':
+                        case 'RegisterInvite':
+                            navigation.navigate('RegistrationProviderExample', { screen: destination });
+                            break;
+                        default:
+                            navigation.navigate(destination);
+                            break;
                     }
-                }}
-                routeConfig={{
-                    LOGIN: 'Login',
-                    FORGOT_PASSWORD: 'ForgotPassword',
-                    RESET_PASSWORD: 'ResetPassword',
-                    REGISTER_INVITE: 'RegisterInvite',
-                    REGISTER_SELF: 'SelfRegister',
-                    SUPPORT: 'ContactSupport',
-                }}
-                >
-        <OktaRedirectLoginScreen
-            projectImage={
-                <Image
-                style={{ width: '100%' }}
-                resizeMode="contain"
-                source={require('../assets/images/eaton_stacked_logo.png')}
-                />
-            }
-            // eslint-disable-next-line
-            oktaConfigObject={oktaConfig.oidc}
+                } else if (destination === -1) {
+                    navigation.goBack();
+                }
+            }}
+            routeConfig={{
+                LOGIN: 'Login',
+                FORGOT_PASSWORD: 'ForgotPassword',
+                RESET_PASSWORD: 'ResetPassword',
+                REGISTER_INVITE: 'RegisterInvite',
+                REGISTER_SELF: 'SelfRegister',
+                SUPPORT: 'ContactSupport',
+            }}
+        >
+            <OktaRedirectLoginScreen
+                projectImage={
+                    <Image
+                        style={{ width: '100%' }}
+                        resizeMode="contain"
+                        source={require('../assets/images/eaton_stacked_logo.png')}
+                    />
+                }
+                // eslint-disable-next-line
+                oktaConfigObject={oktaConfig.oidc}
             />
-            </OktaAuthContextProvider>
+        </OktaAuthContextProvider>
     );
 };

login-workflow/jestSetupFile.js

@@ -5,9 +5,7 @@ jest.mock('react-i18next', () => ({
     ...jest.requireActual('react-i18next'),
 }));
 jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
-jest.mock('@brightlayer-ui/react-native-components/node_modules/react-native-reanimated', () =>
-    require('react-native-reanimated/mock')
-);
+
 jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
 jest.mock('react-native-webview', () => {
     const { View } = require('react-native');

login-workflow/src/__tests__/screens/OktaLoginScreen.test.tsx

@@ -34,7 +34,6 @@ describe('OktaRedirectLoginScreen', () => {
         jest.clearAllMocks();
     });
 
-
     it('should call navigate with FORGOT_PASSWORD route when forgot password is clicked', () => {
         render(<OktaRedirectLoginScreen />);
         fireEvent.press(screen.getByText('bluiCommon:LABELS.FORGOT_PASSWORD'));

login-workflow/src/__tests__/screens/OktaRedirectLoginScreenBase.test.tsx

@@ -73,7 +73,9 @@ describe('OktaRedirectLoginScreenBase', () => {
 
     test('calls handleContactSupport when contact support label is pressed', () => {
         const handleContactSupport = jest.fn();
-        const { getByTestId } = render(<OktaRedirectLoginScreenBase showContactSupport={true} onContactSupport={handleContactSupport} />);
+        const { getByTestId } = render(
+            <OktaRedirectLoginScreenBase showContactSupport={true} onContactSupport={handleContactSupport} />
+        );
         const contactSupportLabel = getByTestId('blui-okta-login-contact-support-label');
         fireEvent.press(contactSupportLabel);
         expect(handleContactSupport).toHaveBeenCalled();
@@ -108,4 +110,4 @@ describe('OktaRedirectLoginScreenBase', () => {
         fireEvent.press(getByTestId('blui-okta-login-contact-support-label'));
         expect(defaultProps.onContactSupport).toHaveBeenCalled();
     });
-});
+});

login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx

@@ -251,6 +251,7 @@ export const RegistrationWorkflow: React.FC<React.PropsWithChildren<Registration
                         initialPage={currentScreen ?? initialScreenIndex}
                         ref={viewPagerRef}
                         scrollEnabled={false}
+                        collapsable={false}
                         key={viewPagerIndex}
                         onPageSelected={(e) => {
                             selectedPage.current = e.nativeEvent.position;
@@ -263,7 +264,9 @@ export const RegistrationWorkflow: React.FC<React.PropsWithChildren<Registration
                         }}
                     >
                         {screens.map((screen, index) => (
-                            <View key={index + 1}>{screen}</View>
+                            <View style={{ flex: 1 }} key={index + 1}>
+                                {screen}
+                            </View>
                         ))}
                     </PagerView>
                 )}

login-workflow/src/contexts/OktaAuthContext/context.ts

@@ -8,4 +8,4 @@ import { OktaAuthContextProviderProps } from './types';
 /**
  * Okta Auth Context is used to access context in the okta authentication workflow
  */
-export const OktaAuthContext = createContext<OktaAuthContextProviderProps | null>(null);
+export const OktaAuthContext = createContext<OktaAuthContextProviderProps | null>(null);

login-workflow/src/contexts/OktaAuthContext/index.ts

@@ -20,4 +20,4 @@ export const useOktaAuthContext = (): OktaAuthContextProviderProps => {
 
 export type { OktaAuthContextProviderProps };
 
-export { OktaAuthContext, OktaAuthContextProvider };
+export { OktaAuthContext, OktaAuthContextProvider };

login-workflow/src/contexts/OktaAuthContext/provider.tsx

@@ -1,4 +1,3 @@
-
 import React, { useEffect } from 'react';
 import { OktaAuthContextProviderProps } from './types';
 import { OktaAuthContext } from './context';
@@ -9,9 +8,9 @@ import { SharedDictionaries } from '../SharedDictionaries';
 import { ErrorManagerProps } from '../../components/Error/types';
 import { i18nAuthInstance } from '../AuthContext/i18nAuthInstance';
 
-const OktaAuthContextProviderContent: React.FC<
-    React.PropsWithChildren<Omit<OktaAuthContextProviderProps, 'i18n'>>
-> = (props) => {
+const OktaAuthContextProviderContent: React.FC<React.PropsWithChildren<Omit<OktaAuthContextProviderProps, 'i18n'>>> = (
+    props
+) => {
     const { children, errorConfig, ...oktaAuthContextProps } = props;
     const { t } = useTranslation();
     const mergedErrorConfig: ErrorManagerProps = {
@@ -32,9 +31,7 @@ const OktaAuthContextProviderContent: React.FC<
     );
 };
 
-export const OktaAuthContextProvider: React.FC<
-    React.PropsWithChildren<OktaAuthContextProviderProps>
-> = (props) => {
+export const OktaAuthContextProvider: React.FC<React.PropsWithChildren<OktaAuthContextProviderProps>> = (props) => {
     const i18nInstance = props.i18n ?? i18nAuthInstance;
     const { language, i18n = i18nInstance, children, ...other } = props;
 
@@ -62,4 +59,4 @@ export const OktaAuthContextProvider: React.FC<
             </OktaAuthContextProviderContent>
         </I18nextProvider>
     );
-};
+};

login-workflow/src/contexts/OktaAuthContext/types.ts

@@ -32,4 +32,4 @@ export type OktaAuthContextProviderProps = {
      *  An error config for error context provider
      */
     errorConfig?: ErrorContextProviderProps;
-};
+};

login-workflow/src/contexts/index.tsx

@@ -3,4 +3,4 @@ export * from './RegistrationContext';
 export * from './SharedDictionaries';
 export * from './ErrorContext';
 export * from './AuthContext';
-export * from './OktaAuthContext';
+export * from './OktaAuthContext';

login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx

@@ -383,7 +383,7 @@ export const LoginScreenBase: React.FC<React.PropsWithChildren<LoginScreenProps>
                         testID={'blui-login-cyber-security-badge-wrapper'}
                     >
                         <Image
-                            style={{...cyberSecurityBadgeSize}}
+                            style={{ ...cyberSecurityBadgeSize }}
                             resizeMode="contain"
                             source={require('../../assets/images/cybersecurity_certified.png')}
                         />

login-workflow/src/screens/LoginScreen/types.ts

@@ -170,5 +170,5 @@ export type LoginScreenProps = WorkflowCardBaseProps & {
     /**
      * The size of the cyber security image
      */
-    cyberSecurityBadgeSize?: {height?: number | string, width?: number | string};
+    cyberSecurityBadgeSize?: { height?: number | string; width?: number | string };
 };

login-workflow/src/screens/OktaRedirectLoginScreen/OktaRedirectLoginScreen.tsx

@@ -55,7 +55,7 @@ export const OktaRedirectLoginScreen: React.FC<React.PropsWithChildren<OktaLogin
         void createOktaConfig();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    
+
     return (
         <OktaRedirectLoginScreenBase
             loginButtonLabel={loginButtonLabel}

login-workflow/src/screens/OktaRedirectLoginScreen/OktaRedirectLoginScreenBase.tsx

@@ -147,20 +147,20 @@ export const OktaRedirectLoginScreenBase: React.FC<React.PropsWithChildren<OktaL
                     {projectImage}
                 </View>
 
-                    <View
-                        style={[defaultStyles.loginButtonWrapper, { width: '100%' }]}
-                        testID={'blui-okta-login-login-button-wrapper'}
+                <View
+                    style={[defaultStyles.loginButtonWrapper, { width: '100%' }]}
+                    testID={'blui-okta-login-login-button-wrapper'}
+                >
+                    <Button
+                        testID={'blui-okta-login-login-button'}
+                        onPress={handleLogin}
+                        disabled={!onLogin}
+                        mode="contained"
+                        style={defaultStyles.loginButton}
                     >
-                        <Button
-                            testID={'blui-okta-login-login-button'}
-                            onPress={handleLogin}
-                            disabled={!onLogin}
-                            mode="contained"
-                            style={defaultStyles.loginButton}
-                        >
-                            {loginButtonLabel || 'Sign In with Okta'}
-                        </Button>
-                    </View>
+                        {loginButtonLabel || 'Sign In with Okta'}
+                    </Button>
+                </View>
 
                 <View style={defaultStyles.bottomBodyWrapper} testID={'blui-okta-login-bottom-body-wrapper'}>
                     {showForgotPassword && (
@@ -214,7 +214,9 @@ export const OktaRedirectLoginScreenBase: React.FC<React.PropsWithChildren<OktaL
                         </View>
                     )}
 
-                    <View testID={'blui-okta-login-footer'} style={defaultStyles.footerWrapper}>{footer}</View>
+                    <View testID={'blui-okta-login-footer'} style={defaultStyles.footerWrapper}>
+                        {footer}
+                    </View>
 
                     {showCyberSecurityBadge && (
                         <View

login-workflow/src/screens/OktaRedirectLoginScreen/types.ts

@@ -97,5 +97,12 @@ export type OktaLoginScreenProps = WorkflowCardBaseProps & {
     /**
      * oktaConfigObject is an object containing configuration settings required for integrating with Okta.
      */
-    oktaConfigObject?: {clientId: string; redirectUri: string; endSessionRedirectUri: string; discoveryUri: string; scopes: string[]; requireHardwareBackedKeyStore: boolean}
+    oktaConfigObject?: {
+        clientId: string;
+        redirectUri: string;
+        endSessionRedirectUri: string;
+        discoveryUri: string;
+        scopes: string[];
+        requireHardwareBackedKeyStore: boolean;
+    };
 };