From 41f969fda61fc35ec4b4ecaea0808b45ad14e311 Mon Sep 17 00:00:00 2001
From: Philip Molares <git@molar.es>
Date: Fri, 15 May 2020 20:38:38 +0200
Subject: [PATCH] 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                                 |  2 +-
 public/locales/de.json                        |  6 ++-
 public/locales/en.json                        |  6 ++-
 public/me                                     | 10 ++--
 src/api/user.ts                               |  8 ++-
 .../initialize-user-state-from-api.tsx        |  9 +++-
 .../landing/pages/login/auth/via-email.tsx    | 54 ++++++++++++++-----
 7 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/public/config b/public/config
index 63a29ff62..6e42d4b11 100644
--- a/public/config
+++ b/public/config
@@ -10,7 +10,7 @@
     "google": false,
     "saml": false,
     "oauth2": false,
-    "email": false
+    "email": true
   },
   "specialLinks": {
     "privacy": "test",
diff --git a/public/locales/de.json b/public/locales/de.json
index 386fd348a..475da3776 100644
--- a/public/locales/de.json
+++ b/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"
 }
diff --git a/public/locales/en.json b/public/locales/en.json
index 6938cbce5..2ce0d6074 100644
--- a/public/locales/en.json
+++ b/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"
 }
diff --git a/public/me b/public/me
index 100e6f06b..709775cc7 100644
--- a/public/me
+++ b/public/me
@@ -1,6 +1,6 @@
 {
-"id": "mockUser",
-"photo": "https://robohash.org/testy.png",
-"name": "Test",
-"status": "ok"
-}
\ No newline at end of file
+    "id": "mockUser",
+    "photo": "https://robohash.org/testy.png",
+    "name": "Test",
+    "status": "ok"
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index 298af6218..29ccc4485 100644
--- a/src/api/user.ts
+++ b/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();
+          }
+     })
 }
diff --git a/src/components/initialize/initialize-user-state-from-api.tsx b/src/components/initialize/initialize-user-state-from-api.tsx
index 36e3d443b..6cd1a1c61 100644
--- a/src/components/initialize/initialize-user-state-from-api.tsx
+++ b/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;
 }
diff --git a/src/components/landing/pages/login/auth/via-email.tsx b/src/components/landing/pages/login/auth/via-email.tsx
index 9d2dc7d2d..0e232c4b0 100644
--- a/src/components/landing/pages/login/auth/via-email.tsx
+++ b/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>