1
I "m écriture de code de validation dans React application pour vérifier si correspond à l'entrée specs Raml. J'utilise un 'raml-validate'.validation API RAML dans FrontEnd
Ce que je ne peux pas le comprendre encore que la façon dont je peux ajouter des codes pour valider entrée qui correspond à des spécifications de Raml avant d'envoyer une requête POST.
est-il possible de mettre en œuvre ce?
Mon code est comme ci-dessous
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