From 587029231b2459fdd38307e0f6f384c6b6d3b9c4 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Thu, 25 Apr 2024 14:26:41 +0530 Subject: [PATCH 1/4] use latest r31 branch --- login-workflow/example/App.tsx | 9 +- login-workflow/example/ios/Podfile.lock | 12 +- .../ios/example.xcodeproj/project.pbxproj | 12 +- .../example/src/components/DebugComponent.tsx | 49 +++ .../src/components/UserMenuExample.tsx | 25 +- .../src/contexts/AppContextProvider.tsx | 1 + .../example/src/navigation/index.tsx | 278 ++++++++++++------ .../src/navigation/navigation-drawer.tsx | 70 ++--- .../example/src/screens/AccountDetails.tsx | 125 -------- .../src/screens/AuthProviderExample.tsx | 46 --- .../example/src/screens/ChangePassword.tsx | 22 +- .../src/screens/ContactBaseExample.tsx | 69 ----- .../src/screens/ContactFullScreenExample.tsx | 43 --- .../example/src/screens/Dashboard.tsx | 136 +++++++++ .../src/screens/{home.tsx => Homepage.tsx} | 27 +- .../example/src/screens/Locations.tsx | 136 +++++++++ login-workflow/example/src/screens/Login.tsx | 27 +- .../example/src/screens/LoginBaseExample.tsx | 52 ---- .../example/src/screens/Registration.tsx | 4 + .../src/screens/RegistrationInvite.tsx | 5 + .../screens/RegistrationProviderExample.tsx | 99 ------- login-workflow/example/src/screens/index.ts | 12 + login-workflow/example/src/screens/index.tsx | 3 - .../src/screens/LoginScreen/LoginScreen.tsx | 3 + login-workflow/src/types/index.ts | 1 + 25 files changed, 648 insertions(+), 618 deletions(-) create mode 100644 login-workflow/example/src/components/DebugComponent.tsx delete mode 100644 login-workflow/example/src/screens/AccountDetails.tsx delete mode 100644 login-workflow/example/src/screens/AuthProviderExample.tsx delete mode 100644 login-workflow/example/src/screens/ContactBaseExample.tsx delete mode 100644 login-workflow/example/src/screens/ContactFullScreenExample.tsx create mode 100644 login-workflow/example/src/screens/Dashboard.tsx rename login-workflow/example/src/screens/{home.tsx => Homepage.tsx} (79%) create mode 100644 login-workflow/example/src/screens/Locations.tsx delete mode 100644 login-workflow/example/src/screens/LoginBaseExample.tsx create mode 100644 login-workflow/example/src/screens/Registration.tsx create mode 100644 login-workflow/example/src/screens/RegistrationInvite.tsx delete mode 100644 login-workflow/example/src/screens/RegistrationProviderExample.tsx create mode 100644 login-workflow/example/src/screens/index.ts delete mode 100644 login-workflow/example/src/screens/index.tsx diff --git a/login-workflow/example/App.tsx b/login-workflow/example/App.tsx index de04d0349..d86bbb4da 100644 --- a/login-workflow/example/App.tsx +++ b/login-workflow/example/App.tsx @@ -21,8 +21,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; export const App = (): JSX.Element => { const [theme, setTheme] = useState('light'); - const [isAuthenticated, setIsAuthenticated] = useState(false); const [language, setLanguage] = useState('en'); + const [isAuthenticated, setAuthenticated] = useState(false); const [loginData, setLoginData] = useState({ email: '', rememberMe: false, @@ -46,7 +46,7 @@ export const App = (): JSX.Element => { try { const userData = await LocalStorage.readAuthData(); setLoginData({ email: userData.rememberMeData.user, rememberMe: userData.rememberMeData.rememberMe }); - setIsAuthenticated(Boolean(userData.userId)); + setAuthenticated(Boolean(userData.userId)); await getLanguage(); } catch (e) { // handle any error state, rejected promises, etc.. @@ -68,17 +68,18 @@ export const App = (): JSX.Element => { value={{ isAuthenticated, onUserAuthenticated: (userData): void => { - setIsAuthenticated(true); + setAuthenticated(true); setLoginData(userData); }, // eslint-disable-next-line onUserNotAuthenticated: (userData): void => { - setIsAuthenticated(false); + setAuthenticated(false); }, loginData, setLoginData, language, setLanguage, + setAuthenticated, }} > diff --git a/login-workflow/example/ios/Podfile.lock b/login-workflow/example/ios/Podfile.lock index a05e2dc3d..7a989ea9b 100644 --- a/login-workflow/example/ios/Podfile.lock +++ b/login-workflow/example/ios/Podfile.lock @@ -1376,9 +1376,9 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/yoga" SPEC CHECKSUMS: - boost: d211fef46701a9df276bef51f7e86992e22929eb + boost: d3f49c53809116a5d38da093a8aa78bf551aed09 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 - DoubleConversion: b50f832cfe4030d3500ef82f095f609c8c0668f3 + DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953 FBLazyVector: fbc4957d9aa695250b55d879c1d86f79d7e69ab4 FBReactNativeSpec: 86de768f89901ef6ed3207cd686362189d64ac88 Flipper: c7a0093234c4bdd456e363f2f19b2e4b27652d44 @@ -1390,11 +1390,11 @@ SPEC CHECKSUMS: Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 FlipperKit: 37525a5d056ef9b93d1578e04bc3ea1de940094f fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: e519f94633ae20b610529d26c963d713c678b0b6 - hermes-engine: ef490160118aea4fd2ee0a625a388642c204d901 + glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 + hermes-engine: b361c9ef5ef3cda53f66e195599b47e1f84ffa35 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c - RCT-Folly: e6540a6bc74fdcd89a210fcb7775d50ef41b301b + RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0 RCTRequired: 9b1e7e262745fb671e33c51c1078d093bd30e322 RCTTypeSafety: a759e3b086eccf3e2cbf2493d22f28e082f958e6 React: 805f5dd55bbdb92c36b4914c64aaae4c97d358dc @@ -1452,4 +1452,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 0102c6fabdf4b18c8262ef30a5501363fc491918 -COCOAPODS: 1.15.2 +COCOAPODS: 1.14.3 diff --git a/login-workflow/example/ios/example.xcodeproj/project.pbxproj b/login-workflow/example/ios/example.xcodeproj/project.pbxproj index 19c01ac64..9816aedcc 100644 --- a/login-workflow/example/ios/example.xcodeproj/project.pbxproj +++ b/login-workflow/example/ios/example.xcodeproj/project.pbxproj @@ -616,11 +616,7 @@ "-DFOLLY_USE_LIBCPP=1", "-DFOLLY_CFG_NO_COROUTINES=1", ); - OTHER_LDFLAGS = ( - "$(inherited)", - "-Wl", - "-ld_classic", - ); + OTHER_LDFLAGS = "$(inherited)"; REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; USE_HERMES = true; @@ -688,11 +684,7 @@ "-DFOLLY_USE_LIBCPP=1", "-DFOLLY_CFG_NO_COROUTINES=1", ); - OTHER_LDFLAGS = ( - "$(inherited)", - "-Wl", - "-ld_classic", - ); + OTHER_LDFLAGS = "$(inherited)"; REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; USE_HERMES = true; diff --git a/login-workflow/example/src/components/DebugComponent.tsx b/login-workflow/example/src/components/DebugComponent.tsx new file mode 100644 index 000000000..b7e43ea22 --- /dev/null +++ b/login-workflow/example/src/components/DebugComponent.tsx @@ -0,0 +1,49 @@ +import { Spacer } from '@brightlayer-ui/react-native-components'; +import { useNavigation } from '@react-navigation/native'; +import React, { useState } from 'react'; +import { View } from 'react-native'; +import { Button, Text } from 'react-native-paper'; + +export const DebugComponent = (): JSX.Element => { + const [debugMode, setDebugMode] = useState(false); + const navigation = useNavigation(); + return ( + <> + + {debugMode && DEBUG MODE} + + + + {debugMode && ( + + + + + + )} + + ); +}; diff --git a/login-workflow/example/src/components/UserMenuExample.tsx b/login-workflow/example/src/components/UserMenuExample.tsx index 5fc37dcca..e6d70eeb5 100644 --- a/login-workflow/example/src/components/UserMenuExample.tsx +++ b/login-workflow/example/src/components/UserMenuExample.tsx @@ -8,6 +8,9 @@ import { useTranslation } from 'react-i18next'; import { useExtendedTheme } from '@brightlayer-ui/react-native-themes'; import { useApp } from '../contexts/AppContextProvider'; import AsyncStorage from '@react-native-async-storage/async-storage'; +import { LocalStorage } from '../store/local-storage'; +import { useNavigation, useRoute } from '@react-navigation/native'; +import { NativeStackNavigationProp } from '@react-navigation/native-stack'; const SwapIcon: IconFamily = { family: 'material', @@ -19,9 +22,14 @@ const InvertColorsIcon: IconFamily = { name: 'invert-colors', direction: 'ltr', }; -const CancelIcon: IconFamily = { +const ExitToAppIcon: IconFamily = { family: 'material', - name: 'cancel', + name: 'exit-to-app', + direction: 'ltr', +}; +const LockIcon: IconFamily = { + family: 'material', + name: 'lock', direction: 'ltr', }; @@ -34,7 +42,9 @@ export const UserMenuExample: React.FC = (props) => { const { onToggleRTL, onToggleTheme } = props; const theme = useExtendedTheme(); const { i18n } = useTranslation(); + const navigation = useNavigation>(); const app = useApp(); + const route = useRoute().name; const handleLanguageChange = async (newLanguage: string): Promise => { app.setLanguage(newLanguage); void i18n.changeLanguage(newLanguage); @@ -45,6 +55,14 @@ export const UserMenuExample: React.FC = (props) => { console.error('Error setting new language:', error); } }; + const logout = (): void => { + LocalStorage.clearAuthCredentials(); + app.onUserNotAuthenticated(); + navigation.navigate('AuthProviderExample', { screen: 'Login' }); + }; + const changePassword = (): void => { + navigation.navigate('ChangePassword', { previousScreen: route }); + }; const languageOptions = [ { label: 'English', value: 'en' }, { label: 'Spanish', value: 'es' }, @@ -79,7 +97,8 @@ export const UserMenuExample: React.FC = (props) => { /> ), }, - { title: 'Cancel', icon: CancelIcon }, + { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() }, + { title: 'Logout', icon: ExitToAppIcon, onPress: (): void => logout() }, ]; return ( diff --git a/login-workflow/example/src/contexts/AppContextProvider.tsx b/login-workflow/example/src/contexts/AppContextProvider.tsx index ebeb8d6a2..b0868d242 100644 --- a/login-workflow/example/src/contexts/AppContextProvider.tsx +++ b/login-workflow/example/src/contexts/AppContextProvider.tsx @@ -13,6 +13,7 @@ export type AppContextType = { language: string; setLanguage: (language: string) => void; setLoginData: (args: LoginData) => void; + setAuthenticated: (isAuthenticated: boolean) => void; }; export const AppContext = createContext(null); diff --git a/login-workflow/example/src/navigation/index.tsx b/login-workflow/example/src/navigation/index.tsx index 60f878c3f..4f25c4f4a 100644 --- a/login-workflow/example/src/navigation/index.tsx +++ b/login-workflow/example/src/navigation/index.tsx @@ -1,122 +1,224 @@ import React, { ReactNode } from 'react'; -import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native'; +import { NavigationContainer, createNavigationContainerRef, useNavigation } from '@react-navigation/native'; import { useApp } from '../contexts/AppContextProvider'; -import { RegistrationWorkflow, RegistrationContextProvider } from '@brightlayer-ui/react-native-auth-workflow'; -import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions'; +import { + AuthContextProvider, + ContactSupportScreen, + ResetPasswordScreen, + RegistrationContextProvider, + ForgotPasswordScreen, +} from '@brightlayer-ui/react-native-auth-workflow'; import i18nAppInstance from '../../translations/i18n'; import { NavigationDrawer } from './navigation-drawer'; import { createDrawerNavigator } from '@react-navigation/drawer'; -import Home from '../screens/home'; -import { Dimensions, View } from 'react-native'; -import AuthProviderExample from '../screens/AuthProviderExample'; +import { createStackNavigator } from '@react-navigation/stack'; +import { View } from 'react-native'; + +import { ProjectAuthUIActions } from '../actions/AuthUIActions'; +import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions'; + import { Login } from '../screens/Login'; -import { ResetPasswordScreenBaseExample } from '../components/ResetPasswordScreenBaseExample'; -import { ForgotPasswordScreenBaseExample } from '../components/ForgotPasswordScreenBaseExample'; -import RegistrationProviderExample from '../screens/RegistrationProviderExample'; -import { ContactBaseExample } from '../screens/ContactBaseExample'; -import { LoginBaseExample } from '../screens/LoginBaseExample'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import ContactFullScreenExample from '../screens/ContactFullScreenExample'; +import { ChangePassword } from '../screens/ChangePassword'; +import { Registration } from '../screens/Registration'; +import { RegistrationInvite } from '../screens/RegistrationInvite'; + +import { Homepage } from '../screens/Homepage'; +import Locations from '../screens/Locations'; +import Dashboard from '../screens/Dashboard'; +import { NativeStackNavigationProp } from '@react-navigation/native-stack'; -const getAuthState = (): any => ({ - isAuthenticated: true, -}); -const Stack = createNativeStackNavigator(); +const Stack = createStackNavigator(); const Drawer = createDrawerNavigator(); const navigationRef = createNavigationContainerRef(); export type RootStackParamList = { - Home: undefined; - RegistrationProviderExample: undefined; - AuthProviderExample: undefined; - ResetPasswordScreenBaseExample: undefined; - ForgotPasswordScreenBaseExample: undefined; - Contact: undefined; - LoginExample: undefined; - ContactFullScreenExample: undefined; + Homepage: undefined; + Dashboard: undefined; + Locations: undefined; + NavigationDrawer: undefined; }; -const RootStack = createNativeStackNavigator(); +const RootStack = createStackNavigator(); const CustomDrawerContent = (props: any): any => ( ); -const AppRouter = (): any => ( - } - > - - - - - - - - - -); -const RegistrationRouter = (): any => { - const { height, width } = Dimensions.get('screen'); +const AppRouter = (): any => { const app = useApp(); - const routes = { - LOGIN: 'LOGIN', - FORGOT_PASSWORD: undefined, - RESET_PASSWORD: undefined, - REGISTER_INVITE: 'REGISTER_INVITE', - REGISTER_SELF: 'REGISTER_SELF', - SUPPORT: undefined, - }; return ( - } > - = 768 && height >= 768 ? 'all' : 'portrait', + {app.isAuthenticated && } + {app.isAuthenticated && } + {app.isAuthenticated && } + + ); +}; +const AuthRouter = (): any => { + const app = useApp(); + const navigation = useNavigation>(); + return ( + <> + { + if (typeof destination === 'string') { + switch (destination) { + case 'SelfRegister': + case 'RegisterInvite': + navigation.navigate('RegistrationProviderExample', { screen: destination }); + break; + case 'Home': + navigation.navigate('AppProviderExample', { screen: destination }); + break; + default: + navigation.navigate(destination); + break; + } + } else if (destination === -1) { + navigation.goBack(); + } + }} + routeConfig={{ + LOGIN: 'Login', + FORGOT_PASSWORD: 'ForgotPassword', + RESET_PASSWORD: 'ResetPassword', + REGISTER_INVITE: 'RegisterInvite', + REGISTER_SELF: 'SelfRegister', + SUPPORT: 'ContactSupport', + LANDING_PAGE: 'Home', }} + rememberMeDetails={app.loginData} > - - {() => ( - + {!app.isAuthenticated && } + {!app.isAuthenticated && } + {!app.isAuthenticated && } + {!app.isAuthenticated && ( + )} - - {() => } - - - + {app.isAuthenticated && ( + + )} + + + ); }; -export const MainRouter = (): any => { - const authState = getAuthState(); - // Retrieve data that you are storing about the logged-in status of the user +const RegistrationRouter = (): any => { + const app = useApp(); + const navigation = useNavigation>(); + const RegistrationStack = createStackNavigator(); + return ( + <> + { + if (typeof destination === 'string') { + switch (destination) { + case 'SelfRegister': + case 'RegisterInvite': + navigation.navigate('RegistrationProviderExample', { screen: destination }); + break; + case 'Home': + navigation.navigate('AppProviderExample', { screen: destination }); + break; + default: + navigation.navigate(destination); + break; + } + } else if (destination === -1) { + navigation.goBack(); + } + }} + > + + {!app.isAuthenticated && ( + + )} + {!app.isAuthenticated && ( + + )} + + + + ); +}; +export const MainRouter = (): any => { + const app = useApp(); + console.log('app.isAuthenticated', app.isAuthenticated); return ( - {authState.isAuthenticated ? : } + + + + + ); }; diff --git a/login-workflow/example/src/navigation/navigation-drawer.tsx b/login-workflow/example/src/navigation/navigation-drawer.tsx index 9b63f7019..4979de957 100644 --- a/login-workflow/example/src/navigation/navigation-drawer.tsx +++ b/login-workflow/example/src/navigation/navigation-drawer.tsx @@ -3,49 +3,8 @@ import React, { useState, useCallback, useEffect } from 'react'; import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from './index'; import { DrawerActions } from '@react-navigation/native'; - -export const navGroupItems: NavItem[] = [ - { - title: 'Home Page', - itemID: 'Home', - icon: { name: 'home' }, - }, - { - title: 'Registration Provider', - itemID: 'RegistrationProviderExample', - icon: { name: 'app-registration' }, - }, - { - title: 'Auth Provider', - itemID: 'AuthProviderExample', - icon: { name: 'app-registration' }, - }, - { - title: 'Contact Full Screen', - itemID: 'ContactFullScreenExample', - icon: { name: 'app-registration' }, - }, - { - title: 'ResetPasswordScreenBase', - itemID: 'ResetPasswordScreenBaseExample', - icon: { name: 'lock' }, - }, - { - title: 'ForgotPasswordScreenBase', - itemID: 'ForgotPasswordScreenBaseExample', - icon: { name: 'app-registration' }, - }, - { - title: 'Contact', - itemID: 'Contact', - icon: { name: 'contact-page' }, - }, - { - title: 'Login Example', - itemID: 'LoginExample', - icon: { name: 'app-registration' }, - }, -]; +import { useTranslation } from 'react-i18next'; +import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; export type NavDrawerProps = { navigation: StackNavigationProp; @@ -53,18 +12,41 @@ export type NavDrawerProps = { export const NavigationDrawer: React.FC = ({ navigation }) => { const [selected, setSelected] = useState('Home'); + const { t } = useTranslation(); const navigationState = navigation.getState(); + const Homepage: IconFamily = { family: 'material', name: 'home', direction: 'ltr' }; + const Dashboard: IconFamily = { family: 'material', name: 'dashboard', direction: 'ltr' }; + const Notifications: IconFamily = { family: 'material', name: 'notifications', direction: 'ltr' }; const selectItem = useCallback( (id: any) => { navigation.navigate(id); + setSelected(id); }, [navigation] ); + const navGroupItems: NavItem[] = [ + { + title: `${t('TOOLBAR_MENU.HOME_PAGE')}`, + itemID: 'Homepage', + icon: Homepage, + }, + { + title: `${t('DRAWER_MENU.DASHBOARD')}`, + itemID: 'Dashboard', + icon: Dashboard, + }, + { + title: `${t('DRAWER_MENU.LOCATIONS')}`, + itemID: 'Locations', + icon: Notifications, + }, + ]; + useEffect(() => { const id = navGroupItems[navigationState.index].itemID; setSelected(id); - }, [navigationState.index]); + }, [navigationState.index, navGroupItems]); return ( selectItem(id)}> diff --git a/login-workflow/example/src/screens/AccountDetails.tsx b/login-workflow/example/src/screens/AccountDetails.tsx deleted file mode 100644 index 43be2e73e..000000000 --- a/login-workflow/example/src/screens/AccountDetails.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { - AccountDetailsScreenBase, - AccountDetailsScreenProps, - useRegistrationWorkflowContext, - useErrorManager, -} from '@brightlayer-ui/react-native-auth-workflow'; -import { useNavigation } from '@react-navigation/native'; - -const submit = (): void => { - throw new Error('My Custom Error'); -}; - -export const AccountDetailsScreen: React.FC = (props) => { - const regWorkflow = useRegistrationWorkflowContext(); - const navigation = useNavigation(); - const { triggerError, errorManagerConfig } = useErrorManager(); - const errorDisplayConfig = { - ...errorManagerConfig, - onClose: (): void => { - if (errorManagerConfig.onClose) errorManagerConfig?.onClose(); - }, - }; - const { nextScreen, previousScreen, screenData, currentScreen, totalScreens } = regWorkflow; - - const [firstName, setFirstName] = useState(''); - const [lastName, setLastName] = useState(''); - - const onNext = useCallback((): void => { - try { - void nextScreen({ - screenId: 'AccountDetails', - values: { firstName, lastName }, - }); - navigation.navigate('Home'); - submit(); - } catch (_error) { - triggerError(_error as Error); - } - }, [firstName, lastName, triggerError, navigation, nextScreen]); - - const onPrevious = useCallback(() => { - void previousScreen({ - screenId: 'AccountDetails', - values: { firstName, lastName }, - }); - }, [firstName, lastName, previousScreen]); - - const { - WorkflowCardHeaderProps, - WorkflowCardInstructionProps, - WorkflowCardActionsProps, - firstNameLabel = 'First Name', - lastNameLabel = 'Last Name', - firstNameValidator = (name: string): boolean | string => { - if (name?.length > 0) { - return true; - } - return 'first name error'; - }, - lastNameValidator = (name: string): boolean | string => { - if (name?.length > 0) { - return true; - } - return 'last name error'; - }, - firstNameTextInputProps, - lastNameTextInputProps, - initialFirstName = screenData.AccountDetails.firstName, - initialLastName = screenData.AccountDetails.lastName, - } = props; - - const workflowCardHeaderProps = { - title: 'Account Details', - ...WorkflowCardHeaderProps, - }; - - const workflowCardInstructionProps = { - instructions: 'Please enter your first and last name', - ...WorkflowCardInstructionProps, - }; - - const workflowCardActionsProps = { - canGoNext: true, - showNext: true, - showPrevious: true, - nextLabel: 'Next', - previousLabel: 'Previous', - totalSteps: totalScreens, - currentStep: currentScreen, - ...WorkflowCardActionsProps, - onNext: (): void => { - void onNext(); - WorkflowCardActionsProps?.onNext?.(); - }, - onPrevious: (): void => { - void onPrevious(); - WorkflowCardActionsProps?.onPrevious?.(); - }, - }; - - const onFirstNameInputChange = (text: any): void => { - setFirstName(text); - }; - const onLastNameInputChange = (text: any): void => { - setLastName(text); - }; - - return ( - 0 ? firstName : initialFirstName} - initialLastName={lastName.length > 0 ? lastName : initialLastName} - firstNameLabel={firstNameLabel} - firstNameTextInputProps={{ ...firstNameTextInputProps, onChangeText: onFirstNameInputChange }} - firstNameValidator={firstNameValidator} - lastNameLabel={lastNameLabel} - lastNameTextInputProps={{ ...lastNameTextInputProps, onChangeText: onLastNameInputChange }} - lastNameValidator={lastNameValidator} - WorkflowCardActionsProps={workflowCardActionsProps} - errorDisplayConfig={errorDisplayConfig} - /> - ); -}; diff --git a/login-workflow/example/src/screens/AuthProviderExample.tsx b/login-workflow/example/src/screens/AuthProviderExample.tsx deleted file mode 100644 index 6416c66cb..000000000 --- a/login-workflow/example/src/screens/AuthProviderExample.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { useApp } from '../contexts/AppContextProvider'; -import i18nAppInstance from '../../translations/i18n'; -import { AuthContextProvider, ErrorContextProvider } from '@brightlayer-ui/react-native-auth-workflow'; -import { RootStackParamList } from '../navigation'; -import { useNavigation } from '@react-navigation/native'; -import { ProjectAuthUIActions } from '../actions/AuthUIActions'; -import { ChangePassword } from './ChangePassword'; - -type AppProps = { - navigation: StackNavigationProp; -}; - -const AuthProviderExample: React.FC = (): JSX.Element => { - const app = useApp(); - const nav = useNavigation(); - - return ( - { - if (typeof destination === 'string') { - nav.navigate(destination); - } else { - nav.goBack(); - } - }} - routeConfig={{ - LOGIN: 'Home', - FORGOT_PASSWORD: undefined, - RESET_PASSWORD: undefined, - REGISTER_INVITE: undefined, - REGISTER_SELF: undefined, - SUPPORT: undefined, - }} - > - - - - - ); -}; -export default AuthProviderExample; diff --git a/login-workflow/example/src/screens/ChangePassword.tsx b/login-workflow/example/src/screens/ChangePassword.tsx index 6691040c9..7f36baeba 100644 --- a/login-workflow/example/src/screens/ChangePassword.tsx +++ b/login-workflow/example/src/screens/ChangePassword.tsx @@ -2,16 +2,30 @@ import React from 'react'; import { ChangePasswordScreen } from '@brightlayer-ui/react-native-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { LocalStorage } from '../store/local-storage'; -import { useNavigation } from '@react-navigation/native'; +import { useNavigation, useRoute } from '@react-navigation/native'; export const ChangePassword = (): JSX.Element => { const app = useApp(); - const { navigate } = useNavigation(); + const nav = useNavigation(); + const route = useRoute(); + const { params } = route; const logOut = (): void => { LocalStorage.clearAuthCredentials(); app.onUserNotAuthenticated(); - navigate('Home'); + app.setAuthenticated(false); + app.setLoginData({ email: '', rememberMe: false }); + nav.navigate('AuthProviderExample', { screen: 'Login' }); }; - return logOut()} showSuccessScreen />; + return ( + logOut()} + WorkflowCardHeaderProps={{ + onIconPress: (): void => { + nav.navigate('AppProviderExample', { screen: params?.previousScreen }); + }, + }} + showSuccessScreen + /> + ); }; diff --git a/login-workflow/example/src/screens/ContactBaseExample.tsx b/login-workflow/example/src/screens/ContactBaseExample.tsx deleted file mode 100644 index 74dfaacb8..000000000 --- a/login-workflow/example/src/screens/ContactBaseExample.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { ContactSupportScreenBase } from '@brightlayer-ui/react-native-auth-workflow'; -import { Text } from 'react-native-paper'; -import { useNavigation } from '@react-navigation/native'; -import { Linking } from 'react-native'; -import { useExtendedTheme } from '@brightlayer-ui/react-native-themes'; - -export const ContactBaseExample: React.FC = () => { - const navigation = useNavigation(); - const contactEmail = 'something@email.com'; - const contactPhone = '1-800-123-4567'; - const theme = useExtendedTheme(); - const defaultEmailSupportContent = (): JSX.Element => ( - - {`Contact Message `} - Linking.openURL(`mailto:${contactEmail ?? ''}`)} - > - {contactEmail} - - {`.`} - - ); - - const defaultPhoneSupportContent = (): JSX.Element => ( - - {`Phone Message `} - Linking.openURL(`tel:${contactPhone ?? ''}`)} - > - {contactPhone} - - {`.`} - - ); - - const workflowCardHeaderProps = { - title: 'CONTACT_US', - }; - - const workflowCardActionsProps = { - nextLabel: 'Okay', - showNext: true, - canGoNext: true, - fullWidthButton: true, - onNext: (): void => { - navigation.navigate('Home'); - }, - }; - return ( - - ); -}; diff --git a/login-workflow/example/src/screens/ContactFullScreenExample.tsx b/login-workflow/example/src/screens/ContactFullScreenExample.tsx deleted file mode 100644 index 15f7826ec..000000000 --- a/login-workflow/example/src/screens/ContactFullScreenExample.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { useApp } from '../contexts/AppContextProvider'; -import i18nAppInstance from '../../translations/i18n'; -import { AuthContextProvider, ContactSupportScreen } from '@brightlayer-ui/react-native-auth-workflow'; -import { RootStackParamList } from '../navigation'; -import { useNavigation } from '@react-navigation/native'; -import { ProjectAuthUIActions } from '../actions/AuthUIActions'; - -type AppProps = { - navigation: StackNavigationProp; -}; - -const ContactFullScreenExample: React.FC = (): JSX.Element => { - const app = useApp(); - const nav = useNavigation(); - - return ( - { - if (typeof destination === 'string') { - nav.navigate(destination); - } else { - nav.goBack(); - } - }} - routeConfig={{ - LOGIN: 'Home', - FORGOT_PASSWORD: undefined, - RESET_PASSWORD: undefined, - REGISTER_INVITE: undefined, - REGISTER_SELF: undefined, - SUPPORT: undefined, - }} - > - - - ); -}; -export default ContactFullScreenExample; diff --git a/login-workflow/example/src/screens/Dashboard.tsx b/login-workflow/example/src/screens/Dashboard.tsx new file mode 100644 index 000000000..afe316e10 --- /dev/null +++ b/login-workflow/example/src/screens/Dashboard.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { + SafeAreaView, + ScrollView, + StyleSheet, + TextStyle, + ViewStyle, + Animated, + Easing, + I18nManager, +} from 'react-native'; +import { EmptyState, Header } from '@brightlayer-ui/react-native-components'; +import RNRestart from 'react-native-restart'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { RootStackParamList } from '../navigation'; +import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-themes'; +import { UserMenuExample } from '../components/UserMenuExample'; +import { useThemeContext } from '../contexts/ThemeContext'; +import { useTranslation } from 'react-i18next'; +import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; + +const styles = ( + theme: ExtendedTheme +): StyleSheet.NamedStyles<{ + content: ViewStyle; + pxbLogoWrapper: ViewStyle; + pxbLogo: ViewStyle; + title: TextStyle; + subtitle: TextStyle; + bold: TextStyle; + divider: ViewStyle; + openURLButtonText: TextStyle; +}> => + StyleSheet.create({ + content: { + flex: 1, + backgroundColor: theme.colors.background, + }, + pxbLogoWrapper: { + justifyContent: 'center', + marginTop: 16, + }, + pxbLogo: { + alignSelf: 'center', + height: 100, + width: 100, + }, + title: { + textAlign: 'center', + marginBottom: 16, + }, + subtitle: { + textAlign: 'center', + }, + bold: { + fontWeight: 'bold', + }, + divider: { + marginVertical: 24, + }, + openURLButtonText: { + color: theme.colors.primary, + padding: 8, + }, + }); + +type AppProps = { + navigation: StackNavigationProp; +}; + +const toggleRTL = (): void => { + if (I18nManager.isRTL) { + I18nManager.forceRTL(false); + } else { + I18nManager.forceRTL(true); + } + RNRestart.Restart(); +}; +const Dashboard: React.FC = ({ navigation }): JSX.Element => { + const theme = useExtendedTheme(); + const { t } = useTranslation(); + const { theme: themeType, setTheme } = useThemeContext(); + + const defaultStyles = styles(theme); + const spinValue = new Animated.Value(0); + const Event: IconFamily = { family: 'material', name: 'event', direction: 'ltr' }; + Animated.loop( + Animated.timing(spinValue, { + toValue: 1, + duration: 2500, + easing: Easing.linear, + useNativeDriver: true, + }) + ).start(); + + return ( + <> +
{ + navigation.openDrawer(); + }} + actionItems={[ + { + icon: { name: 'more' }, + onPress: (): void => {}, + component: ( + setTheme(themeType === 'light' ? 'dark' : 'light')} + /> + ), + }, + ]} + /> + + + + + + + ); +}; + +export default Dashboard; diff --git a/login-workflow/example/src/screens/home.tsx b/login-workflow/example/src/screens/Homepage.tsx similarity index 79% rename from login-workflow/example/src/screens/home.tsx rename to login-workflow/example/src/screens/Homepage.tsx index a7885da18..fae579daa 100644 --- a/login-workflow/example/src/screens/home.tsx +++ b/login-workflow/example/src/screens/Homepage.tsx @@ -9,8 +9,7 @@ import { Easing, I18nManager, } from 'react-native'; -import { Button } from 'react-native-paper'; -import { Header } from '@brightlayer-ui/react-native-components'; +import { EmptyState, Header } from '@brightlayer-ui/react-native-components'; import RNRestart from 'react-native-restart'; import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from '../navigation'; @@ -18,6 +17,7 @@ import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-th import { UserMenuExample } from '../components/UserMenuExample'; import { useThemeContext } from '../contexts/ThemeContext'; import { useTranslation } from 'react-i18next'; +import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; const styles = ( theme: ExtendedTheme @@ -68,7 +68,7 @@ type AppProps = { navigation: StackNavigationProp; }; -export const toggleRTL = (): void => { +const toggleRTL = (): void => { if (I18nManager.isRTL) { I18nManager.forceRTL(false); } else { @@ -76,13 +76,14 @@ export const toggleRTL = (): void => { } RNRestart.Restart(); }; -const Home: React.FC = ({ navigation }): JSX.Element => { +export const Homepage: React.FC = ({ navigation }): JSX.Element => { const theme = useExtendedTheme(); const { t } = useTranslation(); const { theme: themeType, setTheme } = useThemeContext(); const defaultStyles = styles(theme); const spinValue = new Animated.Value(0); + const Event: IconFamily = { family: 'material', name: 'event', direction: 'ltr' }; Animated.loop( Animated.timing(spinValue, { toValue: 1, @@ -114,14 +115,20 @@ const Home: React.FC = ({ navigation }): JSX.Element => { ]} /> - - + + ); }; - -export default Home; diff --git a/login-workflow/example/src/screens/Locations.tsx b/login-workflow/example/src/screens/Locations.tsx new file mode 100644 index 000000000..b0cafac6c --- /dev/null +++ b/login-workflow/example/src/screens/Locations.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { + SafeAreaView, + ScrollView, + StyleSheet, + TextStyle, + ViewStyle, + Animated, + Easing, + I18nManager, +} from 'react-native'; +import { EmptyState, Header } from '@brightlayer-ui/react-native-components'; +import RNRestart from 'react-native-restart'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { RootStackParamList } from '../navigation'; +import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-themes'; +import { UserMenuExample } from '../components/UserMenuExample'; +import { useThemeContext } from '../contexts/ThemeContext'; +import { useTranslation } from 'react-i18next'; +import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; + +const styles = ( + theme: ExtendedTheme +): StyleSheet.NamedStyles<{ + content: ViewStyle; + pxbLogoWrapper: ViewStyle; + pxbLogo: ViewStyle; + title: TextStyle; + subtitle: TextStyle; + bold: TextStyle; + divider: ViewStyle; + openURLButtonText: TextStyle; +}> => + StyleSheet.create({ + content: { + flex: 1, + backgroundColor: theme.colors.background, + }, + pxbLogoWrapper: { + justifyContent: 'center', + marginTop: 16, + }, + pxbLogo: { + alignSelf: 'center', + height: 100, + width: 100, + }, + title: { + textAlign: 'center', + marginBottom: 16, + }, + subtitle: { + textAlign: 'center', + }, + bold: { + fontWeight: 'bold', + }, + divider: { + marginVertical: 24, + }, + openURLButtonText: { + color: theme.colors.primary, + padding: 8, + }, + }); + +type AppProps = { + navigation: StackNavigationProp; +}; + +const toggleRTL = (): void => { + if (I18nManager.isRTL) { + I18nManager.forceRTL(false); + } else { + I18nManager.forceRTL(true); + } + RNRestart.Restart(); +}; +const Locations: React.FC = ({ navigation }): JSX.Element => { + const theme = useExtendedTheme(); + const { t } = useTranslation(); + const { theme: themeType, setTheme } = useThemeContext(); + + const defaultStyles = styles(theme); + const spinValue = new Animated.Value(0); + const Event: IconFamily = { family: 'material', name: 'event', direction: 'ltr' }; + Animated.loop( + Animated.timing(spinValue, { + toValue: 1, + duration: 2500, + easing: Easing.linear, + useNativeDriver: true, + }) + ).start(); + + return ( + <> +
{ + navigation.openDrawer(); + }} + actionItems={[ + { + icon: { name: 'more' }, + onPress: (): void => {}, + component: ( + setTheme(themeType === 'light' ? 'dark' : 'light')} + /> + ), + }, + ]} + /> + + + + + + + ); +}; + +export default Locations; diff --git a/login-workflow/example/src/screens/Login.tsx b/login-workflow/example/src/screens/Login.tsx index 016f5eb72..a000a358b 100644 --- a/login-workflow/example/src/screens/Login.tsx +++ b/login-workflow/example/src/screens/Login.tsx @@ -1,14 +1,17 @@ import React from 'react'; -import { View } from 'react-native'; -import { Text } from 'react-native-paper'; +import { Image } from 'react-native'; +import { DebugComponent } from '../components/DebugComponent'; +import { LoginScreenProps, LoginScreen } from '@brightlayer-ui/react-native-auth-workflow'; -export const Login: React.FC = (): JSX.Element => { - const Text1 = 'Login Page'; - return ( - - - {Text1} - - - ); -}; +export const Login: React.FC> = () => ( + + } + header={} + /> +); diff --git a/login-workflow/example/src/screens/LoginBaseExample.tsx b/login-workflow/example/src/screens/LoginBaseExample.tsx deleted file mode 100644 index ea8bb40b0..000000000 --- a/login-workflow/example/src/screens/LoginBaseExample.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { Image } from 'react-native'; -import { useApp } from '../contexts/AppContextProvider'; -import i18nAppInstance from '../../translations/i18n'; -import { - LoginScreenProps, - LoginScreen, - AuthContextProvider, - ErrorContextProvider, -} from '@brightlayer-ui/react-native-auth-workflow'; -import { useNavigation } from '@react-navigation/native'; -import { ProjectAuthUIActions } from '../actions/AuthUIActions'; - -export const LoginBaseExample: React.FC> = () => { - const app = useApp(); - const nav = useNavigation(); - - return ( - { - if (typeof destination === 'string') { - nav.navigate(destination); - } else { - nav.goBack(); - } - }} - routeConfig={{ - LOGIN: 'Home', - FORGOT_PASSWORD: undefined, - RESET_PASSWORD: undefined, - REGISTER_INVITE: undefined, - REGISTER_SELF: undefined, - SUPPORT: undefined, - }} - > - - - } - /> - - - ); -}; diff --git a/login-workflow/example/src/screens/Registration.tsx b/login-workflow/example/src/screens/Registration.tsx new file mode 100644 index 000000000..5f23b7013 --- /dev/null +++ b/login-workflow/example/src/screens/Registration.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { RegistrationWorkflow } from '@brightlayer-ui/react-native-auth-workflow'; + +export const Registration: React.FC = () => ; diff --git a/login-workflow/example/src/screens/RegistrationInvite.tsx b/login-workflow/example/src/screens/RegistrationInvite.tsx new file mode 100644 index 000000000..1004f9a74 --- /dev/null +++ b/login-workflow/example/src/screens/RegistrationInvite.tsx @@ -0,0 +1,5 @@ +import React from 'react'; +import { RegistrationWorkflow } from '@brightlayer-ui/react-native-auth-workflow'; +export const RegistrationInvite: React.FC = () => ( + +); diff --git a/login-workflow/example/src/screens/RegistrationProviderExample.tsx b/login-workflow/example/src/screens/RegistrationProviderExample.tsx deleted file mode 100644 index b821562b3..000000000 --- a/login-workflow/example/src/screens/RegistrationProviderExample.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { useApp } from '../contexts/AppContextProvider'; -import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions'; -import i18nAppInstance from '../../translations/i18n'; -import { - RegistrationContextProvider, - RegistrationWorkflow, - // EulaScreen, - // ErrorContextProvider, - // AccountDetailsScreen, - // CreatePasswordScreen, - // VerifyCodeScreen, - // WorkflowCard, - // WorkflowCardHeader, - // WorkflowCardBody, - // WorkflowCardActions, - // CreateAccountScreen, -} from '@brightlayer-ui/react-native-auth-workflow'; -import { RootStackParamList } from '../navigation'; -import { useNavigation } from '@react-navigation/native'; -// import { CustomScreen } from '../components/CustomScreen'; - -type AppProps = { - navigation: StackNavigationProp; -}; - -const RegistrationProviderExample: React.FC = (): JSX.Element => { - const app = useApp(); - const nav = useNavigation(); - return ( - { - if (typeof destination === 'string') { - nav.navigate(destination); - } else { - nav.goBack(); - } - }} - routeConfig={{ - LOGIN: 'Home', - FORGOT_PASSWORD: undefined, - RESET_PASSWORD: undefined, - REGISTER_INVITE: undefined, - REGISTER_SELF: undefined, - SUPPORT: undefined, - }} - > - {/* */} - {/* Default Implementation */} - {/* */} - - {/* implementation with custom screens. This custom screen is using app and workflow level translations */} - - {/* - - - */} - {/* */} - - - {/* Show default success screen */} - {/* - { - console.log('close icon pressed'); - }} - > - - - Success - - - - - } - > */} - {/* - - - */} - - ); -}; -export default RegistrationProviderExample; diff --git a/login-workflow/example/src/screens/index.ts b/login-workflow/example/src/screens/index.ts new file mode 100644 index 000000000..4f2f8335f --- /dev/null +++ b/login-workflow/example/src/screens/index.ts @@ -0,0 +1,12 @@ +// App Screens +export * from './Homepage'; +export * from './Dashboard'; +export * from './Locations'; + +// Auth Screens +export * from './Login'; +export * from './ChangePassword'; + +// Registration Screens +export * from './Registration'; +export * from './RegistrationInvite'; diff --git a/login-workflow/example/src/screens/index.tsx b/login-workflow/example/src/screens/index.tsx deleted file mode 100644 index d6e6353ee..000000000 --- a/login-workflow/example/src/screens/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from './home'; -export * from './RegistrationProviderExample'; -export * from './ContactFullScreenExample'; diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index b1dd753fe..bdfe8a694 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx @@ -96,6 +96,9 @@ export const LoginScreen: React.FC> = try { setIsLoading(true); await actions.logIn(username, password, rememberMe); + if (routeConfig.LANDING_PAGE) { + navigate(routeConfig.LANDING_PAGE); + } await props.onLogin?.(username, password, rememberMe); } catch (_error) { triggerError(_error as Error); diff --git a/login-workflow/src/types/index.ts b/login-workflow/src/types/index.ts index 73ff17393..1845b833d 100644 --- a/login-workflow/src/types/index.ts +++ b/login-workflow/src/types/index.ts @@ -5,4 +5,5 @@ export type RouteConfig = { REGISTER_INVITE?: string; REGISTER_SELF?: string; SUPPORT?: string; + LANDING_PAGE?: string; }; From 35fa09cf1acda21d52347a410e1bbe4973b90f8d Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Thu, 25 Apr 2024 18:21:54 +0530 Subject: [PATCH 2/4] move app provider into auth provider stacj --- .../src/components/UserMenuExample.tsx | 3 +- .../example/src/navigation/index.tsx | 121 ++++++++++-------- .../src/navigation/navigation-drawer.tsx | 6 +- .../example/src/screens/ChangePassword.tsx | 14 +- .../src/screens/LoginScreen/LoginScreen.tsx | 3 - 5 files changed, 82 insertions(+), 65 deletions(-) diff --git a/login-workflow/example/src/components/UserMenuExample.tsx b/login-workflow/example/src/components/UserMenuExample.tsx index e6d70eeb5..79aebfe81 100644 --- a/login-workflow/example/src/components/UserMenuExample.tsx +++ b/login-workflow/example/src/components/UserMenuExample.tsx @@ -58,10 +58,9 @@ export const UserMenuExample: React.FC = (props) => { const logout = (): void => { LocalStorage.clearAuthCredentials(); app.onUserNotAuthenticated(); - navigation.navigate('AuthProviderExample', { screen: 'Login' }); }; const changePassword = (): void => { - navigation.navigate('ChangePassword', { previousScreen: route }); + navigation.navigate('ChangePassword'); }; const languageOptions = [ { label: 'English', value: 'en' }, diff --git a/login-workflow/example/src/navigation/index.tsx b/login-workflow/example/src/navigation/index.tsx index 4f25c4f4a..8f79bed7c 100644 --- a/login-workflow/example/src/navigation/index.tsx +++ b/login-workflow/example/src/navigation/index.tsx @@ -45,24 +45,24 @@ const CustomDrawerContent = (props: any): any => ( ); -const AppRouter = (): any => { - const app = useApp(); - return ( - } - > - {app.isAuthenticated && } - {app.isAuthenticated && } - {app.isAuthenticated && } - - ); -}; +// const AppRouter = (): any => { +// const app = useApp(); +// return ( +// } +// > +// {app.isAuthenticated && } +// {app.isAuthenticated && } +// {app.isAuthenticated && } +// +// ); +// }; const AuthRouter = (): any => { const app = useApp(); const navigation = useNavigation>(); @@ -79,9 +79,6 @@ const AuthRouter = (): any => { case 'RegisterInvite': navigation.navigate('RegistrationProviderExample', { screen: destination }); break; - case 'Home': - navigation.navigate('AppProviderExample', { screen: destination }); - break; default: navigation.navigate(destination); break; @@ -97,34 +94,68 @@ const AuthRouter = (): any => { REGISTER_INVITE: 'RegisterInvite', REGISTER_SELF: 'SelfRegister', SUPPORT: 'ContactSupport', - LANDING_PAGE: 'Home', }} rememberMeDetails={app.loginData} > - } + backBehavior="history" initialRouteName="Login" > - {!app.isAuthenticated && } - {!app.isAuthenticated && } - {!app.isAuthenticated && } {!app.isAuthenticated && ( - + )} + {!app.isAuthenticated && ( + + )} + {!app.isAuthenticated && ( + )} + + {app.isAuthenticated && } + {app.isAuthenticated && } + {app.isAuthenticated && } + + {app.isAuthenticated && ( - )} - + ); @@ -147,7 +178,6 @@ const RegistrationRouter = (): any => { REGISTER_INVITE: 'RegisterInvite', REGISTER_SELF: 'SelfRegister', SUPPORT: 'ContactSupport', - LANDING_PAGE: 'Home', }} navigate={(destination: -1 | string) => { if (typeof destination === 'string') { @@ -156,9 +186,6 @@ const RegistrationRouter = (): any => { case 'RegisterInvite': navigation.navigate('RegistrationProviderExample', { screen: destination }); break; - case 'Home': - navigation.navigate('AppProviderExample', { screen: destination }); - break; default: navigation.navigate(destination); break; @@ -197,27 +224,19 @@ export const MainRouter = (): any => { return ( - - - + /> */} + + ); diff --git a/login-workflow/example/src/navigation/navigation-drawer.tsx b/login-workflow/example/src/navigation/navigation-drawer.tsx index 4979de957..6fc89558c 100644 --- a/login-workflow/example/src/navigation/navigation-drawer.tsx +++ b/login-workflow/example/src/navigation/navigation-drawer.tsx @@ -44,8 +44,10 @@ export const NavigationDrawer: React.FC = ({ navigation }) => { ]; useEffect(() => { - const id = navGroupItems[navigationState.index].itemID; - setSelected(id); + const id = navGroupItems[navigationState.index]?.itemID; + if (id) { + setSelected(id); + } }, [navigationState.index, navGroupItems]); return ( diff --git a/login-workflow/example/src/screens/ChangePassword.tsx b/login-workflow/example/src/screens/ChangePassword.tsx index 7f36baeba..995a4a6d1 100644 --- a/login-workflow/example/src/screens/ChangePassword.tsx +++ b/login-workflow/example/src/screens/ChangePassword.tsx @@ -12,19 +12,19 @@ export const ChangePassword = (): JSX.Element => { const logOut = (): void => { LocalStorage.clearAuthCredentials(); app.onUserNotAuthenticated(); - app.setAuthenticated(false); + // app.setAuthenticated(false); app.setLoginData({ email: '', rememberMe: false }); - nav.navigate('AuthProviderExample', { screen: 'Login' }); + // nav.navigate('AuthProviderExample', { screen: 'Login' }); }; return ( logOut()} - WorkflowCardHeaderProps={{ - onIconPress: (): void => { - nav.navigate('AppProviderExample', { screen: params?.previousScreen }); - }, - }} + // WorkflowCardHeaderProps={{ + // onIconPress: (): void => { + // nav.navigate('AuthProviderExample', { screen: params?.previousScreen }); + // }, + // }} showSuccessScreen /> ); diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index bdfe8a694..b1dd753fe 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx @@ -96,9 +96,6 @@ export const LoginScreen: React.FC> = try { setIsLoading(true); await actions.logIn(username, password, rememberMe); - if (routeConfig.LANDING_PAGE) { - navigate(routeConfig.LANDING_PAGE); - } await props.onLogin?.(username, password, rememberMe); } catch (_error) { triggerError(_error as Error); From 4c4d98c1450445df572bf0cb68b6b61e8149b1e4 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Fri, 26 Apr 2024 10:27:05 +0530 Subject: [PATCH 3/4] Fix drawer lint --- .../example/src/navigation/index.tsx | 28 ++----------------- .../example/src/screens/ChangePassword.tsx | 18 +----------- .../example/src/screens/Dashboard.tsx | 3 +- .../example/src/screens/Homepage.tsx | 5 ++-- .../example/src/screens/Locations.tsx | 3 +- 5 files changed, 11 insertions(+), 46 deletions(-) diff --git a/login-workflow/example/src/navigation/index.tsx b/login-workflow/example/src/navigation/index.tsx index 8f79bed7c..03f2e76ec 100644 --- a/login-workflow/example/src/navigation/index.tsx +++ b/login-workflow/example/src/navigation/index.tsx @@ -45,26 +45,10 @@ const CustomDrawerContent = (props: any): any => ( ); -// const AppRouter = (): any => { -// const app = useApp(); -// return ( -// } -// > -// {app.isAuthenticated && } -// {app.isAuthenticated && } -// {app.isAuthenticated && } -// -// ); -// }; + const AuthRouter = (): any => { const app = useApp(); + const { email, rememberMe } = app.loginData; const navigation = useNavigation>(); return ( <> @@ -95,7 +79,7 @@ const AuthRouter = (): any => { REGISTER_SELF: 'SelfRegister', SUPPORT: 'ContactSupport', }} - rememberMeDetails={app.loginData} + rememberMeDetails={{ email: rememberMe ? email : '', rememberMe: rememberMe }} > { }; export const MainRouter = (): any => { const app = useApp(); - console.log('app.isAuthenticated', app.isAuthenticated); return ( { animationEnabled: false, }} > - {/* */} diff --git a/login-workflow/example/src/screens/ChangePassword.tsx b/login-workflow/example/src/screens/ChangePassword.tsx index 995a4a6d1..110215abb 100644 --- a/login-workflow/example/src/screens/ChangePassword.tsx +++ b/login-workflow/example/src/screens/ChangePassword.tsx @@ -2,30 +2,14 @@ import React from 'react'; import { ChangePasswordScreen } from '@brightlayer-ui/react-native-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { LocalStorage } from '../store/local-storage'; -import { useNavigation, useRoute } from '@react-navigation/native'; export const ChangePassword = (): JSX.Element => { const app = useApp(); - const nav = useNavigation(); - const route = useRoute(); - const { params } = route; const logOut = (): void => { LocalStorage.clearAuthCredentials(); app.onUserNotAuthenticated(); - // app.setAuthenticated(false); app.setLoginData({ email: '', rememberMe: false }); - // nav.navigate('AuthProviderExample', { screen: 'Login' }); }; - return ( - logOut()} - // WorkflowCardHeaderProps={{ - // onIconPress: (): void => { - // nav.navigate('AuthProviderExample', { screen: params?.previousScreen }); - // }, - // }} - showSuccessScreen - /> - ); + return logOut()} showSuccessScreen />; }; diff --git a/login-workflow/example/src/screens/Dashboard.tsx b/login-workflow/example/src/screens/Dashboard.tsx index afe316e10..a49203c66 100644 --- a/login-workflow/example/src/screens/Dashboard.tsx +++ b/login-workflow/example/src/screens/Dashboard.tsx @@ -18,6 +18,7 @@ import { UserMenuExample } from '../components/UserMenuExample'; import { useThemeContext } from '../contexts/ThemeContext'; import { useTranslation } from 'react-i18next'; import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; +import { DrawerActions } from '@react-navigation/native'; const styles = ( theme: ExtendedTheme @@ -99,7 +100,7 @@ const Dashboard: React.FC = ({ navigation }): JSX.Element => { title={`${t('DRAWER_MENU.DASHBOARD')}`} icon={{ name: 'menu' }} onIconPress={(): void => { - navigation.openDrawer(); + navigation.dispatch(DrawerActions.openDrawer()); }} actionItems={[ { diff --git a/login-workflow/example/src/screens/Homepage.tsx b/login-workflow/example/src/screens/Homepage.tsx index fae579daa..4f174f30d 100644 --- a/login-workflow/example/src/screens/Homepage.tsx +++ b/login-workflow/example/src/screens/Homepage.tsx @@ -18,6 +18,7 @@ import { UserMenuExample } from '../components/UserMenuExample'; import { useThemeContext } from '../contexts/ThemeContext'; import { useTranslation } from 'react-i18next'; import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; +import { DrawerActions } from '@react-navigation/native'; const styles = ( theme: ExtendedTheme @@ -65,7 +66,7 @@ const styles = ( }); type AppProps = { - navigation: StackNavigationProp; + navigation: StackNavigationProp; }; const toggleRTL = (): void => { @@ -99,7 +100,7 @@ export const Homepage: React.FC = ({ navigation }): JSX.Element => { title={`${t('TOOLBAR_MENU.HOME_PAGE')}`} icon={{ name: 'menu' }} onIconPress={(): void => { - navigation.openDrawer(); + navigation.dispatch(DrawerActions.openDrawer()); }} actionItems={[ { diff --git a/login-workflow/example/src/screens/Locations.tsx b/login-workflow/example/src/screens/Locations.tsx index b0cafac6c..c0e69acf9 100644 --- a/login-workflow/example/src/screens/Locations.tsx +++ b/login-workflow/example/src/screens/Locations.tsx @@ -18,6 +18,7 @@ import { UserMenuExample } from '../components/UserMenuExample'; import { useThemeContext } from '../contexts/ThemeContext'; import { useTranslation } from 'react-i18next'; import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__'; +import { DrawerActions } from '@react-navigation/native'; const styles = ( theme: ExtendedTheme @@ -99,7 +100,7 @@ const Locations: React.FC = ({ navigation }): JSX.Element => { title={`${t('DRAWER_MENU.LOCATIONS')}`} icon={{ name: 'menu' }} onIconPress={(): void => { - navigation.openDrawer(); + navigation.dispatch(DrawerActions.openDrawer()); }} actionItems={[ { From f6e6dc0600e40238cc057d699190eef17d3f2114 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Fri, 26 Apr 2024 15:08:04 +0530 Subject: [PATCH 4/4] fix orientation --- .../example/src/components/UserMenuExample.tsx | 3 +-- login-workflow/example/src/navigation/index.tsx | 12 +++++------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/login-workflow/example/src/components/UserMenuExample.tsx b/login-workflow/example/src/components/UserMenuExample.tsx index 79aebfe81..cc32d98ed 100644 --- a/login-workflow/example/src/components/UserMenuExample.tsx +++ b/login-workflow/example/src/components/UserMenuExample.tsx @@ -9,7 +9,7 @@ import { useExtendedTheme } from '@brightlayer-ui/react-native-themes'; import { useApp } from '../contexts/AppContextProvider'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { LocalStorage } from '../store/local-storage'; -import { useNavigation, useRoute } from '@react-navigation/native'; +import { useNavigation } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; const SwapIcon: IconFamily = { @@ -44,7 +44,6 @@ export const UserMenuExample: React.FC = (props) => { const { i18n } = useTranslation(); const navigation = useNavigation>(); const app = useApp(); - const route = useRoute().name; const handleLanguageChange = async (newLanguage: string): Promise => { app.setLanguage(newLanguage); void i18n.changeLanguage(newLanguage); diff --git a/login-workflow/example/src/navigation/index.tsx b/login-workflow/example/src/navigation/index.tsx index 03f2e76ec..ef60cfe5b 100644 --- a/login-workflow/example/src/navigation/index.tsx +++ b/login-workflow/example/src/navigation/index.tsx @@ -12,7 +12,7 @@ import i18nAppInstance from '../../translations/i18n'; import { NavigationDrawer } from './navigation-drawer'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStackNavigator } from '@react-navigation/stack'; -import { View } from 'react-native'; +import { Dimensions, View } from 'react-native'; import { ProjectAuthUIActions } from '../actions/AuthUIActions'; import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions'; @@ -25,9 +25,9 @@ import { RegistrationInvite } from '../screens/RegistrationInvite'; import { Homepage } from '../screens/Homepage'; import Locations from '../screens/Locations'; import Dashboard from '../screens/Dashboard'; -import { NativeStackNavigationProp } from '@react-navigation/native-stack'; +import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); const Drawer = createDrawerNavigator(); const navigationRef = createNavigationContainerRef(); @@ -38,8 +38,6 @@ export type RootStackParamList = { NavigationDrawer: undefined; }; -const RootStack = createStackNavigator(); - const CustomDrawerContent = (props: any): any => ( @@ -203,14 +201,14 @@ const RegistrationRouter = (): any => { ); }; export const MainRouter = (): any => { - const app = useApp(); + const { height, width } = Dimensions.get('screen'); return ( = 768 && height >= 768 ? 'all' : 'portrait', }} >