1
I "m das Schreiben von Code-Validierung in Anwendung Reagieren zu überprüfen, ob Eingabe RAML Spezifikationen übereinstimmt. Ich benutze ein 'raml-validate'.RAML API Validierung in FrontEnd
Was kann ich es noch nicht herausfinden, ist, dass, wie ich Codes hinzufügen zu validieren Eingang, der vor dem Senden Anfrage POST RAML Spezifikationen entspricht.
ist es möglich, das?
Mein Code ist wie unten
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