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

package/template/src/screens/Dashboard.tsx

@@ -0,0 +1,137 @@
+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__';
+import { DrawerActions } from '@react-navigation/native';
+
+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<RootStackParamList, 'Dashboard'>;
+};
+
+const toggleRTL = (): void => {
+    if (I18nManager.isRTL) {
+        I18nManager.forceRTL(false);
+    } else {
+        I18nManager.forceRTL(true);
+    }
+    RNRestart.Restart();
+};
+const Dashboard: React.FC<AppProps> = ({ 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 (
+        <>
+            <Header
+                title={`${t('DRAWER_MENU.DASHBOARD')}`}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.dispatch(DrawerActions.openDrawer());
+                }}
+                actionItems={[
+                    {
+                        icon: { name: 'more' },
+                        onPress: (): void => {},
+                        component: (
+                            <UserMenuExample
+                                onToggleRTL={toggleRTL}
+                                onToggleTheme={(): void => setTheme(themeType === 'light' ? 'dark' : 'light')}
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView
+                    contentContainerStyle={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <EmptyState
+                        icon={Event}
+                        title={`${t('DRAWER_MENU.DASHBOARD')}`}
+                        description={`${t('PAGE_DETAILS.AUTHORISED_MESSAGE')}`}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default Dashboard;

package/template/src/screens/Homepage.tsx

@@ -0,0 +1,135 @@
+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__';
+import { DrawerActions } from '@react-navigation/native';
+
+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<RootStackParamList, 'Homepage'>;
+};
+
+const toggleRTL = (): void => {
+    if (I18nManager.isRTL) {
+        I18nManager.forceRTL(false);
+    } else {
+        I18nManager.forceRTL(true);
+    }
+    RNRestart.Restart();
+};
+export const Homepage: React.FC<AppProps> = ({ 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 (
+        <>
+            <Header
+                title={`${t('TOOLBAR_MENU.HOME_PAGE')}`}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.dispatch(DrawerActions.openDrawer());
+                }}
+                actionItems={[
+                    {
+                        icon: { name: 'more' },
+                        onPress: (): void => {},
+                        component: (
+                            <UserMenuExample
+                                onToggleRTL={toggleRTL}
+                                onToggleTheme={(): void => setTheme(themeType === 'light' ? 'dark' : 'light')}
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView
+                    contentContainerStyle={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <EmptyState
+                        icon={Event}
+                        title={`${t('TOOLBAR_MENU.HOME_PAGE')}`}
+                        description={`${t('PAGE_DETAILS.AUTHORISED_MESSAGE')}`}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};

package/template/src/screens/Locations.tsx

@@ -0,0 +1,137 @@
+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__';
+import { DrawerActions } from '@react-navigation/native';
+
+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<RootStackParamList, 'Locations'>;
+};
+
+const toggleRTL = (): void => {
+    if (I18nManager.isRTL) {
+        I18nManager.forceRTL(false);
+    } else {
+        I18nManager.forceRTL(true);
+    }
+    RNRestart.Restart();
+};
+const Locations: React.FC<AppProps> = ({ 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 (
+        <>
+            <Header
+                title={`${t('DRAWER_MENU.LOCATIONS')}`}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.dispatch(DrawerActions.openDrawer());
+                }}
+                actionItems={[
+                    {
+                        icon: { name: 'more' },
+                        onPress: (): void => {},
+                        component: (
+                            <UserMenuExample
+                                onToggleRTL={toggleRTL}
+                                onToggleTheme={(): void => setTheme(themeType === 'light' ? 'dark' : 'light')}
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView
+                    contentContainerStyle={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <EmptyState
+                        icon={Event}
+                        title={`${t('DRAWER_MENU.LOCATIONS')}`}
+                        description={`${t('PAGE_DETAILS.AUTHORISED_MESSAGE')}`}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default Locations;

package/template/src/screens/Login.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+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<React.PropsWithChildren<LoginScreenProps>> = () => (
+    <LoginScreen
+        projectImage={
+            <Image
+                style={{ width: '100%' }}
+                resizeMode="contain"
+                source={require('../assets/images/eaton_stacked_logo.png')}
+            />
+        }
+        header={<DebugComponent />}
+    />
+);

package/template/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 = () => <RegistrationWorkflow />;

package/template/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 = () => (
+    <RegistrationWorkflow isInviteRegistration initialRegistrationParams={{ code: '123', email: 'aa@aa.aa' }} />
+);

package/template/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';

package/template/src/store/local-storage.ts

@@ -30,21 +30,21 @@ async function readAuthData(): Promise<AuthData> {
     return {
         userId: userData.userId,
         email: userData.user,
-        rememberMeData: rememberMeData,
+        rememberMeData,
     };
 }
 
 function saveAuthCredentials(user: string, userId: string): void {
     const userData = {
-        user: user,
-        userId: userId,
+        user,
+        userId,
     };
     void window.localStorage.setItem(LOCAL_USER_DATA, JSON.stringify(userData));
 }
 function saveRememberMeData(user: string, rememberMe: boolean): void {
     const RememberMeData = {
         user: rememberMe ? user : '',
-        rememberMe: rememberMe,
+        rememberMe,
     };
     void window.localStorage.setItem(REMEMBER_ME_DATA, JSON.stringify(RememberMeData));
 }

package/template/translations/dictionary/chinese.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: '標題',
+            DASHBOARD: '儀表板',
+            LOCATIONS: '地點',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: '主頁',
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: '授權留言',
+        },
+        USER_MENU: {
+            LOG_OUT: '登出',
+            CHANGE_PASSWORD: '更改密碼',
+            MY_ACCOUNT: '我的賬戶',
+            TOGGLE_RTL: '切换 RTL',
+            TOGGLE_THEME: '切换主题',
+            LANGUAGE: '语言',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: '机构名称',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/english.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: 'Title',
+            DASHBOARD: 'Dashboard',
+            LOCATIONS: 'Locations',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: 'Home Page',
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: 'Authorised Message',
+        },
+        USER_MENU: {
+            LOG_OUT: 'Log out',
+            CHANGE_PASSWORD: 'Change Password',
+            MY_ACCOUNT: 'My Account',
+            TOGGLE_RTL: 'Toggle RTL',
+            TOGGLE_THEME: 'Toggle Theme',
+            LANGUAGE: 'Language',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: 'Organisation Name',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/french.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: 'Titre',
+            DASHBOARD: 'Tableau de bord',
+            LOCATIONS: 'Emplacements',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: "Page d'accueil",
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: 'Authorised Message',
+        },
+        USER_MENU: {
+            LOG_OUT: 'Se déconnecter',
+            CHANGE_PASSWORD: 'changer le mot de passe',
+            MY_ACCOUNT: 'Mon compte',
+            TOGGLE_RTL: 'basculer RTL',
+            TOGGLE_THEME: 'basculer le thème',
+            LANGUAGE: 'Langue',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: 'Nom de lorganisme',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/index.ts

@@ -0,0 +1,19 @@
+import english from './english';
+import french from './french';
+import spanish from './spanish';
+import chinese from './chinese';
+import portuguese from './portuguese';
+
+export { default as english } from './english';
+export { default as french } from './french';
+export { default as spanish } from './spanish';
+export { default as chinese } from './chinese';
+export { default as portuguese } from './portuguese';
+
+export const AppDictionaries = {
+    english: english,
+    french: french,
+    spanish: spanish,
+    chinese: chinese,
+    portuguese: portuguese,
+};

package/template/translations/dictionary/portuguese.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: 'Título',
+            DASHBOARD: 'Painel',
+            LOCATIONS: 'Localizações',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: 'Pagina inicial',
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: 'Mensagem Autorizada',
+        },
+        USER_MENU: {
+            LOG_OUT: 'Sair',
+            CHANGE_PASSWORD: 'alterar a senha',
+            MY_ACCOUNT: 'Minha conta',
+            TOGGLE_RTL: 'Alternar RTL',
+            TOGGLE_THEME: 'Alternar tema',
+            LANGUAGE: 'Linguagem ',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: 'Nome da organização',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/spanish.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: 'Título',
+            DASHBOARD: 'Panel',
+            LOCATIONS: 'Ubicaciones',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: 'Página de inicio',
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: 'Mensaje autorizado',
+        },
+        USER_MENU: {
+            LOG_OUT: 'Cerrar sesión',
+            CHANGE_PASSWORD: 'cambiar la contraseña',
+            MY_ACCOUNT: 'Mi cuenta',
+            TOGGLE_RTL: 'Alternar RTL',
+            TOGGLE_THEME: 'Alternar tema',
+            LANGUAGE: 'Idioma',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: 'nombre de la organización',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/types.ts

@@ -0,0 +1,27 @@
+export type AppTranslations = {
+    DRAWER_MENU: {
+        TITLE: string;
+        DASHBOARD: string;
+        LOCATIONS: string;
+    };
+    TOOLBAR_MENU: {
+        HOME_PAGE: string;
+    };
+    PAGE_DETAILS: {
+        AUTHORISED_MESSAGE: string;
+    };
+    USER_MENU: {
+        LOG_OUT: string;
+        CHANGE_PASSWORD: string;
+        MY_ACCOUNT: string;
+        TOGGLE_RTL: string;
+        TOGGLE_THEME: string;
+        LANGUAGE: string;
+    };
+    ORGANAIZATION_DETAILS: {
+        NAME: string;
+    };
+};
+export type AppTranslationsFile = {
+    translation: AppTranslations;
+};