feat: changePassword, forgotPassword, resetPassword apis

packages/rn-api/src/models/user/PasswordModel.js

@@ -0,0 +1,13 @@
+export default class PasswordModel {
+  constructor(message, errorCode, data, isSuccess) {
+    this.message = message
+    this.errorCode = errorCode
+    this.data = data
+    this.isSuccess = isSuccess
+  }
+
+  static parseFromJson = payload => {
+    const {message, errorCode, data, isSuccess} = payload
+    return new PasswordModel(message, errorCode, data, isSuccess)
+  }
+}

packages/rn-api/src/navigation/RouteKey.js

@@ -4,6 +4,9 @@ export default {
   LoginScreen: 'LoginScreen',
   SignUpScreen: 'SignUpScreen',
   HomeScreen: 'HomeScreen',
+  ForgotPasswordScreen: 'ForgotPasswordScreen',
+  ResetPasswordScreen: 'ResetPasswordScreen',
+  ChangePasswordScreen: 'ChangePasswordScreen',
 
   /** Stack */
   AuthStack: 'AuthStack',

packages/rn-api/src/navigation/ScreenService.js

@@ -1,5 +1,11 @@
 import RouteKey from './RouteKey'
-import {SignUpScreen, LoginScreen} from '../screens'
+import {
+  SignUpScreen,
+  LoginScreen,
+  ForgotPasswordScreen,
+  ResetPasswordScreen,
+  ChangePasswordScreen,
+} from '../screens'
 // Screen Import
 import HomeScreen from '../screens/HomeComponent/HomeScreen'
 import {colors} from '../themes'
@@ -13,6 +19,12 @@ export const screenMatch = screen => {
       return SignUpScreen
     case RouteKey.HomeScreen:
       return HomeScreen
+    case RouteKey.ForgotPasswordScreen:
+      return ForgotPasswordScreen
+    case RouteKey.ResetPasswordScreen:
+      return ResetPasswordScreen
+    case RouteKey.ChangePasswordScreen:
+      return ChangePasswordScreen
     default:
       return ''
   }

packages/rn-api/src/navigation/StackNavigation.js

@@ -36,6 +36,21 @@ export const AuthNavigator = () => (
       component={screenMatch(RouteKey.SignUpScreen)}
       options={optionsMatch}
     />
+    <Stack.Screen
+      name={RouteKey.ForgotPasswordScreen}
+      component={screenMatch(RouteKey.ForgotPasswordScreen)}
+      options={optionsMatch}
+    />
+    <Stack.Screen
+      name={RouteKey.ResetPasswordScreen}
+      component={screenMatch(RouteKey.ResetPasswordScreen)}
+      options={optionsMatch}
+    />
+    <Stack.Screen
+      name={RouteKey.ChangePasswordScreen}
+      component={screenMatch(RouteKey.ChangePasswordScreen)}
+      options={optionsMatch}
+    />
   </Stack.Navigator>
 )
 

packages/rn-api/src/screens/AuthComponent/ChangePasswordScreen.js

@@ -0,0 +1,97 @@
+import React, {useCallback, useReducer} from 'react'
+import {ScreenContainer} from '../../components/ScreenContainer'
+import {Text, StyleSheet, View, TouchableOpacity} from 'react-native'
+import PasswordInput from '../../components/InputPassword'
+import {responsiveHeight} from '../../themes/metrics'
+import {colors} from '../../themes'
+import {useDispatch} from 'react-redux'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
+import {userActions} from '../../store/reducers'
+
+export const ChangePasswordScreen = () => {
+  const dispatch = useDispatch()
+  const [inputValue, setInputValue] = useReducer((prev, next) => ({...prev, ...next}), {
+    newPassword: '',
+    confirmPassword: '',
+    oldPassword: '',
+  })
+
+  const onSaveChangePassword = useCallback(() => {
+    dispatch(
+      userActions.changePasswordHandle({
+        newPassword: inputValue.newPassword,
+        confirmPassword: inputValue.confirmPassword,
+        oldPassword: inputValue.oldPassword,
+      }),
+    )
+  }, [inputValue, dispatch])
+
+  const onChangeNewPass = useCallback(text => {
+    setInputValue({newPassword: text})
+  }, [])
+
+  const onChangePassword = useCallback(text => {
+    setInputValue({confirmPassword: text})
+  }, [])
+
+  const onChangeOldPassword = useCallback(text => {
+    setInputValue({oldPassword: text})
+  }, [])
+
+  return (
+    <ScreenContainer style={styles.container}>
+      <KeyboardAwareScrollView>
+        <Text style={styles.titleText}>Change Password</Text>
+        <PasswordInput onChangeText={onChangeNewPass} defaultValue={inputValue.id} title={'New Password'} />
+        <View style={styles.passwordSection}>
+          <PasswordInput
+            onChangeText={onChangePassword}
+            defaultValue={inputValue.password}
+            title="Confirm Password"
+          />
+        </View>
+        <View style={styles.passwordSection}>
+          <PasswordInput
+            onChangeText={onChangeOldPassword}
+            defaultValue={inputValue.password}
+            title="Old Password"
+          />
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onSaveChangePassword}>
+          <Text>SAVE</Text>
+        </TouchableOpacity>
+      </KeyboardAwareScrollView>
+    </ScreenContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: responsiveHeight(10),
+    alignItems: 'center',
+  },
+  titleText: {
+    fontSize: responsiveHeight(25),
+    fontWeight: '600',
+    marginVertical: responsiveHeight(20),
+  },
+  passwordSection: {
+    marginTop: responsiveHeight(10),
+  },
+  button: {
+    backgroundColor: colors.primary,
+    width: '100%',
+    height: responsiveHeight(40),
+    marginTop: responsiveHeight(10),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+  },
+  forgotPassword: {
+    fontSize: responsiveHeight(18),
+    marginVertical: responsiveHeight(10),
+    alignSelf: 'flex-end',
+    color: colors.primary,
+    textDecorationLine: 'underline',
+  },
+})

