Email sign in (#13)

polished via-email component
used state to track email and password.
explicitly did not put email and password in value of the appropriate input fields because that is not necessary nor do we want to write the clear text password into the dom

Signed-off-by: Philip Molares <philip.molares@udo.edu>
(cherry picked from commit c5f5956b8d8bb02553f85443f8b04acbf0c31f2b)

src/api/user.ts

@@ -17,5 +17,11 @@ export const postEmailLogin = async (email: string, password: string) => {
                email: email,
                password: password,
           })
-     });
+     }).then(response => {
+          if (response.status !== 200) {
+               return Promise.reject("Response code not 200");
+          } else {
+               return response.json();
+          }
+     })
 }

src/components/initialize/initialize-user-state-from-api.tsx

@@ -3,9 +3,9 @@ import {getMe} from "../../api/user";
 import {setUser} from "../../redux/user/actions";
 import {LoginStatus, UserState} from "../../redux/user/types";
 import React from "react";
+import {Dispatch} from "redux";
 
-const InitializeUserStateFromApi: React.FC = () => {
-    const dispatch = useDispatch();
+export const getAndSetUser = (dispatch: Dispatch<any>) => {
     getMe()
         .then((me) => {
             if (me.status === 200) {
@@ -23,6 +23,11 @@ const InitializeUserStateFromApi: React.FC = () => {
                 photo: user.photo,
             }));
         });
+}
+
+const InitializeUserStateFromApi: React.FC = () => {
+    const dispatch = useDispatch();
+    getAndSetUser(dispatch);
 
     return null;
 }

src/components/landing/pages/login/auth/via-email.tsx

@@ -1,33 +1,61 @@
 import {Trans, useTranslation} from "react-i18next";
-import {Button, Form} from "react-bootstrap";
-import React, { Fragment } from "react";
+import {Button, Form, Alert} from "react-bootstrap";
+import React, {Fragment, useState} from "react";
+import {postEmailLogin} from "../../../../../api/user";
 import {useDispatch} from "react-redux";
-import {setUser} from "../../../../../redux/user/actions";
-import {LoginStatus} from "../../../../../redux/user/types";
+import {getAndSetUser} from "../../../../initialize/initialize-user-state-from-api";
 
 const ViaEMail: React.FC = () => {
-    useTranslation();
+    const {t} = useTranslation();
     const dispatch = useDispatch();
-    const login = () => {
-        dispatch(setUser({photo: "https://robohash.org/testy.png", name: "Test", status: LoginStatus.ok}));
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(false);
+    const login = (event: any) => {
+        postEmailLogin(email, password)
+            .then(loginJson => {
+                console.log(loginJson)
+                getAndSetUser(dispatch);
+        }).catch(_reason => {
+                setError(true);
+        })
+        event.preventDefault();
     }
+
     return (
         <Fragment>
             <h5 className="center">
                 <Trans i18nKey="signInVia" values={{service: "E-Mail"}}/>
             </h5>
-            <Form>
-                <Form.Group controlId="formBasicEmail">
-                    <Form.Control type="email" size="sm" placeholder="E-Mail" />
+            <Form onSubmit={login}>
+                <Form.Group controlId="email">
+                    <Form.Control
+                        isInvalid={error}
+                        type="email"
+                        size="sm"
+                        placeholder={t("email")}
+                        onChange={(event) => setEmail(event.currentTarget.value)}
+                    />
                 </Form.Group>
 
-                <Form.Group controlId="formBasicPassword">
-                    <Form.Control type="password" size="sm" placeholder="Password" />
+                <Form.Group controlId="password">
+                    <Form.Control
+                        isInvalid={error}
+                        type="password"
+                        size="sm"
+                        placeholder={t("password")}
+                        onChange={(event) => setPassword(event.currentTarget.value)}
+                    />
                 </Form.Group>
+
+                <Alert className="small" show={error} variant="danger">
+                    <Trans i18nKey="errorEmailLogin"/>
+                </Alert>
+
                 <Button
+                    type="submit"
                     size="sm"
                     variant="primary"
-                    onClick={login}
                 >
                     <Trans i18nKey="signIn"/>
                 </Button>