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 { Trans } from 'react-i18next'; |
|
5 |
4 import '../App.css'; |
6 import '../App.css'; |
5 import './Login.css'; |
7 import './Login.css'; |
6 // import Navbar from './Navbar'; |
8 // import Navbar from './Navbar'; |
7 import * as authActions from '../actions/authActions'; |
9 import * as authActions from '../actions/authActions'; |
8 import { getLoginErrorMessages } from '../selectors/authSelectors'; |
10 import { getLoginErrorMessages } from '../selectors/authSelectors'; |
49 ); |
51 ); |
50 } |
52 } |
51 } |
53 } |
52 |
54 |
53 renderNonFieldErrors(errorMessages) { |
55 renderNonFieldErrors(errorMessages) { |
54 console.log(errorMessages); |
56 |
|
57 if (errorMessages && errorMessages.error) { |
|
58 return ( |
|
59 <div className="alert alert-danger mt-4" role="alert"> |
|
60 <Trans i18nKey="login.login_error">Unable to log in.</Trans> |
|
61 </div> |
|
62 ) |
|
63 } |
|
64 |
55 const errors = R.path(['data','non_field_errors'], errorMessages); |
65 const errors = R.path(['data','non_field_errors'], errorMessages); |
56 if (errors) { |
66 if (errors) { |
57 return ( |
67 return ( |
58 <div className="alert alert-danger" role="alert"> |
68 <div className="alert alert-danger mt-4" role="alert"> |
59 { errors.map((message, key) => |
69 { errors.map((message, key) => |
60 <p key={ key }>{ message }</p> |
70 <p key={ key }><Trans i18nKey="login.credentials_error">{ message }</Trans></p> |
61 ) } |
71 ) } |
62 </div> |
72 </div> |
63 ) |
73 ) |
64 } |
74 } |
|
75 |
65 } |
76 } |
66 |
77 |
67 render() { |
78 render() { |
68 |
79 |
69 const errorMessages = this.props.errorMessages; |
80 const errorMessages = this.props.errorMessages; |
77 <div className="panel-login panel panel-default"> |
88 <div className="panel-login panel panel-default"> |
78 <div className="card-header bg-secondary border-0 mt-5 pt-5"> |
89 <div className="card-header bg-secondary border-0 mt-5 pt-5"> |
79 <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4> |
90 <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4> |
80 <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}> |
91 <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}> |
81 <div className="form-group mb-2 ml-3 w-75" > |
92 <div className="form-group mb-2 ml-3 w-75" > |
82 <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label> |
93 <label className="col-form-label text-primary font-weight-bold mt-2 text-capitalize"><Trans i18nKey="common.username">Nom d'utilisateur</Trans></label> |
83 <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" /> |
94 <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" /> |
84 {/* { this.renderErrorMessage(errorMessages, 'username') } */} |
95 {/* { this.renderErrorMessage(errorMessages, 'username') } */} |
85 </div> |
96 </div> |
86 <div className="form-group mb-2 ml-3 w-75"> |
97 <div className="form-group mb-2 ml-3 w-75"> |
87 <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label> |
98 <label className="col-form-label text-primary font-weight-bold mt-2 text-capitalize"><Trans i18nKey="common.password">Mot de passe</Trans></label> |
88 <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" /> |
99 <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" /> |
89 {/* { this.renderErrorMessage(errorMessages, 'password') } */} |
100 {/* { this.renderErrorMessage(errorMessages, 'password') } */} |
90 </div> |
101 </div> |
91 { this.renderNonFieldErrors(errorMessages) } |
102 { this.renderNonFieldErrors(errorMessages) } |
92 <div className="text-center mr-5 pr-5"> |
103 <div className="text-center mr-5 pr-5"> |
93 <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">Se connecter</button> |
104 <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3 text-capitalize"><Trans i18nKey='common.connect'>Se connecter</Trans></button> |
94 </div> |
105 </div> |
95 </form> |
106 </form> |
96 </div> |
107 </div> |
97 </div> |
108 </div> |
98 <p className="text-center"> |
109 <p className="text-center"> |
99 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a> |
110 <a className="text-muted" href="/register" onClick={ this.onClickRegister }><Trans i18nKey='login.registration_message'>Pas encore inscrit ? Créer un compte.</Trans></a> |
100 </p> |
111 </p> |
101 </div> |
112 </div> |
102 </div> |
113 </div> |
103 </div> |
114 </div> |
104 </div> |
115 </div> |