Add callback for logginForm

src/client/app/components/Home.jsx

@@ -1,22 +1,74 @@
 import React, {Component}   from 'react';
 import ReactDOM             from 'react-dom';
-import LogginForm           from './LogginForm.jsx';
-import MenuAppBar           from './MenuAppBar.jsx';
-import PropTypes            from 'prop-types';
 import Grid                 from 'material-ui/Grid';
+import LoginForm            from './LoginForm.jsx';
+import MenuAppBar           from './MenuAppBar.jsx';
+import RecordingCenter      from './RecordingCenter.jsx';
+
+const homeTitle = "Home";
+const recordingCenterTitle = "Recording Center";
+
+function DisplayLoginForm(isLoggedIn, callback) {
+  return (
+    <Grid container className="home-grid">
+      <Grid item xs={4}/>
+      <Grid item xs={4}>
+        <LoginForm isLoggedIn={isLoggedIn} callback={callback} />
+      </Grid>
+      <Grid item xs={4}/>
+    </Grid>
+  )
+}
+
+function DisplayRecordingCenter() {
+  return (
+    <Grid container className="home-grid">
+      <Grid item xs={2}/>
+      <Grid item xs={8}>
+        <RecordingCenter />
+      </Grid>
+      <Grid item xs={2}/>
+    </Grid>
+  )
+};
 
 class Home extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      isLoggedIn : false,
+      title: homeTitle,
+    };
+    this.handdleUserLogin = this.handdleUserLogin.bind(this);
+  }
+
+  handdleUserLogin(firstName, lastName) {
+    this.setState({
+      isLoggedIn: true,
+      title: recordingCenterTitle,
+    });
+  }
+
   render() {
+    const isLoggedIn = this.state.isLoggedIn;
+    var externalGrid = 4
+    var mainGrid = 4;
+    var display =  <LoginForm isLoggedIn={isLoggedIn} callback={this.handdleUserLogin}/>
+    if (isLoggedIn) {
+      externalGrid = 2;
+      mainGrid = 8;
+      display = <RecordingCenter />;
+    }
+
     return (
       <div className="component-home">
-        <MenuAppBar />
-        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/>
+        <MenuAppBar title={this.state.title}/>
         <Grid container className="home-grid">
-          <Grid item xs={4}/>
-          <Grid item xs={4}>
-            <LogginForm />
+          <Grid item xs={externalGrid}/>
+          <Grid item xs={mainGrid}>
+            {display}
           </Grid>
-          <Grid item xs={4}/>
+          <Grid item xs={externalGrid}/>
         </Grid>
       </div>
     );

src/client/app/components/LoginForm.jsx

@@ -0,0 +1,88 @@
+import React, {Component}              from 'react';
+import ReactDOM                        from 'react-dom';
+import Button                          from 'material-ui/Button';
+import Input, { InputLabel }           from 'material-ui/Input';
+import { FormControl, FormHelperText } from 'material-ui/Form';
+import Grid                            from 'material-ui/Grid';
+import Paper                           from 'material-ui/Paper';
+import Send                            from 'material-ui-icons/Send';
+
+const iconStyle = {
+  marginLeft: 4,
+};
+
+
+class LoginForm extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      id: null,
+      firstName: "",
+      lastName: "",
+      isLoggedIn: this.props.isLoggedIn
+    };
+
+    this.handleInputChange  = this.handleInputChange.bind(this);
+    this.handleSubmit       = this.handleSubmit.bind(this);
+  }
+
+  handleInputChange(event) {
+    const target = event.target;
+
+    this.setState({
+      [target.name]: target.value
+    });
+  }
+
+
+  handleSubmit(event) {
+    // TODO Add validation form
+    if (this.state.firstName.length > 2 && this.state.lastName.length > 2) {
+      this.props.callback(this.state.firstName, this.state.lastName);
+      console.log("Form accepted => redirection enable");
+    }
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+      <Paper>
+        <Grid container direction="row" alignItems="center">
+          <Grid item xs={1}/>
+          <Grid item xs={10}>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="firstname-input">Firstname</InputLabel>
+              <Input name="firstName" onChange={this.handleInputChange}
+                value={this.state.firstName}
+              />
+            </FormControl>
+          </Grid>
+          <Grid item xs={1}/>
+
+          <Grid item xs={1}/>
+          <Grid item xs={10}>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="name-input">Lastname</InputLabel>
+              <Input name="lastName" onChange={this.handleInputChange}
+                value={this.state.lastName}
+              />
+            </FormControl>
+          </Grid>
+          <Grid item xs={1}/>
+
+          <Grid item xs={8}/>
+          <Grid item xs={4}>
+            <Button type="submit" raised color="primary">
+              Login
+              <Send style={iconStyle}/>
+            </Button>
+          </Grid>
+        </Grid>
+      </Paper>
+      </form>
+    );
+  }
+}
+
+export default LoginForm;

src/client/app/components/MenuAppBar.jsx

@@ -57,7 +57,7 @@ class MenuAppBar extends React.Component {
               <MenuIcon />
             </IconButton>
             <Typography type="title" color="inherit" className={classes.flex}>
-              Home
+              {this.props.title}
             </Typography>
             {auth && (
               <div>
@@ -90,6 +90,7 @@ class MenuAppBar extends React.Component {
             )}
           </Toolbar>
         </AppBar>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/>
       </div>
     );
   }