1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap'; |
|
5 import '../App.css'; |
4 import '../App.css'; |
6 import Navbar from './Navbar'; |
5 import Navbar from './Navbar'; |
7 import * as authActions from '../actions/authActions'; |
6 import * as authActions from '../actions/authActions'; |
8 import { getOnline, getCreateGroup } from '../selectors/authSelectors'; |
7 import { getOnline, getCreateGroup } from '../selectors/authSelectors'; |
9 |
8 |
40 } |
39 } |
41 |
40 |
42 renderErrorMessage(errorMessages, fieldname) { |
41 renderErrorMessage(errorMessages, fieldname) { |
43 if (errorMessages && fieldname in errorMessages) { |
42 if (errorMessages && fieldname in errorMessages) { |
44 return errorMessages[fieldname].map((message, key) => |
43 return errorMessages[fieldname].map((message, key) => |
45 <HelpBlock key={ key }>{ message }</HelpBlock> |
44 <p className="help-block" key={ key }>{ message }</p> |
46 ); |
45 ); |
47 } |
46 } |
48 } |
47 } |
49 |
48 |
50 renderNonFieldErrors(errorMessages) { |
49 renderNonFieldErrors(errorMessages) { |
51 if (errorMessages && 'non_field_errors' in errorMessages) { |
50 if (errorMessages && 'non_field_errors' in errorMessages) { |
52 const errors = errorMessages['non_field_errors']; |
51 const errors = errorMessages['non_field_errors']; |
53 return ( |
52 return ( |
54 <Alert bsStyle="danger"> |
53 <div class="alert alert-danger" role="alert"> |
55 { errors.map((message, key) => |
54 { errors.map((message, key) => |
56 <p key={ key }>{ message }</p> |
55 <p key={ key }>{ message }</p> |
57 ) } |
56 ) } |
58 </Alert> |
57 </div> |
59 ) |
58 ) |
60 } |
59 } |
61 } |
60 } |
62 |
61 |
63 cancel = (e) => { |
62 cancel = (e) => { |
66 } |
65 } |
67 |
66 |
68 |
67 |
69 render() { |
68 render() { |
70 |
69 |
71 const panelHeader = ( |
|
72 <h4 className="text-uppercase text-center">New Group</h4> |
|
73 ) |
|
74 |
|
75 const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']); |
70 const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']); |
76 const okDisabled = (!this.state.name || this.state.name.trim() === ""); |
71 const okDisabled = (!this.state.name || this.state.name.trim() === ""); |
77 |
72 |
78 return ( |
73 return ( |
79 <div> |
74 <div> |
80 <Navbar history={this.props.history} /> |
75 <Navbar history={this.props.history} /> |
81 <Grid fluid> |
76 <div className="container-fluid"> |
82 <Row> |
77 <div className="row"> |
83 <Col md={6} mdOffset={3}> |
78 <div className="col-md-6 col-md-offset-3"> |
84 <Panel header={ panelHeader } className="panel-login"> |
79 <div className="panel-login panel panel-default"> |
85 <form onSubmit={this.submit}> |
80 <div className="panel-heading"> |
86 <FormGroup validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }> |
81 <h4 className="text-uppercase text-center">New Group</h4> |
87 <ControlLabel>Nom</ControlLabel> |
82 <form onSubmit={this.submit}> |
88 <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/> |
83 <div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }> |
89 { this.renderErrorMessage(errorMessages, 'name') } |
84 <label className="control-label">Nom</label> |
90 </FormGroup> |
85 <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/> |
91 <FormGroup validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }> |
86 { this.renderErrorMessage(errorMessages, 'name') } |
92 <ControlLabel>Password</ControlLabel> |
87 </div> |
93 <FormControl componentClass="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/> |
88 <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }> |
94 { this.renderErrorMessage(errorMessages, 'description') } |
89 <label className="control-label">Password</label> |
95 </FormGroup> |
90 <input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/> |
96 { this.renderNonFieldErrors(errorMessages) } |
91 { this.renderErrorMessage(errorMessages, 'description') } |
97 <Row> |
92 </div> |
98 <Col md={6}><Button type="submit" block bsStyle="primary" disabled={okDisabled}>Ok</Button></Col> |
93 { this.renderNonFieldErrors(errorMessages) } |
99 <Col md={6}><Button block bsStyle="default" onClick={this.cancel}>Cancel</Button></Col> |
94 <div className="row"> |
100 </Row> |
95 <div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div> |
101 </form> |
96 <div className="col-md-6"><button type="button" className="btn btn-default btn-lg btn-block" onClick={this.cancel}>Annuler</button></div> |
102 </Panel> |
97 </div> |
103 </Col> |
98 </form> |
104 </Row> |
99 </div> |
105 </Grid> |
100 </div> |
|
101 </div> |
|
102 </div> |
|
103 </div> |
106 </div> |
104 </div> |
107 ); |
105 ); |
108 } |
106 } |
109 } |
107 } |
110 |
108 |