Feature/ldap sign in (#27)

* reworked via-ldap component
* added username i18nkey
* added customAuthNames to backend config
* added postLdapLogin api call

Signed-off-by: Philip Molares <philip.molares@udo.edu>

public/backend-config.json

@@ -12,6 +12,9 @@
     "oauth2": false,
     "email": true
   },
+  "customAuthNames": {
+    "ldap": "FooBar"
+  },
   "specialLinks": {
     "privacy": "test",
     "termsOfUse": "test",

public/locales/de.json

@@ -122,5 +122,6 @@
   "errorEmailLogin": "E-Mail oder Passwort nicht korrekt",
   "errorLdapLogin": "Benutzername oder Passwort nicht korrekt",
   "email": "E-Mail",
-  "password": "Passwort"
+  "password": "Passwort",
+  "username": "Benutzername"
 }

public/locales/en.json

@@ -122,5 +122,6 @@
   "errorEmailLogin": "Invalid email or password",
   "errorLdapLogin": "Invalid username or password",
   "email": "Email",
-  "password": "Password"
+  "password": "Password",
+  "username": "Username"
 }

src/api/user.ts

@@ -23,3 +23,23 @@ export const postEmailLogin = async (email: string, password: string) => {
         .then(expectResponseCode())
         .then(response => response.json());
 }
+
+export const postLdapLogin = async (username: string, password: string) => {
+    return fetch(getBackendUrl() + "/auth/ldap", {
+        method: 'POST',
+        mode: 'cors',
+        cache: 'no-cache',
+        credentials: 'same-origin',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        redirect: 'follow',
+        referrerPolicy: 'no-referrer',
+        body: JSON.stringify({
+            username: username,
+            password: password,
+        })
+    })
+        .then(expectResponseCode())
+        .then(response => response.json());
+}

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

@@ -1,30 +1,70 @@
-import React, {Fragment} from "react";
-import {Trans} from "react-i18next";
-import {Button, Form} from "react-bootstrap";
+import React, {Fragment, useState} from "react";
+import {Trans, useTranslation} from "react-i18next";
+import {Alert, Button, Form} from "react-bootstrap";
+import {postLdapLogin} from "../../../../../api/user";
+import {getAndSetUser} from "../../../../../utils/apiUtils";
+import {useSelector} from "react-redux";
+import {ApplicationState} from "../../../../../redux";
 
 const ViaLdap: React.FC = () => {
+    const {t} = useTranslation();
+    const ldapCustomName = useSelector((state: ApplicationState) => state.backendConfig.customAuthNames.ldap);
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(false);
+    const login = (event: any) => {
+        postLdapLogin(username, password)
+            .then(loginJson => {
+                console.log(loginJson)
+                getAndSetUser();
+            }).catch(_reason => {
+                setError(true);
+            }
+        )
+        event.preventDefault();
+    }
+
+    const name = ldapCustomName ? `${ldapCustomName} (LDAP)` : "LDAP";
+
     return (
         <Fragment>
             <h5 className="center">
-                <Trans i18nKey="signInVia" values={{service: "LDAP"}}/>
+                <Trans i18nKey="signInVia" values={{service: name}}/>
             </h5>
-            <Form>
-                <Form.Group controlId="formBasicUsername">
-                    <Form.Control type="text" size="sm" placeholder="Username" />
+            <Form onSubmit={login}>
+                <Form.Group controlId="email">
+                    <Form.Control
+                        isInvalid={error}
+                        type="text"
+                        size="sm"
+                        placeholder={t("username")}
+                        onChange={(event) => setUsername(event.currentTarget.value)}
+                    />
                 </Form.Group>
 
-                <Form.Group controlId="formBasicPassword">
-                    <Form.Control type="password" size="sm" placeholder="Password" />
-                </Form.Group>
-                <Button
+                <Form.Group controlId="password">
+                    <Form.Control
+                        isInvalid={error}
+                        type="password"
                         size="sm"
-                    variant="primary"
-                >
+                        placeholder={t("password")}
+                        onChange={(event) => setPassword(event.currentTarget.value)}
+                    />
+                </Form.Group>
+
+                <Alert className="small" show={error} variant="danger">
+                    <Trans i18nKey="errorLdapLogin"/>
+                </Alert>
+
+                <Button
+                    type="submit"
+                    size="sm"
+                    variant="primary">
                     <Trans i18nKey="signIn"/>
                 </Button>
             </Form>
         </Fragment>
-    )
+    );
 };
 
 export { ViaLdap }

src/redux/backend-config/reducers.ts

@@ -4,7 +4,7 @@ import {BackendConfigActions, BackendConfigState, SET_BACKEND_CONFIG_ACTION_TYPE
 export const initialState: BackendConfigState = {
     allowAnonymous: true,
     authProviders: {
-        facebook: true,
+        facebook: false,
         github: false,
         twitter: false,
         gitlab: false,
@@ -15,6 +15,9 @@ export const initialState: BackendConfigState = {
         oauth2: false,
         email: false
     },
+    customAuthNames: {
+      ldap: ""
+    },
     specialLinks: {
         privacy: "",
         termsOfUse: "",

src/redux/backend-config/types.ts

@@ -5,20 +5,25 @@ export const SET_BACKEND_CONFIG_ACTION_TYPE = 'backend-config/set';
 export interface BackendConfigState {
     allowAnonymous: boolean,
     authProviders: AuthProvidersState,
+    customAuthNames: CustomAuthNames,
     specialLinks: SpecialLinks,
 }
 
 export interface AuthProvidersState {
-    facebook: true,
-    github: false,
-    twitter: false,
-    gitlab: false,
-    dropbox: false,
-    ldap: false,
-    google: false,
-    saml: false,
-    oauth2: false,
-    email: false,
+    facebook: boolean,
+    github: boolean,
+    twitter: boolean,
+    gitlab: boolean,
+    dropbox: boolean,
+    ldap: boolean,
+    google: boolean,
+    saml: boolean,
+    oauth2: boolean,
+    email: boolean,
+}
+
+export interface CustomAuthNames {
+    ldap: string;
 }
 
 export interface SpecialLinks {