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)

public/config

@@ -10,7 +10,7 @@
     "google": false,
     "saml": false,
     "oauth2": false,
-    "email": false
+    "email": true
   },
   "specialLinks": {
     "privacy": "test",

public/locales/de.json

@@ -118,5 +118,9 @@
   "poweredBy": "Betrieben mit <0></0>",
   "Help us translating": "Hilf uns beim Übersetzen",
   "Join the community": "Tritt der Community bei",
-  "imprint": "Impressum"
+  "imprint": "Impressum",
+  "errorEmailLogin": "E-Mail oder Passwort nicht korrekt",
+  "errorLdapLogin": "Benutzername oder Passwort nicht korrekt",
+  "email": "E-Mail",
+  "password": "Passwort"
 }

public/locales/en.json

@@ -118,5 +118,9 @@
   "poweredBy": "Powered by <0></0>",
   "Help us translating": "Help us translating",
   "Join the community": "Join the community",
-  "imprint": "Imprint"
+  "imprint": "Imprint",
+  "errorEmailLogin": "Invalid email or password",
+  "errorLdapLogin": "Invalid username or password",
+  "email": "Email",
+  "password": "Password"
 }

public/me

@@ -1,6 +1,6 @@
 {
-"id": "mockUser",
+    "id": "mockUser",
-"photo": "https://robohash.org/testy.png",
+    "photo": "https://robohash.org/testy.png",
-"name": "Test",
+    "name": "Test",
-"status": "ok"
+    "status": "ok"
 }

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 = () => {
+export const getAndSetUser = (dispatch: Dispatch<any>) => {
-    const dispatch = useDispatch();
     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 {Button, Form, Alert} from "react-bootstrap";
-import React, { Fragment } from "react";
+import React, {Fragment, useState} from "react";
+import {postEmailLogin} from "../../../../../api/user";
 import {useDispatch} from "react-redux";
-import {setUser} from "../../../../../redux/user/actions";
+import {getAndSetUser} from "../../../../initialize/initialize-user-state-from-api";
-import {LoginStatus} from "../../../../../redux/user/types";
 
 const ViaEMail: React.FC = () => {
-    useTranslation();
+    const {t} = useTranslation();
     const dispatch = useDispatch();
-    const login = () => {
+    const [email, setEmail] = useState("");
-        dispatch(setUser({photo: "https://robohash.org/testy.png", name: "Test", status: LoginStatus.ok}));
+    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 onSubmit={login}>
-                <Form.Group controlId="formBasicEmail">
+                <Form.Group controlId="email">
-                    <Form.Control type="email" size="sm" placeholder="E-Mail" />
+                    <Form.Control
+                        isInvalid={error}
+                        type="email"
+                        size="sm"
+                        placeholder={t("email")}
+                        onChange={(event) => setEmail(event.currentTarget.value)}
+                    />
                 </Form.Group>
 
-                <Form.Group controlId="formBasicPassword">
+                <Form.Group controlId="password">
-                    <Form.Control type="password" size="sm" placeholder="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>