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

package/src/Navigation/PageNavigation.tsx

@@ -0,0 +1,189 @@
+import React, {
+  createContext,
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  ReactNode,
+} from 'react';
+
+import { View, Platform } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type Route = {
+  name: string;
+  params?: any;
+};
+
+type NavigationContextType = {
+  navigate: (screenName: string, params?: any) => void;
+  replace: (screenName: string, params?: any) => void;
+  goBack: () => void;
+  addFocusListener: (screenName: string, callback: () => void) => () => void;
+  current: Route;
+};
+
+const NavigationContext = createContext<NavigationContextType | null>(null);
+
+type NavigationScreens = Record<string, React.ComponentType<any>>;
+
+type ProviderProps = {
+  screens: NavigationScreens;
+  children?: ReactNode;
+};
+
+export const NavigationProvider: React.FC<ProviderProps> = ({
+  screens,
+  children,
+}) => {
+  const [stack, setStack] = useState<Route[]>([
+    { name: Object.keys(screens)[0], params: {} },
+  ]);
+
+  const focusListeners = useRef<Record<string, Array<() => void>>>({});
+
+  const current = stack[stack.length - 1];
+
+  const navigate = (screenName: string, params = {}) => {
+    setStack(prev => [...prev, { name: screenName, params }]);
+  };
+
+  const replace = (screenName: string, params = {}) => {
+    setStack(prev => [
+      ...prev.slice(0, -1),
+      { name: screenName, params },
+    ]);
+  };
+
+  const goBack = () => {
+    setStack(prev => (prev.length > 1 ? prev.slice(0, -1) : prev));
+  };
+
+  const addFocusListener = (screenName: string, callback: () => void) => {
+    if (!focusListeners.current[screenName]) {
+      focusListeners.current[screenName] = [];
+    }
+
+    focusListeners.current[screenName].push(callback);
+
+    return () => {
+      const listeners = focusListeners.current[screenName] || [];
+      focusListeners.current[screenName] = listeners.filter(
+        cb => cb !== callback
+      );
+    };
+  };
+
+  useEffect(() => {
+    const listeners = focusListeners.current[current.name] || [];
+    listeners.forEach(cb => cb());
+  }, [current.name]);
+
+  return (
+    <NavigationContext.Provider
+      value={{ navigate, goBack, replace, addFocusListener, current }}
+    >
+      <View style={{ flex: 1 }}>
+        {stack.map((route, index) => {
+          const ScreenComponent: React.ComponentType<any> = screens[route.name];
+          const isFocused = index === stack.length - 1;
+
+          return (
+            <View
+              key={index}
+              style={{
+                flex: 1,
+                display: isFocused ? 'flex' : 'none',
+              }}
+            >
+              <ScreenComponent
+                navigation={{ navigate, replace, goBack }}
+                route={{ params: route.params }}
+              />
+            </View>
+          );
+        })}
+
+        {children}
+      </View>
+    </NavigationContext.Provider>
+  );
+};
+
+export const useNavigation = () => {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) {
+    throw new Error('useNavigation must be used inside NavigationProvider');
+  }
+  return ctx;
+};
+
+export const useFocusEffect = (callback: () => void | (() => void)) => {
+  const { current, addFocusListener } = useNavigation();
+  const cleanupRef = useRef<any>(null);
+
+  useEffect(() => {
+    cleanupRef.current?.();
+
+    const unsubscribe = addFocusListener(current.name, () => {
+      cleanupRef.current?.();
+      cleanupRef.current = callback();
+    });
+
+    return () => {
+      cleanupRef.current?.();
+      unsubscribe?.();
+    };
+  }, [current.name]);
+};
+
+export const useIsFocused = (): boolean => {
+  const { current, addFocusListener } = useNavigation();
+  const [isFocused, setIsFocused] = useState(true);
+
+  useEffect(() => {
+    setIsFocused(true);
+
+    const unsubscribe = addFocusListener(current.name, () => {
+      setIsFocused(true);
+    });
+
+    return () => {
+      setIsFocused(false);
+      unsubscribe();
+    };
+  }, [current.name]);
+
+  return isFocused;
+};
+
+export const ReactNativeNavigation: React.FC<{
+  screens: NavigationScreens;
+}> = ({ screens }) => {
+  const Stack = createNativeStackNavigator();
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName={Object.keys(screens)[0]}
+        screenOptions={{
+          animation: 'none',
+          headerShown: false,
+        }}
+      >
+        {Object.entries(screens).map(([name, component]) => (
+          <Stack.Screen key={name} name={name} component={component} />
+        ))}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default function Navigation({ screens }: { screens: NavigationScreens }) {
+  return Platform.OS === 'web' ? (
+    <NavigationProvider screens={screens} />
+  ) : (
+    <ReactNativeNavigation screens={screens} />
+  );
+}

package/src/Navigation/useFocusEffect.ts

@@ -1,2 +1,2 @@
 
-export { useFocusEffect } from '../../../../../src/Navigation/PageNavigation';
+export { useFocusEffect } from './PageNavigation';

package/src/Navigation/useFocusEffect.web.ts

@@ -1 +1 @@
-export { useFocusEffect } from '../../../../../src/Navigation/PageNavigation';
+export { useFocusEffect } from './PageNavigation';

package/src/Navigation/useIsFocused.ts

@@ -1 +1 @@
-export { useIsFocused } from '../../../../../src/Navigation/PageNavigation';
+export { useIsFocused } from './PageNavigation';

package/src/Navigation/useIsFocused.web.ts

@@ -1 +1 @@
-export { useIsFocused } from '../../../../../src/Navigation/PageNavigation';
+export { useIsFocused } from './PageNavigation';

package/src/Navigation/useNavigation.ts

@@ -1,2 +1,2 @@
 
-export { useNavigation } from '../../../../../src/Navigation/PageNavigation';
+export { useNavigation } from './PageNavigation';

package/src/Navigation/useNavigation.web.ts

@@ -1 +1 @@
-export { useNavigation } from '../../../../../src/Navigation/PageNavigation';
+export { useNavigation } from './PageNavigation';

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>
+  );
+}