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 * as authActions from '../actions/authActions'; |
4 import * as authActions from '../actions/authActions'; |
|
5 import { Trans } from 'react-i18next'; |
|
6 import * as R from 'ramda'; |
5 |
7 |
6 class Register extends Component { |
8 class Register extends Component { |
7 |
9 |
|
10 constructor(props) { |
|
11 super(props); |
|
12 |
|
13 this.state = { |
|
14 username: '', |
|
15 email: '', |
|
16 password1: '', |
|
17 password2: '' |
|
18 } |
|
19 |
|
20 |
|
21 } |
|
22 |
8 register = () => { |
23 register = () => { |
9 const username = this.username.value; |
24 const { |
10 const email = this.email.value; |
25 username, |
11 const password1 = this.password1.value; |
26 email, |
12 const password2 = this.password2.value; |
27 password1, |
|
28 password2 } = this.state; |
13 |
29 |
14 this.props.authActions.registerSubmit(username, email, password1, password2); |
30 this.props.authActions.registerSubmit(username, email, password1, password2); |
|
31 } |
|
32 |
|
33 handleChange = (event) => { |
|
34 const newState = {}; |
|
35 newState[event.target.name] = event.target.value; |
|
36 this.setState(newState); |
15 } |
37 } |
16 |
38 |
17 submit = (e) => { |
39 submit = (e) => { |
18 e.preventDefault(); |
40 e.preventDefault(); |
19 |
41 |
24 e.preventDefault(); |
46 e.preventDefault(); |
25 this.props.history.push('/login'); |
47 this.props.history.push('/login'); |
26 } |
48 } |
27 |
49 |
28 renderErrorMessage(errorMessages, fieldname) { |
50 renderErrorMessage(errorMessages, fieldname) { |
29 if (errorMessages && errorMessages.has(fieldname)) { |
51 if (errorMessages && fieldname in errorMessages) { |
30 return errorMessages.get(fieldname).map((message, key) => |
52 return errorMessages[fieldname].map((message, key) => |
31 <p className="form-text" key={ key }>{ message }</p> |
53 <p key={ key } className="form-text alert alert-danger mt-4" role="alert" >{ message }</p> |
32 ); |
54 ); |
33 } |
55 } |
34 } |
56 } |
35 |
57 |
|
58 renderNonFieldErrors(errorMessages) { |
|
59 |
|
60 if (errorMessages && errorMessages.error) { |
|
61 return ( |
|
62 <div className="alert alert-danger mt-4" role="alert"> |
|
63 <Trans i18nKey="login.login_error">Unable to log in.</Trans> |
|
64 </div> |
|
65 ) |
|
66 } |
|
67 |
|
68 const errors = R.reduce( |
|
69 (acc, p) => R.concat(acc, R.ifElse(Array.isArray, R.identity, v => [v,])(R.pathOr([], ['data', p], errorMessages))), |
|
70 [], |
|
71 ['non_field_errors', 'detail'] |
|
72 ); |
|
73 if (errors && errors.length > 0 ) { |
|
74 return ( |
|
75 <div className="alert alert-danger mt-4" role="alert"> |
|
76 { errors.map((message, key) => |
|
77 <p key={ key }><Trans i18nKey="register.register_error">{ message }</Trans></p> |
|
78 ) } |
|
79 </div> |
|
80 ) |
|
81 } |
|
82 |
|
83 } |
|
84 |
|
85 |
36 render() { |
86 render() { |
37 |
87 |
38 // const errorMessages = this.props.register.errorMessages; |
88 const errorMessages = this.props.register.error ? this.props.register.errorMessages : false ; |
39 |
89 |
40 return ( |
90 return ( |
41 <div> |
91 <div> |
42 {/* <Navbar history={this.props.history} /> */} |
92 {/* <Navbar history={this.props.history} /> */} |
43 <div className="container-fluid"> |
93 <div className="container-fluid"> |
45 <div className="col-lg-6 offset-md-3"> |
95 <div className="col-lg-6 offset-md-3"> |
46 <div className="panel-login panel panel-default"> |
96 <div className="panel-login panel panel-default"> |
47 <div className="card-header bg-secondary border-0 mt-5 pt-5"> |
97 <div className="card-header bg-secondary border-0 mt-5 pt-5"> |
48 <h4 className="text-center card-title font-weight-bold text-lg" onClick={this.onClickHome}>IRI Notes</h4> |
98 <h4 className="text-center card-title font-weight-bold text-lg" onClick={this.onClickHome}>IRI Notes</h4> |
49 <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}> |
99 <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}> |
50 <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/> |
100 <div className="form-group mb-2 ml-3 w-75"> |
51 <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label> |
101 <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="username"><Trans i18nKey="common.username">Nom d'utilisateur</Trans></label> |
52 <input className="form-control bg-irinotes-form border-0 text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ /> |
102 <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleChange} value={this.state.username} name="username" /> |
53 {/* { this.renderErrorMessage(errorMessages, 'username') } */} |
103 { errorMessages && this.renderErrorMessage(errorMessages.data, 'username') } |
54 </div> |
104 </div> |
55 <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/> |
105 <div className="form-group mb-2 ml-3 w-75"> |
56 <label className="col-form-label text-primary font-weight-bold mt-2">Email</label> |
106 <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="email"><Trans i18nKey="common.email">Email</Trans></label> |
57 <input className="form-control bg-irinotes-form border-0 text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ /> |
107 <input className="form-control bg-irinotes-form border-0 text-muted" type="email" onChange={this.handleChange} value={this.state.email} name="email" /> |
58 {/* { this.renderErrorMessage(errorMessages, 'email') } */} |
108 { errorMessages && this.renderErrorMessage(errorMessages.data, 'email') } |
59 </div> |
109 </div> |
60 <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/> |
110 <div className="form-group mb-2 ml-3 w-75"> |
61 <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label> |
111 <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="password1"><Trans i18nKey="common.password">Mot de passe</Trans></label> |
62 <input className="form-control bg-irinotes-form border-0 text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ /> |
112 <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleChange} value={this.state.password1} name="password1" /> |
63 {/* { this.renderErrorMessage(errorMessages, 'password1') } */} |
113 { errorMessages && this.renderErrorMessage(errorMessages.data, 'password1') } |
64 </div> |
114 </div> |
65 <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/> |
115 <div className="form-group mb-2 ml-3 w-75"> |
66 <label className="col-form-label text-primary font-weight-bold mt-2">Confirmer le mot de passe</label> |
116 <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="password2"><Trans i18nKey="register.password_confirmation">Confirmer le mot de passe</Trans></label> |
67 <input className="form-control bg-irinotes-form border-0 text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ /> |
117 <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleChange} value={this.state.password2} name="password2" /> |
68 {/* { this.renderErrorMessage(errorMessages, 'password2') } */} |
118 { errorMessages && this.renderErrorMessage(errorMessages.data, 'password2') } |
69 </div> |
119 </div> |
|
120 { this.renderNonFieldErrors(errorMessages) } |
70 <div className="text-center mr-5 pr-5"> |
121 <div className="text-center mr-5 pr-5"> |
71 <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">S'inscrire</button> |
122 <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3"><Trans i18nKey="register.register">S'inscrire</Trans></button> |
72 </div> |
123 </div> |
73 </form> |
124 </form> |
74 </div> |
125 </div> |
75 </div> |
126 </div> |
76 <p className="text-center"> |
127 <p className="text-center"> |
77 <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a> |
128 <a className="text-muted" href="/login" onClick={ this.onClickLogin }><Trans i18nKey="register.already_registered">Déjà inscrit ? Se connecter</Trans>.</a> |
78 </p> |
129 </p> |
79 </div> |
130 </div> |
80 </div> |
131 </div> |
81 </div> |
132 </div> |
82 </div> |
133 </div> |