client/src/components/Login.js
changeset 170 7da1d5137b0b
parent 168 ea92f4fe783d
child 171 03334a31130a
equal deleted inserted replaced
169:f98efa1bddd1 170:7da1d5137b0b
     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 import { getLoginErrorMessages } from '../selectors/authSelectors';
       
     9 import * as R from 'ramda';
     8 
    10 
     9 class Login extends Component {
    11 class Login extends Component {
    10 
    12 
    11   state = {
    13   state = {
    12     username: '',
    14     username: '',
    47       );
    49       );
    48     }
    50     }
    49   }
    51   }
    50 
    52 
    51   renderNonFieldErrors(errorMessages) {
    53   renderNonFieldErrors(errorMessages) {
    52     if (errorMessages && errorMessages.has('non_field_errors')) {
    54     console.log(errorMessages);
    53       const errors = errorMessages.non_field_errors;
    55     const errors = R.path(['data','non_field_errors'], errorMessages);
       
    56     if (errors) {
    54       return (
    57       return (
    55         <div class="alert alert-danger" role="alert">
    58         <div className="alert alert-danger" role="alert">
    56         { errors.map((message, key) =>
    59         { errors.map((message, key) =>
    57           <p key={ key }>{ message }</p>
    60           <p key={ key }>{ message }</p>
    58         ) }
    61         ) }
    59         </div>
    62         </div>
    60       )
    63       )
    61     }
    64     }
    62   }
    65   }
    63 
    66 
    64   render() {
    67   render() {
    65 
    68 
    66     // const errorMessages = this.props.login.errorMessages;
    69     const errorMessages = this.props.errorMessages;
    67 
    70 
    68     return (
    71     return (
    69       <div>
    72       <div>
    70         {/* <Navbar history={this.props.history} /> */}
    73         {/* <Navbar history={this.props.history} /> */}
    71         <div className="container-fluid">
    74         <div className="container-fluid">
    73             <div className="col-lg-6 offset-md-3">
    76             <div className="col-lg-6 offset-md-3">
    74               <div className="panel-login panel panel-default">
    77               <div className="panel-login panel panel-default">
    75                 <div className="card-header bg-secondary border-0 mt-5 pt-5">
    78                 <div className="card-header bg-secondary border-0 mt-5 pt-5">
    76                   <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4>
    79                   <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4>
    77                   <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
    80                   <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
    78                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
    81                     <div className="form-group mb-2 ml-3 w-75" >
    79                       <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
    82                       <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
    80                       <input className="form-control bg-danger border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" />
    83                       <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" />
    81                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
    84                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
    82                     </div>
    85                     </div>
    83                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
    86                     <div className="form-group mb-2 ml-3 w-75">
    84                       <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
    87                       <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
    85                       <input className="form-control bg-danger border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" />
    88                       <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" />
    86                       {/* { this.renderErrorMessage(errorMessages, 'password') } */}
    89                       {/* { this.renderErrorMessage(errorMessages, 'password') } */}
    87                     </div>
    90                     </div>
    88                     {/* { this.renderNonFieldErrors(errorMessages) } */}
    91                     { this.renderNonFieldErrors(errorMessages) }
    89                     <div className="text-center mr-5 pr-5">
    92                     <div className="text-center mr-5 pr-5">
    90                     <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">Se connecter</button>
    93                     <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">Se connecter</button>
    91                     </div>
    94                     </div>
    92                   </form>
    95                   </form>
    93                 </div>
    96                 </div>
   103   }
   106   }
   104 }
   107 }
   105 
   108 
   106 function mapStateToProps(state, props) {
   109 function mapStateToProps(state, props) {
   107   return {
   110   return {
   108     login: state.login
   111     errorMessages: getLoginErrorMessages(state)
   109   };
   112   };
   110 }
   113 }
   111 
   114 
   112 function mapDispatchToProps(dispatch) {
   115 function mapDispatchToProps(dispatch) {
   113   return {
   116   return {