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

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

@@ -0,0 +1,279 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 03:05 PM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  Keyboard,
+  type ViewStyle,
+  type TextStyle,
+  KeyboardAvoidingView,
+  Platform,
+} 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 HideKeyboard from '../../../Keyboard/HideKeyboard';
+import TextButton from '../../../Button/TextButton';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+import AuthLoginShell from './AuthLoginShell';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import { useKeyboard } from '../../../../hooks/useKeyboard';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { Lock, Mail } from 'lucide-react-native';
+import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
+
+type FormValues = {
+  email: string;
+  password: string;
+};
+
+type LoginWithEmailProps = {
+  title?: string;
+  description?: string;
+  bottomTitle?: string;
+  onSubmit?: (values: FormValues) => void;
+  onSignup?: () => void;
+  onForgotPassword?: () => void;
+  onSwitchToPhoneLogin?: () => void;
+  onTopBackBtnPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  formStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  inputContainerStyle?: ViewStyle;
+  topBackBtnStyle?: ViewStyle;
+  minPasswordLength?: number;
+  backgroundImage?: {
+    source?: string | null;
+    gradientSplitBackground?: number;
+  };
+  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;
+};
+
+const LoginWithEmail: React.FC<LoginWithEmailProps> = React.memo(
+  ({
+    title = 'Ready to watch?',
+    description = 'Enter your email or phone number to create your account.',
+    bottomTitle = 'By proceeding you agree to our Terms of Service and Privacy Policy',
+    onSubmit,
+    onSignup,
+    onForgotPassword,
+    onSwitchToPhoneLogin,
+    containerStyle,
+    formStyle,
+    inputStyle,
+    inputContainerStyle,
+    loadingSubmitBtn,
+    minPasswordLength = 6,
+    // backgroundImage,
+    logoUri,
+    theme: overrideTheme,
+    text,
+  }) => {
+    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);
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      [onSubmit]
+    );
+
+    const handleKeyboardDismiss = useCallback((callback?: () => void) => {
+      Keyboard.dismiss();
+      requestAnimationFrame(() => callback?.());
+    }, []);
+
+    const isDisabled = useMemo(
+      () => loadingSubmitBtn || isLoading,
+      [loadingSubmitBtn, isLoading]
+    );
+
+    // const gradientSplitBackground = useMemo(
+    //   () => (isKeyboardOpen ? 0.31 : 0.35),
+    //   [isKeyboardOpen]
+    // );
+
+    return (
+      <BackgroundLayoutOne>
+        <KeyboardAvoidingView
+          style={{ flex: 1, width: '100%' }}
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          keyboardVerticalOffset={Platform.OS === 'ios' ? 20 : 0}
+        >
+          <View style={[styles.container, containerStyle]}>
+            <HideKeyboard>
+              <AuthLoginShell
+                activeTab="email"
+                logoUri={logoUri}
+                onPhonePress={onSwitchToPhoneLogin}
+                onSignup={onSignup}
+                title={title}
+                description={description}
+                bottomTitle={bottomTitle}
+                theme={overrideTheme}
+              >
+                <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.Three
+                        label={text?.emailLabel || 'Email'}
+                        placeholder={text?.emailPlaceholder || 'Email'}
+                        value={value}
+                        onChangeText={(inputText) =>
+                          onChange(inputText.replace(/[^\w@.\-+]/g, ''))
+                        }
+                        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}
+                        leftIcon={<Mail size={22} />}
+                      />
+                    )}
+                  />
+
+                  <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.Three
+                          label={text?.passwordLabel || 'Password'}
+                          placeholder={text?.passwordPlaceholder || 'Password'}
+                          value={value}
+                          secureTextEntry
+                          onChangeText={(inputText) =>
+                            onChange(inputText.replace(/[^\w@.\-+]/g, ''))
+                          }
+                          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}
+                          leftIcon={<Lock size={22} />}
+                        />
+                        {!isKeyboardOpen && onForgotPassword && (
+                          <TextButton
+                            title={text?.forgotPassword || 'Forgot password?'}
+                            onPress={() =>
+                              handleKeyboardDismiss(onForgotPassword)
+                            }
+                            color={resolvedTheme.colors.button}
+                            align="right"
+                            style={styles.forgotPasswordText}
+                          />
+                        )}
+                      </>
+                    )}
+                  />
+
+                  <Button.Primary
+                    title={text?.loginButton || 'Login'}
+                    onPress={handleSubmit(handleFormSubmit)}
+                    disabled={isDisabled || !isValid}
+                    loading={isDisabled}
+                    theme={overrideTheme}
+                    titleStyle={{ fontSize: RFValue(14) }}
+                    loadingText={text?.loadingSubmitBtnText || 'Logging in...'}
+                  />
+                </View>
+              </AuthLoginShell>
+            </HideKeyboard>
+          </View>
+        </KeyboardAvoidingView>
+      </BackgroundLayoutOne>
+    );
+  }
+);
+
+export default LoginWithEmail;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: scale(16),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  form: {
+    width: '100%',
+    gap: verticalScale(10),
+  },
+  forgotPasswordText: {
+    textAlign: 'right',
+    marginRight: scale(4),
+    marginTop: -verticalScale(10),
+    marginBottom: verticalScale(8),
+  },
+});

