@brightlayer-ui/react-native-template-authentication-typescript 2.1.0 → 3.0.0-alpha.1

package/template/src/components/CustomScreen.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useState } from 'react';
+// import { useRegistrationWorkflowContext } from '../../contexts';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    useRegistrationWorkflowContext,
+    useRegistrationContext,
+} from '@brightlayer-ui/react-native-auth-workflow';
+import { TextInput } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+type CustomScreenProps = {
+    /**
+     * Used to pre-populate the data when the screen loads
+     *
+     */
+    organisationName?: any;
+};
+
+export const CustomScreen: React.FC<CustomScreenProps> = (props) => {
+    const regWorkflow = useRegistrationWorkflowContext();
+    const { navigate } = useRegistrationContext();
+    const { nextScreen, screenData, currentScreen, totalScreens, resetScreenData, previousScreen } = regWorkflow;
+    const { organisationName } = props;
+    const { t } = useTranslation();
+
+    const [organisationNameInput, setOrganisationNameInput] = useState(
+        organisationName ? organisationName : screenData.Other?.organisationName
+    );
+
+    const onNext = useCallback(() => {
+        void nextScreen({
+            screenId: 'Custom',
+            values: { organisationName: organisationNameInput },
+            // isAccountExist: true,
+        });
+    }, [organisationNameInput, nextScreen]);
+
+    const onIconPress = useCallback(() => {
+        navigate(-1);
+        resetScreenData();
+    }, [navigate, resetScreenData]);
+
+    const onPrevious = useCallback(() => {
+        void previousScreen({
+            screenId: 'Custom',
+            values: { organisationName: organisationNameInput },
+            // isAccountExist: true,
+        });
+    }, [organisationNameInput, previousScreen]);
+
+    return (
+        <WorkflowCard>
+            <WorkflowCardHeader title="Custom Screen" onIconPress={onIconPress} icon={{ name: 'arrow-back' }} />
+            <WorkflowCardBody>
+                <TextInput
+                    label={t('app:ORGANAIZATION_DETAILS.NAME')}
+                    mode="flat"
+                    value={organisationNameInput}
+                    onChangeText={(value) => setOrganisationNameInput(value)}
+                />
+            </WorkflowCardBody>
+            <WorkflowCardActions
+                showPrevious
+                showNext
+                previousLabel={t('bluiCommon:ACTIONS.BACK')}
+                nextLabel={t('bluiCommon:ACTIONS.OKAY')}
+                currentStep={currentScreen}
+                totalSteps={totalScreens}
+                onNext={onNext}
+                onPrevious={onPrevious}
+            />
+        </WorkflowCard>
+    );
+};

package/template/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 (
+        <>
+            <View style={{ flexDirection: 'row' }}>
+                {debugMode && <Text variant="headlineSmall">DEBUG MODE</Text>}
+                <Spacer />
+                <Button
+                    mode="contained"
+                    onPress={(): void => {
+                        setDebugMode(!debugMode);
+                    }}
+                >
+                    DEBUG
+                </Button>
+            </View>
+            {debugMode && (
+                <View style={{ paddingBottom: 2 }}>
+                    <Button
+                        mode={'text'}
+                        labelStyle={{ fontSize: 16 }}
+                        uppercase={false}
+                        onPress={(): void => {
+                            navigation.navigate('RegistrationProviderExample', { screen: 'RegisterInvite' });
+                        }}
+                    >
+                        [Test Invite Register]
+                    </Button>
+
+                    <Button
+                        mode={'text'}
+                        labelStyle={{ fontSize: 16 }}
+                        uppercase={false}
+                        onPress={(): void => navigation.navigate('ResetPassword')}
+                    >
+                        [Test Reset Password]
+                    </Button>
+                </View>
+            )}
+        </>
+    );
+};

package/template/src/components/ForgotPasswordScreenBaseExample.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+    ForgotPasswordScreen,
+    AuthContextProvider,
+    ErrorContextProvider,
+} from '@brightlayer-ui/react-native-auth-workflow';
+import { useNavigation } from '@react-navigation/native';
+import { useApp } from '../contexts/AppContextProvider';
+import { ProjectAuthUIActions } from '../actions/AuthUIActions';
+import i18nAppInstance from '../../translations/i18n';
+
+export const ForgotPasswordScreenBaseExample: React.FC = () => {
+    const app = useApp();
+    const navigation = useNavigation();
+
+    return (
+        <AuthContextProvider
+            language={app.language}
+            actions={ProjectAuthUIActions(app)}
+            i18n={i18nAppInstance}
+            navigate={(destination: -1 | string) => {
+                if (typeof destination === 'string') {
+                    navigation.navigate(destination);
+                } else {
+                    navigation.goBack();
+                }
+            }}
+            routeConfig={{
+                LOGIN: 'Home',
+                FORGOT_PASSWORD: undefined,
+                RESET_PASSWORD: undefined,
+                REGISTER_INVITE: undefined,
+                REGISTER_SELF: undefined,
+                SUPPORT: undefined,
+            }}
+        >
+            <ErrorContextProvider>
+                <ForgotPasswordScreen />
+            </ErrorContextProvider>
+        </AuthContextProvider>
+    );
+};

