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

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

@@ -0,0 +1,455 @@
+/**
+ * @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,
+  },
+});

package/src/components/Auth/{Login → One/Login}/LoginWithPhone.tsx

@@ -8,17 +8,17 @@ import { StyleSheet, View, type TextStyle, type ViewStyle } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { scale, verticalScale } from 'react-native-size-matters';
 
-import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import { Logo } from '../../Logo/Logo';
-import { Button } from '../../Button';
-import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import { useKeyboard } from '../../../hooks/useKeyboard';
-import PhoneNumberInput from '../../Input/PhoneNumberInput';
-import TextButton from '../../Button/TextButton';
-import BackBtn from '../../Button/BackBtn';
-import { Text } from '../../Text';
-import type { ThemeOverride } from '../../../theme/themes';
+import { BackgroundLayout } from '../../../BackgroundLayout/BackgroundLayout';
+import { Logo } from '../../../Logo/Logo';
+import { Button } from '../../../Button';
+import HideKeyboard from '../../../Keyboard/HideKeyboard';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import { useKeyboard } from '../../../../hooks/useKeyboard';
+import PhoneNumberInput from '../../../Input/PhoneNumberInput';
+import TextButton from '../../../Button/TextButton';
+import BackBtn from '../../../Button/BackBtn';
+import { Text } from '../../../Text';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type PhoneField = {
@@ -220,7 +220,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
             {renderLogo ? (
               renderLogo()
             ) : logoUri ? (
-              <Logo logoUri={logoUri} />
+              <Logo logoUri={logoUri} width={100} height={100} />
             ) : null}
 
             {renderPhoneHeader ? (