@fadyshawky/react-native-magic 1.0.4 → 1.0.6

package/template/src/core/store/user/userSlice.ts

@@ -2,7 +2,7 @@ import {createSlice} from '@reduxjs/toolkit';
 import {LoadState} from '../../../../types';
 import {newState} from '../../../common/utils/newState';
 import {handleErrorResponse} from '../../api/responseHandlers';
-import {userLogin} from './userActions';
+import {resetPassword, userLogin, userRegister} from './userActions';
 import {UserInitialState, UserPayload, UserState} from './userState';
 
 function loginHandler(state: UserState, payload: {payload: UserPayload}) {
@@ -32,6 +32,47 @@ function logoutHandler(state: UserState) {
   return newState(state, UserInitialState);
 }
 
+function resetPasswordHandler(
+  state: UserState,
+  payload: {payload: UserPayload},
+) {
+  return newState(state, {
+    user: payload.payload.user,
+    accessToken: payload.payload.token,
+    loginLoading: LoadState['allIsLoaded'],
+  });
+}
+
+function resetPasswordLoadingHandler(state: UserState) {
+  return newState(state, {
+    loginLoading: LoadState['pullToRefresh'],
+  });
+}
+
+function registerHandler(state: UserState, payload: {payload: UserPayload}) {
+  return newState(state, {
+    user: payload.payload.user,
+    accessToken: payload.payload.token,
+    loginLoading: LoadState['allIsLoaded'],
+  });
+}
+
+function registerLoadingHandler(state: UserState) {
+  return newState(state, {
+    loginLoading: LoadState['pullToRefresh'],
+  });
+}
+
+function registerErrorHandler(
+  state: UserState,
+  payload: {payload: string | unknown},
+) {
+  handleErrorResponse((payload.payload as string) || 'Register failed');
+  return newState(state, {
+    loginLoading: LoadState['error'],
+  });
+}
+
 function updateHandler(state: UserState, payload: any) {
   return newState(state, {
     user: {
@@ -41,6 +82,16 @@ function updateHandler(state: UserState, payload: any) {
   });
 }
 
+function resetPasswordErrorHandler(
+  state: UserState,
+  payload: {payload: string | unknown},
+) {
+  handleErrorResponse((payload.payload as string) || 'Password reset failed');
+  return newState(state, {
+    loginLoading: LoadState['error'],
+  });
+}
+
 export const {reducer: UserReducer, actions} = createSlice({
   name: 'user',
   initialState: UserInitialState,
@@ -55,7 +106,13 @@ export const {reducer: UserReducer, actions} = createSlice({
     builder
       .addCase(userLogin.fulfilled, loginHandler)
       .addCase(userLogin.rejected, loginErrorHandler)
-      .addCase(userLogin.pending, loginLoadingHandler);
+      .addCase(userLogin.pending, loginLoadingHandler)
+      .addCase(resetPassword.fulfilled, resetPasswordHandler)
+      .addCase(resetPassword.rejected, resetPasswordErrorHandler)
+      .addCase(resetPassword.pending, resetPasswordLoadingHandler)
+      .addCase(userRegister.fulfilled, registerHandler)
+      .addCase(userRegister.rejected, registerErrorHandler)
+      .addCase(userRegister.pending, registerLoadingHandler);
   },
 });
 

package/template/src/core/theme/fonts.ts

@@ -1,7 +1 @@
-export const Fonts = {
-  light: 'Poppins-Light',
-  regular: 'Poppins-Regular',
-  medium: 'Poppins-Medium',
-  semiBold: 'Poppins-SemiBold',
-  bold: 'Poppins-Bold',
-};
+export const Fonts = {};

package/template/src/navigation/AuthStack.tsx

@@ -1,6 +1,8 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {Login} from '../screens/Login/Login';
 import {Splash} from '../screens/splash/Splash';
+import RegistrationScreen from '../screens/registration/RegistrationScreen';
+import ForgotPasswordScreen from '../screens/resetPassword/ForgotPasswordScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -19,6 +21,20 @@ const AuthScreens = [
       headerShown: false,
     },
   },
+  {
+    id: 'Registration',
+    component: RegistrationScreen,
+    options: {
+      headerShown: false,
+    },
+  },
+  {
+    id: 'ForgotPassword',
+    component: ForgotPasswordScreen,
+    options: {
+      headerShown: false,
+    },
+  },
 ];
 
 export function AuthStack() {

package/template/src/navigation/HeaderComponents.tsx

@@ -1,10 +1,8 @@
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React from 'react';
-import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
-import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
-import {BottomTabHeaderProps} from '@react-navigation/bottom-tabs';
-import {ImageResources} from '../common/ImageResources.g';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {CommonSizes} from '../core/theme/commonSizes';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
 import {RootStackParamList} from './types';
 
 export function Header({title}: {title: string}) {

package/template/src/navigation/MainStack.tsx

@@ -5,7 +5,6 @@ import {
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import React from 'react';
-import {ImageResources} from '../common/ImageResources.g';
 import {localization} from '../common/localization/localization';
 import {Main} from '../screens/main/Main';
 import {Profile} from '../screens/profile/Profile';

package/template/src/navigation/types.ts

@@ -1,5 +1,11 @@
 export type RootStackParamList = {
   Home: undefined;
   Details: {id: string};
-  // ... add other screens as needed
+  Login: undefined;
+  Registration: undefined;
+  ForgotPassword: undefined;
+  Main: undefined;
+  Profile: undefined;
+  Settings: undefined;
+  Splash: undefined;
 };

package/template/src/screens/Login/Login.tsx

@@ -1,31 +1,54 @@
 import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {toLower} from 'lodash';
 import React, {useRef, useState} from 'react';
 import {
+  findNodeHandle,
   NativeSyntheticEvent,
   StyleSheet,
   Text,
   TextInputFocusEventData,
-  findNodeHandle,
 } from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {ButtonType} from '../../../types';
 import {PrimaryButton} from '../../common/components/PrimaryButton';
 import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
 import {localization} from '../../common/localization/localization';
+import {emptyValidation} from '../../common/validations/commonValidations';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
 import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
+import type {RootStackParamList} from '../../navigation/types';
 
 export function Login(): JSX.Element {
   const dispatch = useAppDispatch();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  const {error: emailError, recheckValue: recheckEmail} = useInputError(
+    email,
+    emailValidations,
+  );
+  const {error: passwordError, recheckValue: recheckPassword} = useInputError(
+    password,
+    emptyValidation,
+  );
 
   async function loginUser() {
+    const emailValid = recheckEmail() === null;
+    const passwordValid = recheckPassword() === null;
+
+    if (!emailValid || !passwordValid) {
+      return;
+    }
+
     setLoading(true);
     await dispatch(
       userLogin({
@@ -33,7 +56,6 @@ export function Login(): JSX.Element {
         password,
       }),
     );
-
     setLoading(false);
   }
   const scroll = useRef<KeyboardAwareScrollView>(null);
@@ -44,6 +66,15 @@ export function Login(): JSX.Element {
     scroll.current?.scrollToFocusedInput(reactNode);
     // }, 500);
   }
+
+  const goToRegistration = () => {
+    navigation.navigate('Registration');
+  };
+
+  const goToForgotPassword = () => {
+    navigation.navigate('ForgotPassword');
+  };
+
   return (
     <KeyboardAwareScrollView
       ref={scroll}
@@ -65,6 +96,7 @@ export function Login(): JSX.Element {
         containerStyle={CommonStyles.textInputContainer}
         label={localization.login.Email}
         placeholder={localization.login.EnterEmail}
+        error={emailError}
       />
       <PrimaryTextInput
         onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -77,11 +109,12 @@ export function Login(): JSX.Element {
         containerStyle={CommonStyles.textInputContainer}
         label={localization.login.Password}
         placeholder={localization.login.EnterPassword}
+        error={passwordError}
       />
       <PrimaryButton
+        onPress={goToForgotPassword}
         label={localization.login.forgetPassword}
         type={ButtonType.borderless}
-        style={{alignSelf: 'flex-end'}}
       />
       <PrimaryButton
         isLoading={loading}
@@ -89,6 +122,11 @@ export function Login(): JSX.Element {
         label={localization.login.continue}
         type={ButtonType.solid}
       />
+      <PrimaryButton
+        onPress={goToRegistration}
+        label={localization.login.notMember}
+        type={ButtonType.borderless}
+      />
     </KeyboardAwareScrollView>
   );
 }
@@ -111,4 +149,17 @@ const styles = StyleSheet.create({
     paddingVertical: 26,
     gap: 16,
   },
+  forgotPassword: {
+    ...CommonStyles.normalText,
+    color: Colors.primary100,
+    textAlign: 'right',
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  registerLink: {
+    ...CommonStyles.normalText,
+    color: Colors.primary100,
+    textAlign: 'center',
+    marginTop: 16,
+  },
 });

package/template/src/screens/registration/RegistrationScreen.tsx

@@ -0,0 +1,198 @@
+import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  Text,
+  TextInputFocusEventData,
+  findNodeHandle,
+} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
+import {localization} from '../../common/localization/localization';
+import {emptyValidation} from '../../common/validations/commonValidations';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {
+  emailValidations,
+  fullNameValidations,
+} from '../../common/validations/profileValidations';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {userRegister} from '../../core/store/user/userActions';
+import {Colors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import type {RootStackParamList} from '../../navigation/types';
+
+export default function RegistrationScreen(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+
+  // Add validation hooks
+  const {error: fullNameError, recheckValue: recheckFullName} = useInputError(
+    formData.fullName,
+    fullNameValidations,
+  );
+  const {error: emailError, recheckValue: recheckEmail} = useInputError(
+    formData.email,
+    emailValidations,
+  );
+  const {error: passwordError, recheckValue: recheckPassword} = useInputError(
+    formData.password,
+    emptyValidation,
+  );
+  const {error: confirmPasswordError, recheckValue: recheckConfirmPassword} =
+    useInputError(formData.confirmPassword, emptyValidation);
+
+  function scrollToInput(reactNode: any) {
+    scroll.current?.scrollToFocusedInput(reactNode);
+  }
+
+  async function handleRegistration() {
+    // Validate all fields
+    const isFullNameValid = recheckFullName() === null;
+    const isEmailValid = recheckEmail() === null;
+    const isPasswordValid = recheckPassword() === null;
+    const isConfirmPasswordValid = recheckConfirmPassword() === null;
+
+    if (
+      !isFullNameValid ||
+      !isEmailValid ||
+      !isPasswordValid ||
+      !isConfirmPasswordValid
+    ) {
+      return;
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      // Add error handling for password mismatch
+      return;
+    }
+
+    setLoading(true);
+    await dispatch(
+      userRegister({
+        fullName: formData.fullName,
+        email: formData.email.toLowerCase(),
+        password: formData.password,
+      }),
+    );
+    setLoading(false);
+  }
+
+  const goToLogin = () => {
+    navigation.navigate('Login');
+  };
+
+  return (
+    <KeyboardAwareScrollView
+      ref={scroll}
+      resetScrollToCoords={{x: 0, y: 0}}
+      scrollEnabled={true}
+      enableOnAndroid={true}
+      contentContainerStyle={styles.contentContainer}
+      contentInsetAdjustmentBehavior={'automatic'}
+      style={styles.container}>
+      <Text style={CommonStyles.h1_semiBold}>
+        {localization.login.registration.title}
+      </Text>
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        value={formData.fullName}
+        onChangeText={text => setFormData({...formData, fullName: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.fullName}
+        placeholder={localization.login.registration.fullName}
+        error={fullNameError}
+      />
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        autoCapitalize="none"
+        value={formData.email}
+        onChangeText={text => setFormData({...formData, email: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.email}
+        placeholder={localization.login.EnterEmail}
+        error={emailError}
+      />
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        secureTextEntry
+        value={formData.password}
+        onChangeText={text => setFormData({...formData, password: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.password}
+        placeholder={localization.login.EnterPassword}
+        error={passwordError}
+      />
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        secureTextEntry
+        value={formData.confirmPassword}
+        onChangeText={text => setFormData({...formData, confirmPassword: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.confirmPassword}
+        placeholder={localization.login.registration.confirmPassword}
+        error={confirmPasswordError}
+      />
+
+      <PrimaryButton
+        isLoading={loading}
+        onPress={handleRegistration}
+        label={localization.login.registration.register}
+        type={ButtonType.solid}
+      />
+      <PrimaryButton
+        onPress={goToLogin}
+        label={localization.login.registration.alreadyHaveAccount}
+        type={ButtonType.borderless}
+      />
+    </KeyboardAwareScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: Colors.white,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingVertical: 26,
+    gap: 16,
+  },
+  loginLink: {
+    ...CommonStyles.normalText,
+    color: Colors.primary100,
+    textAlign: 'center',
+    marginTop: 16,
+  },
+});

package/template/src/screens/resetPassword/ForgotPasswordScreen.tsx

@@ -0,0 +1,129 @@
+import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  Text,
+  TextInputFocusEventData,
+  findNodeHandle,
+} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
+import {localization} from '../../common/localization/localization';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {emailValidations} from '../../common/validations/profileValidations';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {resetPassword} from '../../core/store/user/userActions';
+import {Colors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import type {RootStackParamList} from '../../navigation/types';
+
+export default function ForgotPasswordScreen(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+
+  const {error: emailError, recheckValue: recheckEmail} = useInputError(
+    email,
+    emailValidations,
+  );
+
+  function scrollToInput(reactNode: any) {
+    scroll.current?.scrollToFocusedInput(reactNode);
+  }
+
+  async function handleResetPassword() {
+    const isEmailValid = recheckEmail() === null;
+    if (!isEmailValid) {
+      return;
+    }
+
+    setLoading(true);
+    await dispatch(resetPassword({email: email.toLowerCase()}));
+    setLoading(false);
+  }
+
+  const goToLogin = () => {
+    navigation.navigate('Login');
+  };
+
+  return (
+    <KeyboardAwareScrollView
+      ref={scroll}
+      resetScrollToCoords={{x: 0, y: 0}}
+      scrollEnabled={true}
+      enableOnAndroid={true}
+      contentContainerStyle={styles.contentContainer}
+      contentInsetAdjustmentBehavior={'automatic'}
+      style={styles.container}>
+      <Text style={CommonStyles.h1_semiBold}>
+        {localization.login.forgotPassword.title}
+      </Text>
+
+      <Text style={styles.description}>
+        {localization.login.forgotPassword.description}
+      </Text>
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        autoCapitalize="none"
+        value={email}
+        onChangeText={setEmail}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.Email}
+        placeholder={localization.login.EnterEmail}
+        error={emailError}
+      />
+
+      <PrimaryButton
+        isLoading={loading}
+        onPress={handleResetPassword}
+        label={localization.login.forgotPassword.resetPassword}
+        type={ButtonType.solid}
+      />
+
+      <PrimaryButton
+        onPress={goToLogin}
+        label={localization.login.forgotPassword.backToLogin}
+        type={ButtonType.borderless}
+      />
+    </KeyboardAwareScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: Colors.white,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingVertical: 26,
+    gap: 16,
+  },
+  description: {
+    ...CommonStyles.normalText,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  loginLink: {
+    ...CommonStyles.normalText,
+    color: Colors.primary100,
+    textAlign: 'center',
+    marginTop: 16,
+  },
+});

package/template/src/types/react-native-config.d.ts

@@ -0,0 +1,8 @@
+declare module 'react-native-config' {
+  export interface NativeConfig {
+    API_BASE_URL: string;
+    [key: string]: string;
+  }
+  const Config: NativeConfig;
+  export default Config;
+}