change password field, error message on wrong credentials

frontend/src/components/startseite/Login.js

-import React, { useState } from 'react';
-import {Row, Col, Button, Form,} from 'react-bootstrap';
-import { useForm } from "react-hook-form";
-import ApothekeRegisterModal from '../../modals/ApothekeRegisterModal';
-import './Startseite.scss'
-
-
-function Login(props) {
-    const [neuesApoRegisterModal, setNeuesApoRegisterModal] = useState(false);
-    const {handleSubmit} = useForm();
-    const [user, setUser] = useState({username:'', password:''});
-    
-    const login = async event => {
-        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                username: user.username,
-                password: user.password
-            })
-        }).catch((err) => {
-            //SHOW ERROR
-            console.log(err);
-        });
-
-
-        if(response && response.status === 200){
-            const data = await response.json();
-            window.sessionStorage.setItem("edbapo-jwt", data.jwt)
-            props.history.push(`/apotheke/${data.apothekeId}`);
-        }
-    }
-
-    return (
-        <div className="login">
-            <b style={{fontSize:'20pt'}}>Login:</b>
-            <Form onSubmit={handleSubmit(login)} >
-                <Form.Row>
-                    <Col>
-                        <Form.Control onChange={e => setUser({...user, username: e.target.value})} placeholder="Benutzername" />
-                        <Form.Control onChange={e => setUser({...user, password: e.target.value})} placeholder="Passwort" />
-                        <Button variant="primary" type="submit">Login</Button>    
-                        <Button variant="primary"  show={neuesApoRegisterModal} onClick={() => setNeuesApoRegisterModal(true)}>Neue Apotheke registrieren</Button>
-                        <ApothekeRegisterModal
-                                show={neuesApoRegisterModal}
-                                {...props}
-                                onHide={() => setNeuesApoRegisterModal(false)} ></ApothekeRegisterModal>
-                    </Col>
-                </Form.Row>
-            </Form>
-        </div>
-    )
-}
-export default Login;
\ No newline at end of file
+import React, { useState } from 'react';
+import {Col, Button, Form,} from 'react-bootstrap';
+import ApothekeRegisterModal from '../../modals/ApothekeRegisterModal';
+import { useSnackbar } from 'notistack';
+import './Startseite.scss'
+
+
+function Login(props) {
+    const [neuesApoRegisterModal, setNeuesApoRegisterModal] = useState(false);
+    const { enqueueSnackbar } = useSnackbar();
+    
+    const login = async event => {
+        event.preventDefault();
+        let {username, password} = event.target;
+        let body = {username: username.value, password: password.value};
+        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(body)
+        }).catch((err) => {
+            //SHOW ERROR
+            console.log(err);
+        });
+
+
+        if(response && response.status === 200){
+            const data = await response.json();
+            window.sessionStorage.setItem("edbapo-jwt", data.jwt)
+            props.history.push(`/apotheke/${data.apothekeId}`);
+        } else {
+            enqueueSnackbar("Nutzername oder Passwort ist Falsch", {variant: "error", autoHideDuration: 3000, anchorOrigin: {vertical: 'bottom', horizontal: 'left'}});
+        }
+    }
+
+    return (
+        <div className="login">
+            <b style={{fontSize:'20pt'}}>Login:</b>
+            <Form onSubmit={login} >
+                <Form.Row>
+                    <Col>
+                        <Form.Control name="username" placeholder="Benutzername" required />
+                        <Form.Control name="password" placeholder="Passwort" type="password" required />
+                        <Button variant="primary" type="submit">Login</Button>    
+                        <Button variant="primary"  show={neuesApoRegisterModal} onClick={() => setNeuesApoRegisterModal(true)}>Neue Apotheke registrieren</Button>
+                        <ApothekeRegisterModal
+                                show={neuesApoRegisterModal}
+                                {...props}
+                                onHide={() => setNeuesApoRegisterModal(false)} ></ApothekeRegisterModal>
+                    </Col>
+                </Form.Row>
+            </Form>
+        </div>
+    )
+}
+export default Login;