mg-library 1.0.632 → 1.0.634

package/blocks.js

@@ -1,6 +1,6 @@
 import { useCallback, useState, useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
-import { View, ActivityIndicator, Pressable, Image, FlatList, Keyboard, Dimensions } from 'react-native';
+import { View, ActivityIndicator, Pressable, Image, FlatList, Keyboard, Dimensions, TextInput, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import * as ImageManipulator from 'expo-image-manipulator';
 import { Camera, CameraType, CameraView } from 'expo-camera';
@@ -159,7 +159,7 @@ export function MGBenefits(props) {
 
 }
 
-export function MGLogin(props) {
+/* export function MGLogin(props) {
 
     const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
 
@@ -245,7 +245,7 @@ export function MGLogin(props) {
                             <Controller
                                 control={control}
                                 rules={{ maxLength: 50 }}
-                                render={({ field: { onChange, value } }) => (
+                                render={({ field: { onChange, value } }) => (                       
                                     <NBInput
                                         size="lg"
                                         py={3}
@@ -297,6 +297,164 @@ export function MGLogin(props) {
         </View>
     );
 
+} */
+
+const nbStyles = StyleSheet.create({
+    input: {
+        height: 50,
+        borderWidth: 1,
+        borderColor: '#ccc',
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        fontSize: 16,
+        backgroundColor: 'white'
+    }
+});
+
+export function MGLogin(props) {
+
+    const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+
+    const { control, handleSubmit, formState: { errors } } = useForm({
+        defaultValues: props.defaultValues,
+    });
+
+    useEffect(() => {
+        Keyboard.addListener("keyboardDidShow", () => setIsKeyboardVisible(true));
+        Keyboard.addListener("keyboardDidHide", () => setIsKeyboardVisible(false));
+        return () => {
+            Keyboard.removeAllListeners("keyboardDidShow");
+            Keyboard.removeAllListeners("keyboardDidHide");
+        };
+    }, []);
+
+    const insets = useSafeAreaInsets();
+
+    let cardHeader = (
+        <View>
+            <MGText category='h6' style={{ alignSelf: 'center', color: props.colors.primary['500'] }}>{mgFunctionsLib.i18nString('credentials', props.language)}</MGText>
+        </View>
+    );
+
+    const loginIcon = () => (
+        <MaterialCommunityIcons name='logout' color='white' size={20} />
+    );
+
+    let cardFooter = (
+        <View>
+            <NBButton
+                py={4} colorScheme="primary"
+                leftIcon={
+                    <NBIcon as={MaterialCommunityIcons} name="login" size="lg" color="white" />
+                }
+                onPress={handleSubmit((data) => {
+                    props.setNavigator(undefined);
+                    mgLoginLib.onPressLogin(
+                        props.dispatch,
+                        props.actions,
+                        props.app,
+                        props.apiUrl,
+                        props.language,
+                        data);
+                })}>
+                <MGText category='p1' color='white'>
+                    {mgFunctionsLib.i18nString('login', props.language)}
+                </MGText>
+            </NBButton>
+        </View>
+    );
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Box style={[mgFunctionsLib.safeAreaViewStyleSheet(insets).safeAreaView, { display: 'flex', flexDirection: 'column', flexGrow: 1 }]}>
+                <View style={{ flexDirection: 'column', flexGrow: 1, justifyContent: 'center' }}>
+                    {isKeyboardVisible &&
+                        <View style={{ flexDirection: 'column', alignItems: 'center', marginBottom: 10 }}>
+                            <>
+                                <Image
+                                    source={require('./assets/clubonline.png')}
+                                    style={{ width: 180, height: 90 }} />
+                            </>
+                        </View>
+                    }
+                    {!isKeyboardVisible &&
+                        <View style={{ flexDirection: 'column', alignItems: 'center', marginBottom: 100 }}>
+                            <>
+                                <Image
+                                    source={require('./assets/clubonline.png')}
+                                    style={{ width: 300, height: 150 }} />
+                                <View style={{ marginHorizontal: 10, flexDirection: 'column', alignItems: 'center' }}>
+                                    <MGText style={{ alignSelf: 'center', textAlign: 'center' }} category='h6'>{props.appDescription}</MGText>
+                                    <MGText style={{ alignSelf: 'center' }} category='p2'>{props.appVersion}</MGText>
+                                </View>
+                            </>
+                        </View>
+                    }
+                    <View>
+                        <MGCard style={{ flexDirection: 'column', justifyContent: 'center', alignContent: 'center', marginLeft: 30, marginRight: 30 }}
+                            header={cardHeader}
+                            footer={cardFooter}>
+                            <Controller
+                                control={control}
+                                rules={{ maxLength: 50 }}
+                                render={({ field: { onChange, value } }) => (
+                                    <TextInput
+                                        style={nbStyles.input}
+                                        placeholder={mgFunctionsLib.i18nString('userName', props.language)}
+                                        placeholderTextColor="#888"
+                                        onChangeText={onChange}
+                                        value={value}
+                                    />
+                                )}
+                                name="userName" />
+                            {props.useNumericKeyboardOnPassword &&
+                                <Controller
+                                    control={control}
+                                    rules={{ maxLength: 50 }}
+                                    render={({ field: { onChange, value } }) => (
+                                        <TextInput
+                                            style={nbStyles.input}
+                                            placeholder={mgFunctionsLib.i18nString('password', props.language)}
+                                            placeholderTextColor="#888"
+                                            onChangeText={onChange}
+                                            value={value}
+                                            secureTextEntry
+                                            maxLength={12}
+                                            keyboardType="numeric"
+                                            autoCapitalize="none"
+                                            autoCorrect={false}
+                                            returnKeyType="done"
+                                        />
+                                    )}
+                                    name='password' />
+                            }
+                            {!props.useNumericKeyboardOnPassword &&
+                                <Controller
+                                    control={control}
+                                    rules={{ maxLength: 50 }}
+                                    render={({ field: { onChange, value } }) => (
+                                        <TextInput
+                                            style={nbStyles.input}
+                                            placeholder={mgFunctionsLib.i18nString('password', props.language)}
+                                            placeholderTextColor="#888"
+                                            onChangeText={onChange}
+                                            value={value}
+                                            secureTextEntry
+                                            maxLength={12}
+                                            autoCapitalize="none"
+                                            autoCorrect={false}
+                                            returnKeyType="done"
+                                        />
+                                    )}
+                                    name="password" />
+                            }
+                        </MGCard>
+                    </View>
+                </View>
+            </Box>
+        </View>
+    );
+
 }
 
 export function MGCurrentAccount(props) {
@@ -452,7 +610,7 @@ export function MGCamera(props) {
         </View>
     );
     return (
-        <View style={{marginTop: 10}}>
+        <View style={{ marginTop: 10 }}>
             <MGCard header={cardHeader} footer={cardFooter}>
                 <View style={{ alignItems: 'center' }}>
                     <CameraView
@@ -530,7 +688,7 @@ export function MGCameraPreview(props) {
         </View>
     );
     return (
-        <View style={{marginTop: 10}}>
+        <View style={{ marginTop: 10 }}>
             <MGCard header={cardHeader} footer={cardFooter}>
                 <View style={{ alignItems: 'center' }}>
                     <Image source={{ uri: props.process.fileUri }} style={{ width: 200, height: 200 }} />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mg-library",
-    "version": "1.0.632",
+    "version": "1.0.634",
     "description": "",
     "main": "index.js",
     "scripts": {