@jescon-technologies/react-native-ui-kit 0.0.3 → 0.0.5

package/src/Screens/ForgotPassword.js

@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useContext } from 'react'
+import { View, Text, StatusBar, Dimensions, ImageBackground, TouchableOpacity, TouchableHighlight, Image } from 'react-native'
+import { TextInput } from 'react-native-paper'
+import Icons from '../Common/Icons'
+import { normalize } from '../CommonStyle/componentStyle'
+import { getLoading, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions'
+import NetworkServiceCall from '../Common/NetworkServiceCall'
+import { APIURL } from '../../../../../src/Common/apiConstants'
+import Loader from '../Custom/Loader'
+import { Global } from '../../../../../src/Common/Global'
+import axios from 'axios'
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+const image = { uri: 'https://t4.ftcdn.net/jpg/05/19/65/81/360_F_519658132_FkvYwAjuJ8q67PGQUgYLrumVymaJtlZj.jpg' };
+export default function ForgotPassword({ }) {
+    const Navigation = useNavigation()
+    const [stage, setStage] = useState(1)
+    const [text, setText] = useState('')
+    const [msg, setMsg] = useState('')
+    const [isLoading, setIsLoading] = useState(false);
+    const [password, setPassword] = useState({
+        "oldpass": "",
+        "newpass": "",
+        "confirmpass": ""
+    })
+
+    useEffect(() => {
+        setPassword({
+            "newpass": "",
+            "confirmpass": ""
+        })
+        setMsg("")
+    }, [stage])
+
+    function actionJWT() {
+        if ((password.oldpass && text)) {
+
+            let buttonapi = APIURL + "auth/authenticate"
+            var PostArr = {
+                "username": text,
+                "password": password.oldpass,
+            }
+            console.log("FORGOT PASSWORD", 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
+                    }
+                    else {
+                        notifyMessage("Please check old password", 2)
+                    }
+                })
+                .catch(function (error) {
+                    notifyMessage("Error", 3)
+                })
+        }
+    }
+
+
+    const [isPasswordSecure, setIsPasswordSecure] = useState(true);
+    const [isPasswordSecureTwo, setIsPasswordSecureTwo] = useState(true);
+    return (
+        <View style={{ flex: 1, marginTop: StatusBar.currentHeight, backgroundColor: "#fff" }}>
+            <StatusBar translucent backgroundColor="transparent" barStyle={'dark-content'} />
+            <ImageBackground source={image} resizeMode="cover"
+                style={{ flex: 1 }}>
+                <View style={{ height: normalize(50) }}>
+                    <TouchableOpacity
+                        hitSlop={{ left: 10, right: 10, top: 10, bottom: 10 }}
+                        style={{ left: 30, top: 10 }}
+                        onPress={() => stage == 1 ? Navigation.goBack() : setStage(stage - 1)}>
+                        <Icons.FontAwesome5 name={"arrow-left"} color={"black"} size={normalize(20)} />
+                    </TouchableOpacity>
+                </View>
+
+                {stage == 1 ?
+                    <View style={{ flex: 1, alignItems: 'center' }}>
+                        <Icons.FontAwesome5 name={"lock"} color={"black"} size={normalize(50)} />
+                        <Text style={{ fontWeight: 'bold', fontSize: normalize(25) }}>CHANGE</Text>
+                        <Text style={{ fontWeight: 'bold', fontSize: normalize(25) }}>PASSWORD</Text>
+                        <Text style={{ textAlign: 'center', paddingVertical: normalize(10) }}>Provide your account's userid for which you want to reset password.</Text>
+
+                        <TextInput
+                            value={text}
+                            keyboardType={'numeric'}
+                            onChangeText={text => setText(text)}
+                            label="Enter User ID"
+                            autoFocus={true}
+                            left={<TextInput.Icon icon="clock-time-five-outline" iconColor={"purple"}
+                                style={{}} />}
+                            mode="outlined"
+                            style={{ width: Dimensions.get('screen').width * 0.9 }}
+                        />
+
+                        <TouchableHighlight
+                            underlayColor={'lightblue'}
+                            onPress={() => ValueCheck(text) ? setStage(2) : notifyMessage("Please enter required details", 3)}
+                            style={{
+                                width: Dimensions.get('screen').width * 0.9, justifyContent: 'center',
+                                height: normalize(40), backgroundColor: '#FADF00', marginTop: normalize(10), alignItems: 'center'
+                            }}>
+                            <Text style={{ fontWeight: 'bold' }}>NEXT</Text>
+                        </TouchableHighlight>
+                    </View> : null}
+
+                {stage == 2 ?
+                    <View style={{ flex: 1, alignItems: 'center' }}>
+                        <Icons.MaterialCommunityIcons name={"credit-card-lock-outline"} color={"black"} size={normalize(50)} />
+                        <Text style={{ fontWeight: 'bold', fontSize: normalize(25) }}>NEW</Text>
+                        <Text style={{ fontWeight: 'bold', fontSize: normalize(25) }}>CREDENTIALS</Text>
+                        <Text style={{ textAlign: 'center', fontSize: normalize(13) }}>Set your new password , by confirming old password</Text>
+
+                        <View style={{ marginTop: normalize(10) }}>
+                            <TextInput
+                                autoFocus={true}
+                                value={password.oldpass}
+                                secureTextEntry={isPasswordSecure}
+                                onChangeText={text => setPassword({ ...password, "oldpass": text })}
+                                label="Old Password"
+                                onEndEditing={() => actionJWT()}
+                                left={<TextInput.Icon icon="lock" iconColor={"purple"}
+                                    style={{}} />}
+                                right={<TextInput.Icon icon={isPasswordSecure ? "eye-off" : "eye"} iconColor={"purple"}
+                                    onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }} />}
+                                mode="outlined"
+                                style={{ width: Dimensions.get('screen').width * 0.9 }}
+                            />
+                        </View>
+
+                        <View style={{ marginTop: normalize(15) }}>
+                            <Text style={{ alignSelf: 'flex-end', fontWeight: 'bold', color: msg == "Easy" ? 'red' : 'darkblue' }}>{msg}</Text>
+                            <TextInput
+                                value={password.newpass}
+                                secureTextEntry={isPasswordSecure}
+                                onChangeText={text => setPassword({ ...password, "newpass": text })}
+                                onEndEditing={() => checkPasswordStrength(password.newpass)}
+                                label="New Password"
+                                left={<TextInput.Icon icon="lock" iconColor={"purple"}
+                                    style={{}} />}
+                                right={<TextInput.Icon icon={isPasswordSecure ? "eye-off" : "eye"} iconColor={"purple"}
+                                    onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }} />}
+                                mode="outlined"
+                                style={{ width: Dimensions.get('screen').width * 0.9 }}
+                            />
+                        </View>
+
+                        <TextInput
+                            value={password.confirmpass}
+                            secureTextEntry={isPasswordSecureTwo}
+                            onChangeText={text => setPassword({ ...password, "confirmpass": text })}
+                            label="Confirm Password"
+                            left={<TextInput.Icon icon="lock" iconColor={"purple"}
+                                style={{}} />}
+                            right={<TextInput.Icon icon={isPasswordSecureTwo ? "eye-off" : "eye"} iconColor={"purple"}
+                                onPress={() => { isPasswordSecureTwo ? setIsPasswordSecureTwo(false) : setIsPasswordSecureTwo(true) }} />}
+                            mode="outlined"
+                            style={{ width: Dimensions.get('screen').width * 0.9, marginTop: normalize(20) }}
+                        />
+
+                        <TouchableHighlight
+                            underlayColor={'lightblue'}
+                            onPress={() => getUpdate()}
+                            style={{
+                                width: Dimensions.get('screen').width * 0.9, justifyContent: 'center',
+                                height: normalize(40), backgroundColor: '#FADF00', marginTop: normalize(10), alignItems: 'center'
+                            }}>
+                            <Text style={{ fontWeight: 'bold' }}>UPDATE</Text>
+                        </TouchableHighlight>
+                    </View> : null}
+
+                {stage == 3 ?
+                    <View style={{ flex: 1, backgroundColor: "#fff", alignItems: 'center' }}>
+
+                        <Icons.EvilIcons name={"check"} color={"green"} size={normalize(100)} />
+                        <Text style={{ fontWeight: 'bold', fontSize: normalize(20), color: "green" }}>Password Updated</Text>
+                        <Text style={{ textAlign: 'center', fontSize: normalize(14), color: "black", paddingVertical: normalize(5) }}>Your password changed successfully ! Use your new password to log in</Text>
+
+                        <TouchableHighlight
+                            underlayColor={'lightblue'}
+                            onPress={() => { setStage(1), Navigation.goBack() }}
+                            style={{
+                                width: Dimensions.get('screen').width * 0.9, justifyContent: 'center',
+                                height: normalize(40), backgroundColor: '#FADF00', marginTop: normalize(10), alignItems: 'center'
+                            }}>
+                            <Text style={{ fontWeight: 'bold' }}>LOGIN</Text>
+                        </TouchableHighlight>
+                    </View>
+                    : null}
+            </ImageBackground>
+
+            {isLoading ?
+                <Loader displaytext={true} />
+                : null}
+        </View>
+    )
+
+    function getUpdate() {
+        if (password.newpass != ""
+            && password.confirmpass != "") {
+            if (password.newpass == password.confirmpass) {
+
+                var ReqJson = {
+                    "groups": {
+                        "procedurename": "suuserforgetpassword1",
+                        "userid": text,
+                        ...password
+                    }
+                }
+                console.log("Add Component>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>", JSON.stringify(ReqJson))
+                let buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+                console.log("**************************************", JSON.stringify(buttonapi))
+                setIsLoading(true)
+                NetworkServiceCall('post', buttonapi, ReqJson, Global.JWTToken).then(function (response) {
+                    console.log("REPOSNEEEEEEE", JSON.stringify(response))
+                    if (response.httpstatus == 200
+                        && response.data != undefined && response.data != null
+                        && response.data.code != undefined && response.data.code > 0) {
+                        notifyMessage('Password Updated !!!', 1);
+                        setStage(3)
+                        console.log("Password Updated !!!", password.newpass)
+                        setIsLoading(false);
+
+                    } else {
+                        notifyMessage('Password Not Updated !!! Please check old password', 2);
+                        setIsLoading(false);
+                    }
+                })
+
+                getLoading(v => setIsLoading(false))
+
+            } else {
+                notifyMessage("Oops...Passwords does not match each other", 4)
+            }
+        } else {
+            notifyMessage("Please fill out passwords", 3)
+        }
+    }
+
+    function checkPasswordStrength(password) {
+        // Initialize variables
+        var strength = 0;
+        var tips = "";
+
+        // Check password length
+        if (password.length < 8) {
+            tips += "Make the password longer. ";
+        } else {
+            strength += 1;
+        }
+
+        // Check for mixed case
+        if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
+            strength += 1;
+        } else {
+            tips += "Use both lowercase and uppercase letters. ";
+        }
+
+        // Check for numbers
+        if (password.match(/\d/)) {
+            strength += 1;
+        } else {
+            tips += "Include at least one number. ";
+        }
+
+        // Check for special characters
+        if (password.match(/[^a-zA-Z\d]/)) {
+            strength += 1;
+        } else {
+            tips += "Include at least one special character. ";
+        }
+
+
+
+        // Return results
+        if (strength < 2) {
+            return setMsg("Easy", notifyMessage(tips, 5));
+        } else if (strength === 2) {
+            return setMsg("Medium Difficulty", notifyMessage(tips, 5));
+        } else if (strength === 3) {
+            return setMsg("Difficult", notifyMessage(tips, 5));
+        } else {
+            return setMsg("Extremely difficult");
+        }
+    }
+}