packages/rn-api/src/screens/AuthComponent/ForgotPasswordScreen.js

@@ -0,0 +1,68 @@
+import React, {useCallback, useState} from 'react'
+import {ScreenContainer} from '../../components/ScreenContainer'
+import {Text, StyleSheet, TouchableOpacity} from 'react-native'
+import {responsiveHeight} from '../../themes/metrics'
+import {colors} from '../../themes'
+import {useDispatch} from 'react-redux'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
+import {userActions} from '../../store/reducers'
+import InputWithLabel from '../../components/InputWithLabel'
+
+export const ForgotPasswordScreen = () => {
+  const dispatch = useDispatch()
+  const [email, setEmail] = useState('')
+
+  const onForgotPassword = useCallback(() => {
+    dispatch(userActions.forgotPasswordHandle({email}))
+  }, [email, dispatch])
+
+  const onChangeEmail = useCallback(text => {
+    setEmail(text)
+  }, [])
+
+  return (
+    <ScreenContainer style={styles.container}>
+      <KeyboardAwareScrollView style={styles.contentSection}>
+        <Text style={styles.titleText}>Forgot Password</Text>
+        <InputWithLabel onChangeText={onChangeEmail} defaultValue={email} title={'Email'} />
+        <TouchableOpacity style={styles.button} onPress={onForgotPassword}>
+          <Text>SAVE</Text>
+        </TouchableOpacity>
+      </KeyboardAwareScrollView>
+    </ScreenContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: responsiveHeight(10),
+    alignItems: 'center',
+  },
+  contentSection: {
+    width: '100%',
+  },
+  titleText: {
+    fontSize: responsiveHeight(25),
+    fontWeight: '600',
+    marginVertical: responsiveHeight(20),
+  },
+  passwordSection: {
+    marginTop: responsiveHeight(10),
+  },
+  button: {
+    backgroundColor: colors.primary,
+    width: '100%',
+    height: responsiveHeight(40),
+    marginTop: responsiveHeight(10),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+  },
+  forgotPassword: {
+    fontSize: responsiveHeight(18),
+    marginVertical: responsiveHeight(10),
+    alignSelf: 'flex-end',
+    color: colors.primary,
+    textDecorationLine: 'underline',
+  },
+})

packages/rn-api/src/screens/AuthComponent/LoginScreen.js

@@ -1,4 +1,96 @@
-import React from 'react'
-import {ScreenContainer} from '../../components'
+import React, {useCallback, useReducer} from 'react'
+import {ScreenContainer} from '../../components/ScreenContainer'
+import {Text, StyleSheet, View, TouchableOpacity} from 'react-native'
+import PasswordInput from '../../components/InputPassword'
+import {responsiveHeight} from '../../themes/metrics'
+import {colors} from '../../themes'
+import {useDispatch} from 'react-redux'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
+import {userActions} from '../../store/reducers'
+import {navigate} from '../../navigation/NavigationService'
+import RouteKey from '../../navigation/RouteKey'
+import InputWithLabel from '../../components/InputWithLabel'
 
-export const LoginScreen = () => <ScreenContainer />
+export const LoginScreen = () => {
+  const dispatch = useDispatch()
+  const [inputValue, setInputValue] = useReducer((prev, next) => ({...prev, ...next}), {
+    email: '',
+    password: '',
+  })
+
+  const onPressLogin = useCallback(() => {
+    dispatch(userActions.userLogin())
+  }, [dispatch])
+
+  const onChangeEmail = useCallback(text => {
+    setInputValue({email: text})
+  }, [])
+
+  const onChangePassword = useCallback(text => {
+    setInputValue({password: text})
+  }, [])
+
+  return (
+    <ScreenContainer style={styles.container}>
+      <KeyboardAwareScrollView>
+        <Text style={styles.titleText}>Login Screen</Text>
+        <InputWithLabel onChangeText={onChangeEmail} value={inputValue.id} title={'Email'} />
+        <View style={styles.passwordSection}>
+          <PasswordInput onChangeText={onChangePassword} value={inputValue.password} title="Password" />
+        </View>
+        <TouchableOpacity
+          onPress={() => {
+            navigate(RouteKey.ChangePasswordScreen)
+          }}>
+          <Text style={styles.forgotPassword}>Change Password</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            navigate(RouteKey.ForgotPasswordScreen)
+          }}>
+          <Text style={styles.forgotPassword}>Forgot Password</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            navigate(RouteKey.ResetPasswordScreen)
+          }}>
+          <Text style={styles.forgotPassword}>Reset Password</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={onPressLogin}>
+          <Text>SAVE</Text>
+        </TouchableOpacity>
+      </KeyboardAwareScrollView>
+    </ScreenContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: responsiveHeight(10),
+    alignItems: 'center',
+  },
+  titleText: {
+    fontSize: responsiveHeight(25),
+    fontWeight: '600',
+    marginVertical: responsiveHeight(20),
+  },
+  passwordSection: {
+    marginTop: responsiveHeight(10),
+  },
+  button: {
+    backgroundColor: colors.primary,
+    width: '100%',
+    height: responsiveHeight(40),
+    marginTop: responsiveHeight(10),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+  },
+  forgotPassword: {
+    fontSize: responsiveHeight(18),
+    marginVertical: responsiveHeight(10),
+    alignSelf: 'flex-end',
+    color: colors.primary,
+    textDecorationLine: 'underline',
+  },
+})