connected to backend

my-app/package-lock.json

@@ -18,6 +18,7 @@
         "react-redux": "^8.0.5",
         "react-scripts": "5.0.1",
         "redux": "^4.2.0",
+        "redux-thunk": "^2.4.2",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14572,6 +14573,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

my-app/package.json

@@ -13,6 +13,7 @@
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
+    "redux-thunk": "^2.4.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

my-app/src/App.js

-import React from 'react';
+import React, { Component } from 'react';
 import './App.css';
 import TopMenu from './components/TopMenu';
-// import PublicPage from './components/PublicPage';
-import BlankPage from './components/blankPage';
+import PublicPage from './components/PublicPage';
+import PrivatePage from './components/PrivatePage';
+import { connect } from 'react-redux';
 
-function App() {
-  return (
-    <div className="App">
-      <TopMenu />
-      <BlankPage />
-    </div>
-  );
+const mapStateToProps = state => {
+  return state
 }
 
-export default App;
+class App extends Component {
+
+  render() {
+
+    const user = this.props.user
+    let workspace;
+    if (user) {
+      workspace = <PrivatePage />
+    } else {
+      workspace = <PublicPage />
+    }
+
+    return (
+      <div className="App">
+        <TopMenu />
+        {workspace}
+      </div>
+    );
+  }
+}
+
+
+export default connect(mapStateToProps)(App);

my-app/src/actions/AuthenticationActions.js

+export const SHOW_LOGIN_DIALOG = 'SHOW_LOGIN_DIALOG';
+export const HIDE_LOGIN_DIALOG = 'HIDE_LOGIN_DIALOG';
+
+export const AUTHENTICATION_PENDING = 'AUTHENTICATION_PENDING'
+export const AUTHENTICATION_SUCCESS = 'AUTHENTICATION_SUCCESS'
+export const AUTHENTICATION_ERROR = 'AUTHENTICATION_ERROR'
+
+export function getShowLoginDialogAction() {
+    return {
+        type: SHOW_LOGIN_DIALOG
+    }
+}
+
+export function getHideLoginDialogAction() {
+    return {
+        type: HIDE_LOGIN_DIALOG
+    }
+}
+
+export function getAuthenticationPendingAction() {
+    return {
+        type: AUTHENTICATION_PENDING
+    }
+}
+
+export function getAuthenticationSuccessAction(userSession) {
+    return {
+        type: AUTHENTICATION_SUCCESS,
+        user: userSession.user,
+        accessToken: userSession.accessToken
+    }
+}
+
+export function getAuthenticationErrorAction(error) {
+    return {
+        type: AUTHENTICATION_ERROR,
+        error: error
+    }
+}
+
+export function authenticateUser(userID, password) {
+
+    console.log("Authenticate")
+
+    return dispatch => {
+        dispatch(getAuthenticationPendingAction());
+        login(userID, password)
+            .then(
+                userSession => {
+                    const action = getAuthenticationSuccessAction(userSession);
+                    dispatch(action);
+                },
+                error => {
+                    dispatch(getAuthenticationErrorAction(error));
+                }
+            )
+            .catch(error => {
+                dispatch(getAuthenticationErrorAction(error))
+            })
+    }
+}
+
+function login(userID, password) {
+    const requestOptions = {
+        method: 'GET',
+        headers: { 'Authorization': 'Basic ' + btoa(userID + ":" + password) }
+    };
+
+    console.log(userID)
+    console.log(password)
+
+    return fetch('https://localhost/api/authenticate', requestOptions)
+        .then(handleResponse)
+        .then(userSession => {
+            return userSession
+        });
+}
+
+function handleResponse(response) {
+    const authorizationHeader = response.headers.get('Authorization');
+
+    return response.text().then(text => {
+        console.log('Receive result: ' + authorizationHeader)
+
+        const data = text && JSON.parse(text);
+        var token
+        if (authorizationHeader) {
+            token = authorizationHeader.split(" ")[1];
+        }
+
+        if (!response.ok) {
+            if (response.status === 401) {
+                logout();
+            }
+            const error = (data && data.message) || response.statusText;
+            return Promise.reject(error);
+        } else {
+            let userSession = {
+                user: data,
+                accessToken: token
+            }
+            return userSession
+        }
+    });
+}
+
+function logout() {
+    console.error('Should irgendas')
+}
\ No newline at end of file

my-app/src/components/blankPage.js → my-app/src/components/PrivatePage.js

 import React, { Component } from "react";
-import LoginButton from "./loginButton";
 
-class blankPage extends Component {
+class PrivatePage extends Component {
     render() {
         return (
             <div>
-                <LoginButton />
+                <h1>PSSSST thats private!</h1>
             </div>
         )
     }
 }
 
-export default blankPage
+export default PrivatePage
\ No newline at end of file

my-app/src/components/TopMenu.js

@@ -9,7 +9,7 @@ class TopMenu extends Component {
         return (
             <div>
                 <Navbar bg="light" expand="lg">
-                    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+                    <Navbar.Brand href="#home">BHT</Navbar.Brand>
                     <Navbar.Toggle aria-controls="basic-navbar-nav" />
                     <Navbar.Collapse id="basic-navbar-nav">
                         <Nav className="mr-auto">

my-app/src/components/loginButton.js

 import React, { Component } from "react";
 import Button from "react-bootstrap/esm/Button";
+
 import { connect } from "react-redux";
 
+import { getShowLoginDialogAction } from "../actions/AuthenticationActions";
 class loginButton extends Component {
 
     constructor(props) {
@@ -11,13 +13,13 @@ class loginButton extends Component {
 
     showLoginDialog() {
         const dispatch = this.props.dispatch;
-        dispatch()
+        dispatch(getShowLoginDialogAction())
     }
 
     render() {
         return (
             <div>
-                <Button variant="light" onClick={this.showLoginDialog}>
+                <Button variant="light" onClick={this.showLoginDialog} id="OpenLoginDialogButton">
                     Login
                 </Button>
             </div>

my-app/src/components/userSessionWidget.js

-import React, { Component } from "react";
 import Button from "react-bootstrap/esm/Button";
 import Modal from "react-bootstrap/Modal";
+import Form from 'react-bootstrap/Form';
+
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+
+import * as authenticationActions from '../actions/AuthenticationActions'
+
+const mapStateToProps = state => {
+    return state;
+}
 class userSessionWidget extends Component {
 
     constructor(props) {
         super(props)
-        this.state = {show: false};
+        this.state = {
+            username: '',
+            password: ''
+        };
         this.handleShow = this.handleShow.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
     }
 
     handleShow(e) {
         e.preventDefault();
-        this.setState({show: true})
+        const { showLoginDialogAction } = this.props;
+        showLoginDialogAction();
+    }
+
+    handleClose() {
+        const { hideLoginDialogAction } = this.props;
+        hideLoginDialogAction();
+    }
+
+    handleChange(e) {
+        const { name, value } = e.target;
+        this.setState({ [name]: value })
+        console.log(JSON.stringify(this.state))
     }
 
-    handleClose(e) {
+    handleSubmit(e) {
         e.preventDefault();
-        this.setState({show: false})
+        const { username, password } = this.state;
+        const { authenticateUserAction } = this.props;
+        authenticateUserAction(username, password);
+        console.log(username)
+        console.log(password)
+        console.log("Pushed Submit")
     }
 
     render() {
+
+        var showDialog = this.props.showLoginDialog
+        if (showDialog === undefined) {
+            showDialog = false
+        }
         return (
             <div>
-                <Button variant="primary" onClick={this.handleShow}>
+                <Button variant="primary" onClick={this.handleShow} id="OpenLoginDialogButton">
                     Login
                 </Button>
 
-                <Modal show={this.state.show} onHide={this.handleClose}>
+                <Modal show={showDialog} onHide={this.handleClose} id="LoginDialog">
                     <Modal.Header closeButton>
-                        <Modal.Title>Modal title</Modal.Title>
+                        <Modal.Title>Login</Modal.Title>
                     </Modal.Header>
-
                     <Modal.Body>
-                        <p>Modal body text goes here.</p>
+                        <Form>
+                            <Form.Group className="mb-3">
+                                <Form.Label>Email address</Form.Label>
+                                <Form.Control type="email" placeholder="Enter email" name='username' onChange={this.handleChange} id="LoginDialogUserIDText"/>
+                            </Form.Group>
+
+                            <Form.Group className="mb-3">
+                                <Form.Label>Password</Form.Label>
+                                <Form.Control type="password" placeholder="Password" name='password' onChange={this.handleChange} id="LoginDialogPasswordText"/>
+                            </Form.Group>
+                            <Button variant="primary" type="submit" onClick={this.handleSubmit} id="PerformLoginButton">
+                                Submit
+                            </Button>
+                        </Form>
                     </Modal.Body>
 
                     <Modal.Footer>
-                        <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-                        <Button variant="primary" onClick={this.handleShow}>Save changes</Button>
+                        Passwort vergessen?
                     </Modal.Footer>
                 </Modal>
             </div>
@@ -46,4 +94,11 @@ class userSessionWidget extends Component {
     }
 }
 
-export default userSessionWidget
+const mapDispatchToProps = dispatch => bindActionCreators({
\ No newline at end of file
+    showLoginDialogAction: authenticationActions.getShowLoginDialogAction,
+    hideLoginDialogAction: authenticationActions.getHideLoginDialogAction,
+    authenticateUserAction: authenticationActions.authenticateUser
+}, dispatch)
+
+const ConnectedUserSessionWidget = connect(mapStateToProps, mapDispatchToProps)(userSessionWidget)
+export default ConnectedUserSessionWidget
\ No newline at end of file

my-app/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 
+import thunk from 'redux-thunk';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import rootReducer from './reducer/RootReducer';
 
-const store = createStore(rootReducer)
+const initialState = {
+
+}
+
+const middlewares = [thunk]
+
+const store = createStore(rootReducer, initialState, applyMiddleware(...middlewares))
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

my-app/src/reducer/RootReducer.js

+import * as authenticationActions from '../actions/AuthenticationActions'
+
 const initialState = {
-    user:null,
+    user: null,
     loginPending: false,
     showLoginDialog: false
 };
@@ -7,7 +9,43 @@ const initialState = {
 function rootReducer(state = initialState, action) {
 
     console.log("Bin im reducer: " + action.type)
-    return state;
+
+    switch (action.type) {
+        case authenticationActions.SHOW_LOGIN_DIALOG:
+            return {
+                ...state,
+                showLoginDialog: true,
+                error: null
+            }
+        case authenticationActions.HIDE_LOGIN_DIALOG:
+            return {
+                ...state,
+                showLoginDialog: false,
+                error: null
+            }
+        case authenticationActions.AUTHENTICATION_PENDING:
+            return {
+                ...state,
+                pending: true,
+                error: null
+            }
+        case authenticationActions.AUTHENTICATION_SUCCESS:
+            return {
+                ...state,
+                showLoginDialog: false,
+                pending: false,
+                user: action.user,
+                accessToken: action.accessToken
+            }
+        case authenticationActions.AUTHENTICATION_ERROR:
+            return {
+                ...state,
+                pending: false,
+                error: 'Authentication failed'
+            }
+        default:
+            return state;
+    }
 };
 
 export default rootReducer;
\ No newline at end of file