1 import React, { Component } from 'react';

     2 import { connect } from 'react-redux';

     3 import { bindActionCreators } from 'redux';

     4 import * as authActions from '../actions/authActions';

     5 import { Trans } from 'react-i18next';

     6 import * as R from 'ramda';

     7 

     8 class Reset extends Component {

     9 

    10   constructor(props) {

    11     super(props);

    12 

    13     this.state = {

    14       email: ''

    15     }

    16 

    17 

    18   }

    19 

    20   reset = () => {

    21     const { email } = this.state;

    22 

    23     this.props.authActions.resetSubmit(email);

    24   }

    25 

    26   handleChange = (event) => {

    27     const newState = {};

    28     newState[event.target.name] = event.target.value;

    29     this.setState(newState);

    30   }

    31 

    32   submit = (e) => {

    33     e.preventDefault();

    34 

    35     this.reset();

    36   }

    37 

    38   onClickLogin = (e) => {

    39     e.preventDefault();

    40     this.props.history.push('/login');

    41   }

    42 

    43   renderErrorMessage(errorMessages, fieldname) {

    44     if (errorMessages && fieldname in errorMessages) {

    45       return errorMessages[fieldname].map((message, key) =>

    46         <p key={ key } className="form-text alert alert-danger mt-4" role="alert" >{ message }</p>

    47       );

    48     }

    49   }

    50 

    51   renderNonFieldErrors(errorMessages) {

    52 

    53     if (errorMessages && errorMessages.error) {

    54       return (

    55         <div className="alert alert-danger mt-4" role="alert">

    56           <Trans i18nKey="login.login_error">Unable to log in.</Trans>

    57         </div>

    58       )

    59     }

    60 

    61     const errors = R.reduce(

    62       (acc, p) => R.concat(acc, R.ifElse(Array.isArray, R.identity, v => [v,])(R.pathOr([], ['data', p], errorMessages))),

    63       [],

    64       ['non_field_errors', 'detail']

    65     );

    66     if (errors && errors.length > 0 ) {

    67       return (

    68         <div className="alert alert-danger mt-4" role="alert">

    69         { errors.map((message, key) =>

    70           <p key={ key }><Trans i18nKey="reset.reset_error">{ message }</Trans></p>

    71         ) }

    72         </div>

    73       )

    74     }

    75 

    76   }

    77 

    78 

    79   render() {

    80 

    81     const errorMessages = this.props.register.error ? this.props.register.errorMessages : false ;

    82 

    83     return (

    84       <div>

    85         {/* <Navbar history={this.props.history} /> */}

    86         <div className="container-fluid">

    87           <div className="row">

    88             <div className="col-lg-6 offset-md-3">

    89               <div className="panel-login panel panel-default">

    90                 <div className="card-header bg-secondary border-0 mt-5 pt-5">

    91                   <h4 className="text-center card-title font-weight-bold text-lg" onClick={this.onClickHome}>IRI Notes</h4>

    92                   <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>

    93                     <div className="form-group mb-2 ml-3 w-75">

    94                       <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="email"><Trans i18nKey="common.email">Email</Trans></label>

    95                       <input className="form-control bg-irinotes-form border-0 text-muted" type="email" onChange={this.handleChange} value={this.state.email} name="email" />

    96                       { errorMessages && this.renderErrorMessage(errorMessages.data, 'email') }

    97                     </div>

    98                     { this.renderNonFieldErrors(errorMessages) }

    99                     <div className="text-center mr-5 pr-5">

   100                     <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3"><Trans i18nKey="reset.reset">Reset passord</Trans></button>

   101                     </div>

   102                   </form>

   103                 </div>

   104               </div>

   105               <p className="text-center">

   106                 <a className="text-muted" href="/login" onClick={ this.onClickLogin }><Trans i18nKey="register.already_registered">Déjà inscrit ? Se connecter</Trans>.</a>

   107               </p>

   108             </div>

   109           </div>

   110         </div>

   111       </div>

   112     );

   113   }

   114 }

   115 

   116 function mapStateToProps(state, props) {

   117   return {

   118     register: state.register

   119   };

   120 }

   121 

   122 function mapDispatchToProps(dispatch) {

   123   return {

   124     authActions: bindActionCreators(authActions, dispatch)

   125   }

   126 }

   127 

   128 export default connect(mapStateToProps, mapDispatchToProps)(Reset);