11 auth

code/01-starting-code/App.js

@@ -0,0 +1,57 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { StatusBar } from 'expo-status-bar';
+
+import LoginScreen from './screens/LoginScreen';
+import SignupScreen from './screens/SignupScreen';
+import WelcomeScreen from './screens/WelcomeScreen';
+import { Colors } from './constants/styles';
+
+const Stack = createNativeStackNavigator();
+
+function AuthStack() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: Colors.primary500 },
+        headerTintColor: 'white',
+        contentStyle: { backgroundColor: Colors.primary100 },
+      }}
+    >
+      <Stack.Screen name="Login" component={LoginScreen} />
+      <Stack.Screen name="Signup" component={SignupScreen} />
+    </Stack.Navigator>
+  );
+}
+
+function AuthenticatedStack() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: Colors.primary500 },
+        headerTintColor: 'white',
+        contentStyle: { backgroundColor: Colors.primary100 },
+      }}
+    >
+      <Stack.Screen name="Welcome" component={WelcomeScreen} />
+    </Stack.Navigator>
+  );
+}
+
+function Navigation() {
+  return (
+    <NavigationContainer>
+      <AuthStack />
+    </NavigationContainer>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <StatusBar style="light" />
+
+      <Navigation />
+    </>
+  );
+}

code/01-starting-code/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "RNCourse",
+    "slug": "RNCourse",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

code/01-starting-code/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

code/01-starting-code/components/Auth/AuthContent.js

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+
+import FlatButton from '../ui/FlatButton';
+import AuthForm from './AuthForm';
+import { Colors } from '../../constants/styles';
+
+function AuthContent({ isLogin, onAuthenticate }) {
+
+  const [credentialsInvalid, setCredentialsInvalid] = useState({
+    email: false,
+    password: false,
+    confirmEmail: false,
+    confirmPassword: false,
+  });
+
+  function switchAuthModeHandler() {
+    // Todo
+  }
+
+  function submitHandler(credentials) {
+    let { email, confirmEmail, password, confirmPassword } = credentials;
+
+    email = email.trim();
+    password = password.trim();
+
+    const emailIsValid = email.includes('@');
+    const passwordIsValid = password.length > 6;
+    const emailsAreEqual = email === confirmEmail;
+    const passwordsAreEqual = password === confirmPassword;
+
+    if (
+      !emailIsValid ||
+      !passwordIsValid ||
+      (!isLogin && (!emailsAreEqual || !passwordsAreEqual))
+    ) {
+      Alert.alert('Invalid input', 'Please check your entered credentials.');
+      setCredentialsInvalid({
+        email: !emailIsValid,
+        confirmEmail: !emailIsValid || !emailsAreEqual,
+        password: !passwordIsValid,
+        confirmPassword: !passwordIsValid || !passwordsAreEqual,
+      });
+      return;
+    }
+    onAuthenticate({ email, password });
+  }
+
+  return (
+    <View style={styles.authContent}>
+      <AuthForm
+        isLogin={isLogin}
+        onSubmit={submitHandler}
+        credentialsInvalid={credentialsInvalid}
+      />
+      <View style={styles.buttons}>
+        <FlatButton onPress={switchAuthModeHandler}>
+          {isLogin ? 'Create a new user' : 'Log in instead'}
+        </FlatButton>
+      </View>
+    </View>
+  );
+}
+
+export default AuthContent;
+
+const styles = StyleSheet.create({
+  authContent: {
+    marginTop: 64,
+    marginHorizontal: 32,
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: Colors.primary800,
+    elevation: 2,
+    shadowColor: 'black',
+    shadowOffset: { width: 1, height: 1 },
+    shadowOpacity: 0.35,
+    shadowRadius: 4,
+  },
+  buttons: {
+    marginTop: 8,
+  },
+});

