RAML API validation in FrontEnd

Question

I"m writing validation code in React application to check if input matches RAML specs. I use a 'raml-validate'.

What I cannot figure it out yet is that how I can add codes to validate input which matches RAML specs before sending POST request.

Is it possible to implement this?

My code is as below
Login.js

import React from 'react';
import axios from 'axios';
import {FormRow} from './Forms';
import validate from '../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.validateInput()) return;
var self = this;
if (!this.validate.user) {
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);
    }
    });
  } else {
    alert('error');
  }
}

emailChanged(e) {
console.log('error');
this.setState({email: e.target.value});
}

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

validateInput() {
var valid = true;
if (!this.state.email) {
    console.log('error');
    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>
      <p>{this.user.email}</p>
      <p>ahaha</p>
    </div>
);
}
}

validate.js

var RAMLVersion = 'RAML10'

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

export const validate = () => {
 let errors = {}
 return errors
 }

api-spec.raml

protocols: [ HTTPS ]
baseUri: https://www.twylahelps.com/api/{version}
version: v1

schemas:
  - bad request:
   body:
    application/json:
      example: |
        {"error": "bad request"}

- unauthorized:
   body:
    application/json:
      example: |
        {"error": "unauthorized"}


/login:
 post:
 description: logs in a user
 body:
  application/json:
    schema: |
      {
        "$schema": "http://json-schema.org/draft-04/schema",
        "type" : "object",
        "properties" : {
          "email": {
            "type": "string"
          },
          "password": {
            "type": "string"
          }
        },
        "required": ["email", "password"],
        "additionalProperties": false
      }
 reponses:
  200:
   description: User logged in successfully
   body:
    application/json:
      example: {'email': "[email protected]", 'tenant': "abc"}
  401:
   body:
    application/json:
      schema: unauthorized

Answer 1

I decided not to use 'raml-validate'. Instead, I used 'ajv(Another JSON Validator). It works fine.