--- 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>