From 5ea40ab0b9474887c5fd171a9f8d516fc63a0795 Mon Sep 17 00:00:00 2001 From: Karston Matthews Date: Wed, 17 Sep 2025 17:19:31 -0600 Subject: [PATCH 1/2] sarah changed button color to sarah design --- src/pages/Login.tsx | 387 ++++++++++++++++++++++---------------------- 1 file changed, 194 insertions(+), 193 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index ab2a2b9..cbb53a9 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,200 +1,201 @@ -import { useIsFocused } from '@react-navigation/native'; -import { StackScreenProps } from '@react-navigation/stack'; -import { LinearGradient } from 'expo-linear-gradient'; -import { StatusBar } from 'expo-status-bar'; -import React, { useContext, useEffect, useState } from 'react'; -import { Alert, Image, StyleSheet, Text, TextInput, View } from 'react-native'; -import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; -import Spinner from 'react-native-loading-spinner-overlay'; -import BigButton from '../components/BigButton'; -import Spacer from '../components/Spacer'; -import { AuthenticationContext } from '../context/AuthenticationContext'; -import logoImg from '../images/logo.png'; -import * as api from '../services/api'; -import { getFromCache, setInCache } from '../services/caching'; -import { User } from '../types/User'; -import { isTokenExpired, sanitizeEmail, validateEmail } from '../utils'; +import { useIsFocused } from "@react-navigation/native"; +import { StackScreenProps } from "@react-navigation/stack"; +import { LinearGradient } from "expo-linear-gradient"; +import { StatusBar } from "expo-status-bar"; +import React, { useContext, useEffect, useState } from "react"; +import { Alert, Image, StyleSheet, Text, TextInput, View } from "react-native"; +import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; +import Spinner from "react-native-loading-spinner-overlay"; +import BigButton from "../components/BigButton"; +import Spacer from "../components/Spacer"; +import { AuthenticationContext } from "../context/AuthenticationContext"; +import logoImg from "../images/logo.png"; +import * as api from "../services/api"; +import { getFromCache, setInCache } from "../services/caching"; +import { User } from "../types/User"; +import { isTokenExpired, sanitizeEmail, validateEmail } from "../utils"; export default function Login({ navigation }: StackScreenProps) { - const authenticationContext = useContext(AuthenticationContext); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [emailIsInvalid, setEmailIsInvalid] = useState(); - const [passwordIsInvalid, setPasswordIsInvalid] = useState(); - const [authError, setAuthError] = useState(); - - const [accessTokenIsValid, setAccessTokenIsValid] = useState(false); - const [isAuthenticating, setIsAuthenticating] = useState(false); - const isFocused = useIsFocused(); - - useEffect(() => { - getFromCache('userInfo').then( - (cachedUserInfo) => authenticationContext?.setValue(cachedUserInfo as User), - (error: any) => console.log(error) - ); - getFromCache('accessToken').then( - (accessToken) => accessToken && !isTokenExpired(accessToken as string) && setAccessTokenIsValid(true), - (error: any) => console.log(error) - ); - if (authError) - Alert.alert('Authentication Error', authError, [{ text: 'Ok', onPress: () => setAuthError(undefined) }]); - }, [authError]); - - useEffect(() => { - if (accessTokenIsValid && authenticationContext?.value) navigation.navigate('EventsMap'); - }, [accessTokenIsValid]); - - const handleAuthentication = () => { - if (formIsValid()) { - setIsAuthenticating(true); - api.authenticateUser(sanitizeEmail(email), password) - .then((response) => { - setInCache('userInfo', response.data.user); - setInCache('accessToken', response.data.accessToken); - authenticationContext?.setValue(response.data.user); - setIsAuthenticating(false); - 123; - navigation.navigate('EventsMap'); - }) - .catch((error) => { - if (error.response) { - setAuthError(error.response.data); - } else { - setAuthError('Something went wrong.'); - } - setIsAuthenticating(false); - }); - } - }; - - const formIsValid = () => { - const emailIsValid = !isEmailInvalid(); - const passwordIsValid = !isPasswordInvalid(); - return emailIsValid && passwordIsValid; - }; - - const isPasswordInvalid = (): boolean => { - const invalidCheck = password.length < 6; - setPasswordIsInvalid(invalidCheck); - return invalidCheck ? true : false; - }; - - const isEmailInvalid = (): boolean => { - const invalidCheck = !validateEmail(email); - setEmailIsInvalid(invalidCheck); - return invalidCheck ? true : false; - }; - - return ( - - {isFocused && } - - - - - Email - {emailIsInvalid && invalid email} - - setEmail(value)} - onEndEditing={isEmailInvalid} - /> - - - Password - {passwordIsInvalid && invalid password} - - setPassword(value)} - onEndEditing={isPasswordInvalid} - /> - - - - - + const authenticationContext = useContext(AuthenticationContext); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [emailIsInvalid, setEmailIsInvalid] = useState(); + const [passwordIsInvalid, setPasswordIsInvalid] = useState(); + const [authError, setAuthError] = useState(); + + const [accessTokenIsValid, setAccessTokenIsValid] = useState(false); + const [isAuthenticating, setIsAuthenticating] = useState(false); + const isFocused = useIsFocused(); + + useEffect(() => { + getFromCache("userInfo").then( + (cachedUserInfo) => authenticationContext?.setValue(cachedUserInfo as User), + (error: any) => console.log(error) ); + getFromCache("accessToken").then( + (accessToken) => accessToken && !isTokenExpired(accessToken as string) && setAccessTokenIsValid(true), + (error: any) => console.log(error) + ); + if (authError) + Alert.alert("Authentication Error", authError, [{ text: "Ok", onPress: () => setAuthError(undefined) }]); + }, [authError]); + + useEffect(() => { + if (accessTokenIsValid && authenticationContext?.value) navigation.navigate("EventsMap"); + }, [accessTokenIsValid]); + + const handleAuthentication = () => { + if (formIsValid()) { + setIsAuthenticating(true); + api + .authenticateUser(sanitizeEmail(email), password) + .then((response) => { + setInCache("userInfo", response.data.user); + setInCache("accessToken", response.data.accessToken); + authenticationContext?.setValue(response.data.user); + setIsAuthenticating(false); + 123; + navigation.navigate("EventsMap"); + }) + .catch((error) => { + if (error.response) { + setAuthError(error.response.data); + } else { + setAuthError("Something went wrong."); + } + setIsAuthenticating(false); + }); + } + }; + + const formIsValid = () => { + const emailIsValid = !isEmailInvalid(); + const passwordIsValid = !isPasswordInvalid(); + return emailIsValid && passwordIsValid; + }; + + const isPasswordInvalid = (): boolean => { + const invalidCheck = password.length < 6; + setPasswordIsInvalid(invalidCheck); + return invalidCheck ? true : false; + }; + + const isEmailInvalid = (): boolean => { + const invalidCheck = !validateEmail(email); + setEmailIsInvalid(invalidCheck); + return invalidCheck ? true : false; + }; + + return ( + + {isFocused && } + + + + + Email + {emailIsInvalid && invalid email} + + setEmail(value)} + onEndEditing={isEmailInvalid} + /> + + + Password + {passwordIsInvalid && invalid password} + + setPassword(value)} + onEndEditing={isPasswordInvalid} + /> + + + + + + ); } const styles = StyleSheet.create({ - gradientContainer: { - flex: 1, - }, - - container: { - flex: 1, - }, - - spinnerText: { - fontSize: 16, - fontFamily: 'Nunito_700Bold', - color: '#fff', - }, - - label: { - color: '#fff', - fontFamily: 'Nunito_600SemiBold', - fontSize: 15, - }, - - inputLabelRow: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'baseline', - marginBottom: 4, - }, - - input: { - backgroundColor: '#fff', - borderWidth: 1.4, - borderColor: '#D3E2E5', - borderRadius: 8, - height: 56, - paddingTop: 16, - paddingBottom: 16, - paddingHorizontal: 24, - marginBottom: 16, - color: '#5C8599', - fontFamily: 'Nunito_600SemiBold', - fontSize: 15, - }, - - invalid: { - borderColor: 'red', - }, - - error: { - color: 'white', - fontFamily: 'Nunito_600SemiBold', - fontSize: 12, - }, + gradientContainer: { + flex: 1, + }, + + container: { + flex: 1, + }, + + spinnerText: { + fontSize: 16, + fontFamily: "Nunito_700Bold", + color: "#fff", + }, + + label: { + color: "#fff", + fontFamily: "Nunito_600SemiBold", + fontSize: 15, + }, + + inputLabelRow: { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "baseline", + marginBottom: 4, + }, + + input: { + backgroundColor: "#fff", + borderWidth: 1.4, + borderColor: "#D3E2E5", + borderRadius: 8, + height: 56, + paddingTop: 16, + paddingBottom: 16, + paddingHorizontal: 24, + marginBottom: 16, + color: "#5C8599", + fontFamily: "Nunito_600SemiBold", + fontSize: 15, + }, + + invalid: { + borderColor: "red", + }, + + error: { + color: "white", + fontFamily: "Nunito_600SemiBold", + fontSize: 12, + }, }); From 691ea2c22c3f06464390c46945ec5837bb552531 Mon Sep 17 00:00:00 2001 From: Karston Matthews Date: Wed, 17 Sep 2025 17:30:43 -0600 Subject: [PATCH 2/2] john johns update --- src/pages/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index cbb53a9..0934151 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -134,7 +134,7 @@ export default function Login({ navigation }: StackScreenProps) { onEndEditing={isPasswordInvalid} /> - +