RegistrationForm.js

import './styles/RegistrationForm.css'
// import 'font-awesome/css/font-awesome.css'

import React from 'react';
import { HelpBlock, FormGroup, Form, Col, ControlLabel, FormControl, Checkbox, Button } from 'react-bootstrap';
import IBAN from 'iban';
class RegistrationFormRedux extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
      firstname: '',
      lastname: '',
      bankAccounts: [],
      bankAccount: {
        iban: '',
        bankname: '',
        validationState: {
          iban: '',
          bankname: ''
        },
        formErrors: {
          iban: '',
          bankname: ''
        },
        fieldValidationErrors: {
          iban: '',
          bankname: '',
        },
      },
      formErrors: {firstname: '', lastname: '', bankAccounts: '', email: '', password: ''},
      firstnameValid: false,
      lastnameValid: false,
      emailValid: false,
      passwordValid: false,
      formValid: false,
      validationState: {firstname: '', lastname: '', bankAccounts: '', email: '', password: ''},
    }
  }
  // getValidationState = () => {
  //   const length = this.state.value.length;
  //   if (length > 10) return 'success';
  //   else if (length > 5) return 'warning';
  //   else if (length > 0) return 'error';
  // }
  handleUserInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({ [name]: value}, () => { this.validateField(name, value) });
  }
  validateField = (fieldName, value) => {
    let fieldValidationErrors = this.state.formErrors;
    let firstnameValid = this.state.firstnameValid;
    let lastnameValid = this.state.lastnameValid;
    let emailValid = this.state.emailValid;
    let passwordValid = this.state.passwordValid;
    let validationState = this.state.validationState;

    switch(fieldName) {
      case 'firstname':
        firstnameValid = value.length >= 1;
        fieldValidationErrors.firsname = firstnameValid ? '': ' First name is required';
        validationState.firstname = firstnameValid ? 'success' : 'error';
        break;
      case 'lastname':
        lastnameValid = value.length >= 1;
        fieldValidationErrors.lastname = lastnameValid ? '': ' Last name is required';
        validationState.lastname = lastnameValid ? 'success' : 'error';
        break;
      case 'email':
        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
        fieldValidationErrors.email = emailValid ? '' : ' is invalid email';
        validationState.email = emailValid ? 'success' : 'error';
        break;
      case 'password':
        passwordValid = value.length >= 8;
        fieldValidationErrors.password = passwordValid ? '': ' at least 8 characters long';
        validationState.password = passwordValid ? 'success' : 'error';
        break;
      default:
        break;
    }
    this.setState({formErrors: fieldValidationErrors,
                  firstnameValid: firstnameValid,
                  lastnameValid: lastnameValid,
                  emailValid: emailValid,
                  passwordValid: passwordValid,
                  validationState: validationState
                }, this.validateForm);
  }
  handleBankAccountInput = (e, index) => {
    let name = e.target.name;
    let value = e.target.value;
    let bankAccounts = [...this.state.bankAccounts];
    let bankAccount = bankAccounts[index];
    let ibanValid = bankAccount.validationState.iban;
    let banknameValid = bankAccount.validationState.bankname;
    bankAccount[name] = value;

    switch(name) {
      case 'iban':
        ibanValid = IBAN.isValid(value); // true
        bankAccount.fieldValidationErrors.iban = ibanValid ? '' : ' is invalid IBAN';
        bankAccount.validationState.iban = ibanValid ? 'success' : 'error';
        // console.log("why validate all iban of bankAccounts of key: " + key );
        // console.log(bankAccounts[key]);

        break;
      case 'bankname':
        banknameValid = value.length >=1; // true
        bankAccount.fieldValidationErrors.bankname = banknameValid ? '' : ' is invalid bankname';
        bankAccount.validationState.bankname = banknameValid ? 'success' : 'error';
        // console.log("why validate all bankname of bankAccounts of key: " + key );
        // console.log(bankAccount);
        break;
      default:
        break;
    }

    bankAccounts[index] = bankAccount;
    this.setState({bankAccounts}, this.validateForm);
  }
  // handleBankAccountInput = (e, bankAccount) => {
  //   let name = e.target.name;
  //   let value = e.target.value;
  //   // let validation = e.target.key;
  //   let ibanValid = bankAccount.validationState.iban;
  //   let banknameValid = bankAccount.validationState.bankname;
  //   bankAccount[name] = value;
  //
  //   switch(name) {
  //     case 'iban':
  //       ibanValid = IBAN.isValid(value); // true
  //       bankAccount.fieldValidationErrors.iban = ibanValid ? '' : ' is invalid IBAN';
  //       bankAccount.validationState.iban = ibanValid ? 'success' : 'error';
  //       // console.log("why validate all iban of bankAccounts of key: " + key );
  //       // console.log(bankAccounts[key]);
  //
  //       break;
  //     case 'bankname':
  //       banknameValid = value.length >=1; // true
  //       bankAccount.fieldValidationErrors.bankname = banknameValid ? '' : ' is invalid bankname';
  //       bankAccount.validationState.bankname = banknameValid ? 'success' : 'error';
  //       // console.log("why validate all bankname of bankAccounts of key: " + key );
  //       // console.log(bankAccount);
  //       break;
  //     default:
  //       break;
  //   }
  //   let bankAccounts = {...this.state.bankAccounts};
  //
  //   // bankAccounts[key] = bankAccount;
  //   this.setState({bankAccounts}, this.validateForm);
  // }
  validateAllBankAccounts = () => {
    for(var o in this.state.bankAccounts) {
      if(!o.validationState.iban || !o.validationState.bankname) {
        return false;
      }
    }
    return true;
  }
  validateForm = () => {
    this.setState({formValid: this.state.firstnameValid && this.state.lastnameValid && this.state.emailValid && this.state.passwordValid && this.validateAllBankAccounts});
  }
  addBankAccountInput = () => {
    let bankAccounts = [...this.state.bankAccounts];
    let accountnum = 0;
    if(bankAccounts) {
      bankAccounts.map((key) => accountnum++ );
    }
    bankAccounts[accountnum] = this.state.bankAccount;
    this.setState({ bankAccounts });
  }
  renderBankAccountInput = (index) => {
    return (
      <div key={index}>
        <FormGroup controlId={'formHorizontalBankAccount'+index} validationState={this.state.bankAccounts[index].validationState.iban}>
          <Col componentClass={ControlLabel} sm={2}>
            IBAN
          </Col>
          <Col sm={10}>
            <FormControl type="text" name='iban' value={this.state.bankAccounts[index].iban} placeholder="iban" onChange={(e) => this.handleBankAccountInput(e, index)} />
          </Col>
          <FormControl.Feedback />
          <HelpBlock>{this.state.bankAccounts[index].formErrors.iban}</HelpBlock>
        </FormGroup>
        <FormGroup controlId={'formHorizontalBankAccount' + index} validationState={this.state.bankAccounts[index].validationState.bankname}>
          <Col componentClass={ControlLabel} sm={2}>
            Bankname
          </Col>
          <Col sm={10}>
            <FormControl type="text" name='bankname' value={this.state.bankAccounts[index].bankname} placeholder="Bank name" onChange={(e) => this.handleBankAccountInput(e, index)} />
          </Col>
          <FormControl.Feedback />
          <HelpBlock>{this.state.bankAccounts[index].formErrors.bankname}</HelpBlock>
        </FormGroup>
      </div>
    )
  }
  // renderBankAccountInput = (bankAccount, index) => {
  //   return (
  //     <div key={bankAccount.id}>
  //       <FormGroup controlId={'formHorizontalBankAccount'+bankAccount.iban} validationState={bankAccount.validationState.iban}>
  //         <Col componentClass={ControlLabel} sm={2}>
  //           IBAN
  //         </Col>
  //         <Col sm={10}>
  //           <FormControl type="text" name='iban' value={bankAccount.iban} placeholder="iban" onChange={(e) => this.handleBankAccountInput(e, bankAccount)} />
  //         </Col>
  //         <FormControl.Feedback />
  //         <HelpBlock>{bankAccount.formErrors.iban}</HelpBlock>
  //       </FormGroup>
  //       <FormGroup controlId={'formHorizontalBankAccount' + bankAccount.iban} validationState={bankAccount.validationState.bankname}>
  //         <Col componentClass={ControlLabel} sm={2}>
  //           Bankname
  //         </Col>
  //         <Col sm={10}>
  //           <FormControl type="text" name='bankname' value={bankAccount.bankname} placeholder="Bank name" onChange={(e) => this.handleBankAccountInput(e, bankAccount)} />
  //         </Col>
  //         <FormControl.Feedback />
  //         <HelpBlock>{bankAccount.formErrors.bankname}</HelpBlock>
  //       </FormGroup>
  //     </div>
  //   )
  // }
  render () {
    return (
      <Form horizontal>
        <h1>Register account</h1>
        <FormGroup controlId="formHorizontalFirstname" validationState={this.state.validationState.firstname}>
          <Col componentClass={ControlLabel} sm={2}>
            First Name
          </Col>
          <Col sm={10}>
            <FormControl type="text" name="firstname" value={this.state.firstname} placeholder="First Name" onChange={this.handleUserInput} />
          </Col>
          <FormControl.Feedback />
          <HelpBlock>{this.state.formErrors['firsname']}</HelpBlock>
        </FormGroup>
        <FormGroup controlId="formHorizontalLastName" validationState={this.state.validationState.lastname}>
          <Col componentClass={ControlLabel} sm={2}>
            Last Name
          </Col>
          <Col sm={10}>
            <FormControl type="text" name="lastname" value={this.state.lastname} placeholder="Last Name" onChange={this.handleUserInput} />
          </Col>
          <FormControl.Feedback />
          <HelpBlock>{this.state.formErrors['lastname']}</HelpBlock>
        </FormGroup>

        <FormGroup controlId="formHorizontalEmail" validationState={this.state.validationState.email}>
          <Col componentClass={ControlLabel} sm={2}>
            Email
          </Col>
          <Col sm={10}>
            <FormControl type="email" name="email" value={this.state.email} placeholder="Email" onChange={this.handleUserInput} />
          </Col>
          <FormControl.Feedback />
          <HelpBlock>{this.state.formErrors['email']}</HelpBlock>
        </FormGroup>

        <FormGroup controlId="formHorizontalPassword" validationState={this.state.validationState.password}>
          <Col componentClass={ControlLabel} sm={2}>
            Password
          </Col>
          <Col sm={10}>
            <FormControl type="password" name="password" value={this.state.password} placeholder="Password" onChange={this.handleUserInput} />
          </Col>
          <FormControl.Feedback />
          <HelpBlock>{this.state.formErrors['password']}</HelpBlock>
        </FormGroup>

        <h2>Bank accounts</h2>

        {this.state.bankAccounts.map(this.renderBankAccountInput)}
        { this.state.bankAccounts.length < 1 &&
          <HelpBlock>You should provide at least one bank account</HelpBlock>
        }
        <button
          onClick={(e) => {
            e.preventDefault();
            this.addBankAccountInput();
          }}
        >Add Bank Account</button>

        <FormGroup>
          <Col smOffset={2} sm={10}>
            <Checkbox>Remember me</Checkbox>
          </Col>
        </FormGroup>

        <FormGroup>
          <Col smOffset={2} sm={10}>
            <Button type="submit" disabled={!this.state.formValid}>
              Register
            </Button>
          </Col>
        </FormGroup>
        <pre>this.state: {JSON.stringify(this.state, null, 2)}</pre>
      </Form>
    )
  }
}

export default RegistrationFormRedux;