Implementing raml-validate in FrontEnd


#1

Hi, I’m using RAML for our application and I’m working on FrontEnd part.
What I want to do is to implement validation of Raml file in client side.

I installed RAML validate and I made a validation file.

raml_validation.js

var validate = require('raml-validate')();

var RAMLVersion = 'RAML10'

var user = validate({
  email: {
    type: 'string',
    required: true
  },
 password: {
    type: 'string',
    required: true
  }
 }, RAMLVersion);

But it shows error when I call ‘raml_validation’ in ‘login.jsx’ file. Why does it happen ?

Login.jsx

  import React from 'react';
  import axios from 'axios';
  import {FormRow} from './Forms';
  import validate from 'raml-validate';

 export default class LoginForm extends React.Component {

constructor(props) {
super(props);
this.state = {email: '',
          email_error: '',
          password_error: '',
          password: ''};

  this.emailChanged = this.emailChanged.bind(this);
  this.passwordChanged = this.passwordChanged.bind(this);
 this.login = this.login.bind(this);
  }


 login(e) {
 e.preventDefault();
 if (!this.validate()) return;
 var self = this;
 axios.post('/login', {email: this.state.email,
              password:this.state.password})
        .then(function(response) {
    self.props.onLogin(response.data.email,
               response.data.tenant);
    }).catch(function(error) {
    if (error.response.status == 401) {
        self.setState({password_error: "Invalid email/password 
   combination"});
    } else {
        console.log(error.message);
    }
    });
  }

  emailChanged(e) {
  this.setState({email: e.target.value});
  }

  passwordChanged(e) {
  this.setState({password: e.target.value});
  }

  validate() {
  var valid = true;
  if (!this.state.email) {
    this.setState({email_error: "Please enter your email"});
    valid = false;
  } else {
    this.setState({email_error: ""});
  }

  if (!this.state.password) {
    this.setState({password_error: "Please enter your password"});
    valid = false;
  } else {
    this.setState({password_error: ""});
  }
  return valid;
  }

  render() {
  return (
    <div className="container">
      <form className="form-signin">
    <h2 className="form-signin-heading">Twyla Client 
  Application</h2>
    <FormRow fieldType={"email"}
         placeholder={"Email"}
         value={this.state.email}
         onChange={this.emailChanged}
         error={this.state.email_error}
         autoFocus={true} />
      <FormRow fieldType={"password"}
         placeholder={"Password"}
         value={this.state.password}
         error={this.state.password_error}
         onChange={this.passwordChanged} />
      <input className="btn btn-lg btn-primary btn-block"
            value="Log in"
           type="submit" onClick={this.login} />
      </form>
    </div>
    );

   }
 }