package/src/Screens/HeaderBlock.js

@@ -0,0 +1,353 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  StatusBar,
+  Image,
+  TouchableOpacity,
+  Alert,
+  Modal,
+  Dimensions,
+  ScrollView
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Feather from 'react-native-vector-icons/Feather';
+import { Global } from '../../../../../src/Common/Global';
+import CSliderMenu from '../Custom/CSliderMenu';
+import { normalize } from '../CommonStyle/componentStyle';
+import NotificationContext from '../../../../../src/Handlers/NoticationsContext';
+import moment from 'moment';
+import { ValueCheck, isNUQZ } from '../CommonStyle/ComponentFunctions';
+import ABlink from '../Alerts/ABlink';
+import COverlay from '../CustomComponents/COverlay';
+import OUserView from '../Custom/OUserView';
+import CBackHandler from '../CustomComponents/CBackHandler';
+import InsureResponseComponentContext from '../../../../../src/Handlers/insureResponseComponentContext';
+import CNetworkStatus from '../CustomComponents/CNetworkStatus';
+import { useNavigation } from '../Navigation/useNavigation';
+
+const HeaderBlock = (props) => {
+  const { responseJSON, setResponseJSON } = useContext(InsureResponseComponentContext);
+  const [isShowSlidermenu, setIsShowSlidermenu] = useState(false);
+  const [backHandler, setBackHandler] = useState(false);
+  const [backHandlerLogOut, setBackHandlerLogOut] = useState(false);
+  const [refresh, setRefresh] = useState(0);
+  const [overlay, setOverlay] = useState(false);
+  const [jsonoverlay, setJsonOverlay] = useState(false);
+  const navigation = useNavigation()
+
+  const OverlayHOCComponent = COverlay(OUserView);
+
+  const NoticationData = React.useContext(NotificationContext);
+
+  const result = NoticationData.filter(obj => obj.status === true);
+
+  const styles = StyleSheet.create({
+    container: {
+      display: 'flex',
+      backgroundColor: Global.AppTheme.primary_color,
+      justifyContent: 'center',
+      paddingLeft: normalize(3),
+      marginTop: StatusBar.currentHeight,
+    },
+    headerContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: normalize(6),
+      paddingBottom: normalize(0),
+    },
+    backButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderWidth: 0,
+    },
+    logoContainer: {
+      width: normalize(100),
+      height: normalize(40),
+    },
+    betaContainer: {
+      position: 'absolute',
+      bottom: normalize(-4),
+      right: normalize(-70),
+    },
+    betaText: {
+      color: '#ffffff',
+      fontSize: normalize(20),
+      letterSpacing: 5,
+      fontWeight: 'bold',
+      textShadowColor: '#000000',
+      textShadowOffset: { width: 0.5, height: 0.5 },
+      textShadowRadius: 0.5,
+    },
+    versionText: {
+      color: 'white',
+      fontSize: normalize(8),
+    },
+    userInfoButton: {
+      flexDirection: 'row',
+      borderWidth: 0,
+      flex: 1,
+      justifyContent: 'flex-start',
+    },
+    userInfoContainer: {
+      borderWidth: 0,
+    },
+    userNameText: {
+      fontWeight: 'bold',
+      fontSize: normalize(13),
+      marginLeft: 5,
+      color: 'white',
+    },
+    departmentText: {
+      fontFamily: Global.fontNormal,
+      fontSize: normalize(11),
+      marginLeft: 5,
+      color: 'white',
+    },
+    rightIconsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      borderWidth: 0,
+    },
+    notificationButton: {
+      marginRight: normalize(5),
+    },
+    notificationBadge: {
+      position: 'absolute',
+      right: normalize(-5),
+      top: normalize(-8),
+      backgroundColor: 'white',
+      alignItems: 'center',
+      borderRadius: 20,
+      width: normalize(15),
+    },
+    notificationCount: {
+      fontSize: normalize(7),
+      fontWeight: 'bold',
+    },
+    menuButton: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    loginTimeText: {
+      fontSize: normalize(9),
+      marginLeft: 0,
+      color: 'white',
+    },
+    jsonModalContainer: {
+      backgroundColor: 'white',
+      borderWidth: 1,
+      height: Dimensions.get('screen').height * 0.9,
+      alignSelf: 'center',
+      width: Dimensions.get('screen').width * 0.9,
+    },
+    closeButton: {
+      textAlign: 'right',
+      fontWeight: 'bold',
+      color: 'black',
+    },
+    jsonText: {
+      fontSize: normalize(10),
+      color: 'black',
+      fontFamily: 'Courier New',
+    },
+  });
+
+  const OnPressGoBack = () => {
+    if (props.callback) {
+      props.callback(true);
+    } else {
+      if (ValueCheck(props.backhandler)) {
+        if (ValueCheck(props.consultation) && Global.EditStatus == 1) {
+          setBackHandler(true);
+        } else {
+          navigation.goBack();       // 👈 works
+        }
+      } else {
+        navigation.goBack();       // 👈 works
+      }
+    }
+  };
+
+  const renderJsonModal = () => (
+    <Modal
+      onRequestClose={() => setJsonOverlay(false)}
+      style={{
+        height: Dimensions.get('screen').height,
+        width: Dimensions.get('screen').width,
+        backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+      transparent={true}
+    >
+      <View style={styles.jsonModalContainer}>
+        <TouchableOpacity onPress={() => setJsonOverlay(false)}>
+          <Text style={styles.closeButton}>Close</Text>
+        </TouchableOpacity>
+        <ScrollView>
+          <Text selectable={true} style={styles.jsonText}>
+            {JSON.stringify(responseJSON, null, 2)}
+          </Text>
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+
+  const renderBetaVersion = () => (
+    <View style={styles.betaContainer}>
+      <ABlink duration={500}>
+        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <Text style={styles.betaText}>BETA TESTING</Text>
+          <Text style={styles.versionText}>
+            {Global.version ? `V ${Global.version}` : null}
+          </Text>
+        </View>
+      </ABlink>
+    </View>
+  );
+
+  const renderUserInfo = () => (
+    <TouchableOpacity
+      onPress={() => props.webview != undefined ? null : setOverlay(true)}
+      style={styles.userInfoButton}
+    >
+      <View style={styles.userInfoContainer}>
+        <Text
+          adjustsFontSizeToFit
+          numberOfLines={2}
+          style={styles.userNameText}
+        >
+          {props.webview != undefined ? "" : Global.userData && Global.userData.department != undefined && Global.userData.department != "" ? Global.userData.username : ''}
+        </Text>
+        {Global.userData && Global.userData.department != undefined && Global.userData.department != "" && props.webview == undefined ? (
+          <Text
+            adjustsFontSizeToFit
+            style={styles.departmentText}
+          >
+            {Global.userData.department}
+          </Text>
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  );
+
+  const renderRightIcons = () => (
+    <View style={styles.rightIconsContainer}>
+      <CNetworkStatus />
+      <TouchableOpacity
+        onPress={() => navigation.navigate('Notifications')}
+        style={styles.notificationButton}
+      >
+        <View style={styles.notificationBadge}>
+          <ABlink>
+            <Text
+              numberOfLines={1}
+              adjustsFontSizeToFit
+              style={[
+                styles.notificationCount,
+                { color: result.length > 0 ? "red" : 'black' }
+              ]}
+            >
+              {result.length}
+            </Text>
+          </ABlink>
+        </View>
+        <Ionicons name={'notifications-outline'} color="white" size={normalize(15)} />
+      </TouchableOpacity>
+      <View style={{ paddingLeft: normalize(2) }}>
+        <TouchableOpacity
+          onPress={() => setIsShowSlidermenu(true)}
+          style={styles.menuButton}
+        >
+          <Feather name={'menu'} color="white" size={normalize(25)} />
+          <View>
+            {Global.LoginTime != undefined ? (
+              <Text style={styles.loginTimeText}>
+                {(moment.duration(moment().diff(Global.LoginTime)).asMinutes()).toFixed(0) + " Min."}
+              </Text>
+            ) : null}
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={[styles.container, props.style]} key={refresh}>
+      <StatusBar
+        translucent
+        backgroundColor={Global.AppTheme.primary_color}
+        barStyle="light-content"
+      />
+
+      {jsonoverlay && renderJsonModal()}
+
+      <View style={styles.headerContent}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={OnPressGoBack}
+        >
+          <Ionicons
+            name={'chevron-back'}
+            color='white'
+            size={normalize(25)}
+          />
+          <View style={styles.logoContainer}>
+            {Global.betaversion ? (
+              <View style={styles.logoContainer} />
+            ) : (
+              <Image
+                style={{
+                  width: normalize(100),
+                  height: normalize(40),
+                  resizeMode: 'contain',
+                  borderRadius: 8,
+                }}
+                source={{ uri: Global?.HospitalData?.hospitallogo3 ? Global.HospitalData.hospitallogo3 : null }}
+              />
+            )}
+          </View>
+          {Global.betaversion && renderBetaVersion()}
+        </TouchableOpacity>
+
+        {renderUserInfo()}
+
+        {props.webview != undefined ? null : renderRightIcons()}
+      </View>
+
+      {overlay && (
+        <OverlayHOCComponent
+          visibility={val => (val == undefined ? null : setOverlay(val))}
+        />
+      )}
+      {isShowSlidermenu && (
+        <CSliderMenu
+          navigation={navigation.navigate}
+          isShow={isShowSlidermenu}
+          visibility={(val) => (val == undefined ? null : setIsShowSlidermenu(val))}
+        />
+      )}
+
+      {backHandler && (
+        <CBackHandler
+          type={5}
+          callBack={(val) => (val == undefined ? null : (setBackHandler(val), navigation.goBack()))}
+          close={(val) => (val == undefined ? null : setBackHandler(val))}
+        />
+      )}
+
+      {backHandlerLogOut && (
+        <CBackHandler
+          type={6}
+          callBack={(val) => (val == undefined ? null : (setBackHandlerLogOut(val), navigation.goBack()))}
+          close={(val) => (val == undefined ? null : setBackHandlerLogOut(val))}
+        />
+      )}
+    </View>
+  );
+};
+
+export default HeaderBlock;