[Router]: Set 'app' container as root route. [Ui]: Apply new template…

… for page 'auth_signup', 'group_list'.

imports/startup/client/routes.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { Router, Route, browserHistory } from 'react-router';
+import AppContainer from '../../ui/containers/app_container';
 import LobbyContainer from '../../ui/containers/lobby_container';
 import GroupContainer from '../../ui/containers/group_container.jsx';
 import AuthLogin from '../../ui/pages/auth_login';
 import AuthSignup from '../../ui/pages/auth_signup';
 
 export const renderRoutes = () => (
   <Router history={browserHistory}>
-    <Route path="/" component={LobbyContainer}/>
-    <Route path="/groups/:id" component={GroupContainer}/>
-    <Route path="/login" component={AuthLogin}/>
-    <Route path="/signup" component={AuthSignup}/>
+    <Route path="" component={AppContainer}>
+      <Route path="/" component={LobbyContainer}/>
+      <Route path="/groups/:id" component={GroupContainer}/>
+      <Route path="/login" component={AuthLogin}/>
+      <Route path="/signup" component={AuthSignup}/>
+    </Route>
   </Router>
 );

imports/ui/components/group_item.jsx

@@ -59,7 +59,7 @@ export default class GroupItem extends React.Component {
               <span className="label label-default">Playing</span> :
               playersCount >= Groups.MIN_PLAYERS_COUNT ? 
                 <span className="label label-warning">Ready</span> :
-                <span className="label label-primary">Waiting for players</span>
+                <span className="label label-primary">Waiting for more players</span>
           }
         </td>
         <td>

imports/ui/components/group_list.jsx

@@ -1,7 +1,4 @@
 import React from 'react';
-import TextField from 'material-ui/TextField';
-import RaisedButton from 'material-ui/RaisedButton';
-import { Table, TableHeader, TableHeaderColumn, TableBody, TableRow } from 'material-ui/Table';
 import { insert } from '../../api/groups/methods.js';
 import GroupItem from './group_item.jsx';
 