code/01-starting-code/components/Auth/AuthForm.js

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Button from '../ui/Button';
+import Input from './Input';
+
+function AuthForm({ isLogin, onSubmit, credentialsInvalid }) {
+  const [enteredEmail, setEnteredEmail] = useState('');
+  const [enteredConfirmEmail, setEnteredConfirmEmail] = useState('');
+  const [enteredPassword, setEnteredPassword] = useState('');
+  const [enteredConfirmPassword, setEnteredConfirmPassword] = useState('');
+
+  const {
+    email: emailIsInvalid,
+    confirmEmail: emailsDontMatch,
+    password: passwordIsInvalid,
+    confirmPassword: passwordsDontMatch,
+  } = credentialsInvalid;
+
+  function updateInputValueHandler(inputType, enteredValue) {
+    switch (inputType) {
+      case 'email':
+        setEnteredEmail(enteredValue);
+        break;
+      case 'confirmEmail':
+        setEnteredConfirmEmail(enteredValue);
+        break;
+      case 'password':
+        setEnteredPassword(enteredValue);
+        break;
+      case 'confirmPassword':
+        setEnteredConfirmPassword(enteredValue);
+        break;
+    }
+  }
+
+  function submitHandler() {
+    onSubmit({
+      email: enteredEmail,
+      confirmEmail: enteredConfirmEmail,
+      password: enteredPassword,
+      confirmPassword: enteredConfirmPassword,
+    });
+  }
+
+  return (
+    <View style={styles.form}>
+      <View>
+        <Input
+          label="Email Address"
+          onUpdateValue={updateInputValueHandler.bind(this, 'email')}
+          value={enteredEmail}
+          keyboardType="email-address"
+          isInvalid={emailIsInvalid}
+        />
+        {!isLogin && (
+          <Input
+            label="Confirm Email Address"
+            onUpdateValue={updateInputValueHandler.bind(this, 'confirmEmail')}
+            value={enteredConfirmEmail}
+            keyboardType="email-address"
+            isInvalid={emailsDontMatch}
+          />
+        )}
+        <Input
+          label="Password"
+          onUpdateValue={updateInputValueHandler.bind(this, 'password')}
+          secure
+          value={enteredPassword}
+          isInvalid={passwordIsInvalid}
+        />
+        {!isLogin && (
+          <Input
+            label="Confirm Password"
+            onUpdateValue={updateInputValueHandler.bind(
+              this,
+              'confirmPassword'
+            )}
+            secure
+            value={enteredConfirmPassword}
+            isInvalid={passwordsDontMatch}
+          />
+        )}
+        <View style={styles.buttons}>
+          <Button onPress={submitHandler}>
+            {isLogin ? 'Log In' : 'Sign Up'}
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default AuthForm;
+
+const styles = StyleSheet.create({
+  buttons: {
+    marginTop: 12,
+  },
+});

code/01-starting-code/components/Auth/Input.js

@@ -0,0 +1,54 @@
+import { View, Text, TextInput, StyleSheet } from 'react-native';
+
+import { Colors } from '../../constants/styles';
+
+function Input({
+  label,
+  keyboardType,
+  secure,
+  onUpdateValue,
+  value,
+  isInvalid,
+}) {
+  return (
+    <View style={styles.inputContainer}>
+      <Text style={[styles.label, isInvalid && styles.labelInvalid]}>
+        {label}
+      </Text>
+      <TextInput
+        style={[styles.input, isInvalid && styles.inputInvalid]}
+        autoCapitalize={false}
+        autoCapitalize="none"
+        keyboardType={keyboardType}
+        secureTextEntry={secure}
+        onChangeText={onUpdateValue}
+        value={value}
+      />
+    </View>
+  );
+}
+
+export default Input;
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    marginVertical: 8,
+  },
+  label: {
+    color: 'white',
+    marginBottom: 4,
+  },
+  labelInvalid: {
+    color: Colors.error500,
+  },
+  input: {
+    paddingVertical: 8,
+    paddingHorizontal: 6,
+    backgroundColor: Colors.primary100,
+    borderRadius: 4,
+    fontSize: 16,
+  },
+  inputInvalid: {
+    backgroundColor: Colors.error100,
+  },
+});

code/01-starting-code/components/ui/Button.js

@@ -0,0 +1,41 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Colors } from '../../constants/styles';
+
+function Button({ children, onPress }) {
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.button, pressed && styles.pressed]}
+      onPress={onPress}
+    >
+      <View>
+        <Text style={styles.buttonText}>{children}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+export default Button;
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    backgroundColor: Colors.primary500,
+    elevation: 2,
+    shadowColor: 'black',
+    shadowOffset: { width: 1, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+});