client/src/components/Register.js
changeset 151 57d63a248f0d
parent 143 cfcbf4bc66f1
child 154 a28361bda28c
equal deleted inserted replaced
150:97536386b397 151:57d63a248f0d
     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 './Register.css';
     5 import './Register.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 Register extends Component {
     9 class Register extends Component {
    10 
    10 
    11   register = () => {
    11   register = () => {
    29   }
    29   }
    30 
    30 
    31   renderErrorMessage(errorMessages, fieldname) {
    31   renderErrorMessage(errorMessages, fieldname) {
    32     if (errorMessages && errorMessages.has(fieldname)) {
    32     if (errorMessages && errorMessages.has(fieldname)) {
    33       return errorMessages.get(fieldname).map((message, key) =>
    33       return errorMessages.get(fieldname).map((message, key) =>
    34         <p className="help-block" key={ key }>{ message }</p>
    34         <p className="form-text" key={ key }>{ message }</p>
    35       );
    35       );
    36     }
    36     }
    37   }
    37   }
    38 
    38 
    39   render() {
    39   render() {
    40 
    40 
    41     const errorMessages = this.props.register.get('errorMessages');
    41     // const errorMessages = this.props.register.get('errorMessages');
    42 
    42 
    43     return (
    43     return (
    44       <div>
    44       <div>
    45         <Navbar history={this.props.history} />
    45         {/* <Navbar history={this.props.history} /> */}
    46         <div className="container-fluid">
    46         <div className="container-fluid">
    47           <div className="row">
    47           <div className="row">
    48             <div className="col-md-6 col-md-offset-3">
    48             <div className="col-lg-6 offset-md-3">
    49               <div className="panel-login panel panel-default">
    49               <div className="panel-login panel panel-default">
    50                 <div className="panel-heading">
    50                 <div className="card-header bg-secondary border-0">
    51                   <h4 className="text-center panel-title">IRI Notes</h4>
    51                   <h4 className="text-center card-title">IRI Notes</h4>
    52                   <form onSubmit={this.submit}>
    52                   <form onSubmit={this.submit}>
    53                     <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
    53                     <div className="form-group" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
    54                       <label className="control-label">Nom d'utilisateur</label>
    54                       <label className="col-form-label text-primary">Nom d'utilisateur</label>
    55                       <input className="form-control" type="text" inputRef={ref => { this.username = ref; }} />
    55                       <input className="form-control bg-danger text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
    56                       { this.renderErrorMessage(errorMessages, 'username') }
    56                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
    57                     </div>
    57                     </div>
    58                     <div className="form-group" validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
    58                     <div className="form-group" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
    59                       <label className="control-label">Email</label>
    59                       <label className="col-form-label text-primary">Email</label>
    60                       <input className="form-control" type="email" inputRef={ref => { this.email = ref; }} />
    60                       <input className="form-control bg-danger text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
    61                       { this.renderErrorMessage(errorMessages, 'email') }
    61                       {/* { this.renderErrorMessage(errorMessages, 'email') } */}
    62                     </div>
    62                     </div>
    63                     <div className="form-group" validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
    63                     <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
    64                       <label className="control-label">Mot de passe</label>
    64                       <label className="col-form-label text-primary">Mot de passe</label>
    65                       <input className="form-control" type="password" inputRef={ref => { this.password1 = ref; }} />
    65                       <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
    66                       { this.renderErrorMessage(errorMessages, 'password1') }
    66                       {/* { this.renderErrorMessage(errorMessages, 'password1') } */}
    67                     </div>
    67                     </div>
    68                     <div className="form-group" validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
    68                     <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
    69                       <label className="control-label">Confirmer le mot de passe</label>
    69                       <label className="col-form-label text-primary">Confirmer le mot de passe</label>
    70                       <input className="form-control" type="password" inputRef={ref => { this.password2 = ref; }} />
    70                       <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
    71                       { this.renderErrorMessage(errorMessages, 'password2') }
    71                       {/* { this.renderErrorMessage(errorMessages, 'password2') } */}
    72                     </div>
    72                     </div>
    73                     <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button>
    73                     <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary">S'inscrire</button>
    74                   </form>
    74                   </form>
    75                 </div>
    75                 </div>
    76               </div>
    76               </div>
    77               <p className="text-center">
    77               <p className="text-center">
    78                 <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a>
    78                 <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a>