[auth] OTP input for forgot password (#67)

* Added ability to go to verification screen from signup and forgot password * Fixed error with verification screen after forgetting password * Changed new password screen so that password requirements show even when the user hasn't inputted a new password yet * Fix small bugs in sign up and create password * Added ability to dismiss keyboard when tapping screen (#68) * [save] Database schema changes for saving stories (#61) * accidently forgot to branch * fethUserSavedStories function created * categories created * added method to delete row * favorites and reading list global variables set * PR changes * Add testcard * Finish testing schema changes * Run prettier * Remove testcard from home * Clean up code * Run prettier --------- Co-authored-by: Marcos Hernandez <[email protected]> Co-authored-by: Aditya Pawar <[email protected]> * Fix keyboard dismiss bug on story scroll (#70) * Fix keyboard dismiss bug on story scroll * Remove comments * Fix return statement in fetch (#72) * Fix return statement in fetch * Batch rpc call * Run prettier * Added content width prop to RenderHTML (#71) * [auth] Date picker crossplatform (#69) * added date picker button, no styling yet * working on style datepicker * working on datePicker * new datePicker library * testing on android * finished datePicker * changed small bugs * Fix date picker bugs * Revert set state --------- Co-authored-by: Kyle Ramachandran <[email protected]> Co-authored-by: Aditya Pawar <[email protected]> * Fixed requested changes * Add eas.json to gitignore --------- Co-authored-by: Aditya Pawar <[email protected]> Co-authored-by: Marcoss28 <[email protected]> Co-authored-by: Marcos Hernandez <[email protected]> Co-authored-by: Aditya Pawar <[email protected]> Co-authored-by: surajr10 <[email protected]> Co-authored-by: Kyle Ramachandran <[email protected]> Co-authored-by: Kyle Ramachandran <[email protected]>
calblueprint · Mar 27, 2024 · 23bebf3 · 23bebf3
1 parent f1711fc
commit 23bebf3
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,4 @@ yarn-error.*
 *.tsbuildinfo
 
 .vscode/
+eas.json
diff --git a/src/app/auth/forgotPassword/index.tsx b/src/app/auth/forgotPassword/index.tsx
@@ -25,7 +25,11 @@ function ForgotPasswordScreen() {
     const { error } = await resetPassword(emailToReset);
     if (error)
       Alert.alert('Could not send a reset password email. Please try again.');
-    else router.replace('auth/signup');
+    else
+      router.push({
+        pathname: '/auth/verify',
+        params: { finalRedirect: 'resetPassword', userEmail: emailToReset },
+      });
   };
 
   useEffect(() => {

diff --git a/src/app/auth/resetPassword/index.tsx b/src/app/auth/resetPassword/index.tsx
@@ -1,17 +1,15 @@
-import { Link, router } from 'expo-router';
-import React, { useEffect, useRef, useState } from 'react';
+import { router } from 'expo-router';
+import { useEffect, useState } from 'react';
 import { Alert, Text, View } from 'react-native';
 import { Icon as RNEIcon } from 'react-native-elements';
 
 import styles from './styles';
-import Icon from '../../../../assets/icons';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import PasswordComplexityText from '../../../components/PasswordComplexityText/PasswordComplexityText';
-import supabase from '../../../utils/supabase';
 
 function ResetPasswordScreen() {
   const { updateUser, signOut } = useSession();
@@ -43,6 +41,11 @@ function ResetPasswordScreen() {
       setHasNumber(/[0-9]/.test(text));
       setHasLength(text.length >= 8);
       //need to check that it is different from old password
+    } else {
+      setHasUppercase(false);
+      setHasLowercase(false);
+      setHasNumber(false);
+      setHasLength(false);
     }
   };
 
@@ -105,38 +108,31 @@ function ResetPasswordScreen() {
           </UserStringInput>
         </View>
 
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasUppercase}
-            message="At least 1 uppercase letter"
-          />
-        )}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasLowercase}
-            message="At least 1 lowercase letter"
-          />
-        )}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasNumber}
-            message="At least 1 number"
-          />
-        )}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasLength}
-            message="At least 8 characters"
-          />
-        )}
+        <PasswordComplexityText
+          condition={hasUppercase}
+          message="At least 1 uppercase letter"
+        />
+
+        <PasswordComplexityText
+          condition={hasLowercase}
+          message="At least 1 lowercase letter"
+        />
+
+        <PasswordComplexityText
+          condition={hasNumber}
+          message="At least 1 number"
+        />
+
+        <PasswordComplexityText
+          condition={hasLength}
+          message="At least 8 characters"
+        />
 
         {/* functionality for this has not been implemented */}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={isDifferent}
