#2 creating UI for log in

front-end/package.json

@@ -30,6 +30,7 @@
     ]
   },
   "devDependencies": {
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "react-redux": "^4.4.5"
   }
 }

front-end/src/Actions/UserActions.js

@@ -0,0 +1,21 @@
+import { userService } from '../Services/UserService';
+
+// export further user actions here, like logout, delete account...
+export const userActions = {
+    login
+};
+
+
+function login(username, password) {
+console.log("dans login !");
+    return dispatch => {
+        dispatch(request({ username })); // dispatch request action
+        console.log("ca n'arrive pas là");
+        userService.login(username, password);
+    };   
+
+    function request(user) { return { type: "LOGIN_REQUEST", user } }
+    function onSuccess(user) { return { type: "LOGIN_SUCCESS", user } }
+    function onFailure(error) { return { type: "LOGIN_FAILURE", error } }
+}
+

front-end/src/Components/Login/Login.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { userActions } from '../../Actions/UserActions';
+import { connect } from 'react-redux';
+
+class LoginForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            username: '',
+            password: '',
+            submitted: false
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(e) {
+        const { name, value } = e.target;
+        this.setState({ [name]: value });
+        console.log(`handle change on : {${name} , ${value}}`);
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+        console.log("form submitted");
+
+        this.setState({ submitted: true });
+        let { username, password } = this.state;
+
+        console.log(`submitted state : username=${username}, password=${password}, submitted=${this.state.submitted}`);
+
+        if (username && password) {
+            //this.props.login(username, password);
+            userActions.login(username, password);
+        }
+        else {
+            console.log("username and password should not be empty");
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.username === undefined) {
+            console.log("username udefined");
+        }
+        else {
+            console.log(`LoginForm did mount, username : ${this.props.username}`);
+        }
+    }
+
+    render() {
+        const { loggingIn } = this.props;
+        const { username, password, submitted } = this.state;
+        return (
+
+            <div className="col-md-6 col-md-offset-3">
+                <h2>Login</h2>
+                <form name="form" onSubmit={this.handleSubmit}>
+                    <div className="form-group">
+                        <label htmlFor="username">Username</label>
+                        <input type="text" name="username" className="form-control" value={username} onChange={this.handleChange}/>
+                    </div>
+                    <div className="form-group">
+                        <label htmlFor="password">Password</label>
+                        <input type="password" name="password" className="form-control" value={password} onChange={this.handleChange}/>
+                    </div>
+                    <div className="form-group">
+                        <button className="btn btn-primary">Login</button>
+                    </div>
+                </form>
+            </div>
+
+        );
+    }
+}
+
+
+/*function mapState(state) {
+    const { loggingIn } = state.authentication;
+    return { loggingIn };
+}
+
+const actions = {
+    login: userActions.login,
+};
+
+
+const connectLogin = connect(mapState, actions)(LoginForm);
+export { connectLogin as LoginForm };
+*/
+
+export default LoginForm;

front-end/src/Routes/index.js

@@ -5,6 +5,8 @@ import Home from '../Components/Home';
 
 // Import routing components
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import  LoginForm  from '../Components/Login/Login';
+//import { LoginForm } from '../Components/Login/Login';
 
 export default class Routes extends React.Component{
 
@@ -13,6 +15,7 @@ export default class Routes extends React.Component{
             <Router>
                 <Switch>
                     <Route path="/" exact component={Home}/>
+                    <Route path="/Login" exact component={LoginForm}/>
                     <Route path="/*" exact render={()=> <div>No page found</div>}> </Route>
                 </Switch>
             </Router>

front-end/src/Services/UserService.js

@@ -0,0 +1,29 @@
+
+// export further user actions here, like logout, delete account...
+export const userService = {
+    login
+};
+
+function login(username, password) {
+    console.log(`Trying to log {${userService}, ${password}}`);
+
+
+   // need to check with @Walid if method is POST or GET 
+   const requestOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+    };
+
+/*    return fetch(`/endPointForLogin`, requestOptions)
+        .then(handleResponse)
+        .then(user => {
+            // create user model with profile data
+            
+            return user;
+        });
+*/
+
+        return "OK FOR"
+
+}