@jescon-technologies/react-native-ui-kit 0.0.12 → 0.0.13

package/src/Screens/ForgotPassword.tsx

@@ -0,0 +1,342 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StatusBar,
+  Dimensions,
+  ImageBackground,
+  TouchableOpacity,
+  TouchableHighlight,
+  TextInput,
+} from 'react-native';
+
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { Global } from '../../../../../src/Common/Global';
+import axios from 'axios';
+import { HIcons, normalize, getLoading, NetworkServiceCall, notifyMessage, ValueCheck, Loader } from '@jescon-technologies/react-native-ui-kit';
+
+const image = {
+  uri: 'https://t4.ftcdn.net/jpg/05/19/65/81/360_F_519658132_FkvYwAjuJ8q67PGQUgYLrumVymaJtlZj.jpg',
+};
+
+/* ---------------- CUSTOM INPUT ---------------- */
+const CustomInput = ({
+  value,
+  onChangeText,
+  placeholder,
+  secureTextEntry,
+  keyboardType,
+  autoFocus,
+  leftIcon,
+  rightIcon,
+  onRightIconPress,
+  onEndEditing,
+  style,
+}) => {
+  return (
+    <View
+      style={[
+        {
+          width: Dimensions.get('screen').width * 0.9,
+          borderWidth: 1,
+          borderColor: '#aaa',
+          borderRadius: 6,
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 10,
+          backgroundColor: '#fff',
+          height: normalize(45),
+        },
+        style,
+      ]}
+    >
+      {leftIcon && <View style={{ marginRight: 8 }}>{leftIcon}</View>}
+
+      <TextInput
+        style={{ flex: 1, color: '#000' }}
+        placeholder={placeholder}
+        placeholderTextColor="#777"
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={secureTextEntry}
+        keyboardType={keyboardType}
+        autoFocus={autoFocus}
+        onEndEditing={onEndEditing}
+      />
+
+      {rightIcon && (
+        <TouchableOpacity onPress={onRightIconPress}>
+          {rightIcon}
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+/* ---------------- MAIN COMPONENT ---------------- */
+export default function ForgotPassword({ navigation }) {
+  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: '',
+  });
+
+  const [isPasswordSecure, setIsPasswordSecure] = useState(true);
+  const [isPasswordSecureTwo, setIsPasswordSecureTwo] = useState(true);
+
+  useEffect(() => {
+    setPassword({ oldpass: '', newpass: '', confirmpass: '' });
+    setMsg('');
+  }, [stage]);
+
+  /* ---------------- AUTH JWT ---------------- */
+  function actionJWT() {
+    if (password.oldpass && text) {
+      let buttonapi = APIURL + 'auth/authenticate';
+      let PostArr = {
+        username: text,
+        password: password.oldpass,
+      };
+
+      axios
+        .post(buttonapi, PostArr)
+        .then(res => {
+          if (res.status === 200) {
+            Global.JWTToken = res.data;
+          } else {
+            notifyMessage('Please check old password', 2);
+          }
+        })
+        .catch(() => notifyMessage('Authentication failed', 3));
+    }
+  }
+
+  /* ---------------- UPDATE PASSWORD ---------------- */
+  function getUpdate() {
+    if (!password.newpass || !password.confirmpass) {
+      notifyMessage('Please fill out passwords', 3);
+      return;
+    }
+
+    if (password.newpass !== password.confirmpass) {
+      notifyMessage('Passwords do not match', 4);
+      return;
+    }
+
+    const ReqJson = {
+      groups: {
+        procedurename: 'suuserforgetpassword1',
+        userid: text,
+        ...password,
+      },
+    };
+
+    let buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+    setIsLoading(true);
+
+    NetworkServiceCall('post', buttonapi, ReqJson, Global.JWTToken).then(res => {
+      if (res?.httpstatus === 200 && res?.data?.code > 0) {
+        notifyMessage('Password Updated !!!', 1);
+        setStage(3);
+      } else {
+        notifyMessage('Password Not Updated', 2);
+      }
+      setIsLoading(false);
+    });
+
+    getLoading(() => setIsLoading(false));
+  }
+
+  /* ---------------- PASSWORD STRENGTH ---------------- */
+  function checkPasswordStrength(pass) {
+    let strength = 0;
+    let tips = '';
+
+    if (pass.length >= 8) { strength++; }
+    else { tips += 'Minimum 8 characters. '; }
+
+    if (/[a-z]/.test(pass) && /[A-Z]/.test(pass)) { strength++; }
+    else { tips += 'Use upper & lower case. '; }
+
+    if (/\d/.test(pass)) { strength++; }
+    else { tips += 'Add a number. '; }
+
+    if (/[^a-zA-Z\d]/.test(pass)) { strength++; }
+    else { tips += 'Add a special character. '; }
+
+    if (strength < 2) { setMsg('Easy'); }
+    else if (strength === 2) { setMsg('Medium'); }
+    else if (strength === 3) { setMsg('Strong'); }
+    else { setMsg('Very Strong'); }
+
+    tips && notifyMessage(tips, 5);
+  }
+
+  /* ---------------- UI ---------------- */
+  return (
+    <View style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
+      <StatusBar translucent backgroundColor="transparent" barStyle="dark-content" />
+
+      <ImageBackground source={image} style={{ flex: 1 }}>
+        <TouchableOpacity
+          style={{ padding: 20 }}
+          onPress={() => (stage === 1 ? navigation.goBack() : setStage(stage - 1))}
+        >
+          <HIcons.FontAwesome5 name="arrow-left" size={normalize(20)} />
+        </TouchableOpacity>
+
+        {/* -------- STAGE 1 -------- */}
+        {stage === 1 && (
+          <View style={{ alignItems: 'center' }}>
+            <HIcons.FontAwesome5 name="lock" size={normalize(50)} />
+            <Text style={{ fontSize: normalize(24), fontWeight: 'bold' }}>
+              CHANGE PASSWORD
+            </Text>
+
+            <CustomInput
+              placeholder="Enter User ID"
+              keyboardType="numeric"
+              value={text}
+              autoFocus
+              onChangeText={setText}
+              leftIcon={
+                <HIcons.MaterialCommunityIcons
+                  name="clock-time-five-outline"
+                  size={normalize(20)}
+                  color="purple"
+                />
+              }
+              style={{ marginTop: normalize(20) }}
+            />
+
+            <TouchableHighlight
+              onPress={() =>
+                ValueCheck(text)
+                  ? setStage(2)
+                  : notifyMessage('Enter User ID', 3)
+              }
+              style={{
+                marginTop: normalize(15),
+                width: Dimensions.get('screen').width * 0.9,
+                height: normalize(40),
+                backgroundColor: '#FADF00',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Text style={{ fontWeight: 'bold' }}>NEXT</Text>
+            </TouchableHighlight>
+          </View>
+        )}
+
+        {/* -------- STAGE 2 -------- */}
+        {stage === 2 && (
+          <View style={{ alignItems: 'center' }}>
+            <Text style={{ fontWeight: 'bold', fontSize: normalize(18) }}>
+              New Credentials
+            </Text>
+
+            <CustomInput
+              placeholder="Old Password"
+              secureTextEntry={isPasswordSecure}
+              value={password.oldpass}
+              onChangeText={t => setPassword({ ...password, oldpass: t })}
+              onEndEditing={actionJWT}
+              leftIcon={<HIcons.FontAwesome5 name="lock" size={18} />}
+              rightIcon={
+                <HIcons.FontAwesome5
+                  name={isPasswordSecure ? 'eye-slash' : 'eye'}
+                  size={18}
+                />
+              }
+              onRightIconPress={() => setIsPasswordSecure(!isPasswordSecure)}
+              style={{ marginTop: normalize(15) }}
+            />
+
+            <Text style={{ alignSelf: 'flex-end', color: 'red' }}>{msg}</Text>
+
+            <CustomInput
+              placeholder="New Password"
+              secureTextEntry={isPasswordSecure}
+              value={password.newpass}
+              onChangeText={t => setPassword({ ...password, newpass: t })}
+              onEndEditing={() => checkPasswordStrength(password.newpass)}
+              leftIcon={<HIcons.FontAwesome5 name="lock" size={18} />}
+              rightIcon={
+                <HIcons.FontAwesome5
+                  name={isPasswordSecure ? 'eye-slash' : 'eye'}
+                  size={18}
+                />
+              }
+              onRightIconPress={() => setIsPasswordSecure(!isPasswordSecure)}
+              style={{ marginTop: normalize(15) }}
+            />
+
+            <CustomInput
+              placeholder="Confirm Password"
+              secureTextEntry={isPasswordSecureTwo}
+              value={password.confirmpass}
+              onChangeText={t => setPassword({ ...password, confirmpass: t })}
+              leftIcon={<HIcons.FontAwesome5 name="lock" size={18} />}
+              rightIcon={
+                <HIcons.FontAwesome5
+                  name={isPasswordSecureTwo ? 'eye-slash' : 'eye'}
+                  size={18}
+                />
+              }
+              onRightIconPress={() =>
+                setIsPasswordSecureTwo(!isPasswordSecureTwo)
+              }
+              style={{ marginTop: normalize(15) }}
+            />
+
+            <TouchableHighlight
+              onPress={getUpdate}
+              style={{
+                marginTop: normalize(15),
+                width: Dimensions.get('screen').width * 0.9,
+                height: normalize(40),
+                backgroundColor: '#FADF00',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Text style={{ fontWeight: 'bold' }}>UPDATE</Text>
+            </TouchableHighlight>
+          </View>
+        )}
+
+        {/* -------- STAGE 3 -------- */}
+        {stage === 3 && (
+          <View style={{ alignItems: 'center' }}>
+            <HIcons.EvilIcons name="check" size={normalize(100)} color="green" />
+            <Text style={{ color: 'green', fontWeight: 'bold' }}>
+              Password Updated
+            </Text>
+
+            <TouchableHighlight
+              onPress={() => navigation.goBack()}
+              style={{
+                marginTop: normalize(15),
+                width: Dimensions.get('screen').width * 0.9,
+                height: normalize(40),
+                backgroundColor: '#FADF00',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Text style={{ fontWeight: 'bold' }}>LOGIN</Text>
+            </TouchableHighlight>
+          </View>
+        )}
+      </ImageBackground>
+
+      {isLoading && <Loader displaytext />}
+    </View>
+  );
+}

package/src/Screens/Login.tsx

@@ -0,0 +1,331 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  StatusBar,
+  Text,
+  Image,
+  Platform,
+  TouchableOpacity,
+  Dimensions,
+  StyleSheet,
+  ScrollView,
+  TouchableWithoutFeedback,
+  Linking,
+  BackHandler,
+} from 'react-native';
+import RNFetchBlob from 'react-native-blob-util';
+import { Global } from '../../../../../src/Common/Global';
+import RNExitApp from 'react-native-exit-app';
+import HView from '../../../../../src/Hoc/HView';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { HIcons, useNavigation, normalize, isNU, Loader } from '@jescon-technologies/react-native-ui-kit';
+
+// Type definitions for props
+interface LoginProps {
+  // Add any props that might be passed to this component
+  // For example:
+  // route?: any;
+  // navigation?: any;
+}
+
+// Type for the HView component's loader callback
+type LoaderCallback = (val: boolean | undefined) => void;
+
+// Interface for footer icon item (if needed later)
+interface FooterIconItem {
+  displaytext: string;
+  color: string;
+  iconname: string;
+}
+
+/**
+ * Login Component
+ *
+ * Handles the main login screen functionality of the application
+ *
+ * @param {LoginProps} props - Component props passed from parent
+ * @returns {React.ReactElement} Rendered login screen
+ */
+function Login(props: LoginProps): React.ReactElement {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const navigation = useNavigation();
+
+  // Handle back button press to exit app
+  useEffect(() => {
+    const backAction = (): boolean => {
+      RNExitApp.exitApp();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, [navigation]);
+
+  /**
+   * Get file extension from filename
+   * @param {string} filename - The file name to extract extension from
+   * @returns {string | undefined} - The file extension
+   */
+  const getExtention = (filename: string): string | undefined => {
+    return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)?.[0] : undefined;
+  };
+
+  /**
+   * Downloads an image from URL to device storage
+   */
+  const downloadImage = (): void => {
+    let date = new Date();
+    let image_URL = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
+    let ext = getExtention(image_URL);
+    ext = '.' + ext?.[0];
+
+    const { config, fs } = RNFetchBlob;
+    let PictureDir = fs.dirs.PictureDir;
+
+    let options = {
+      fileCache: true,
+      addAndroidDownloads: {
+        useDownloadManager: true,
+        notification: true,
+        path: PictureDir + '/image_' + Math.floor(date.getTime() + date.getSeconds() / 2) + ext,
+        description: 'Image',
+      },
+    };
+
+    config(options)
+      .fetch('GET', image_URL)
+      .then((res: any) => {
+        console.log('res -> ', JSON.stringify(res));
+        alert('Image Downloaded Successfully.');
+      });
+  };
+
+  const hospitalBgImage: string = Global.HospitalData?.bgimage || 'https://i.ibb.co/jvj0wdH/Adams-Neilson.jpg';
+
+  return (
+    <View style={styles.container}>
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={Platform.OS === 'ios' ? 'light-content' : 'dark-content'} />
+
+      <TouchableWithoutFeedback>
+        <View style={styles.container}>
+          {/* App Title */}
+          <Text
+            style={[
+              styles.titleText,
+              {
+                paddingHorizontal: 30,
+                textShadowColor: Global.AppTheme.primary_color,
+                textShadowOffset: { width: normalize(5), height: normalize(5) },
+                textShadowRadius: normalize(15),
+                textAlign: 'center',
+              },
+            ]}
+          >
+            {'HOMES'}
+          </Text>
+
+          <ScrollView keyboardShouldPersistTaps="handled">
+            <View style={styles.contentContainer}>
+              {/* Header Image */}
+              <View>
+                <Image
+                  style={styles.headerImage}
+                  source={{ uri: hospitalBgImage }}
+                />
+
+                {/* Customer Service Button */}
+                <TouchableOpacity
+                  style={styles.customerServiceButton}
+                  onPress={() => Linking.openURL(`tel:${Global.HospitalData?.customercare}`)}
+                >
+                  <HIcons.AntDesign
+                    name="customerservice"
+                    color="#fff"
+                    size={normalize(17)}
+                  />
+                </TouchableOpacity>
+              </View>
+
+              {/* Login Form */}
+              <View style={styles.bottomView}>
+                <HView
+                  component={'LoginLayout'}
+                  loader={(val: boolean | undefined): void | null =>
+                    val === undefined ? null : setIsLoading(val)
+                  }
+                />
+              </View>
+            </View>
+
+            {/* Company Logo Section */}
+            <View style={styles.companyLogoSection}>
+              <TouchableOpacity
+                onPress={() => Linking.openURL('http://jescontechnologies.com/')}
+                style={styles.footer_container}
+              >
+                <View style={styles.companyinfo_container}>
+                  <Image
+                    style={styles.companyLogo}
+                    source={{ uri: 'https://i.ibb.co/dkNbcDN/jesconnewlogo.jpg' }}
+                  />
+                  <Image
+                    style={styles.company_icon}
+                    source={{ uri: `${APIURL}insurancefile/getCommonFile/image/companyaddress_transparent.png` }}
+                  />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+
+          {/* App Version Display */}
+          <View style={styles.versionContainer}>
+            {Platform.OS !== 'ios' && (
+              <Text style={styles.versionText}>
+                {Global.CodePushVersion}
+              </Text>
+            )}
+            <Text style={styles.versionText}>
+              {isNU(Global.version) ? `V ${Global.version}` : null}
+            </Text>
+          </View>
+
+          {/* Footer Icons - Commented out for now */}
+          {/* <View style={styles.footerIconsContainer}>
+            <View style={styles.footerIconsRow}>
+              {data?.loginfootericons?.map((item: FooterIconItem, i: number) => (
+                <CVectorIcon
+                  key={i}
+                  data={{
+                    disabled: false,
+                    displaytext: item.displaytext,
+                    fontcolor: item.color,
+                    fontWeight: 'bold',
+                    size: 12,
+                    iconname: item.iconname,
+                    iconcolor: item.color,
+                    iconsize: 22,
+                    functionid: 'DF01',
+                  }}
+                  callBack={(val: any) =>
+                    val === undefined
+                      ? null
+                      : props.navigation.navigate('WebPage', { data: item })
+                  }
+                />
+              ))}
+            </View>
+          </View> */}
+
+          {/* Loading Indicator */}
+          {isLoading && <Loader displaytext={true} />}
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+}
+
+export default Login;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    marginBottom: Platform.OS !== 'web' ? normalize(100) : normalize(50),
+  },
+  titleText: {
+    position: 'absolute',
+    top: Dimensions.get('screen').height * 0.05,
+    alignSelf: 'center',
+    color: '#fff',
+    zIndex: 1,
+    elevation: 5,
+    fontWeight: 'bold',
+    fontSize: normalize(40),
+  },
+  headerImage: {
+    height: Dimensions.get('screen').height * 0.25,
+    width: '100%',
+    opacity: 0.7,
+  },
+  customerServiceButton: {
+    position: 'absolute',
+    top: normalize(60),
+    right: normalize(20),
+    backgroundColor: Global.AppTheme.primary_color,
+    padding: normalize(5),
+    borderRadius: 1000,
+  },
+  bottomView: {
+    backgroundColor: '#fff',
+    opacity: 0.95,
+    marginTop: normalize(-50),
+    borderRadius: normalize(20),
+    marginHorizontal: normalize(7),
+    paddingHorizontal: normalize(15),
+  },
+  companyLogoSection: {
+    position: Platform.OS !== 'web' ? 'absolute' : undefined,
+    bottom: normalize(50),
+    backgroundColor: '#fff',
+  },
+  footer_container: {
+    marginBottom: '1%',
+    alignItems: 'center',
+    width: '100%',
+  },
+  companyinfo_container: {
+    flexDirection: 'row',
+    height: normalize(45),
+    width: '100%',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  companyLogo: {
+    width: '47%',
+    height: '100%',
+    borderRadius: 0,
+    margin: 5,
+    resizeMode: 'cover',
+  },
+  company_icon: {
+    width: '47%',
+    height: '100%',
+    borderRadius: 0,
+    margin: 5,
+    resizeMode: 'contain',
+  },
+  versionContainer: {
+    position: 'absolute',
+    bottom: 0,
+    zIndex: 1,
+    alignSelf: 'center',
+  },
+  versionText: {
+    color: Global.AppTheme.secondary_color,
+    fontSize: normalize(10),
+    alignSelf: 'center',
+    fontWeight: 'bold',
+  },
+  footerIconsContainer: {
+    position: 'absolute',
+    bottom: 0,
+    backgroundColor: '#fff',
+    width: '100%',
+    height: normalize(45),
+    justifyContent: 'center',
+  },
+  footerIconsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: normalize(15),
+  },
+});