3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import '../App.css'; |
4 import '../App.css'; |
5 import Navbar from './Navbar'; |
5 import Navbar from './Navbar'; |
6 import * as authActions from '../actions/authActions'; |
6 import * as authActions from '../actions/authActions'; |
7 import { getOnline, getCreateGroup } from '../selectors/authSelectors'; |
7 import { getOnline, getCreateGroup } from '../selectors/authSelectors'; |
|
8 import './CreateGroup.css'; |
8 |
9 |
9 class CreateGroup extends Component { |
10 class CreateGroup extends Component { |
10 |
11 |
11 state = { |
12 state = { |
12 name: '', |
13 name: '', |
65 } |
66 } |
66 |
67 |
67 |
68 |
68 render() { |
69 render() { |
69 |
70 |
70 const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']); |
71 // const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']); |
71 const okDisabled = (!this.state.name || this.state.name.trim() === ""); |
72 const okDisabled = (!this.state.name || this.state.name.trim() === ""); |
72 |
73 |
73 return ( |
74 return ( |
74 <div> |
75 <div> |
75 <Navbar history={this.props.history} /> |
76 <Navbar history={this.props.history} /> |
76 <div className="container-fluid"> |
77 <div className="container-fluid"> |
77 <div className="row"> |
78 <div className="row"> |
78 <div className="col-lg-6 offset-md-3"> |
79 <div className="col-lg-6 offset-md-5"> |
79 <div className="panel-login panel panel-default"> |
80 <div className="panel-login panel panel-default d-flex justify-content-end"> |
80 <div className="card-header"> |
81 <div className="card-header bg-primary w-50"> |
81 <h4 className="text-center">Créer un groupe</h4> |
82 <h5 className="text-center text-secondary font-weight-bold">Nouveau groupe</h5> |
82 <form onSubmit={this.submit}> |
83 <form className="mt-3" onSubmit={this.submit}> |
83 <div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }> |
84 <div className="form-group mb-2" /*validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }*/> |
84 <label className="col-from-label">Nom</label> |
85 <label className="col-from-label text-secondary font-weight-bold mt-2">Nom</label> |
85 <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Nom du groupe..."/> |
86 <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"/> |
86 { this.renderErrorMessage(errorMessages, 'name') } |
87 {/* { this.renderErrorMessage(errorMessages, 'name') } */} |
87 </div> |
88 </div> |
88 <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }> |
89 <div className="form-group mb-2" /*validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }*/> |
89 <label className="col-form-label">Description</label> |
90 <label className="col-form-label text-secondary font-weight-bold mt-2">Description</label> |
90 <input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/> |
91 <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> |
91 { this.renderErrorMessage(errorMessages, 'description') } |
92 {/* { this.renderErrorMessage(errorMessages, 'description') } */} |
92 </div> |
93 </div> |
93 { this.renderNonFieldErrors(errorMessages) } |
94 {/* { this.renderNonFieldErrors(errorMessages) } */} |
94 <div className="row"> |
95 <div className="text-center"> |
95 <div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div> |
96 <button type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled}>Créer</button> |
96 <div className="col-md-6"><button type="button" className="btn btn-secondary btn-lg btn-block" onClick={this.cancel}>Annuler</button></div> |
97 <button type="button" className="btn btn-danger text-muted btn-lg font-weight-bold" onClick={this.cancel}>Annuler</button> |
97 </div> |
98 </div> |
98 </form> |
99 </form> |
99 </div> |
100 </div> |
100 </div> |
101 </div> |
101 </div> |
102 </div> |