Skip to content

Commit

Permalink
feat: refactor code for reusability and remove third party package
Browse files Browse the repository at this point in the history
  • Loading branch information
@Agastya18
Agastya18 committed Feb 25, 2025
1 parent b402f81 commit fa00544
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 42 deletions.
67 changes: 67 additions & 0 deletions apps/native/app/(auth)/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,22 @@ import {
StyleSheet,
KeyboardAvoidingView,
Platform,
TouchableOpacity,
Text,
ScrollView,
} from "react-native";
import SocialButton from "@/components/SocialButton";
import CustomTextInput from "@/components/ui/common/CustomTextInput";
import CustomTitle from "@/components/ui/common/CustomTitle";
import CustomSubmitButton from "@/components/ui/common/CustomSubmitButton";
import { useRouter } from "expo-router";

const LoginScreen = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const isLoginEnabled = email.length > 0 && password.length > 0;
console.log(isLoginEnabled);
const router = useRouter();

const handleLogIn = () => {};

Expand Down Expand Up @@ -53,6 +58,40 @@ const LoginScreen = () => {
}
/>
</View>

<View style={styles.forgotPasswordContainer}>
<Text style={styles.forgotPasswordText}>Forgot password? </Text>
<TouchableOpacity onPress={() => router.navigate("/(auth)/login")}>
<Text style={styles.resetText}>Reset</Text>
</TouchableOpacity>
</View>

<Text style={styles.orText}>or</Text>

<SocialButton
iconName="google"
title="LOG IN WITH GMAIL"
onPress={() => console.log("Gmail Login")}
/>

<SocialButton
iconName="facebook-square"
title="LOG IN WITH FACEBOOK"
onPress={() => console.log("Facebook Login")}
/>

<SocialButton
iconName="github"
title="LOG IN WITH GITHUB"
onPress={() => console.log("GitHub Login")}
/>

<View style={styles.signupContainer}>
<Text style={styles.signupText}>Don't have an account? </Text>
<TouchableOpacity>
<Text style={styles.signupLink}>Sign up</Text>
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
);
Expand Down Expand Up @@ -93,6 +132,34 @@ const styles = StyleSheet.create({
fontWeight: "bold",
color: "white",
},
orText: {
textAlign: "center",
color: "#666",
marginVertical: 20,
},

signupContainer: {
flexDirection: "row",
justifyContent: "center",
marginTop: 20,
},
signupText: {
color: "#333",
},
signupLink: {
color: "#6B8E23",
},
forgotPasswordContainer: {
flexDirection: "row",
justifyContent: "center",
marginBottom: 20,
},
forgotPasswordText: {
color: "#333",
},
resetText: {
color: "#6B8E23",
},
});

export default LoginScreen;
45 changes: 45 additions & 0 deletions apps/native/components/SocialButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from "react";
import { TouchableOpacity, Text, StyleSheet, ViewStyle } from "react-native";
import AntDesign from "@expo/vector-icons/AntDesign";

type SocialButtonProps = {
iconName: string;
title: string;
onPress: () => void;
style?: ViewStyle;
};

const SocialButton: React.FC<SocialButtonProps> = ({
iconName,
title,
onPress,
style,
}) => {
return (
<TouchableOpacity style={[styles.socialButton, style]} onPress={onPress}>
<AntDesign name={iconName} size={20} color="#6B8E23" />
<Text style={styles.socialButtonText}>{title}</Text>
</TouchableOpacity>
);
};

const styles = StyleSheet.create({
socialButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
padding: 12,
borderRadius: 4,
borderWidth: 1,
borderColor: "#6B8E23",
marginBottom: 12,
},
socialButtonText: {
color: "#6B8E23",
marginLeft: 10,
fontSize: 14,
fontWeight: "600",
},
});

export default SocialButton;
46 changes: 4 additions & 42 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -906,20 +906,7 @@
"@babel/parser" "^7.25.9"
"@babel/types" "^7.25.9"

"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3":
version "7.26.9"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.9.tgz#4398f2394ba66d05d988b2ad13c219a2c857461a"
integrity sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==
dependencies:
"@babel/code-frame" "^7.26.2"
"@babel/generator" "^7.26.9"
"@babel/parser" "^7.26.9"
"@babel/template" "^7.26.9"
"@babel/types" "^7.26.9"
debug "^4.3.1"
globals "^11.1.0"

"@babel/traverse@^7.25.3", "@babel/traverse@^7.26.8", "@babel/traverse@^7.26.9":
"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3", "@babel/traverse@^7.25.3", "@babel/traverse@^7.26.8", "@babel/traverse@^7.26.9":
version "7.26.9"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.9.tgz#4398f2394ba66d05d988b2ad13c219a2c857461a"
integrity sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==
Expand Down Expand Up @@ -12607,16 +12594,7 @@ string-length@^5.0.1:
char-regex "^2.0.0"
strip-ansi "^7.0.1"

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -12725,7 +12703,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand All @@ -12739,13 +12717,6 @@ strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1, strip-ansi@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
Expand Down Expand Up @@ -13850,7 +13821,7 @@ word-wrap@^1.2.5:
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -13868,15 +13839,6 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down

0 comments on commit fa00544

Please sign in to comment.