Skip to content

Commit

Permalink
feat: enhance login screen with social login options and password res…
Browse files Browse the repository at this point in the history 
…et link
  • Loading branch information
@Agastya18
Agastya18 committed Feb 23, 2025
1 parent b402f81 commit 9173085
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 42 deletions.
77 changes: 77 additions & 0 deletions apps/native/app/(auth)/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ import {
StyleSheet,
KeyboardAvoidingView,
Platform,
TouchableOpacity,
Text,
ScrollView,
} from "react-native";
import CustomTextInput from "@/components/ui/common/CustomTextInput";
import CustomTitle from "@/components/ui/common/CustomTitle";
import CustomSubmitButton from "@/components/ui/common/CustomSubmitButton";
import Icon from "react-native-vector-icons/FontAwesome";

const LoginScreen = () => {
const [email, setEmail] = useState("");
Expand Down Expand Up @@ -53,6 +56,37 @@ const LoginScreen = () => {
}
/>
</View>

<View style={styles.forgotPasswordContainer}>
<Text style={styles.forgotPasswordText}>Forgot password? </Text>
<TouchableOpacity>
<Text style={styles.resetText}>Reset</Text>
</TouchableOpacity>
</View>

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

<TouchableOpacity style={styles.socialButton}>
<Icon name="google" size={20} color="#6B8E23" />
<Text style={styles.socialButtonText}>LOG IN WITH GMAIL</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.socialButton}>
<Icon name="facebook" size={20} color="#6B8E23" />
<Text style={styles.socialButtonText}>LOG IN WITH FACEBOOK</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.socialButton}>
<Icon name="github" size={20} color="#6B8E23" />
<Text style={styles.socialButtonText}>LOG IN WITH GITHUB</Text>
</TouchableOpacity>

<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 +127,49 @@ const styles = StyleSheet.create({
fontWeight: "bold",
color: "white",
},
orText: {
textAlign: "center",
color: "#666",
marginVertical: 20,
},
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",
},
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;
1 change: 1 addition & 0 deletions apps/native/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"react-native-screens": "~4.4.0",
"react-native-svg": "15.8.0",
"react-native-svg-transformer": "^1.5.0",
"react-native-vector-icons": "^10.2.0",
"react-native-web": "~0.19.10",
"wallet_state": "1.0.0"
},
Expand Down
81 changes: 39 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 @@ -5221,6 +5208,15 @@ [email protected], client-only@^0.0.1:
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==

cliui@^7.0.2:
version "7.0.4"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
dependencies:
string-width "^4.2.0"
strip-ansi "^6.0.0"
wrap-ansi "^7.0.0"

cliui@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
Expand Down Expand Up @@ -11542,6 +11538,14 @@ [email protected]:
css-tree "^1.1.3"
warn-once "0.1.1"

react-native-vector-icons@^10.2.0:
version "10.2.0"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz#f438f2ca16f7d6be658fd6ec8f0d2b7e2132b91c"
integrity sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==
dependencies:
prop-types "^15.7.2"
yargs "^16.1.1"

react-native-web@~0.19.10:
version "0.19.13"
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.13.tgz#2d84849bf0251ec0e3a8072fda7f9a7c29375331"
Expand Down Expand Up @@ -12607,16 +12611,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 +12720,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 +12734,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 +13838,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 +13856,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 Expand Up @@ -14010,6 +13989,24 @@ [email protected], yargs-parser@^21.0.1, yargs-parser@^21.1.1:
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==

yargs-parser@^20.2.2:
version "20.2.9"
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==

yargs@^16.1.1:
version "16.2.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
dependencies:
cliui "^7.0.2"
escalade "^3.1.1"
get-caller-file "^2.0.5"
require-directory "^2.1.1"
string-width "^4.2.0"
y18n "^5.0.5"
yargs-parser "^20.2.2"

yargs@^17.0.0, yargs@^17.3.1, yargs@^17.6.2:
version "17.7.2"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
Expand Down

0 comments on commit 9173085

Please sign in to comment.