package/template/src/components/ResetPasswordScreenBaseExample.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AuthContextProvider, ResetPasswordScreen } from '@brightlayer-ui/react-native-auth-workflow';
+import { useApp } from '../contexts/AppContextProvider';
+import { useNavigation } from '@react-navigation/native';
+import { ProjectAuthUIActions } from '../actions/AuthUIActions';
+import i18nAppInstance from '../../translations/i18n';
+
+export const ResetPasswordScreenBaseExample: React.FC = () => {
+    const app = useApp();
+    const navigation = useNavigation();
+
+    return (
+        <AuthContextProvider
+            language={app.language}
+            actions={ProjectAuthUIActions(app)}
+            i18n={i18nAppInstance}
+            navigate={(destination: -1 | string) => {
+                if (typeof destination === 'string') {
+                    navigation.navigate(destination);
+                } else {
+                    navigation.goBack();
+                }
+            }}
+            routeConfig={{
+                LOGIN: 'Home',
+                FORGOT_PASSWORD: undefined,
+                RESET_PASSWORD: undefined,
+                REGISTER_INVITE: undefined,
+                REGISTER_SELF: undefined,
+                SUPPORT: undefined,
+            }}
+        >
+            <ResetPasswordScreen
+                accountParams={{
+                    code: '123',
+                    email: 'test@eaton.com',
+                }}
+            />
+        </AuthContextProvider>
+    );
+};

package/template/src/components/UserMenuExample.tsx

@@ -0,0 +1,117 @@
+import { InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
+import React from 'react';
+import { Avatar } from 'react-native-paper';
+import * as BLUIColors from '@brightlayer-ui/colors';
+import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
+import SelectDropdown from 'react-native-select-dropdown';
+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 } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+const SwapIcon: IconFamily = {
+    family: 'material',
+    name: 'swap-horiz',
+    direction: 'ltr',
+};
+const InvertColorsIcon: IconFamily = {
+    family: 'material',
+    name: 'invert-colors',
+    direction: 'ltr',
+};
+const ExitToAppIcon: IconFamily = {
+    family: 'material',
+    name: 'exit-to-app',
+    direction: 'ltr',
+};
+const LockIcon: IconFamily = {
+    family: 'material',
+    name: 'lock',
+    direction: 'ltr',
+};
+
+type UserMenuExampleProps = {
+    onToggleRTL: () => void;
+    onToggleTheme: () => void;
+};
+
+export const UserMenuExample: React.FC<UserMenuExampleProps> = (props) => {
+    const { onToggleRTL, onToggleTheme } = props;
+    const theme = useExtendedTheme();
+    const { i18n, t } = useTranslation();
+    const navigation = useNavigation<NativeStackNavigationProp<any>>();
+    const app = useApp();
+    const handleLanguageChange = async (newLanguage: string): Promise<any> => {
+        app.setLanguage(newLanguage);
+        void i18n.changeLanguage(newLanguage);
+        try {
+            await AsyncStorage.setItem('userLanguage', newLanguage);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error setting new language:', error);
+        }
+    };
+    const logout = (): void => {
+        LocalStorage.clearAuthCredentials();
+        app.onUserNotAuthenticated();
+    };
+    const changePassword = (): void => {
+        navigation.navigate('ChangePassword');
+    };
+    const languageOptions = [
+        { label: 'English', value: 'en' },
+        { label: 'Spanish', value: 'es' },
+        { label: 'French', value: 'fr' },
+        { label: 'Chinese', value: 'zh' },
+        { label: 'Portuguese', value: 'pt' },
+    ];
+
+    const menuItems: InfoListItemProps[] = [
+        { title: t('USER_MENU.TOGGLE_RTL'), icon: SwapIcon, onPress: (): void => onToggleRTL() },
+        {
+            title: t('USER_MENU.TOGGLE_THEME'),
+            icon: InvertColorsIcon,
+            onPress: (): void => onToggleTheme(),
+        },
+        {
+            title: t('USER_MENU.LANGUAGE'),
+            icon: { name: 'translate' },
+            rightComponent: (
+                <SelectDropdown
+                    defaultValue={languageOptions.find((option) => option.value === i18n.language)}
+                    // eslint-disable-next-line
+                    onSelect={(item) => handleLanguageChange(item.value)}
+                    data={languageOptions}
+                    buttonStyle={{ backgroundColor: theme.colors.background }}
+                    buttonTextStyle={{ color: theme.colors.primary }}
+                    rowTextForSelection={(item) => item.label}
+                    buttonTextAfterSelection={() => {
+                        const selectedLabel = languageOptions.find((option) => option.value === i18n.language)?.label;
+                        return selectedLabel || 'Select Language';
+                    }}
+                />
+            ),
+        },
+        { title: t('USER_MENU.CHANGE_PASSWORD'), icon: LockIcon, onPress: (): void => changePassword() },
+        { title: t('USER_MENU.LOG_OUT'), icon: ExitToAppIcon, onPress: (): void => logout() },
+    ];
+
+    return (
+        <UserMenu
+            menuTitle={'John Smith'}
+            menuSubtitle={'Account Manager'}
+            menuItems={menuItems}
+            avatar={
+                <Avatar.Icon
+                    icon="account-circle"
+                    size={40}
+                    color={BLUIColors.primary[50]}
+                    style={{ backgroundColor: BLUIColors.primary[80] }}
+                />
+            }
+        />
+    );
+};

