Finish hide/show password

calblueprint · Nov 20, 2023 · 79817e7 · 79817e7
1 parent 17833b6
commit 79817e7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/src/app/auth/login.tsx b/src/app/auth/login.tsx
@@ -8,6 +8,7 @@ import UserStringInput from '../../components/UserStringInput';
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
 import supabase from '../../utils/supabase';
+import { Icon } from 'react-native-elements';
 
 function LoginScreen() {
   const sessionHandler = useSession();
@@ -67,7 +68,7 @@ function LoginScreen() {
   };
 
   return (
-    <View style={[globalStyles.authContainer, styles.flex]}>
+    <SafeAreaView style={[globalStyles.authContainer, styles.flex]}>
       <View>
         <Text style={[globalStyles.h4, styles.title]}>
           Read stories from young creators
@@ -89,7 +90,15 @@ function LoginScreen() {
             textContentType: 'password',
             secureTextEntry: passwordTextHidden,
           }}
-        />
+        >
+          <Icon
+            name={passwordTextHidden ? 'visibility-off' : 'visibility'}
+            type="material"
+            style={styles.icon}
+            onPress={() => setPasswordTextHidden(!passwordTextHidden)}
+          />
+        </UserStringInput>
+
         <Link style={styles.forgotPassword} href="/auth/forgotPassword">
           Forgot password?
         </Link>
@@ -112,7 +121,7 @@ function LoginScreen() {
           </Link>
         </Text>
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
 
@@ -139,10 +148,13 @@ const styles = StyleSheet.create({
     marginBottom: 64,
   },
   title: {
-    marginTop: 63,
+    paddingTop: 64,
     marginBottom: 41,
   },
   error: {
     color: 'red',
   },
+  icon: {
+    marginRight: 10,
+  },
 });
diff --git a/src/app/auth/signup.tsx b/src/app/auth/signup.tsx
@@ -8,6 +8,7 @@ import UserStringInput from '../../components/UserStringInput';
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
 import supabase from '../../utils/supabase';
+import { Icon } from 'react-native-elements';
 
 function SignUpScreen() {
   const { signUp } = useSession();
@@ -19,6 +20,7 @@ function SignUpScreen() {
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [passwordTextHidden, setPasswordTextHidden] = useState(true);
   const [loading, setLoading] = useState(false);
   const validUsernameCharacters = /^\w+$/g;
 
@@ -130,9 +132,16 @@ function SignUpScreen() {
           value={password}
           attributes={{
             textContentType: 'password',
-            // secureTextEntry: passwordTextHidden,
+            secureTextEntry: passwordTextHidden,
           }}
-        />
+        >
+          <Icon
+            name={passwordTextHidden ? 'visibility-off' : 'visibility'}
+            type="material"
+            style={styles.icon}
+            onPress={() => setPasswordTextHidden(!passwordTextHidden)}
+          />
+        </UserStringInput>
       </View>
 
       <View>
@@ -181,4 +190,7 @@ const styles = StyleSheet.create({
     marginTop: 65,
     marginBottom: 23,
   },
+  icon: {
+    marginRight: 10,
+  },
 });
diff --git a/src/components/UserStringInput.tsx b/src/components/UserStringInput.tsx
@@ -19,28 +19,35 @@ export default function UserStringInput({
   onChange = text => {},
 }: UserStringInputProps) {
   return (
-    <View style={[styles.verticallySpaced, globalStyles.mt20]}>
+    <View
+      style={[styles.container, styles.verticallySpaced, globalStyles.mt20]}
+    >
       <TextInput
         onChangeText={text => onChange(text)}
         value={value ?? ''}
         style={styles.inputField}
         placeholder={placeholder}
         placeholderTextColor="#000"
         {...attributes}
-      ></TextInput>
+      />
       {children}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  inputField: {
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
     borderWidth: 1,
     borderRadius: 5,
     borderColor: 'black',
+  },
+  inputField: {
+    flex: 1,
     fontSize: 14,
     fontFamily: 'Manrope',
-    alignItems: 'center',
     padding: 10,
     color: '#000000',
   },

diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
@@ -10,8 +10,7 @@ export default StyleSheet.create({
     paddingRight: 24,
   },
   authContainer: {
-    paddingLeft: 43,
-    paddingRight: 44,
+    marginHorizontal: 38,
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'space-between',