@jescon-technologies/react-native-ui-kit 0.0.1

package/src/layout/INVLoginLayout.js

@@ -0,0 +1,658 @@
+import React, { useState, useEffect, useContext } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+  StatusBar,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Animated,
+  TextInput,
+} from 'react-native';
+import { APIURL, BASE_URL, imageURL } from '../Common/apiConstants';
+import { Global } from '../Common/Global';
+import Icons from '../Common/Icons';
+import { normalize } from '../CommonStyle/componentStyle';
+import NotificationContext from '../Handlers/NoticationsContext';
+import moment from 'moment';
+import axios from 'axios';
+import { getLoading, isNU } from '../CommonStyle/ComponentFunctions';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import ABlink from '../Alerts/ABlink';
+import { BackHandler } from 'react-native';
+// import BiometricModal from 'react-native-biometric-verifier';
+import { useNavigation } from '../Navigation/useNavigation';
+
+export default function INVLoginLayout(props) {
+  var clearing;
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [toastMsg, setToastMsg] = useState('');
+  const [showAlert, setShowAlert] = useState(false);
+  const [secureText, setSecureText] = useState(true);
+  const [refresh, setRefresh] = useState(0);
+  const [response, setResponse] = useState(false);
+  const navigation = useNavigation()
+
+  // Animation values
+  const fadeAnim = useState(new Animated.Value(0))[0];
+  const translateY = useState(new Animated.Value(30))[0];
+  const inputTranslateX = useState(new Animated.Value(-50))[0];
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 800,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 800,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    // Sequential animation for inputs
+    Animated.stagger(200, [
+      Animated.timing(inputTranslateX, {
+        toValue: 0,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  useEffect(() => {
+    if (clearing) clearing.clear();
+    setPassword('');
+  }, [refresh]);
+
+  const NoticationData = React.useContext(NotificationContext);
+
+  // Alert animation
+  useEffect(() => {
+    if (showAlert) {
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [showAlert]);
+
+  const clearAlert = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => setShowAlert(false));
+  };
+
+  useEffect(() => {
+    const backAction = () => {
+      setRefresh(refresh + 1);
+      setResponse(false);
+      navigation.goBack();
+      // Returning true means you handled the back press
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+    return () => backHandler.remove();
+  }, [navigation]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}>
+      <ScrollView contentContainerStyle={styles.container}>
+        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
+
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
+          <View style={{}}>
+            <Image
+              style={{
+                width: normalize(60),
+                height: normalize(60),
+                resizeMode: 'contain',
+              }}
+              source={{
+                uri:
+                  Global.hospitallogo != undefined
+                    ? Global.hospitallogo[1]
+                    : '',
+              }}
+            />
+          </View>
+
+          <View>
+            {Global.hospitalcode == 2 || Global.hospitalcode == 4 ? (
+              <ABlink>
+                <Text
+                  style={{
+                    fontSize: normalize(12),
+                    color: '#616161',
+                    marginTop: normalize(5),
+                    // width: normalize(150),
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                  }}>
+                  {Global.HospitalData != undefined
+                    ? Global.HospitalData.hospitalname
+                    : ''}
+                </Text>
+              </ABlink>
+            ) : (
+              <Text
+                style={{
+                  fontSize: normalize(12),
+                  color: '#616161',
+                  marginTop: normalize(5),
+                  // width: normalize(150),
+                  fontWeight: 'bold',
+                  textAlign: 'center',
+                }}>
+                {Global.HospitalData != undefined
+                  ? Global.HospitalData.hospitalname
+                  : ''}
+              </Text>
+            )}
+            <Text
+              style={{
+                fontSize: normalize(12),
+                marginTop: -2,
+                textAlign: 'center',
+              }}>
+              {Global.HospitalData != undefined
+                ? Global.HospitalData.hospitaladdress
+                : ''}
+            </Text>
+          </View>
+
+          <View style={{}}>
+            <Image
+              style={{
+                width: normalize(50),
+                height: normalize(50),
+                resizeMode: 'contain',
+              }}
+              source={{
+                uri:
+                  Global.HospitalData != undefined
+                    ? Global.HospitalData.hospitallogo2
+                    : '',
+              }}
+            />
+          </View>
+        </View>
+
+        <Animated.View
+          style={[
+            styles.formContainer,
+            { opacity: fadeAnim, transform: [{ translateY }] },
+          ]}>
+          <View style={styles.inputView}>
+            <Icons.FontAwesome
+              name={"user"}
+              color='#094485'
+              size={normalize(25)}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder='User ID'
+              placeholderTextColor='#c0c0c0'
+              autoCapitalize='none'
+              keyboardType={'numeric'}
+              onChangeText={username => setUsername(username)}
+            />
+          </View>
+          <View style={styles.inputView}>
+            <Icons.FontAwesome
+              name={"lock"}
+              color='#094485'
+              size={normalize(27)}
+            />
+            <TextInput
+              ref={input => { clearing = input }}
+              style={styles.input}
+              placeholder='Password'
+              placeholderTextColor='#c0c0c0'
+              secureTextEntry={secureText}
+              autoCapitalize='none'
+              onChangeText={password => setPassword(password)}
+            />
+            <Icons.FontAwesome name={secureText ? "eye-slash" : "eye"}
+              onPress={() => setSecureText(!secureText)}
+              color={'grey'}
+              size={normalize(20)}
+              style={{ marginRight: normalize(7) }} />
+          </View>
+
+
+
+          <View
+            style={[
+              styles.loginButton,
+              {
+                width: '100%',
+                backgroundColor: Global.AppTheme.primary_color,
+                justifyContent: 'center',
+                alignItems: 'center',
+              },
+            ]}>
+
+            <TouchableOpacity
+              style={{
+                width: '100%',
+                ustifyContent: 'center',
+                alignItems: 'center',
+              }}
+
+
+              onPress={() =>
+                Global.InstallationKey != '123@jwt' &&
+                  Global.InstallationKey != '123@JWT'
+                  ? actionSubmit()
+                  : actionJWT()
+              }>
+
+
+              <Text style={styles.loginButtonText}>Login</Text>
+            </TouchableOpacity>
+            {/* {Platform.OS != "web" &&
+              <BiometricModal
+                data={response?.data?.userdata?.hrenemp}
+                apiurl={"http://his.amalaims.org:9090/"}
+                onclose={i => { setResponse(i) }}
+                qrscan={response?.data?.userdata?.qrscan}
+                callback={() => { actionLogin(response) }}
+              />} */}
+          </View>
+          <TouchableOpacity
+            style={styles.forgotPasswordContainer}
+            onPress={() => navigation.navigate('ForgotPassword')}>
+            <Text style={styles.forgotPasswordText}>Change Password?</Text>
+          </TouchableOpacity>
+        </Animated.View>
+
+        {showAlert && (
+          <Animated.View style={[styles.alertContainer, { opacity: fadeAnim }]}>
+            <View style={styles.alertContent}>
+              <Icons.FontAwesome
+                name={'exclamation-circle'}
+                color={'#e74c3c'}
+                size={normalize(16)}
+              />
+              <Text numberOfLines={2} style={styles.alertText}>
+                {toastMsg}
+              </Text>
+              <TouchableOpacity onPress={clearAlert}>
+                <Icons.FontAwesome
+                  name={'times'}
+                  color={'#7f8c8d'}
+                  size={normalize(14)}
+                />
+              </TouchableOpacity>
+            </View>
+          </Animated.View>
+        )}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+
+  function actionLogin(response) {
+    props.loader(true);
+    console.log('LOGIN-------------------RESPONSE', JSON.stringify(response));
+    Global.userData = { ...response.data.userdata };
+    Global.userOptionList = response.data.optionList;
+    Global.PatientDetails = null;
+    Global.LoginTime = moment();
+    props.loader(false);
+    NoticationData.length = 0;
+    NoticationData.push.apply(NoticationData, response.data.notifications);
+    setRefresh(refresh + 1);
+    // navigate('HomeScreen');
+    navigation.navigate('Dashboard');
+    props.loader(false);
+  }
+
+  function actionSubmit() {
+    console.log("Hello there2");
+    setResponse(false);
+    if (
+      username != null &&
+      username.length > 0 &&
+      password != null &&
+      password.length > 0
+    ) {
+      let buttonapi =
+        APIURL +
+        'invget/invcommonget/AMAGDBC01.dbo.UserLogin1 ' +
+        username +
+        ',' +
+        "'" +
+        password +
+        "'" +
+        ',' +
+        1;
+      console.log('..................Login..............', buttonapi);
+      NetworkServiceCall('get', buttonapi, '').then(function (response) {
+        console.log('.................RESPONSE..............', JSON.stringify(response));
+        if (response.httpstatus == 200) {
+          if (
+            response.data.userdata != undefined &&
+            response.data.userdata.loginstatus == true
+          ) {
+            if (response.data.userdata.facerecognition && Platform.OS != "web") {
+              setResponse(response);
+            } else {
+              actionLogin(response);
+            }
+          } else if (
+            response.data.userdata != undefined &&
+            response.data.userdata.loginstatus == false
+          ) {
+            if (isNU(response.data.userdata.suuser)) {
+              setToastMsg(
+                'Please update the app , For Apple Devices,Please Visit Testflight to update',
+                setShowAlert(true, props.loader(false)),
+              );
+            } else {
+              setToastMsg(
+                "The UserID or Password doesn't exist",
+                setShowAlert(true, props.loader(false)),
+              );
+            }
+
+            setTimeout(() => {
+              setShowAlert(false);
+            }, 8000);
+          } else {
+            setToastMsg(
+              "The UserID or Password doesn't exist",
+              setShowAlert(true, props.loader(false)),
+            );
+            setTimeout(() => {
+              setShowAlert(false);
+            }, 3000);
+          }
+        } else {
+          setToastMsg('Network Error', setShowAlert(true, props.loader(false)));
+          setTimeout(() => {
+            setShowAlert(false);
+          }, 3000);
+        }
+      });
+    } else {
+      setToastMsg(
+        'Enter UserID and Password',
+        setShowAlert(true, props.loader(false)),
+      );
+      setTimeout(() => {
+        setShowAlert(false);
+      }, 3000);
+    }
+  }
+
+  function actionSubmitNew(jwttoken) {
+    if (
+      username != null &&
+      username.length > 0 &&
+      password != null &&
+      password.length > 0
+    ) {
+      props.loader(true);
+      let jwt = `Bearer ${jwttoken}`;
+      let buttonapi =
+        APIURL +
+        'emruseroption/option/UserLoginService ' +
+        username +
+        ',' +
+        Global.version;
+      console.log('..................Login..............', buttonapi);
+      console.log('..................Jwt Key..............', jwt);
+      NetworkServiceCall('get', buttonapi, '', jwttoken).then(function (
+        response,
+      ) {
+        console.log('RESPONSEEEEEE JSSOSOOSOSOSNNNN', JSON.stringify(response));
+        if (response.httpstatus == 200) {
+          if (
+            response.data.userdata != undefined &&
+            response.data.userdata.loginstatus == true
+          ) {
+            Global.userData = response.data.userdata;
+            Global.userOptionList = response.data.optionList;
+            Global.PatientDetails = null;
+            Global.LoginTime = moment();
+            props.loader(false);
+            NoticationData.length = 0;
+            NoticationData.push.apply(
+              NoticationData,
+              response.data.notifications,
+            );
+            setRefresh(refresh + 1);
+            navigation.navigate('Dashboard');
+          } else if (
+            response.data.userdata != undefined &&
+            response.data.userdata.loginstatus == false
+          ) {
+            setToastMsg(
+              'Please update the app , For Apple Devices,Please Visit Testflight to update',
+              setShowAlert(true, props.loader(false)),
+            );
+            setTimeout(() => {
+              setShowAlert(false);
+            }, 8000);
+          } else {
+            setToastMsg(
+              "The UserID or Password doesn't exist.",
+              setShowAlert(true, props.loader(false)),
+            );
+            setTimeout(() => {
+              setShowAlert(false);
+            }, 8000);
+          }
+        } else {
+          setToastMsg(
+            'Network Error 404',
+            setShowAlert(true, props.loader(false)),
+          );
+          setTimeout(() => {
+            setShowAlert(false);
+          }, 3000);
+        }
+      });
+    } else {
+      setToastMsg(
+        'Enter UserID and Password',
+        setShowAlert(true, props.loader(false)),
+      );
+      setTimeout(() => {
+        setShowAlert(false);
+      }, 3000);
+    }
+    getLoading(v => props.loader(false));
+  }
+
+  function actionJWT() {
+    console.log("Hello there3");
+    if (
+      username != null &&
+      username.length > 0 &&
+      password != null &&
+      password.length > 0
+    ) {
+      let buttonapi = APIURL + 'auth/authenticate';
+      var PostArr = {
+        username: username,
+        password: password,
+        version: Global.version,
+      };
+      console.log('BUTTON API', JSON.stringify(buttonapi));
+      console.log('OUT', JSON.stringify(PostArr));
+      axios
+        .post(buttonapi, PostArr)
+        .then(function (response) {
+          if (response.status == 200) {
+            console.log('success', response.data);
+            Global.JWTToken = response.data;
+            if (response.data && response.data != 'invalid access') {
+              actionSubmitNew(response.data);
+            } else {
+              setToastMsg(
+                "The UserID or Password doesn't exist",
+                setShowAlert(true),
+              );
+              setTimeout(() => {
+                setShowAlert(false);
+              }, 3000);
+            }
+          } else {
+            setToastMsg('Network Error 404', setShowAlert(true));
+            setTimeout(() => {
+              setShowAlert(false);
+            }, 3000);
+          }
+        })
+        .catch(function (error) {
+          setToastMsg('Network Error 404', setShowAlert(true));
+          setTimeout(() => {
+            setShowAlert(false);
+          }, 3000);
+        });
+    } else {
+      setToastMsg(
+        'Enter UserID and Password',
+        setShowAlert(true, props.loader(false)),
+      );
+      setTimeout(() => {
+        setShowAlert(false);
+      }, 3000);
+    }
+  }
+}
+
+const { width, height } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: '#ffffff',
+    padding: normalize(15),
+  },
+
+  formContainer: {
+    marginTop: normalize(25),
+    width: '100%',
+  },
+  iconContainer: {
+    width: normalize(40),
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#e0e0e0',
+  },
+  eyeIcon: {
+    width: normalize(40),
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loginButton: {
+    height: normalize(40),
+    borderRadius: normalize(10),
+    marginTop: normalize(10),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4,
+    width: '80%',
+  },
+  loginButtonText: {
+    color: '#ffffff',
+    fontWeight: 'bold',
+    fontSize: normalize(14),
+  },
+  forgotPasswordContainer: {
+    alignItems: 'center',
+    marginTop: normalize(15),
+  },
+  forgotPasswordText: {
+    color: Global.AppTheme.primary_color,
+    fontSize: normalize(12),
+    fontWeight: '600',
+  },
+  alertContainer: {
+    position: 'absolute',
+    bottom: normalize(15),
+    left: normalize(15),
+    right: normalize(15),
+    backgroundColor: '#fff',
+    borderRadius: normalize(8),
+    padding: normalize(10),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4,
+    borderLeftWidth: 3,
+    borderLeftColor: '#e74c3c',
+  },
+  alertContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  alertText: {
+    flex: 1,
+    color: '#2c3e50',
+    fontSize: normalize(12),
+    marginLeft: normalize(8),
+    marginRight: normalize(8),
+  },
+  inputView: {
+    height: normalize(40),
+    borderRadius: 10,
+    backgroundColor: '#f1f3f6',
+    marginTop: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    height: normalize(45),
+    flex: 1,
+    fontSize: normalize(15),
+    fontWeight: 'bold',
+    color: 'black',
+
+    paddingHorizontal: 10,
+  },
+  alert_msg_text: {
+    color: 'red',
+    fontSize: normalize(14),
+    fontWeight: '700',
+  },
+});