From c8583e887d5df640e3eaa26b929404173e4e4e23 Mon Sep 17 00:00:00 2001
From: Kyle Ramachandran <kyleramachandran@berkeley.edu>
Date: Sun, 25 Feb 2024 14:40:24 -0800
Subject: [PATCH] [feat] added resetPassword screen, implemented most
 functionality except checking if new pwd matches existing pwd, and styled
 page

---
 src/app/auth/resetPassword/index.tsx  | 287 +++++++++++++-------------
 src/app/auth/resetPassword/styles.tsx |   7 +-
 2 files changed, 147 insertions(+), 147 deletions(-)

diff --git a/src/app/auth/resetPassword/index.tsx b/src/app/auth/resetPassword/index.tsx
index d5fd82ec..e02dde3c 100644
--- a/src/app/auth/resetPassword/index.tsx
+++ b/src/app/auth/resetPassword/index.tsx
@@ -85,156 +85,157 @@ function ResetPasswordScreen() {
 
   return (
     <View style={styles.container}>
-      <Text style={[globalStyles.h1]}>Create a New Password</Text>
-      <View style = {styles.newPassword}> 
-      <UserStringInput
-        placeholder="Password"
-        label="New password"
-        placeholderTextColor={colors.darkGrey}
-        onChange={text => {
-          setPassword(text);
-          checkPassword(text);
-        }}
-        value={password}
-        attributes={{
-          textContentType: 'password',
-          secureTextEntry: passwordTextHidden,
-        }}
-      >
-        <RNEIcon
-          name={passwordTextHidden ? 'visibility-off' : 'visibility'}
-          type="material"
-          style={styles.icon}
-          onPress={() => setPasswordTextHidden(!passwordTextHidden)}
-        />
-      </UserStringInput>
-      </View>
-
-      {password !== '' && (
-        <View style={styles.passwordComplexity}>
-          <Icon type={hasUppercase ? 'green_check' : 'grey_dot'} />
-          <Text
-            style={[
-              globalStyles.errorMessage,
-              styles.passwordErrorText,
-              hasUppercase
-                ? { color: colors.textGreen }
-                : { color: colors.textGrey },
-            ]}
-          >
-            At least 1 uppercase letter
-          </Text>
-        </View>
-      )}
-      {password !== '' && (
-        <View style={styles.passwordComplexity}>
-          <Icon type={hasLowercase ? 'green_check' : 'grey_dot'} />
-          <Text
-            style={[
-              globalStyles.errorMessage,
-              styles.passwordErrorText,
-              hasLowercase
-                ? { color: colors.textGreen }
-                : { color: colors.textGrey },
-            ]}
-          >
-            At least 1 lowercase letter
-          </Text>
-        </View>
-      )}
-      {password !== '' && (
-        <View style={styles.passwordComplexity}>
-          <Icon type={hasNumber ? 'green_check' : 'grey_dot'} />
-          <Text
-            style={[
-              globalStyles.errorMessage,
-              styles.passwordErrorText,
-              hasNumber
-                ? { color: colors.textGreen }
-                : { color: colors.textGrey },
-            ]}
+      <View>
+        <Text style={[globalStyles.h1]}>Create a New Password</Text>
+        <View style={styles.newPassword}>
+          <UserStringInput
+            placeholder="Password"
+            label="New password"
+            placeholderTextColor={colors.darkGrey}
+            onChange={text => {
+              setPassword(text);
+              checkPassword(text);
+            }}
+            value={password}
+            attributes={{
+              textContentType: 'password',
+              secureTextEntry: passwordTextHidden,
+            }}
           >
-            At least 1 number
-          </Text>
+            <RNEIcon
+              name={passwordTextHidden ? 'visibility-off' : 'visibility'}
+              type="material"
+              style={styles.icon}
+              onPress={() => setPasswordTextHidden(!passwordTextHidden)}
+            />
+          </UserStringInput>
         </View>
-      )}
-      {password !== '' && (
-        <View style={styles.passwordComplexity}>
-          <Icon type={hasLength ? 'green_check' : 'grey_dot'} />
-          <Text
-            style={[
-              globalStyles.errorMessage,
-              styles.passwordErrorText,
-              hasLength
-                ? { color: colors.textGreen }
-                : { color: colors.textGrey },
-            ]}
-          >
-            At least 8 characters
-          </Text>
-        </View>
-      )}
-      {/* functionality for this has not been implemented */}
-      {password !== '' && (
-        <View style={styles.passwordComplexity}>
-          <Icon type={isDifferent ? 'green_check' : 'grey_dot'} />
-          <Text
-            style={[
-              globalStyles.errorMessage,
-              styles.passwordErrorText,
-              isDifferent
-                ? { color: colors.textGreen }
-                : { color: colors.textGrey },
-            ]}
-          >
-            Must be different than your old password
-          </Text>
-        </View>
-      )}
 
-      <View style = {styles.newPassword}>
-        <UserStringInput
-          placeholder="Confirm Password"
-          label="Confirm password"
-          placeholderTextColor={colors.darkGrey}
-          onChange={text => {
-            setConfirmPassword(text);
-            checkConfirmPassword(text);
-          }}
-          value={confirmPassword}
-          attributes={{
-            textContentType: 'password',
-            secureTextEntry: confirmPasswordTextHidden,
-          }}
-        >
-          <RNEIcon
-            name={confirmPasswordTextHidden ? 'visibility-off' : 'visibility'}
-            type="material"
-            style={styles.icon}
-            onPress={() =>
-              setConfirmPasswordTextHidden(!confirmPasswordTextHidden)
-            }
-          />
-        </UserStringInput>
-      </View>
+        {password !== '' && (
+          <View style={styles.passwordComplexity}>
+            <Icon type={hasUppercase ? 'green_check' : 'grey_dot'} />
+            <Text
+              style={[
+                globalStyles.errorMessage,
+                styles.passwordErrorText,
+                hasUppercase
+                  ? { color: colors.textGreen }
+                  : { color: colors.textGrey },
+              ]}
+            >
+              At least 1 uppercase letter
+            </Text>
+          </View>
+        )}
+        {password !== '' && (
+          <View style={styles.passwordComplexity}>
+            <Icon type={hasLowercase ? 'green_check' : 'grey_dot'} />
+            <Text
+              style={[
+                globalStyles.errorMessage,
+                styles.passwordErrorText,
+                hasLowercase
+                  ? { color: colors.textGreen }
+                  : { color: colors.textGrey },
+              ]}
+            >
+              At least 1 lowercase letter
+            </Text>
+          </View>
+        )}
+        {password !== '' && (
+          <View style={styles.passwordComplexity}>
+            <Icon type={hasNumber ? 'green_check' : 'grey_dot'} />
+            <Text
+              style={[
+                globalStyles.errorMessage,
+                styles.passwordErrorText,
+                hasNumber
+                  ? { color: colors.textGreen }
+                  : { color: colors.textGrey },
+              ]}
+            >
+              At least 1 number
+            </Text>
+          </View>
+        )}
+        {password !== '' && (
+          <View style={styles.passwordComplexity}>
+            <Icon type={hasLength ? 'green_check' : 'grey_dot'} />
+            <Text
+              style={[
+                globalStyles.errorMessage,
+                styles.passwordErrorText,
+                hasLength
+                  ? { color: colors.textGreen }
+                  : { color: colors.textGrey },
+              ]}
+            >
+              At least 8 characters
+            </Text>
+          </View>
+        )}
+        {/* functionality for this has not been implemented */}
+        {password !== '' && (
+          <View style={styles.passwordComplexity}>
+            <Icon type={isDifferent ? 'green_check' : 'grey_dot'} />
+            <Text
+              style={[
+                globalStyles.errorMessage,
+                styles.passwordErrorText,
+                isDifferent
+                  ? { color: colors.textGreen }
+                  : { color: colors.textGrey },
+              ]}
+            >
+              Must be different than your old password
+            </Text>
+          </View>
+        )}
 
-      {password !== '' && (
-        <View style={styles.passwordComplexity}>
-          <Icon type={isMatching ? 'green_check' : 'grey_dot'} />
-          <Text
-            style={[
-              globalStyles.errorMessage,
-              styles.passwordErrorText,
-              isMatching
-                ? { color: colors.textGreen }
-                : { color: colors.textGrey },
-            ]}
+        <View style={styles.newPassword}>
+          <UserStringInput
+            placeholder="Confirm Password"
+            label="Confirm password"
+            placeholderTextColor={colors.darkGrey}
+            onChange={text => {
+              setConfirmPassword(text);
+              checkConfirmPassword(text);
+            }}
+            value={confirmPassword}
+            attributes={{
+              textContentType: 'password',
+              secureTextEntry: confirmPasswordTextHidden,
+            }}
           >
-            Inputs must match
-          </Text>
+            <RNEIcon
+              name={confirmPasswordTextHidden ? 'visibility-off' : 'visibility'}
+              type="material"
+              style={styles.icon}
+              onPress={() =>
+                setConfirmPasswordTextHidden(!confirmPasswordTextHidden)
+              }
+            />
+          </UserStringInput>
         </View>
-      )}
 
+        {password !== '' && (
+          <View style={styles.passwordComplexity}>
+            <Icon type={isMatching ? 'green_check' : 'grey_dot'} />
+            <Text
+              style={[
+                globalStyles.errorMessage,
+                styles.passwordErrorText,
+                isMatching
+                  ? { color: colors.textGreen }
+                  : { color: colors.textGrey },
+              ]}
+            >
+              Inputs must match
+            </Text>
+          </View>
+        )}
+      </View>
       <View style={styles.updatePassword}>
         <StyledButton
           disabled={!hasLength || !isMatching}
diff --git a/src/app/auth/resetPassword/styles.tsx b/src/app/auth/resetPassword/styles.tsx
index d367df86..97d878b4 100644
--- a/src/app/auth/resetPassword/styles.tsx
+++ b/src/app/auth/resetPassword/styles.tsx
@@ -5,16 +5,15 @@ export default StyleSheet.create({
     paddingVertical: 63,
     paddingLeft: 43,
     paddingRight: 44,
+    flex: 1,
+    justifyContent: 'space-between',
   },
 
   newPassword: {
     paddingBottom: 8,
   },
 
-  updatePassword: {
-    justifyContent: 'flex-end',
-    marginBottom: 99,
-  },
+  updatePassword: {},
 
   passwordComplexity: {
     display: 'flex',