-            message="Must be different than your old password"
-          />
-        )}
+        <PasswordComplexityText
+          condition={isDifferent}
+          message="Must be different than your old password"
+        />
 
         {passwordIsValid && (
           <View>

diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx
@@ -7,7 +7,6 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import validator from 'validator';
 
 import styles from './styles';
-import Icon from '../../../../assets/icons';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 import PasswordComplexityText from '../../../components/PasswordComplexityText/PasswordComplexityText';
@@ -130,7 +129,11 @@ function SignUpScreen() {
     });
 
     if (error) Alert.alert(error.message);
-    else router.replace('/auth/verify');
+    else
+      router.push({
+        pathname: '/auth/verify',
+        params: { finalRedirect: 'onboarding' },
+      });
 
     setLoading(false);
   };
@@ -251,6 +254,8 @@ function SignUpScreen() {
                 loading ||
                 emailError !== '' ||
                 usernameError !== '' ||
+                firstName.length === 0 ||
+                lastName.length === 0 ||
                 email.length === 0 ||
                 username.length === 0
               }

diff --git a/src/app/auth/verify/index.tsx b/src/app/auth/verify/index.tsx
@@ -1,4 +1,4 @@
-import { Link, router } from 'expo-router';
+import { Link, Redirect, router, useLocalSearchParams } from 'expo-router';
 import { useState, useRef, useEffect } from 'react';
 import { View, Text } from 'react-native';
 import OTPTextInput from 'react-native-otp-textinput';
@@ -16,6 +16,12 @@ function VerificationScreen() {
   const [errorMessage, setErrorMessage] = useState('');
   const [showX, setShowX] = useState(false);
   const [userInput, setUserInput] = useState('');
+  const params = useLocalSearchParams<{
+    finalRedirect: string;
+    userEmail: string;
+  }>();
+  const { finalRedirect, userEmail } = params;
+  const email = user?.email ?? userEmail ?? '';
 
   const inputRef = useRef<OTPTextInput>(null);
 
@@ -30,57 +36,54 @@ function VerificationScreen() {
   };
 
   const verifyCode = async () => {
-    if (user?.email) {
-      const { error } = await verifyOtp(user.email, userInput);
-
-      console.log(error);
-      if (error) {
-        setShowX(true);
-        setErrorMessage('Incorrect code. Please try again.');
-      } else {
-        router.replace('/auth/onboarding');
-      }
+    const { error } = await verifyOtp(email, userInput);
+
+    console.log(error);
+    if (error) {
+      setShowX(true);
+      setErrorMessage('Incorrect code. Please try again.');
+    } else {
+      router.replace('/auth/' + finalRedirect);
     }
   };
 
   const resendCode = async () => {
     clearText();
 
-    if (user?.email) {
-      const { error } = await resendVerification(user.email);
-
-      if (error) {
-        setShowX(false);
-        setErrorMessage(
-          'Please wait 1 minute for us to resend the verification code.',
-        );
-      } else {
-        Toast.show({
-          type: 'success',
-          text1: `A new verification code has been sent to`,
-          text2: `${blurrEmail()}.`,
-          text2Style: globalStyles.subtextBold,
-          text1Style: globalStyles.subtext,
-          position: 'bottom',
-        });
-      }
+    const { error } = await resendVerification(email);
+
+    if (error) {
+      setShowX(false);
+      setErrorMessage(
+        'Please wait 1 minute for us to resend the verification code.',
+      );
+    } else {
+      Toast.show({
+        type: 'success',
+        text1: `A new verification code has been sent to`,
+        text2: `${blurrEmail()}.`,
+        text2Style: globalStyles.subtextBold,
+        text1Style: globalStyles.subtext,
+        position: 'bottom',
+      });
     }
   };
 
   const blurrEmail = () => {
-    if (user?.email) {
-      const length = user?.email?.split('@')[0].length;
-      return `${user?.email?.substring(0, 2)}*****${user?.email
-        ?.split('@')[0]
-        .substring(length - 1, length)}@${user?.email?.split('@')[1]}`;
-    }
-    return 'your email';
+    const length = email?.split('@')[0].length;
+    return `${email?.substring(0, 2)}*****${email
+      ?.split('@')[0]
+      .substring(length - 1, length)}@${email?.split('@')[1]}`;
   };
 
   const renderBlurredEmail = () => {
     return <Text style={globalStyles.subtextBold}>{blurrEmail()}.</Text>;
   };
 
+  if (email === '') {
+    return <Redirect href="/auth/login" />;
+  }
+
   return (
     <SafeAreaView style={[globalStyles.authContainer, styles.container]}>
       <Link href="/auth/signup" style={[globalStyles.subtext, styles.back]}>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,4 @@ yarn-error.*
		*.tsbuildinfo

		.vscode/
		eas.json