@@ -14,7 +11,7 @@ export default class GroupList extends React.Component {
   createGroup(event) {
     event.preventDefault();
     const { router } = this.context;
-    const groupId = insert.call({ name: this.refs.name.getValue() }, err => {
+    const groupId = insert.call({ name: this.refs.name.value }, err => {
       if (err) {
         alert(err.reason);
       } else {
@@ -28,10 +25,17 @@ export default class GroupList extends React.Component {
     let formCreateGroup;
     if (!!Meteor.userId()) { // Render form for creating new 'Group' if user has already logged in
       formCreateGroup = (
-        <div>
-          <form onSubmit={this.createGroup}>
-            <TextField hintText="Name" ref="name" name="name"/>
-            <RaisedButton primary={true} label="Create new group" type="submit"/>
+        <div className="x_content">
+          <br/>
+          <form data-parsley-validate className="form-horizontal form-label-left" onSubmit={this.createGroup}>
+            <div className="form-group">
+              <label className="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Group Name <span className="required">*</span>
+              </label>
+              <div className="col-md-6 col-sm-6 col-xs-12">
+                <input type="text" ref="name" name="name" required="required" className="form-control col-md-7 col-xs-12"/>
+              </div>
+              <button type="submit" className="btn btn-success">Create new group</button>
+            </div>
           </form>
         </div>
       ); 
@@ -40,6 +44,7 @@ export default class GroupList extends React.Component {
       <div className="row">
         <div className="col-md-12">
           <div className="x_panel">
+            {formCreateGroup}
             <div className="x_title">
               <h2>Groups</h2>
               <div className="clearfix"></div>

imports/ui/containers/app_container.jsx

@@ -0,0 +1,10 @@
+import { Meteor } from 'meteor/meteor';
+import { Groups } from '../../api/groups/groups.js';
+import { createContainer } from 'meteor/react-meteor-data';
+import App from '../layouts/app.jsx';
+
+export default createContainer(() => {
+  return {
+    user: Meteor.user(),
+  };
+}, App);

imports/ui/containers/lobby_container.jsx

@@ -6,7 +6,7 @@ import Lobby from '../pages/lobby';
 export default createContainer(() => {
   const loaded = Meteor.subscribe('groups.findAll').ready() && Meteor.subscribe('users.findAll').ready();
   return {
-    user: Meteor.user(),
+    user: Meteor.user(), // NOTE: Additional props: make 'group_list' automatically re-render even if user logged out
     groups: Groups.find().fetch(),
     loaded: loaded
   };

imports/ui/layouts/app.jsx

@@ -2,18 +2,27 @@ import React from 'react';
 import Navbar from './navbar';
 import Footer from './footer';
 
-const App = ({user, content}) => (
-  <div>
-    <Navbar user={user}/>
-    <div className="container">
-      {content}
-    </div>
-    <Footer/>
-  </div>
-);
+export default class App extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { user, children } = this.props;
+    return (
+      <div>
+        <Navbar user={user}/>
+        <div className="container">
+          {children}
+        </div>
+        <Footer/>
+      </div>
+    );
+  }
+}
 
 App.propTypes = {
-  content: React.PropTypes.element,
+  user: React.PropTypes.object,
+  children: React.PropTypes.element,
 };
-
-export default App;

imports/ui/layouts/navbar.jsx

@@ -18,14 +18,14 @@ export default class Navbar extends React.Component {
         <div className="nav_menu">
           <nav className="" role="navigation">
             <div className="nav toggle">
-              <a href="/"><img src="images/avatar.png" className="avalon-logo" alt="Logo"/></a>
+              <a href="/"><img src="/images/avatar.png" className="avalon-logo" alt="Logo"/></a>
             </div>
             <ul className="nav navbar-nav navbar-right">
             {
               user ?
                 <li className="">
                   <a href="javascript:;" className="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                    <img src="images/avatar.png" alt=""/>{user.username}
+                    <img src="/images/avatar.png" alt=""/>{user.username}
                   </a>
                   <ul className="dropdown-menu dropdown-usermenu pull-right">
                     <li><a onClick={this.logout}><i className="fa fa-sign-out pull-right"></i> Log Out</a></li>

imports/ui/pages/auth_login.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
-import App from '../layouts/app';
 
 export default class AuthLogin extends Component {
   constructor(props) {
@@ -15,7 +14,7 @@ export default class AuthLogin extends Component {
     let passwordError = (errors['password'] || errors['reason']);
     usernameError = usernameError && (usernameError.toLowerCase().indexOf('user') > -1 ? usernameError : '');
     passwordError = passwordError && (passwordError.toLowerCase().indexOf('password') > -1 ? passwordError : '');
-    const content = (
+    return (
       <div className="login_wrapper">
         <div className="animate form login_form">
           <section className="login_content">
@@ -30,7 +29,7 @@ export default class AuthLogin extends Component {
                 <input type="password" className="form-control" placeholder="Password" ref="password" name="password" required=""/>
               </div>
               <div>
-                <button type="submit" className="btn btn-default submit" href="index.html">Login</button>
+                <button type="submit" className="btn btn-default submit">Login</button>
               </div>
               <div className="clearfix"></div>
               <div className="separator">
@@ -49,7 +48,6 @@ export default class AuthLogin extends Component {
         </div>
       </div>
     );
-    return <App content={content}/>;
   }
 
   login(event) {

imports/ui/pages/auth_signup.jsx

@@ -1,8 +1,5 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
-import TextField from 'material-ui/TextField';
-import RaisedButton from 'material-ui/RaisedButton';
-import App from '../layouts/app';
 
 export default class AuthSignup extends Component {
   constructor(props) {
@@ -12,32 +9,51 @@ export default class AuthSignup extends Component {
   }
 
   render() {
-    const style = {
-      margin: 25,
-    };
     const { errors } = this.state;
     let usernameError = (errors['username'] || errors['reason']);
     let passwordError = (errors['password'] || errors['reason']);
     usernameError = usernameError && (usernameError.toLowerCase().indexOf('user') > -1 ? usernameError : '');
     passwordError = passwordError && (passwordError.toLowerCase().indexOf('password') > -1 ? passwordError : '');
-    const content = (
-      <div style={style}>
-        <form onSubmit={this.signup}>
-          <TextField hintText="User name" ref="username" name="username" errorText={usernameError} style={style}/>
-          <TextField hintText="Password" ref="password" name="password" errorText={passwordError} type="password" style={style}/>
-          <RaisedButton primary={true} label="Signup" type="submit" style={style}/>
-        </form>
-        <RaisedButton primary={true} containerElement={<Link to="/login"/>} linkButton={true} label="Login" style={style}/>
-        <RaisedButton primary={true} containerElement={<Link to="/"/>} linkButton={true} label="Home" style={style}/>
+    return (
+      <div className="login_wrapper">
+        <div className="animate form login_form">
+          <section className="login_content">
+            <form onSubmit={this.signup}>
+              <h1>Signup</h1>
+              <div className={usernameError ? 'avalon-error' : ''}>
+                <span>{usernameError}</span>
+                <input type="text" className="form-control" placeholder="Username" ref="username" name="username" required=""/>
+              </div>
+              <div className={passwordError ? 'avalon-error' : ''}>
+                <span>{passwordError}</span>
+                <input type="password" className="form-control" placeholder="Password" ref="password" name="password" required=""/>
+              </div>
+              <div>
+                <button type="submit" className="btn btn-default submit">Signup</button>
+              </div>
+              <div className="clearfix"></div>
+              <div className="separator">
+                <p className="change_link">Already has an account?
+                  <a href="/login" className="to_register"> Login here </a>
+                </p>
+                <div className="clearfix"></div>
+                <br />
+                <div>
+                  <h1><i className="fa fa-paw"></i> Avalon game</h1>
+                  <p>©2016 All Rights Reserved.</p>
+                </div>
+              </div>
+            </form>
+          </section>
+        </div>
       </div>
     );
-    return <App content={content}/>;
   }
 
   signup(event) {
     event.preventDefault();
-    const username = this.refs.username.getValue();
-    const password = this.refs.password.getValue();
+    const username = this.refs.username.value;
+    const password = this.refs.password.value;
     const errors = {};
 
     if (!username) {

imports/ui/pages/group_page.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import AppCanvas from 'material-ui/internal/AppCanvas';
 import RaisedButton from 'material-ui/RaisedButton';
 import { Table, TableHeader, TableHeaderColumn, TableBody, TableRow, TableRowColumn } from 'material-ui/Table';
-import App from '../layouts/app';
 import { Groups } from '../../api/groups/groups.js'; // Constants only
 import PlayerItem from '../components/player_item.jsx';
 import { start, selectRoles, selectMembers, approve, vote, guess } from '../../api/groups/methods.js';
@@ -100,7 +102,7 @@ export default class GroupPage extends React.Component {
 
   render() {
     const { group, loaded } = this.props;
-    let content;
+    let content = null;
     if (loaded) {
       let tableAdditionalRoles;
       if (group.hasOwner(Meteor.userId()) && !group.isPlaying()) {
@@ -167,8 +169,9 @@ export default class GroupPage extends React.Component {
       const isGuessing = group.isWaitingForGuessing() && group.findPlayerRole(Meteor.userId()) == Groups.Roles.ASSASSIN;
       const selectable = group.isSelectingMembers() && group.hasLeader(Meteor.userId()) || isGuessing;
       content = (
+        <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <AppCanvas>
         <div>
-          <RaisedButton primary={true} containerElement={<Link to="/"/>} linkButton={true} label="Home"/>
           <div>Group's name: {group.name}</div>
           <div>Owner: {group.getOwner().username}</div>
           {buttonStart}
@@ -240,9 +243,11 @@ export default class GroupPage extends React.Component {
             {isGuessing ? <div><RaisedButton label='Guess Merlin' onClick={this.guess}></RaisedButton></div> : '' }
           </div>
         </div>
+      </AppCanvas>
+      </MuiThemeProvider>
       );
     }
-    return <App content={content}/>;
+    return content;
   }
 }
 

imports/ui/pages/lobby.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import App from '../layouts/app';
 import GroupList from '../components/group_list.jsx';
 
 export default class Lobby extends Component {
@@ -8,37 +7,32 @@ export default class Lobby extends Component {
   }
 
   render() {
-    const { user, groups, loaded } = this.props;
-    let content;
-    if (loaded) {
-      content = (
-        <div>
-          <div className="page-title">
-            <div className="title_left">
-              <h3>Lobby <small>Listing</small></h3>
-            </div>
-            <div className="title_right">
-              <div className="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
-                <div className="input-group">
-                  <input type="text" className="form-control" placeholder="Search for..."/>
-                  <span className="input-group-btn">
-                    <button className="btn btn-default" type="button">Go!</button>
-                  </span>
-                </div>
+    const { groups, loaded } = this.props;
+    return loaded ? (
+      <div>
+        <div className="page-title">
+          <div className="title_left">
+            <h3>Lobby <small>Listing</small></h3>
+          </div>
+          <div className="title_right">
+            <div className="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+              <div className="input-group">
+                <input type="text" className="form-control" placeholder="Search for..."/>
+                <span className="input-group-btn">
+                  <button className="btn btn-default" type="button">Go!</button>
+                </span>
               </div>
             </div>
           </div>
-          <div className="clearfix"></div>
-          <GroupList groups={groups}/>
         </div>
-      );
-    }
-    return <App user={user} content={content}/>;
+        <div className="clearfix"></div>
+        <GroupList groups={groups}/>
+      </div>
+    ) : null;
   }
 }
 
 Lobby.propTypes = {
-  user: React.PropTypes.object,
   groups: React.PropTypes.array,
   loaded: React.PropTypes.bool,
 };