From 1aa17bf66cb57731218828e10ff34b4d05a25aea Mon Sep 17 00:00:00 2001
From: munezeromicha <munezerontaganiramichel@gmail.com>
Date: Sun, 5 May 2024 13:18:09 +0200
Subject: [PATCH] ft-adding-SignUpBlankForm-SignInBlankForm-Screen

---
 app/(auth)/SignIn&SignOut/SignInBlankForm.tsx | 154 ++++++++++++------
 app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx |  70 ++++++--
 2 files changed, 155 insertions(+), 69 deletions(-)

diff --git a/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx b/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
index 1130d588..816ead12 100644
--- a/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
+++ b/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
@@ -20,6 +20,9 @@ const Login = () => {
   const [password, setPassword] = useState("");
   const [secureTextEntry, setSecureTextEntry] = useState(true);
   const [isChecked, setIsChecked] = useState(false);
+  const [emailFocused, setEmailFocused] = useState(false);
+  const [passwordFocused, setPasswordFocused] = useState(false);
+
 
   const handleEmailChange = (text: string) => {
     setEmail(text);
@@ -33,6 +36,24 @@ const Login = () => {
     setSecureTextEntry(!secureTextEntry);
   };
 
+  const handleEmailFocus = () => {
+    setEmailFocused(true);
+    setPasswordFocused(false);
+  };
+
+  const handlePasswordFocus = () => {
+    setPasswordFocused(true);
+    setEmailFocused(false);
+  }
+
+  const handleEmailBlur = () => {
+    setEmailFocused(false);
+  };
+
+  const handlePasswordBlur = () => {
+    setPasswordFocused(false);
+  }
+
   return (
     <View style={styles.container}>
     
@@ -51,40 +72,47 @@ const Login = () => {
       </View>
 
       <View style={styles.Buttons}>
-        <View style={styles.inputOne}>
-          <Image source={require("../../../assets/icons/Message.png")} />
+        <View style={[styles.inputOne, emailFocused && styles.inputOneFocused]}>
+          <Image source={require("../../../assets/icons/Message.png")} style={[styles.icon, emailFocused && styles.iconFocused]} />
           <TextInput
-            style={styles.email}
+            style={[styles.email, emailFocused && styles.emailFocused]}
             placeholder="Email"
             keyboardType="email-address"
             placeholderTextColor="rgba(45, 45, 45, 0.5)"
             value={email}
             onChangeText={handleEmailChange}
+            onFocus={handleEmailFocus}
+            onBlur={handleEmailBlur}
           />
         </View>
 
-        <View style={styles.inputOne}>
-          <Image source={require("../../../assets/icons/Lock.png")} />
-          <View style={styles.passwordInputContainer}>
+        <View style={[styles.inputOne, passwordFocused && styles.inputOneFocused]}>
+          <Image source={require("../../../assets/icons/Lock.png")} style={[styles.icon, passwordFocused && styles.iconFocused]} />
+          
             <TextInput
-              style={styles.email}
+              style={[styles.email, passwordFocused && styles.emailFocused]}
               placeholder="Password"
               placeholderTextColor="rgba(45, 45, 45, 0.5)"
               secureTextEntry={secureTextEntry}
               value={password}
               onChangeText={handlePasswordChange}
+              onFocus={handlePasswordFocus}
+              onBlur={handlePasswordBlur}
             />
-            <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
-              <Ionicons
-                name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
-                size={24}
-                color="gray"
-              />
-            </TouchableWithoutFeedback>
-          </View>
+            <View style={[styles.passwordInputContainer, passwordFocused && styles.passwordInputContainerFocused]}>
+              <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
+                <Ionicons
+                  name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
+                  size={24}
+                  color={passwordFocused ? "#246BFD" : "gray"}
+                  style={styles.eye}
+                />
+              </TouchableWithoutFeedback>
+            </View>
         </View>
       </View>
 
+
       <View style={styles.Check}>
         <CheckBox
           value={isChecked}
@@ -102,7 +130,7 @@ const Login = () => {
       </View>
 
       <View>
-        <Text style={styles.frogotPass}>Forgot the password?</Text>
+        <Text style={[Typography.semiBold.large, {color:Colors.main.primary._500}]}>Forgot the password?</Text>
       </View>
 
       <View>
@@ -124,7 +152,7 @@ const Login = () => {
       <View style={styles.account}>
         <Text style={[Typography.regular.medium]}>Don’t have an account? </Text>
         <Text
-          style={styles.LoginText}
+          style={[Typography.semiBold.medium, {color:Colors.main.primary._500}]}
           onPress={() => router.replace("/(auth)/SignIn&SignOut/SignUpBlankForm")}
         >
           Sign up
@@ -137,6 +165,37 @@ const Login = () => {
 export default Login;
 
 const styles = StyleSheet.create({
+
+  inputOneFocused: {
+    borderColor: "#246BFD",
+    borderWidth: 2,
+  },
+  emailFocused: {
+    color: "#212121",
+    fontSize: 16
+  },
+  iconFocused: {
+    tintColor: "#246BFD",
+  },
+  passwordInputContainerFocused: {
+    borderColor: "#246BFD",
+    // borderWidth: 2,
+    // borderRadius: 5,
+  },
+  icon: {
+    tintColor: "#868a94",
+  },
+  eye:{
+    marginRight: 10
+  },
+  passwordIconContainer:{
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+  },
+  textInputFocused: {
+    borderColor: "blue",
+  },
   checkbox: {
     width: 24,
     height: 24,
@@ -144,16 +203,17 @@ const styles = StyleSheet.create({
     borderWidth: 3,
     borderColor: "#246BFD",
   },
-  frogotPass: {
-    fontSize: 16,
+  remember: {
+    fontSize: 14,
     fontWeight: "600",
-    lineHeight: 22.4,
+    lineHeight: 19.6,
     letterSpacing: 0.2,
-    textAlign: "center",
-    color: "#246BFD",
   },
-  account: {
+  Check: {
+    justifyContent: "center",
+    alignItems: "center",
     flexDirection: "row",
+    gap: 10,
   },
   smallCont: {
     width: 80,
@@ -170,12 +230,9 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   passwordInputContainer: {
+    // flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    // justifyContent: "space-around",
-    paddingRight: 6,
-    borderRadius: 5,
-    gap: 200
   },
   inputs1: {
     backgroundColor: "#fff",
@@ -186,18 +243,6 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     paddingHorizontal: 10,
   },
-  remember: {
-    fontSize: 14,
-    fontWeight: "600",
-    lineHeight: 19.6,
-    letterSpacing: 0.2,
-  },
-  Check: {
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 10,
-  },
   inputOne: {
     borderRadius: 16,
     backgroundColor: "#FAFAFA",
@@ -209,15 +254,10 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
     alignItems: "center",
     gap: 10,
-    // borderColor: '#000000',
-    // borderWidth: 2
   },
   email: {
     fontSize: 16,
-  },
-  LoginText: {
-    color: "#246BFD",
-    fontWeight: "600",
+    flex: 1,
   },
   signText: {
     fontSize: 16,
@@ -232,12 +272,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     shadowColor: '#246BFD',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
     elevation: 15,
   },
   textBtn: {
@@ -253,7 +287,7 @@ const styles = StyleSheet.create({
     padding: 10,
     width: 380,
     borderRadius: 16,
-  },
+  },  
   Buttons: {
     gap: 10,
     justifyContent: "center",
@@ -268,6 +302,17 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
+  frogotPass: {
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 22.4,
+    letterSpacing: 0.2,
+    textAlign: "center",
+    color: "#246BFD",
+  },
+  account: {
+    flexDirection: "row",
+  },
   middlePart: {
     gap: 30,
   },
@@ -286,4 +331,9 @@ const styles = StyleSheet.create({
     paddingBottom: 48,
     paddingRight: 24,
   },
+  LoginText: {
+    color: "#246BFD",
+    fontWeight: "600",
+  },
+
 });
diff --git a/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx b/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
index 633a1e51..d6726509 100644
--- a/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
+++ b/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
@@ -24,6 +24,7 @@ const Signup = () => {
   const [secureTextEntry, setSecureTextEntry] = useState(true);
   const [isChecked, setIsChecked] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+  const [passwordFocused, setPasswordFocused] = useState(false);
 
   const handleEmailChange = (text: string) => {
     setEmail(text);
@@ -37,6 +38,19 @@ const Signup = () => {
     setSecureTextEntry(!secureTextEntry);
   };
 
+  const handleEmailFocused = () => {
+    setIsFocused(true);
+  }
+  const handleEmailBlur = () => {
+    setIsFocused(false);
+  }
+  const handlePasswordFocused = () =>{
+    setPasswordFocused(true);
+  }
+  const handlePasswordBlur = () => {
+    setPasswordFocused(false);
+  }
+
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -63,20 +77,22 @@ const Signup = () => {
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
           keyboardVerticalOffset={60}
         >
-          <View style={styles.inputOne}>
-            <Image source={require("../../../assets/icons/Message.png")} />
+          <View style={[styles.inputOne, isFocused && styles.inputOneFocused]}>
+            <Image source={require("../../../assets/icons/Message.png")} style={[styles.icon, isFocused && styles.iconFocused]}/>
             <TextInput
-              style={styles.email}
+              style={[styles.email, isFocused && styles.emailFocused]}
               placeholder="Email"
               keyboardType="email-address"
               placeholderTextColor="rgba(45, 45, 45, 0.5)"
               value={email}
               onChangeText={handleEmailChange}
+              onFocus={handleEmailFocused}
+              onBlur={handleEmailBlur}
             />
           </View>
 
-          <View style={styles.inputOne}>
-            <Image source={require("../../../assets/icons/Lock.png")} />
+          <View style={[styles.inputOne, passwordFocused && styles.inputOneFocused]}>
+            <Image source={require("../../../assets/icons/Lock.png")} style={[styles.icon, passwordFocused && styles.iconFocused]}/>
             <TextInput
               style={styles.email}
               placeholder="Password"
@@ -84,13 +100,15 @@ const Signup = () => {
               secureTextEntry={secureTextEntry}
               value={password}
               onChangeText={handlePasswordChange}
+              onFocus={handlePasswordFocused}
+              onBlur={handlePasswordBlur}
             />
-            <View style={styles.passwordIconContainer}>
+            <View style={[styles.passwordInputContainer, passwordFocused && styles.passwordInputContainerFocused]}>
               <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
                 <Ionicons
                   name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
                   size={24}
-                  color="gray"
+                  color={passwordFocused ? "#246BFD" : "gray"}
                   style={styles.eye}
                 />
               </TouchableWithoutFeedback>
@@ -104,7 +122,7 @@ const Signup = () => {
           value={isChecked}
           onValueChange={setIsChecked}
           style={styles.checkbox}
-          color="#007bff"
+          
         />
         <Text
           style={[Typography.semiBold.medium, { color: Colors.grayScale._900 }]}
@@ -135,9 +153,9 @@ const Signup = () => {
 
       <View>
         <Text style={[Typography.regular.medium]}>
-          Already have an account?
+          Already have an account? 
           <Text
-            style={styles.signupText}
+           style={[Typography.semiBold.medium, {color:Colors.main.primary._500}]}
             onPress={() =>
               router.replace("/(auth)/SignIn&SignOut/SignInBlankForm")
             }
@@ -153,8 +171,26 @@ const Signup = () => {
 export default Signup;
 
 const styles = StyleSheet.create({
+
+  inputOneFocused: {
+    borderColor: "#246BFD",
+    borderWidth: 2,
+  },
+  emailFocused: {
+    color: "#212121",
+    fontSize: 16
+  },
+  iconFocused: {
+    tintColor: "#246BFD",
+  },
+  passwordInputContainerFocused: {
+    borderColor: "#246BFD",
+  },
+  icon: {
+    tintColor: "#868a94",
+  },
   eye: {
-    marginRight: 10,
+    marginRight: 40,
   },
   passwordIconContainer: {
     flexDirection: "row",
@@ -198,7 +234,7 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   passwordInputContainer: {
-    flex: 1,
+    // flex: 1,
     flexDirection: "row",
     alignItems: "center",
   },
@@ -230,11 +266,11 @@ const styles = StyleSheet.create({
     color: "#246BFD",
     fontWeight: "600",
   },
-  signText: {
-    fontSize: 16,
-    color: "#FFFFFF",
-    fontWeight: "bold",
-  },
+  // signText: {
+  //   fontSize: 16,
+  //   color: "#FFFFFF",
+  //   fontWeight: "bold",
+  // },
   signinBtn: {
     backgroundColor: "#246BFD",
     width: "90%",