+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | + + + + +2x + + + + +1x + + + + + + + + | import React from 'react';
+import { StyleSheet } from 'react-native';
+import LoginNavigator from './navigation/LoginNavigator'
+
+export default function App() {
+ return (
+ <LoginNavigator />
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center'
+ }
+});
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 | + + + +1x + + + + | import React from 'react';
+import { TextInput, StyleSheet } from 'react-native';
+import DefaultStyles from '../constants/default-styles';
+
+const Input = props => {
+ return <TextInput {...props} style={{ ...DefaultStyles.input, ...props.style }} />;
+};
+
+export default Input; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + + + +1x + + + + + + + + + + + | import React from 'react';
+import { View, Text, TouchableOpacity, Platform, TouchableNativeFeedback } from 'react-native';
+
+import DefaultStyles from '../constants/default-styles'
+
+const MainButton = props => {
+ const ButtonComponent = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity
+ return (
+ <ButtonComponent activeOpacity={0.6} onPress={props.onPress}>
+ <View style={DefaultStyles.button}>
+ <Text style={DefaultStyles.buttonText}>{props.children}</Text>
+ </View>
+ </ButtonComponent>
+ );
+};
+
+export default MainButton; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Input.js | +
+
+ |
+ 50% | +1/2 | +100% | +0/0 | +0% | +0/1 | +50% | +1/2 | +
| MainButton.js | +
+
+ |
+ 33.33% | +1/3 | +0% | +0/2 | +0% | +0/1 | +33.33% | +1/3 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 | + + + | export default {
+ primary: "#f7287b",
+ accent: "#c717fc"
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { StyleSheet, Platform } from 'react-native';
+import Colors from '../constants/colors'
+
+export default StyleSheet.create({
+ input: {
+ height: 30,
+ borderBottomColor: 'grey',
+ borderBottomWidth: 1,
+ marginVertical: 10
+ },
+ title: {
+ fontSize: 18,
+ color: Platform.OS === 'android' ? 'white' : Colors.primary
+ },
+ button: {
+ backgroundColor: Colors.primary,
+ paddingVertical: 12,
+ paddingHorizontal: 30,
+ borderRadius: 25
+ },
+ buttonText: {
+ color: 'white',
+ fontSize: 18
+ },
+ headerBase: {
+ width: '100%',
+ height: 90,
+ paddingTop: 36,
+ alignItems: 'center',
+ justifyContent: 'center',
+
+ },
+ headerIOS: {
+ backgroundColor: 'white',
+ borderBottomColor: '#ccc',
+ borderBottomWidth: 1
+ },
+ headerAndroid: {
+ backgroundColor: Colors.primary
+ }
+}); |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| colors.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| default-styles.js | +
+
+ |
+ 0% | +0/0 | +0% | +1/2 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 | 1x + + + + + + | export const USERS = {
+ "rob123": "0000000",
+ "sarab13": "12345678",
+ "sp123": "123",
+ "spteacher": "0000000"
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| dummy-data.js | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.js | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 | + + + + + + + + + +1x + + + + + + + + + + + + + + + + + | import { Platform } from 'react-native';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createAppContainer } from 'react-navigation';
+
+import LoginScreen from '../screens/login_flow/LoginScreen';
+import LoginFormScreen from '../screens/login_flow/LoginFormScreen';
+// import MainNavigator from '../navigation/MainNavigator';
+import Colors from '../constants/colors';
+import HomeScreen from '../screens/HomeScreen';
+
+const LoginNavigator = createStackNavigator(
+ {
+ Login: LoginScreen,
+ LoginForm: LoginFormScreen,
+ Home: HomeScreen
+ // Home: MainNavigator
+ },
+ {
+ defaultNavigationOptions: {
+ headerStyle: {
+ backgroundColor: Platform.OS === 'android' ? Colors.primary : 'white'
+ },
+ headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary
+ }
+ }
+);
+
+export default createAppContainer(LoginNavigator); |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | + + + + + + + + + + + + + + + + + + + + + | import { Platform } from 'react-native';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createAppContainer } from 'react-navigation';
+import HomeScreen from '../screens/HomeScreen';
+
+import Colors from '../constants/colors'
+
+const MainNavigator = createStackNavigator(
+ {
+ Home: HomeScreen
+ },
+ {
+ defaultNavigationOptions: {
+ headerStyle: {
+ backgroundColor: Platform.OS === 'android' ? Colors.primary : 'white'
+ },
+ headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary
+ }
+ }
+);
+
+export default createAppContainer(MainNavigator); |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| LoginNavigator.js | +
+
+ |
+ 100% | +1/1 | +50% | +2/4 | +100% | +0/0 | +100% | +1/1 | +
| MainNavigator.js | +
+
+ |
+ 0% | +0/1 | +0% | +0/4 | +100% | +0/0 | +0% | +0/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + +2x + +1x +1x + + + + + + + + | import React from 'react';
+import { View, Text } from 'react-native';
+
+const HomeScreen = props => {
+ // let username = props.navigation.getParam('usernameKey');
+ let username = props.username;
+ return (
+ <View>
+ <Text>{username}</Text>
+ </View>
+ );
+}
+
+
+export default HomeScreen; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| HomeScreen.js | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 | + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react';
+import { View, Alert } from 'react-native';
+import Input from '../../components/Input';
+import DefaultStyles from '../../constants/default-styles';
+import MainButton from '../../components/MainButton';
+import { USERS } from '../../data/dummy-data';
+
+const LoginFormScreen = props => {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+
+ const usernameInputHandler = usernameInputText => {
+ setUsername(usernameInputText);
+ }
+
+ const passwordInputHandler = passwordInputText => {
+ setPassword(passwordInputText);
+ }
+
+ const resetInputHandler = () => {
+ setUsername('')
+ setPassword('')
+ }
+
+ const attemptLogin = () => {
+ if (checkIfUserExists(username)) {
+ if (checkPasswordMatches(password)) {
+ openNextScreen();
+ return;
+ }
+ }
+ displayLoginError();
+ }
+
+ const checkIfUserExists = () => {
+ return USERS[username] !== undefined
+ }
+
+ const checkPasswordMatches = () => {
+ return USERS[username] === password
+ }
+
+ const displayLoginError = () => {
+ Alert.alert(
+ 'Invalid!',
+ 'The username/password is incorrect',
+ [{ text: 'Okay', style: 'destructive', onPress: resetInputHandler }]
+ );
+ }
+
+ const openNextScreen = () => {
+ props.navigation.navigate({
+ routeName: 'Home',
+ params: {
+ usernameKey: username
+ }
+
+ })
+ }
+
+ return (
+ <View>
+ <Input
+ style={DefaultStyles.input}
+ value={username}
+ autoCapitalize="none"
+ onChangeText={usernameInputHandler}
+ autoCorrect={false}
+ maxLength={20}
+ />
+ <Input
+ style={DefaultStyles.input}
+ blurOnSubmit
+ keyboardType="visible-password"
+ value={password}
+ autoCapitalize="none"
+ onChangeText={passwordInputHandler}
+ autoCorrect={false}
+ maxLength={20}
+ />
+ <MainButton onPress={attemptLogin}>Log In</MainButton>
+ </View>
+ )
+}
+
+export default LoginFormScreen; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + +1x +2x + + + + + + + + + + + + | import React from 'react';
+import { View, Button } from 'react-native';
+
+const LoginScreen = props => {
+ return (
+ <View>
+ <Button
+ title="Log In"
+ onPress={() => {
+ props.navigation.navigate('LoginForm')
+ }}
+ />
+ </View>
+ )
+}
+
+export default LoginScreen; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| LoginFormScreen.js | +
+
+ |
+ 4% | +1/25 | +0% | +0/4 | +0% | +0/9 | +4% | +1/25 | +
| LoginScreen.js | +
+
+ |
+ 66.67% | +2/3 | +100% | +0/0 | +50% | +1/2 | +66.67% | +2/3 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| LoginForm | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| LoginForm/components | +
+
+ |
+ 40% | +2/5 | +0% | +0/2 | +0% | +0/2 | +40% | +2/5 | +
| LoginForm/constants | +
+
+ |
+ 0% | +0/0 | +0% | +1/2 | +0% | +0/0 | +0% | +0/0 | +
| LoginForm/data | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
| LoginForm/navigation | +
+
+ |
+ 50% | +1/2 | +25% | +2/8 | +100% | +0/0 | +50% | +1/2 | +
| LoginForm/screens | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| LoginForm/screens/login_flow | +
+
+ |
+ 10.71% | +3/28 | +0% | +0/4 | +9.09% | +1/11 | +10.71% | +3/28 | +