Skip to content

Commit

Permalink
ft-adding-SignUpBlankForm-SignInBlankForm-Screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@munezeromicha
munezeromicha committed May 6, 2024
1 parent 1ed92ac commit 1aa17bf
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 69 deletions.
154 changes: 102 additions & 52 deletions app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}>

Expand All @@ -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}
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -137,23 +165,55 @@ 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,
borderRadius: 8,
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,
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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,
Expand All @@ -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: {
Expand All @@ -253,7 +287,7 @@ const styles = StyleSheet.create({
padding: 10,
width: 380,
borderRadius: 16,
},
},
Buttons: {
gap: 10,
justifyContent: "center",
Expand All @@ -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,
},
Expand All @@ -286,4 +331,9 @@ const styles = StyleSheet.create({
paddingBottom: 48,
paddingRight: 24,
},
LoginText: {
color: "#246BFD",
fontWeight: "600",
},

});
Loading

0 comments on commit 1aa17bf

Please sign in to comment.