client/src/components/CreateGroup.js
changeset 154 a28361bda28c
parent 151 57d63a248f0d
child 161 a642639dbc07
--- a/client/src/components/CreateGroup.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateGroup.js	Mon Sep 03 20:02:14 2018 +0200
@@ -5,6 +5,7 @@
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 import { getOnline, getCreateGroup } from '../selectors/authSelectors';
+import './CreateGroup.css';
 
 class CreateGroup extends Component {
 
@@ -67,7 +68,7 @@
 
   render() {
 
-    const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
+    // const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
     const okDisabled = (!this.state.name || this.state.name.trim() === "");
 
     return (
@@ -75,25 +76,25 @@
         <Navbar history={this.props.history} />
         <div className="container-fluid">
             <div className="row">
-              <div className="col-lg-6 offset-md-3">
-                <div className="panel-login panel panel-default">
-                  <div className="card-header">
-                  <h4 className="text-center">Créer un groupe</h4>
-                  <form onSubmit={this.submit}>
-                    <div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
-                      <label className="col-from-label">Nom</label>
-                      <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Nom du groupe..."/>
-                      { this.renderErrorMessage(errorMessages, 'name') }
+              <div className="col-lg-6 offset-md-5">
+                <div className="panel-login panel panel-default d-flex justify-content-end">
+                  <div className="card-header bg-primary w-50">
+                  <h5 className="text-center text-secondary font-weight-bold">Nouveau groupe</h5>
+                  <form className="mt-3" onSubmit={this.submit}>
+                    <div className="form-group mb-2" /*validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }*/>
+                      <label className="col-from-label text-secondary font-weight-bold mt-2">Nom</label>
+                      <input className="form-control bg-secondary text-primary border-0 w-100" type="text" onChange={this.handleInputChange} name="name" placeholder="Entrez un nom de groupe"/>
+                      {/* { this.renderErrorMessage(errorMessages, 'name') } */}
                     </div>
-                    <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
-                      <label className="col-form-label">Description</label>
-                      <input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
-                      { this.renderErrorMessage(errorMessages, 'description') }
+                    <div className="form-group mb-2" /*validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }*/>
+                      <label className="col-form-label text-secondary font-weight-bold mt-2">Description</label>
+                      <textarea className="form-control bg-secondary text-primary border-0 w-100" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Entrez une description de groupe" row="3"></textarea>
+                      {/* { this.renderErrorMessage(errorMessages, 'description') } */}
                     </div>
-                    { this.renderNonFieldErrors(errorMessages) }
-                    <div className="row">
-                    <div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div>
-                    <div className="col-md-6"><button type="button" className="btn btn-secondary btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
+                    {/* { this.renderNonFieldErrors(errorMessages) } */}
+                    <div className="text-center">
+                    <button type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled}>Créer</button>
+                    <button type="button" className="btn btn-danger text-muted btn-lg font-weight-bold" onClick={this.cancel}>Annuler</button>
                     </div>
                   </form>
                 </div>