@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/Auth/One/Login/LoginWithEmail.tsx

@@ -1,455 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 03:05 PM
- */
-import React, { useCallback, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  Keyboard,
-  SafeAreaView,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Input } from '../../../Input/Input';
-import { Button } from '../../../Button';
-import { BackgroundLayout } from '../../../BackgroundLayout/BackgroundLayout';
-import { Logo } from '../../../Logo/Logo';
-import TextButton from '../../../Button/TextButton';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import BackBtn from '../../../Button/BackBtn';
-import { Text } from '../../../Text';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { getResponsiveBottomSpacing } from '../../../../utils/Spacing';
-
-type FormValues = {
-  email: string;
-  password: string;
-};
-
-type LoginWithEmailProps = {
-  title: string;
-  onSubmit?: (values: FormValues) => void;
-  onSignup?: () => void;
-  onForgotPassword?: () => void;
-  onSwitchToPhoneLogin?: () => void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  formStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  topBackBtnStyle?: ViewStyle;
-  inputContainerStyle?: ViewStyle;
-  minPasswordLength?: number;
-  backgroundImage?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-  logoUri?: string;
-  loadingSubmitBtn?: boolean;
-
-  theme?: ThemeOverride;
-  text?: {
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    forgotPassword?: string;
-    loadingSubmitBtnText?: string;
-    loginButton?: string;
-    signupPrompt?: string;
-    signupLink?: string;
-    switchToPhoneLogin?: string;
-  };
-  signupTextProps?: TextStyle;
-  signupLinkTextProps?: TextStyle;
-  renderLogo?: () => React.ReactNode;
-  renderForgotPassword?: () => React.ReactNode;
-  renderEmailHeader?: () => React.ReactNode;
-  renderSignupPrompt?: (props: { onPress: () => void }) => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderSwitchToPhoneLogin?: (props: {
-    onPress: () => void;
-  }) => React.ReactNode;
-  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
-};
-
-const LoginWithEmail: React.FC<LoginWithEmailProps> = React.memo(
-  ({
-    title = 'Login',
-    onSubmit,
-    onSignup,
-    onForgotPassword,
-    onSwitchToPhoneLogin,
-    onTopBackBtnPress,
-    containerStyle,
-    titleStyle,
-    formStyle,
-    inputStyle,
-    inputContainerStyle,
-    loadingSubmitBtn,
-    topBackBtnStyle,
-    minPasswordLength = 6,
-    backgroundImage,
-    logoUri,
-    theme: overrideTheme,
-    text,
-    signupTextProps,
-    signupLinkTextProps,
-    renderLogo,
-    renderForgotPassword,
-    renderEmailHeader,
-    renderSignupPrompt,
-    renderSubmitButton,
-    renderSwitchToPhoneLogin,
-    renderTopBackBtn,
-  }) => {
-    const { isKeyboardOpen } = useKeyboard();
-    const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-    const [isLoading, setIsLoading] = React.useState(false);
-    const {
-      control,
-      handleSubmit,
-      formState: { errors, isValid, touchedFields },
-    } = useForm<FormValues>({
-      defaultValues: { email: '', password: '' },
-      mode: 'onChange',
-    });
-
-    const handleFormSubmit = useCallback(
-      async (data: FormValues) => {
-        if (!onSubmit) return;
-        setIsLoading(true);
-        try {
-          await onSubmit(data);
-        } catch (error) {
-          console.error('Form submission error:', error);
-        } finally {
-          setIsLoading(false);
-        }
-      },
-      [onSubmit]
-    );
-
-    const handleKeyboardDismiss = useCallback((callback?: () => void) => {
-      Keyboard.dismiss();
-      requestAnimationFrame(() => callback?.());
-    }, []);
-
-    const shouldRender = useMemo(
-      () =>
-        (condition?: boolean | unknown): boolean =>
-          typeof condition === 'function' || !!condition,
-      []
-    );
-
-    // Memoize gradient split background
-    const gradientSplitBackground = useMemo(
-      () => (isKeyboardOpen ? 0.31 : 0.35),
-      [isKeyboardOpen]
-    );
-
-    // Memoize disabled state
-    const isDisabled = useMemo(
-      () => loadingSubmitBtn || isLoading,
-      [loadingSubmitBtn, isLoading]
-    );
-
-    return (
-      <BackgroundLayout
-        backgroundImage={backgroundImage?.source}
-        theme={overrideTheme}
-        gradientSplitBackground={gradientSplitBackground}
-      >
-        <SafeAreaView style={styles.safeArea}>
-          <View style={[styles.container, containerStyle]}>
-            {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-              <View style={styles.topBackBtnWrapper}>
-                {renderTopBackBtn ? (
-                  renderTopBackBtn({
-                    onPress: onTopBackBtnPress ?? (() => {}),
-                  })
-                ) : (
-                  <BackBtn
-                    theme={overrideTheme}
-                    style={topBackBtnStyle}
-                    onPress={onTopBackBtnPress}
-                  />
-                )}
-              </View>
-            )}
-            <HideKeyboard>
-              <View style={styles.centerContent}>
-                {renderLogo ? (
-                  renderLogo()
-                ) : logoUri ? (
-                  <Logo logoUri={logoUri} width={100} height={100} />
-                ) : null}
-
-                {renderEmailHeader ? (
-                  renderEmailHeader()
-                ) : (
-                  <Text style={[styles.title, titleStyle]}>{title}</Text>
-                )}
-
-                <View style={[styles.form, formStyle]}>
-                  <Controller
-                    control={control}
-                    name="email"
-                    rules={{
-                      required: 'Email is required',
-                      pattern: {
-                        value: /^\S+@\S+\.\S+$/,
-                        message: 'Enter a valid email address',
-                      },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.One
-                        label={text?.emailLabel || 'Email'}
-                        placeholder={text?.emailPlaceholder || 'Email'}
-                        value={value}
-                        onChangeText={(inputText) => {
-                          const sanitized = inputText.replace(
-                            /[^\w@.\-+]/g,
-                            ''
-                          );
-                          onChange(sanitized);
-                        }}
-                        onBlur={onBlur}
-                        disabled={isDisabled}
-                        error={!!touchedFields.email && !!errors.email}
-                        errorMessage={errors.email?.message}
-                        inputStyle={inputStyle}
-                        containerStyle={inputContainerStyle}
-                        theme={overrideTheme}
-                        textContentType="emailAddress"
-                        autoCapitalize="none"
-                        keyboardType="email-address"
-                        autoCorrect={false}
-                      />
-                    )}
-                  />
-
-                  <Controller
-                    control={control}
-                    name="password"
-                    rules={{
-                      required: 'Password is required',
-                      minLength: {
-                        value: minPasswordLength,
-                        message: `Password must be at least ${minPasswordLength} characters`,
-                      },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <>
-                        <Input.One
-                          label={text?.passwordLabel || 'Password'}
-                          placeholder={text?.passwordPlaceholder || 'Password'}
-                          value={value}
-                          secureTextEntry
-                          onChangeText={(inputText) => {
-                            const sanitized = inputText.replace(
-                              /[^\w@.\-+]/g,
-                              ''
-                            );
-                            onChange(sanitized);
-                          }}
-                          onBlur={onBlur}
-                          disabled={isDisabled}
-                          error={!!touchedFields.password && !!errors.password}
-                          errorMessage={errors.password?.message}
-                          inputStyle={inputStyle}
-                          containerStyle={inputContainerStyle}
-                          textContentType="none"
-                          autoCapitalize="none"
-                          spellCheck={false}
-                          autoCorrect={false}
-                          autoComplete="off"
-                          theme={overrideTheme}
-                        />
-                        {!isKeyboardOpen &&
-                          shouldRender(
-                            renderForgotPassword || onForgotPassword
-                          ) &&
-                          (renderForgotPassword ? (
-                            renderForgotPassword()
-                          ) : (
-                            <TextButton
-                              title={text?.forgotPassword || 'Forgot password?'}
-                              onPress={() =>
-                                handleKeyboardDismiss(onForgotPassword)
-                              }
-                              color={resolvedTheme.colors.button}
-                              align="right"
-                              style={styles.forgotPasswordText}
-                            />
-                          ))}
-                      </>
-                    )}
-                  />
-
-                  {!isKeyboardOpen &&
-                    (renderSubmitButton ? (
-                      renderSubmitButton({
-                        onPress: handleSubmit(handleFormSubmit),
-                        disabled: loadingSubmitBtn || !isValid || isLoading,
-                        loading: loadingSubmitBtn || isLoading,
-                      })
-                    ) : (
-                      <Button.Primary
-                        title={text?.loginButton || 'Login'}
-                        onPress={handleSubmit(handleFormSubmit)}
-                        disabled={isDisabled || !isValid}
-                        theme={overrideTheme}
-                        titleStyle={{
-                          fontSize: RFValue(14),
-                        }}
-                        loadingText={
-                          text?.loadingSubmitBtnText || 'Logging in...'
-                        }
-                        loading={isDisabled}
-                      />
-                    ))}
-                </View>
-
-                {!isKeyboardOpen &&
-                  shouldRender(
-                    onSwitchToPhoneLogin || renderSwitchToPhoneLogin
-                  ) &&
-                  (renderSwitchToPhoneLogin ? (
-                    renderSwitchToPhoneLogin({
-                      onPress: () =>
-                        handleKeyboardDismiss(onSwitchToPhoneLogin),
-                    })
-                  ) : (
-                    <TextButton
-                      title={text?.switchToPhoneLogin || 'Login with Phone'}
-                      onPress={() =>
-                        handleKeyboardDismiss(onSwitchToPhoneLogin)
-                      }
-                      color={resolvedTheme.colors.button}
-                      style={styles.switchPhoneText}
-                      underline
-                      bold
-                      align="center"
-                    />
-                  ))}
-              </View>
-
-              {!isKeyboardOpen &&
-                shouldRender(onSignup || renderSignupPrompt) && (
-                  <View
-                    style={[
-                      styles.signupContainer,
-                      {
-                        bottom: getResponsiveBottomSpacing(35),
-                      },
-                    ]}
-                  >
-                    {renderSignupPrompt ? (
-                      renderSignupPrompt({
-                        onPress: () => handleKeyboardDismiss(onSignup),
-                      })
-                    ) : (
-                      <View style={styles.loginRow}>
-                        <Text
-                          style={[styles.loginPrompt, signupTextProps]}
-                          color={resolvedTheme.colors.textPrimary}
-                        >
-                          {text?.signupPrompt || `Don't have an account?`}
-                        </Text>
-                        <TextButton
-                          title={text?.signupLink || 'Sign Up'}
-                          onPress={() => handleKeyboardDismiss(onSignup)}
-                          bold
-                          underline
-                          align="center"
-                          color={resolvedTheme.colors.button}
-                          style={signupLinkTextProps}
-                        />
-                      </View>
-                    )}
-                  </View>
-                )}
-            </HideKeyboard>
-          </View>
-        </SafeAreaView>
-      </BackgroundLayout>
-    );
-  }
-);
-
-export default LoginWithEmail;
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    width: '100%',
-    paddingBottom: verticalScale(12),
-  },
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: scale(16),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  topBackBtnWrapper: {
-    position: 'absolute',
-    top: verticalScale(6),
-    left: 0,
-    zIndex: 10,
-  },
-  centerContent: {
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: RFValue(21),
-    fontWeight: '700',
-    marginTop: verticalScale(5),
-    marginBottom: verticalScale(20),
-  },
-  form: {
-    width: '100%',
-    gap: verticalScale(10),
-  },
-  forgotPasswordText: {
-    textAlign: 'right',
-    marginRight: scale(4),
-    marginTop: -verticalScale(10),
-    marginBottom: verticalScale(8),
-  },
-  switchPhoneText: {
-    marginTop: verticalScale(10),
-  },
-  signupContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  loginRow: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-  },
-  loginPrompt: {
-    textAlign: 'center',
-    marginRight: 4,
-  },
-});