[TMA-308] Forgot password logic [Frontend] (#131)

* Done with changes

* Submit on enter

* Fixed StrongPassword issue

* Clean and modular Verification.tsx

* small fix

1 files changed, 80 insertions, 53 deletions

diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index ad012c92..9fa1c12f 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -10,7 +10,7 @@ import {
   ArrowButton,
   LoadingIndicator,
 } from '../../components';
-import {VERIFY_OTP_ENDPOINT, SEND_OTP_ENDPOINT} from '../../constants';
+
 import {Text} from 'react-native-animatable';
 import {
   CodeField,
@@ -27,6 +27,13 @@ import {
   Platform,
 } from 'react-native';
 import {trackPromise} from 'react-promise-tracker';
+import {VerificationScreenType} from '../../types';
+import {
+  handlePasswordCodeVerification,
+  sendOtp,
+  verifyOtp,
+  handlePasswordResetRequest,
+} from '../../services';
 
 type VerificationScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -41,6 +48,8 @@ interface VerificationProps {
   navigation: VerificationScreenNavigationProp;
 }
 
+import {codeRegex} from '../../constants';
+
 const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
   const [value, setValue] = React.useState('');
   const ref = useBlurOnFulfill({value, cellCount: 6});
@@ -48,41 +57,46 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
     value,
     setValue,
   });
-  const {phone} = route.params;
+  const {id, screenType} = route.params;
+  const isPhoneVerification = screenType === VerificationScreenType.Phone;
+
+  const handlePhoneVerification = async () => {
+    const success = await trackPromise(verifyOtp(id, value));
+    if (success) {
+      navigation.navigate('RegistrationTwo', {phone: id});
+    }
+  };
+
+  const handlePasswordVerification = async () => {
+    const success = await trackPromise(
+      handlePasswordCodeVerification(id, value),
+    );
+    if (success) {
+      navigation.navigate('PasswordReset', {value: id});
+    }
+  };
 
   /**
    * Sends the verify_otp request upon tapping the Verify button.
-   * If successful, it navigates to the Profile page.
+   * If successful, it navigates to the respected page.
    */
   const handleVerification = async () => {
-    try {
-      let verifyOtpResponse = await fetch(VERIFY_OTP_ENDPOINT, {
-        method: 'POST',
-        body: JSON.stringify({
-          phone_number: '+1' + phone,
-          otp: value,
-        }),
-      });
-      let statusCode = verifyOtpResponse.status;
-      if (statusCode === 200) {
-        navigation.navigate('RegistrationTwo', {
-          phone: phone,
-        });
-      } else {
-        Alert.alert(
-          'Invalid verification code 🤔',
-          'Try again. Tap the resend code button if you need a new code.',
-        );
+    if (codeRegex.test(value)) {
+      try {
+        switch (screenType) {
+          case VerificationScreenType.Phone:
+            handlePhoneVerification();
+            break;
+          case VerificationScreenType.Password:
+            handlePasswordVerification();
+            break;
+        }
+      } catch (error) {
+        console.log(error);
+        Alert.alert('Something went wrong');
       }
-    } catch (error) {
-      Alert.alert(
-        'Verifiation failed 😓',
-        'Please double-check your network connection and retry.',
-      );
-      return {
-        name: 'Verification error',
-        description: error,
-      };
+    } else {
+      Alert.alert('Please enter a valid 6 digit code');
     }
   };
 
@@ -91,42 +105,49 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
    */
   const handleResend = async () => {
     try {
-      let sendOtpResponse = await trackPromise(
-        fetch(SEND_OTP_ENDPOINT, {
-          method: 'POST',
-          body: JSON.stringify({
-            phone: phone,
-          }),
-        }),
-      );
-      let sendOtpStatusCode = sendOtpResponse.status;
-      if (sendOtpStatusCode === 200) {
-        setValue('');
-        Alert.alert(
-          'New verification code sent!',
-          'Check your phone messages for your code.',
-        );
-      } else {
-        Alert.alert('Something went wrong!');
+      switch (screenType) {
+        case VerificationScreenType.Phone:
+          trackPromise(sendOtp(id));
+          break;
+        case VerificationScreenType.Password:
+          trackPromise(handlePasswordResetRequest(id));
+          break;
       }
     } catch (error) {
       console.log(error);
+      Alert.alert('Something went wrong');
+    }
+  };
+
+  const handleGoBack = () => {
+    switch (screenType) {
+      case VerificationScreenType.Phone:
+        navigation.navigate('RegistrationOne');
+        break;
+      case VerificationScreenType.Password:
+        navigation.navigate('PasswordResetRequest');
+        break;
     }
   };
 
   const Footer = () => (
     <View style={styles.footer}>
-      <ArrowButton
-        direction="backward"
-        onPress={() => navigation.navigate('RegistrationOne')}
-      />
+      <ArrowButton direction="backward" onPress={() => handleGoBack()} />
     </View>
   );
 
   return (
     <Background centered style={styles.container}>
-      <RegistrationWizard style={styles.wizard} step="three" />
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+      {isPhoneVerification ? (
+        <RegistrationWizard style={styles.wizard} step="three" />
+      ) : (
+        <React.Fragment />
+      )}
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={
+          isPhoneVerification ? styles.form : styles.formPasswordVerification
+        }>
         <Text style={styles.formHeader}>Enter 6 digit code</Text>
         <Text style={styles.description}>
           We sent a 6 digit verification code to the phone number you provided.
@@ -185,6 +206,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     flex: 3,
   },
+  formPasswordVerification: {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flex: 3,
+    top: '35%',
+  },
   formHeader: {
     color: '#fff',
     fontSize: 20,