Added sign in errors and logos.

components/screen-sign-in/screen-sign-in.component.jsx

@@ -1,26 +1,34 @@
 import { Formik } from "formik";
 import {
-  Input,
-  Header,
-  Item,
-  Label,
-  Form,
   Button,
-  Text,
   Container,
   Content,
+  Form,
+  Input,
+  Item,
+  H1,
+  Label,
+  Text,
 } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { SafeAreaView, TextInput, View } from "react-native";
+import { StyleSheet, View, ActivityIndicator, Image } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { emailSignInStart, signOutStart } from "../../redux/user/user.actions";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
-import { StyleSheet } from "react-native";
+import { emailSignInStart } from "../../redux/user/user.actions";
+import {
+  selectCurrentUser,
+  selectSignInError,
+  selectSigningIn,
+} from "../../redux/user/user.selectors";
+import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
+import styles from "../styles";
+import Logo from "../../assets/logo240.png";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
+  signInError: selectSignInError,
+  signingIn: selectSigningIn,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -28,7 +36,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(emailSignInStart({ email, password })),
 });
 
-export function SignIn({ emailSignInStart }) {
+export function SignIn({ emailSignInStart, signInError, signingIn }) {
   const { t } = useTranslation();
 
   const formSubmit = (values) => {
@@ -39,42 +47,45 @@ export function SignIn({ emailSignInStart }) {
   return (
     <Container>
       <Content
+        scrollEnabled={false}
         padder
-        contentContainerStyle={styles.contentContainer}
-        style={styles.content}
+        contentContainerStyle={styles.contentContainer__centered}
+        style={localStyles.content}
       >
+        <View style={styles.evenlySpacedRow}>
+          <Image style={localStyles.logo} source={Logo} />
+          <H1>{t("app.title")}</H1>
+        </View>
         <Formik
           initialValues={{ email: "", password: "" }}
           onSubmit={formSubmit}
         >
           {({ handleChange, handleBlur, handleSubmit, values }) => (
             <View>
-              <Form>
-                <Item>
-                  <Label>{t("signin.fields.email")}</Label>
-                  <Input
-                    autoCapitalize="none"
-                    keyboardType="email-address"
-                    onChangeText={handleChange("email")}
-                    onBlur={handleBlur("email")}
-                    value={values.email}
-                  />
-                </Item>
-
-                <Item>
-                  <Label>{t("signin.fields.password")}</Label>
-                  <Input
-                    secureTextEntry={true}
-                    onChangeText={handleChange("password")}
-                    onBlur={handleBlur("password")}
-                    value={values.password}
-                  />
-                </Item>
-
-                <Button full onPress={handleSubmit}>
-                  <Text>{t("signin.actions.signin")}</Text>
-                </Button>
-              </Form>
+              <Item>
+                <Label>{t("signin.fields.email")}</Label>
+                <Input
+                  autoCapitalize="none"
+                  keyboardType="email-address"
+                  onChangeText={handleChange("email")}
+                  onBlur={handleBlur("email")}
+                  value={values.email}
+                />
+              </Item>
+              <Item>
+                <Label>{t("signin.fields.password")}</Label>
+                <Input
+                  secureTextEntry={true}
+                  onChangeText={handleChange("password")}
+                  onBlur={handleBlur("password")}
+                  value={values.password}
+                />
+              </Item>
+              <SignInErrorAlertComponent />
+              <Button full onPress={handleSubmit}>
+                <Text>{t("signin.actions.signin")}</Text>
+                {signingIn ? <ActivityIndicator size="large" /> : null}
+              </Button>
             </View>
           )}
         </Formik>
@@ -83,19 +94,11 @@ export function SignIn({ emailSignInStart }) {
   );
 }
 
-const styles = StyleSheet.create({
-  contentContainer: {
-    justifyContent: "center",
-    flex: 1,
-  },
+const localStyles = StyleSheet.create({
   content: {
     paddingBottom: 150,
-    // flex: 1,
-    // backgroundColor: "#fff",
-    // alignItems: "center",
-    //justifyContent: "space-between",
-    // //justifyContent: "center",
   },
+  logo: { width: 100, height: 100 },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

components/sign-in-error-alert/sign-in-error-alert.component.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Container, Content, Text } from "native-base";
+import { View, StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectSignInError } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  signInError: selectSignInError,
+});
+
+export function SignInErrorAlertComponent({ signInError }) {
+  const [errorText, setErrorText] = useState("");
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    let text;
+    if (signInError && signInError.code)
+      switch (signInError.code) {
+        case "auth/user-not-found":
+          text = t("signin.errors.usernotfound");
+          break;
+        case "auth/invalid-email":
+          text = t("signin.errors.emailformat");
+          break;
+        case "auth/wrong-password":
+          text = t("signin.errors.wrongpassword");
+          break;
+        default:
+          text = signInError.code + " " + signInError.message;
+          break;
+      }
+
+    setErrorText(text);
+  }, [signInError, setErrorText]);
+  return (
+    <View>
+      {errorText ? <Text style={localStyles.alert}>{errorText}</Text> : null}
+    </View>
+  );
+}
+
+export default connect(mapStateToProps, null)(SignInErrorAlertComponent);
+
+const localStyles = StyleSheet.create({
+  alert: {
+    color: "red",
+    textAlign: "center",
+    margin: 15,
+    padding: 15,
+  },
+});

components/styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { Row } from "native-base";
+
+export default StyleSheet.create({
+  contentContainer__centered: {
+    justifyContent: "center",
+    flex: 1,
+  },
+
+  evenlySpacedRow: {
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+  },
+});