Merge pull request #9 from JustinShillingford/tma42-Login-Page-UI

[TMA-61] Login Page UI with no real functionality

1 files changed, 207 insertions, 8 deletions

diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index 0305b907..417d9bd7 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -1,9 +1,22 @@
 import React 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,
+  TouchableOpacity,
+  StyleSheet,
+  Keyboard,
+  TouchableWithoutFeedback,
+} from 'react-native';
 
 import {RootStackParams} from '../routes';
+import LinearGradient from 'react-native-linear-gradient';
+
+import LoginInput from '../components/common/LoginInput';
 
 type LoginScreenRouteProp = RouteProp<RootStackParams, 'Login'>;
 type LoginScreenNavigationProp = StackNavigationProp<RootStackParams, 'Login'>;
@@ -12,16 +25,202 @@ interface LoginProps {
   route: LoginScreenRouteProp;
   navigation: LoginScreenNavigationProp;
 }
+
 const Login = ({navigation}: LoginProps) => {
+  const input_ref = React.createRef();
+  const [data, setData] = React.useState({
+    username: '',
+    password: '',
+    isValidUser: true,
+    isValidPassword: true,
+    focusPasswordInput: false,
+  });
+
+  /*
+    Updates the state of username. Also verifies the input of the Username field.
+  */
+  const handleUsernameUpdate = (val: string) => {
+    let 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) => {
+    let 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}?`,
+      );
+    }
+  };
+
+  /*
+    Handler for the submit button on the Username keyboard
+  */
+  const handleUsernameSubmit = () => {
+    input_ref.current.focus();
+  };
+
+  const handleRegistration = () => {
+    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')}
-      />
-    </View>
+    <>
+      <StatusBar barStyle="light-content" />
+      <TouchableWithoutFeedback
+        onPress={() => {
+          Keyboard.dismiss();
+        }}>
+        <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}
+            />
+            <LoginInput
+              type={data.username}
+              isUsername={true}
+              onChangeText={(user) => handleUsernameUpdate(user)}
+              onSubmitEditing={() => handleUsernameSubmit()}
+              isValid={data.isValidUser}
+              validationWarning={'Username must be at least 6 characters long.'}
+            />
+            <LoginInput
+              type={data.password}
+              isPassword={true}
+              onChangeText={(user) => handlePasswordUpdate(user)}
+              focusPasswordInput={data.focusPasswordInput}
+              onSubmitEditing={() => handleLogin()}
+              isValid={data.isValidPassword}
+              validationWarning={'Password must be at least 8 characters long.'}
+              input_ref={input_ref}
+            />
+            <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={() => handleRegistration()}>
+                Get started!
+              </Text>
+            </Text>
+          </LinearGradient>
+        </View>
+      </TouchableWithoutFeedback>
+    </>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  linearGradient: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  logo: {
+    top: 165,
+    width: 215,
+    height: 149,
+  },
+  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;