package/template/src/contexts/AppContextProvider.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+
+export type LoginData = {
+    email: string;
+    rememberMe: boolean;
+};
+
+export type AppContextType = {
+    isAuthenticated: boolean;
+    loginData: LoginData;
+    onUserAuthenticated: (args: { email: string; userId: string; rememberMe: boolean }) => void;
+    onUserNotAuthenticated: (clearRememberMe?: boolean, overrideRememberMeEmail?: string) => void;
+    language: string;
+    setLanguage: (language: string) => void;
+    setLoginData: (args: LoginData) => void;
+    setAuthenticated: (isAuthenticated: boolean) => void;
+};
+
+export const AppContext = createContext<AppContextType | null>(null);
+
+export const useApp = (): AppContextType => {
+    const context = useContext(AppContext);
+
+    if (context === null) {
+        throw new Error('useApp must be used within a AppContextProvider');
+    }
+    return context;
+};

package/template/src/contexts/ThemeContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export type ThemeType = 'light' | 'dark';
+
+type ThemeContextType = {
+    theme: ThemeType;
+    setTheme: (themeName: ThemeType) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+    theme: 'light',
+    setTheme: () => {},
+});
+
+export const useThemeContext = (): ThemeContextType => useContext(ThemeContext);

package/template/src/navigation/index.tsx

@@ -1,37 +1,220 @@
 import React, { ReactNode } from 'react';
+import { NavigationContainer, createNavigationContainerRef, useNavigation } from '@react-navigation/native';
+import { useApp } from '../contexts/AppContextProvider';
+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 { View } from 'react-native';
-import { NavDrawerProps, NavigationDrawer } from './navigation-drawer';
-import { createStackNavigator } from '@react-navigation/stack';
-import Home from '../screens/home';
-import PageOne from '../screens/pageOne';
-import PageTwo from '../screens/pageTwo';
+import { Dimensions, View } from 'react-native';
 
+import { ProjectAuthUIActions } from '../actions/AuthUIActions';
+import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions';
+
+import { Login } from '../screens/Login';
+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, createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
 const Drawer = createDrawerNavigator();
+const navigationRef = createNavigationContainerRef();
 
 export type RootStackParamList = {
-    Home: undefined;
-    PageOne: undefined;
-    PageTwo: undefined;
+    Homepage: undefined;
+    Dashboard: undefined;
+    Locations: undefined;
     NavigationDrawer: undefined;
 };
 
-const RootStack = createStackNavigator<RootStackParamList>();
-
 const CustomDrawerContent = (props: any): any => (
     <View style={{ height: '100%' }}>
         <NavigationDrawer {...props} />
     </View>
 );
 
