@fadyshawky/react-native-magic 1.0.5 → 1.0.6

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#342D0C",
+        "titleBar.activeBackground": "#493F10",
+        "titleBar.activeForeground": "#FCFAF0"
+    }
+}

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.6] - 2024-12-24
+
+### Added
+- Added missing password reset handlers (`resetPasswordErrorHandler` and `resetPasswordLoadingHandler`) to user slice
+- Added password reset flow with the following states:
+  - Loading state during password reset request
+  - Error handling for failed password reset attempts
+  - Success handling for completed password reset
+- Added complete user registration flow:
+  - User input validation
+  - Registration request handling
+  - Success state with automatic login
+  - Error handling for failed registration attempts
+  - Loading states during registration process
+
 ## [1.0.5] - 2024-12-23
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
   "keywords": [
     "react-native-magic",

package/template/src/common/localization/translations/loginLocalization.ts

@@ -6,9 +6,25 @@ export const loginLocalization = {
     EnterEmail: 'Enter email',
     Password: 'Password',
     EnterPassword: 'Enter password',
-    forgetPassword: 'Forget Password',
+    forgetPassword: 'Forgot Password?',
     continue: 'continue',
-    notMember: 'not a member yet?',
+    notMember: 'Not a member? Register now',
     findNursery: 'Find nursery',
+    registration: {
+      title: 'Create Account',
+      fullName: 'Full Name',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+      register: 'Register',
+      alreadyHaveAccount: 'Already have an account? Login',
+    },
+    forgotPassword: {
+      title: 'Forgot Password',
+      description:
+        "Enter your email address and we'll send you instructions to reset your password.",
+      resetPassword: 'Reset Password',
+      backToLogin: 'Back to Login',
+    },
   },
 };

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

@@ -25,3 +25,50 @@ export const userLogin = createAsyncThunk(
     }
   },
 );
+
+export const userRegister = createAsyncThunk(
+  'user/register',
+  async (
+    {
+      fullName,
+      email,
+      password,
+    }: {
+      fullName: string;
+      email: string;
+      password: string;
+    },
+    {rejectWithValue},
+  ) => {
+    try {
+      const response = await post({
+        url: '/register',
+        data: {
+          fullName,
+          email,
+          password,
+        },
+      });
+
+      return handleFetchJsonResponse(response);
+    } catch (e: any) {
+      return rejectWithValue(e?.response);
+    }
+  },
+);
+
+export const resetPassword = createAsyncThunk(
+  'user/resetPassword',
+  async ({email}: {email: string}, {rejectWithValue}) => {
+    try {
+      const response = await post({
+        url: '/reset-password',
+        data: {email},
+      });
+
+      return handleFetchJsonResponse(response);
+    } catch (e: any) {
+      return rejectWithValue(e?.response);
+    }
+  },
+);

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/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/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,30 +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({
@@ -32,7 +56,6 @@ export function Login(): JSX.Element {
         password,
       }),
     );
-
     setLoading(false);
   }
   const scroll = useRef<KeyboardAwareScrollView>(null);
@@ -43,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}
@@ -64,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>) => {
@@ -76,6 +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}
       />
       <PrimaryButton
         isLoading={loading}
@@ -83,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>
   );
 }
@@ -105,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,
+  },
+});