package/src/components/Auth/Two/Login/LoginWithPhone.tsx

@@ -0,0 +1,188 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 04:10 PM
+ */
+
+import React, { memo, useCallback, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type TextStyle,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { scale, verticalScale } from 'react-native-size-matters';
+import HideKeyboard from '../../../Keyboard/HideKeyboard';
+import { Button } from '../../../Button';
+import PhoneNumberInputOne from '../../../Input/PhoneNumberInputTwo';
+import AuthLoginShell from './AuthLoginShell';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
+
+type PhoneField = {
+  fullNumber: string;
+  countryCode: string;
+  formattedNumber: string;
+};
+
+type FormValues = {
+  phone: PhoneField;
+};
+
+type LoginWithPhoneProps = {
+  title?: string;
+  description?: string;
+  bottomTitle?: string;
+  onSubmit?: (values: FormValues) => Promise<void> | void;
+  onLoginWithEmail?: () => void;
+  onSignup?: () => void;
+  containerStyle?: ViewStyle;
+  formStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  inputContainerStyle?: ViewStyle;
+  backgroundImage?: {
+    source?: string | null;
+    gradientSplitBackground?: number;
+  };
+  loadingSubmitBtn?: boolean;
+  logoUri?: string;
+  theme?: ThemeOverride;
+};
+
+const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
+  title = 'Ready to watch?',
+  description = 'Enter your email or phone number to create your account.',
+  bottomTitle = 'By proceeding you agree to our Terms of Service and Privacy Policy',
+  onSubmit,
+  onLoginWithEmail,
+  onSignup,
+  containerStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  // backgroundImage,
+  loadingSubmitBtn,
+  logoUri,
+  theme: overrideTheme,
+}) => {
+  useInternalTheme(overrideTheme);
+  // const { isKeyboardOpen } = useKeyboard();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<FormValues>({
+    defaultValues: {
+      phone: { fullNumber: '', countryCode: '91', formattedNumber: '' },
+    },
+    mode: 'onChange',
+  });
+
+  const handleFormSubmit = useCallback(
+    async (data: FormValues) => {
+      if (!onSubmit) return;
+      setIsLoading(true);
+      try {
+        await onSubmit(data);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onSubmit]
+  );
+
+  const isDisabled = useMemo(
+    () => loadingSubmitBtn || isLoading,
+    [loadingSubmitBtn, isLoading]
+  );
+
+  // const gradientSplitBackground = useMemo(
+  //   () => (isKeyboardOpen ? 0.3 : 0.4),
+  //   [isKeyboardOpen]
+  // );
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          width: '100%',
+          paddingHorizontal: scale(16),
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        form: {
+          width: '100%',
+          gap: verticalScale(12),
+          alignItems: 'center',
+        },
+      }),
+    []
+  );
+
+  return (
+    <BackgroundLayoutOne>
+      <KeyboardAvoidingView
+        style={{ flex: 1, width: '100%' }}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 20 : 0}
+      >
+        <View style={[styles.container, containerStyle]}>
+          <HideKeyboard>
+            <AuthLoginShell
+              activeTab="phone"
+              logoUri={logoUri}
+              onEmailPress={onLoginWithEmail}
+              onSignup={onSignup}
+              title={title}
+              description={description}
+              bottomTitle={bottomTitle}
+              theme={overrideTheme}
+            >
+              <View style={[styles.form, formStyle]}>
+                <Controller
+                  control={control}
+                  name="phone"
+                  rules={{
+                    validate: (value) =>
+                      value?.fullNumber?.length >= 10
+                        ? true
+                        : 'Please enter a valid phone number',
+                  }}
+                  render={({ field: { onChange, value } }) => (
+                    <PhoneNumberInputOne
+                      value={value.formattedNumber}
+                      onChangeText={onChange}
+                      disabled={isDisabled}
+                      error={!!errors.phone}
+                      errorMessage={errors.phone?.message}
+                      inputStyle={inputStyle}
+                      containerStyle={inputContainerStyle}
+                      theme={overrideTheme}
+                    />
+                  )}
+                />
+
+                {/* Submit button */}
+                <Button.Primary
+                  title="Login"
+                  disabled={!isValid || isDisabled}
+                  loading={isDisabled}
+                  onPress={handleSubmit(handleFormSubmit)}
+                  theme={overrideTheme}
+                />
+              </View>
+            </AuthLoginShell>
+          </HideKeyboard>
+        </View>
+      </KeyboardAvoidingView>
+    </BackgroundLayoutOne>
+  );
+};
+
+export default memo(LoginWithPhone);