diff --git a/frontend/src/components/startseite/Login.js b/frontend/src/components/startseite/Login.js index d2aa1c7af3528cd3cfdc735640284f05c0622762..51d84890f23248ad48ab358c386b2f45a6d81a52 100644 --- a/frontend/src/components/startseite/Login.js +++ b/frontend/src/components/startseite/Login.js @@ -1,56 +1,57 @@ -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;