@jescon-technologies/react-native-ui-kit 0.0.14 → 0.0.15

package/src/Layout/LoginLayout.tsx

@@ -1,711 +0,0 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-  Dimensions,
-  StatusBar,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  Animated,
-  TextInput,
-  BackHandler,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-import { APIURL } from '../../../../../src/Common/apiConstants';
-import { Global } from '../../../../../src/Common/Global';
-import NotificationContext from '../../../../../src/Handlers/NoticationsContext';
-import moment from 'moment';
-import axios, { AxiosResponse } from 'axios';
-import { HIcons, useNavigation, normalize, isNU, getLoading, NetworkServiceCall, ABlink } from '@jescon-technologies/react-native-ui-kit';
-
-// Types and Interfaces
-interface HospitalData {
-  hospitalname?: string;
-  hospitaladdress?: string;
-  hospitallogo2?: string;
-}
-
-interface UserData {
-  loginstatus: boolean;
-  suuser?: string;
-  facerecognition?: boolean;
-  hrenemp?: string;
-  qrscan?: string;
-  [key: string]: any;
-}
-
-interface OptionList {
-  [key: string]: any;
-}
-
-interface Notification {
-  [key: string]: any;
-}
-
-interface LoginResponse {
-  httpstatus: number;
-  data: {
-    userdata: UserData;
-    optionList: OptionList;
-    notifications: Notification[];
-  };
-}
-
-interface JWTAuthResponse {
-  data: string;
-  status: number;
-}
-
-interface NetworkResponse {
-  httpstatus: number;
-  data: {
-    userdata: UserData;
-    optionList: OptionList;
-    notifications: Notification[];
-  };
-}
-
-interface LoginLayoutProps {
-  loader: (isLoading: boolean) => void;
-}
-
-interface GlobalType {
-  hospitallogo?: string[];
-  hospitalcode?: number;
-  HospitalData?: HospitalData;
-  InstallationKey?: string;
-  AppTheme: {
-    primary_color: string;
-  };
-  version?: string;
-  module?: string;
-  userData?: UserData;
-  userOptionList?: OptionList;
-  PatientDetails?: any;
-  LoginTime?: moment.Moment;
-  JWTToken?: string;
-}
-
-// Extend Global with proper typing
-declare module '../Common/Global' {
-  export const Global: GlobalType;
-}
-
-export default function LoginLayout(props: LoginLayoutProps): React.JSX.Element {
-  let clearing: TextInput | null = null;
-  const [username, setUsername] = useState<string>('');
-  const [password, setPassword] = useState<string>('');
-  const [toastMsg, setToastMsg] = useState<string>('');
-  const [showAlert, setShowAlert] = useState<boolean>(false);
-  const [secureText, setSecureText] = useState<boolean>(true);
-  const [refresh, setRefresh] = useState<number>(0);
-  const [response, setResponse] = useState<LoginResponse | boolean>(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();
-  }, [fadeAnim, translateY, inputTranslateX]);
-
-  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, fadeAnim]);
-
-  const clearAlert = (): void => {
-    Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration: 300,
-      useNativeDriver: true,
-    }).start(() => setShowAlert(false));
-  };
-
-  useEffect(() => {
-    const backAction = (): boolean => {
-      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, refresh]);
-
-  function actionLogin(response: LoginResponse): void {
-    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);
-    navigation.navigate('Dashboard');
-    props.loader(false);
-  }
-
-  function actionSubmit(): void {
-    console.log('Hello there2');
-    setResponse(false);
-    if (
-      username != null &&
-      username.length > 0 &&
-      password != null &&
-      password.length > 0
-    ) {
-      let buttonapi = `${APIURL}hislogin/login/UserLogin2 ${username},${password},${Global.version},${Global.module}`;
-      console.log('..................Login..............', buttonapi);
-      NetworkServiceCall('get', buttonapi, '').then(function (response: NetworkResponse) {
-        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: string): void {
-    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: NetworkResponse,
-      ) {
-        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: boolean) => props.loader(false));
-  }
-
-  function actionJWT(): void {
-    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: AxiosResponse<JWTAuthResponse>) {
-          if (response.status == 200) {
-            console.log('success', response.data);
-            Global.JWTToken = response.data as unknown as string;
-            if (response.data) {
-              actionSubmitNew(response.data as unknown as string);
-            } 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: Error) {
-          console.error('JWT Auth Error:', 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);
-    }
-  }
-
-  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>
-            <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),
-                    fontWeight: 'bold',
-                    textAlign: 'center',
-                  } as TextStyle}>
-                  {Global.HospitalData != undefined
-                    ? Global.HospitalData.hospitalname
-                    : ''}
-                </Text>
-              </ABlink>
-            ) : (
-              <Text
-                style={{
-                  fontSize: normalize(12),
-                  color: '#616161',
-                  marginTop: normalize(5),
-                  fontWeight: 'bold',
-                  textAlign: 'center',
-                } as TextStyle}>
-                {Global.HospitalData != undefined
-                  ? Global.HospitalData.hospitalname
-                  : ''}
-              </Text>
-            )}
-            <Text
-              style={{
-                fontSize: normalize(12),
-                marginTop: -2,
-                textAlign: 'center',
-              } as TextStyle}>
-              {Global.HospitalData != undefined
-                ? Global.HospitalData.hospitaladdress
-                : ''}
-            </Text>
-          </View>
-
-          <View>
-            <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}>
-            <HIcons.FontAwesome
-              name={'user'}
-              color="#094485"
-              size={normalize(25)}
-            />
-            <TextInput
-              style={styles.input}
-              placeholder="User ID"
-              placeholderTextColor="#c0c0c0"
-              autoCapitalize="none"
-              keyboardType={'numeric'}
-              onChangeText={(text: string) => setUsername(text)}
-            />
-          </View>
-          <View style={styles.inputView}>
-            <HIcons.FontAwesome
-              name={'lock'}
-              color="#094485"
-              size={normalize(27)}
-            />
-            <TextInput
-              ref={(input: TextInput | null) => { clearing = input; }}
-              style={styles.input}
-              placeholder="Password"
-              placeholderTextColor="#c0c0c0"
-              secureTextEntry={secureText}
-              autoCapitalize="none"
-              onChangeText={(text: string) => setPassword(text)}
-            />
-            <HIcons.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%',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-              onPress={() =>
-                Global.InstallationKey != '123@jwt' &&
-                  Global.InstallationKey != '123@JWT'
-                  ? actionSubmit()
-                  : actionJWT()
-              }>
-              <Text style={styles.loginButtonText}>Login</Text>
-            </TouchableOpacity>
-          </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}>
-              <HIcons.FontAwesome
-                name={'exclamation-circle'}
-                color={'#e74c3c'}
-                size={normalize(16)}
-              />
-              <Text numberOfLines={2} style={styles.alertText}>
-                {toastMsg}
-              </Text>
-              <TouchableOpacity onPress={clearAlert}>
-                <HIcons.FontAwesome
-                  name={'times'}
-                  color={'#7f8c8d'}
-                  size={normalize(14)}
-                />
-              </TouchableOpacity>
-            </View>
-          </Animated.View>
-        )}
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-}
-
-const { width, height } = Dimensions.get('window');
-
-interface Styles {
-  container: ViewStyle;
-  formContainer: ViewStyle;
-  inputView: ViewStyle;
-  input: TextStyle;
-  loginButton: ViewStyle;
-  loginButtonText: TextStyle;
-  forgotPasswordContainer: ViewStyle;
-  forgotPasswordText: TextStyle;
-  alertContainer: ViewStyle;
-  alertContent: ViewStyle;
-  alertText: TextStyle;
-  alert_msg_text: TextStyle;
-}
-
-const styles = StyleSheet.create<Styles>({
-  container: {
-    flexGrow: 1,
-    backgroundColor: '#ffffff',
-    padding: normalize(15),
-  },
-  formContainer: {
-    marginTop: normalize(25),
-    width: '100%',
-  },
-  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,
-  },
-  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),
-  },
-  alert_msg_text: {
-    color: 'red',
-    fontSize: normalize(14),
-    fontWeight: '700',
-  },
-});