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 '../App.css'; |
4 import '../App.css'; |
5 import './Login.css'; |
5 import './Login.css'; |
6 import Navbar from './Navbar'; |
6 // import Navbar from './Navbar'; |
7 import * as authActions from '../actions/authActions'; |
7 import * as authActions from '../actions/authActions'; |
8 |
8 |
9 class Login extends Component { |
9 class Login extends Component { |
10 |
10 |
11 state = { |
11 state = { |
42 } |
41 } |
43 |
42 |
44 renderErrorMessage(errorMessages, fieldname) { |
43 renderErrorMessage(errorMessages, fieldname) { |
45 if (errorMessages && errorMessages.has(fieldname)) { |
44 if (errorMessages && errorMessages.has(fieldname)) { |
46 return errorMessages.get(fieldname).map((message, key) => |
45 return errorMessages.get(fieldname).map((message, key) => |
47 <p className="help-block" key={ key }>{ message }</p> |
46 <p className="form-text" key={ key }>{ message }</p> |
48 ); |
47 ); |
49 } |
48 } |
50 } |
49 } |
51 |
50 |
52 renderNonFieldErrors(errorMessages) { |
51 renderNonFieldErrors(errorMessages) { |
62 } |
61 } |
63 } |
62 } |
64 |
63 |
65 render() { |
64 render() { |
66 |
65 |
67 const errorMessages = this.props.login.get('errorMessages'); |
66 // const errorMessages = this.props.login.get('errorMessages'); |
68 |
67 |
69 return ( |
68 return ( |
70 <div> |
69 <div> |
71 <Navbar history={this.props.history} /> |
70 {/* <Navbar history={this.props.history} /> */} |
72 <div className="container-fluid"> |
71 <div className="container-fluid"> |
73 <div className="row"> |
72 <div className="row"> |
74 <div className="col-md-6 col-md-offset-3"> |
73 <div className="col-lg-6 offset-md-3"> |
75 <div className="panel-login panel panel-default"> |
74 <div className="panel-login panel panel-default"> |
76 <div className="panel-heading"> |
75 <div className="card-header bg-secondary border-0"> |
77 <h4 className="text-center panel-title">IRI Notes</h4> |
76 <h4 className="text-center card-title">IRI Notes</h4> |
78 <form onSubmit={this.submit}> |
77 <form onSubmit={this.submit}> |
79 <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }> |
78 <div className="form-group" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/> |
80 <label className="control-label">Nom d'utilisateur</label> |
79 <label className="col-form-label text-primary">Nom d'utilisateur</label> |
81 <input className="form-control" type="text" onChange={this.handleInputChange} name="username" /> |
80 <input className="form-control bg-danger text-muted" type="text" onChange={this.handleInputChange} name="username" /> |
82 { this.renderErrorMessage(errorMessages, 'username') } |
81 {/* { this.renderErrorMessage(errorMessages, 'username') } */} |
83 </div> |
82 </div> |
84 <div className="form-group" validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }> |
83 <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ > |
85 <label className="control-label">Mot de passe</label> |
84 <label className="col-form-label text-primary">Mot de passe</label> |
86 <input className="form-control" type="password" onChange={this.handleInputChange} name="password" /> |
85 <input className="form-control bg-danger text-muted" type="password" onChange={this.handleInputChange} name="password" /> |
87 { this.renderErrorMessage(errorMessages, 'password') } |
86 {/* { this.renderErrorMessage(errorMessages, 'password') } */} |
88 </div> |
87 </div> |
89 { this.renderNonFieldErrors(errorMessages) } |
88 {/* { this.renderNonFieldErrors(errorMessages) } */} |
90 <button type="submit" className="btn btn-primary btn-lg">Se connecter</button> |
89 <button type="submit" className="btn btn-primary btn-lg text-secondary">Se connecter</button> |
91 </form> |
90 </form> |
92 </div> |
91 </div> |
93 </div> |
92 </div> |
94 <p className="text-center"> |
93 <p className="text-center"> |
95 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a> |
94 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a> |