Added base app with background color for Sign In

Everything's in App.tsx for now since we haven't discussed structure

2 files changed, 217 insertions, 10 deletions

diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 9c2efada..0b08cbb1 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -15,7 +15,7 @@ interface RoutesProps {}
 const Routes: React.FC<RoutesProps> = ({}) => {
   return (
     <RootStack.Navigator initialRouteName="Login">
-      <RootStack.Screen name="Login" component={Login} />
+      <RootStack.Screen name="Login" component={Login} options={ { headerShown: false} }/>
       <RootStack.Screen name="Registration" component={Registration} />
     </RootStack.Navigator>
   );
diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index 0305b907..672fd035 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -1,9 +1,19 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {View, Text, Button} from 'react-native';
+import {
+        View,
+        Text,
+        Alert,
+        StatusBar,
+        Image,
+        TextInput,
+        TouchableOpacity,
+        StyleSheet      
+} from 'react-native';
 
 import {RootStackParams} from '../routes';
+import LinearGradient from 'react-native-linear-gradient';
 
 type LoginScreenRouteProp = RouteProp<RootStackParams, 'Login'>;
 type LoginScreenNavigationProp = StackNavigationProp<RootStackParams, 'Login'>;
@@ -13,15 +23,212 @@ interface LoginProps {
   navigation: LoginScreenNavigationProp;
 }
 const Login = ({navigation}: LoginProps) => {
+  const passwordInput = useRef();
+  const [data, setData] = React.useState({
+    username: '',
+    password: '',
+    isValidUser: true,
+    isValidPassword: true,
+  })
+
+  /*
+    Updates the state of username. Also verifies the input of the Username field.
+  */
+  const handleUsernameUpdate = (val:string) => {
+    var validLength:boolean = val.trim().length >= 6
+
+    if (validLength) {
+      setData({
+        ...data,
+        username: val,
+        isValidUser: true
+      })
+    }
+    else {
+      setData({
+        ...data,
+        username: val,
+        isValidUser: false
+      })
+    }
+  }
+
+  /*
+    Updates the state of password. Also verifies the input of the Password field.
+  */
+  const handlePasswordUpdate = (val:string) => {
+    var validLength:boolean = val.trim().length >= 8
+
+    if (validLength) {
+      setData({
+        ...data,
+        password: val,
+        isValidPassword: true
+      })
+    }
+    else {
+      setData({
+        ...data,
+        password: val,
+        isValidPassword: false
+      })
+     }
+  }
+
+  /*
+    Handler for the Let's Start button or the Go button on the keyboard.
+  */
+  const handleLogin = () => {
+    if (data.isValidUser && data.isValidPassword) {
+      Alert.alert(`My favorite Girl Scout Cookies are taggalongs! What are yours ${data.username}?`)
+      navigation.navigate('Registration')
+    }
+  }
+  
   return (
-    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
-      <Text style={{fontSize: 18}}>Welcome to Tagg! Login page goes here.</Text>
-      <Button
-        title="Register"
-        onPress={() => navigation.navigate('Registration')}
+    <>
+      <StatusBar
+        barStyle='light-content'
       />
-    </View>
+      <View style={styles.container}>
+        <LinearGradient
+          colors={['#8F00FF', '#6EE7E7']}
+          style={styles.linearGradient}
+          useAngle={true}
+          angle={154.72}
+          angleCenter={{x:0.5,y:0.5}}>
+            <Image
+              source={require('../assets/images/logo.png')}
+              style={styles.logo}
+            />
+            <TextInput
+              accessibilityLabel="Username text entry box"
+              accessibilityHint="Enter your tagg username here"
+              style={styles.credentials}
+              placeholder="Username"
+              placeholderTextColor='#FFFFFF'
+              autoCompleteType='username'
+              textContentType='username'
+              returnKeyType='next'
+              keyboardType='ascii-capable'
+              onChangeText={user => handleUsernameUpdate(user)}
+              defaultValue={data.username}
+              onSubmitEditing={() => {passwordInput.current.focus()}}
+              blurOnSubmit={false}
+            />
+            { data.isValidUser ? null : 
+              <Text style={styles.invalidCredentials}>Username must be at least 6 characters long.</Text>
+            }
+            <TextInput
+              accessibilityLabel="Password text entry box"
+              accessibilityHint="Enter your tagg password here"
+              style={styles.credentials}
+              placeholder="Password"
+              placeholderTextColor='#FFFFFF'
+              autoCompleteType='password'
+              textContentType='password'
+              returnKeyType='go'
+              onChangeText={pass => handlePasswordUpdate(pass)}
+              defaultValue={data.password}
+              onSubmitEditing={() => handleLogin()}
+              ref={passwordInput}
+              secureTextEntry={true}
+            />
+            { data.isValidPassword ? null : 
+              <Text style={styles.invalidCredentials}>Password must be at least 8 characters long.</Text>
+            }
+            <TouchableOpacity
+              accessibilityLabel="Forgot password button"
+              accessibilityHint="Select this if you forgot your tagg password"
+              style={styles.forgotPassword}
+              onPress={() => Alert.alert("tagg! You're it!")}>
+                <Text style={styles.forgotPasswordText}>Forgot password</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              accessibilityLabel="Let's start button"
+              accessibilityHint="Select this after entering your tagg username and password"
+              style={styles.start}
+              onPress={() => handleLogin()}>
+                <Text style={styles.startText}>Let's Start!</Text>
+            </TouchableOpacity>
+            <Text accessible={true} accessibilityLabel="New to tagg?" style={styles.newUser}>
+              New to tagg? <Text accessible={true} accessibilityLabel="Get started" accessibilityHint="Select this if you do not have a tagg account" style={styles.getStarted} onPress={() => Alert.alert("I get the tagg flip it and tumble it.")}>Get started!</Text>
+            </Text>
+        </LinearGradient>
+      </View>
+    </>
+    // <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+    //   <Text style={{fontSize: 18}}>Welcome to Tagg! Login page goes here.</Text>
+    //   <Button
+    //     title="Register"
+    //     onPress={() => navigation.navigate('Registration')}
+    //   />
+    // </View>
   );
 };
 
-export default Login;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  linearGradient: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  logo: {
+    top: 165,
+    width: 215,
+    height: 149,
+  },
+  credentials: {
+    top: 190,
+    width: 248,
+    height: 40,
+    fontSize: 20,
+    color: '#FFFFFF',
+    borderColor: '#FFFDFD',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+    marginVertical: 15,
+  },
+  forgotPassword: {
+    top: 190,
+    left: -60,
+  },
+  forgotPasswordText: {
+    fontSize: 15,
+    color: '#FFFFFF',
+    textDecorationLine: 'underline',
+  },
+  start: {
+    top: 195,
+    width: 144,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    marginTop: 15
+  },
+  startText: {
+    fontSize: 15,
+    color: '#78A0EF',
+    fontWeight: 'bold',
+  },
+  getStarted: {
+    color: '#FFFFFF',
+    textDecorationLine: 'underline'
+  },
+  newUser: {
+    top: 240,
+    color: '#F4DDFF',
+  },
+  invalidCredentials: {
+    top: 180,
+    color: '#F4DDFF'
+  }
+});
+
+export default Login;
\ No newline at end of file