-export const MainRouter = (): any => (
-    <Drawer.Navigator
-        initialRouteName="Home"
-        drawerStyle={{ backgroundColor: 'transparent', width: 300, maxWidth: '80%' }}
-        drawerContent={(props: NavDrawerProps): ReactNode => <CustomDrawerContent {...props} />}
-    >
-        <RootStack.Screen name="Home" component={Home} />
-        <RootStack.Screen name="PageOne" component={PageOne} />
-        <RootStack.Screen name="PageTwo" component={PageTwo} />
-    </Drawer.Navigator>
-);
+const AuthRouter = (): any => {
+    const app = useApp();
+    const { email, rememberMe } = app.loginData;
+    const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
+    return (
+        <>
+            <AuthContextProvider
+                language={app.language}
+                actions={ProjectAuthUIActions(app)}
+                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();
+                    }
+                }}
+                routeConfig={{
+                    LOGIN: 'Login',
+                    FORGOT_PASSWORD: 'ForgotPassword',
+                    RESET_PASSWORD: 'ResetPassword',
+                    REGISTER_INVITE: 'RegisterInvite',
+                    REGISTER_SELF: 'SelfRegister',
+                    SUPPORT: 'ContactSupport',
+                }}
+                rememberMeDetails={{ email: rememberMe ? email : '', rememberMe: rememberMe }}
+            >
+                <Drawer.Navigator
+                    screenOptions={{
+                        headerShown: false,
+                        drawerType: 'front',
+                        drawerStyle: { backgroundColor: 'transparent' },
+                    }}
+                    drawerContent={(props: any): ReactNode => <CustomDrawerContent {...props} />}
+                    backBehavior="history"
+                    initialRouteName="Login"
+                >
+                    {!app.isAuthenticated && (
+                        <Drawer.Screen
+                            options={{
+                                swipeEnabled: false,
+                            }}
+                            name="Login"
+                            component={Login}
+                        />
+                    )}
+                    {!app.isAuthenticated && (
+                        <Drawer.Screen
+                            options={{
+                                swipeEnabled: false,
+                            }}
+                            name="ForgotPassword"
+                            component={ForgotPasswordScreen}
+                        />
+                    )}
+                    {!app.isAuthenticated && (
+                        <Drawer.Screen
+                            options={{
+                                swipeEnabled: false,
+                            }}
+                            name="ResetPassword"
+                            component={ResetPasswordScreen}
+                        />
+                    )}
+
+                    {app.isAuthenticated && <Drawer.Screen name="Homepage" component={Homepage} />}
+                    {app.isAuthenticated && <Drawer.Screen name="Dashboard" component={Dashboard} />}
+                    {app.isAuthenticated && <Drawer.Screen name="Locations" component={Locations} />}
+
+                    <Drawer.Screen
+                        name="ContactSupport"
+                        options={{
+                            swipeEnabled: false,
+                        }}
+                        component={ContactSupportScreen}
+                    />
+                    {app.isAuthenticated && (
+                        <Drawer.Screen
+                            name="ChangePassword"
+                            options={{
+                                swipeEnabled: false,
+                            }}
+                            component={ChangePassword}
+                        />
+                    )}
+                </Drawer.Navigator>
+            </AuthContextProvider>
+        </>
+    );
+};
+
+const RegistrationRouter = (): any => {
+    const app = useApp();
+    const navigation = useNavigation<NativeStackNavigationProp<any>>();
+    const RegistrationStack = createNativeStackNavigator();
+
+    return (
+        <>
+            <RegistrationContextProvider
+                language={app.language}
+                actions={ProjectRegistrationUIActions()}
+                i18n={i18nAppInstance}
+                routeConfig={{
+                    LOGIN: 'Login',
+                    FORGOT_PASSWORD: 'ForgotPassword',
+                    RESET_PASSWORD: 'ResetPassword',
+                    REGISTER_INVITE: 'RegisterInvite',
+                    REGISTER_SELF: 'SelfRegister',
+                    SUPPORT: 'ContactSupport',
+                }}
+                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();
+                    }
+                }}
+            >
+                <RegistrationStack.Navigator
+                    screenOptions={{
+                        headerShown: false,
+                    }}
+                    initialRouteName="SelfRegister"
+                >
+                    {!app.isAuthenticated && (
+                        <RegistrationStack.Screen
+                            name="SelfRegister"
+                            component={Registration}
+                        ></RegistrationStack.Screen>
+                    )}
+                    {!app.isAuthenticated && (
+                        <RegistrationStack.Screen
+                            name="RegisterInvite"
+                            component={RegistrationInvite}
+                        ></RegistrationStack.Screen>
+                    )}
+                </RegistrationStack.Navigator>
+            </RegistrationContextProvider>
+        </>
+    );
+};
+export const MainRouter = (): any => {
+    const { height, width } = Dimensions.get('screen');
+    return (
+        <NavigationContainer ref={navigationRef}>
+            <Stack.Navigator
+                initialRouteName={'AuthProviderExample'}
+                screenOptions={{
+                    headerShown: false,
+                    orientation: width >= 768 && height >= 768 ? 'all' : 'portrait',
+                }}
+            >
+                <Stack.Screen name="AuthProviderExample" component={AuthRouter} />
+                <Stack.Screen name="RegistrationProviderExample" component={RegistrationRouter} />
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
+};