I have successfully implemented a simple login page using ReactJS by coding it all in JavaScript (a flexibility that I like) but I am still a beginner in React and would like to know whether this is efficient and modular and if anything can be improved.
"use strict";
function Login(email, password) {
var LOGIN_FLAG = 1002
$.post("/server/account/login.php", { email: email, password: password })
.done(function(data) {
var JSONData = tryParseJSON(data);
if (!JSONData || JSONData["statusCode"] == LOGIN_FLAG) {
ShowFailureAtDOM("container");
return;
}
var JWTData = KJUR.jws.JWS.parse(JSONData["jwt"]);
if (JWTData) {
ShowSuccessAtDOM("container", JWTData.payloadObj.name);
} else {
ShowFailureAtDOM("container");
}
});
};
function ShowSuccessAtDOM(id, name) {
ReactDOM.unmountComponentAtNode(document.getElementById(id));
ReactDOM.render(
<LoginSuccess name={name} />,
document.getElementById(id)
);
};
function ShowFailureAtDOM(id) {
ReactDOM.unmountComponentAtNode(document.getElementById(id));
ReactDOM.render(
<LoginFail />,
document.getElementById(id)
);
};
var Header = React.createClass({
render() {
return (
<h1>Web App - Login</h1>
)
}
});
var LoginForm = React.createClass({
ValidateLogin() {
var email = this.refs.loginEmail.state.value;
var password = this.refs.LoginPassword.state.value;
Login(email, password);
},
render() {
return (
<div className="loginDiv">
<Header />
<LoginEmail ref="loginEmail"/>
<LoginPassword ref="LoginPassword"/>
<br></br>
<LoginSubmit ValidateLogin={this.ValidateLogin}/>
</div>
)
}
});
var LoginEmail = React.createClass({
getInitialState() {
return {value: null}
},
onChange(e) {
this.setState({value: e.target.value});
},
render() {
return (
<div className="LoginEmailDiv">
<h6>Email:</h6>
<input type="text" onChange={this.onChange}/>
</div>
)
}
});
var LoginPassword = React.createClass({
getInitialState() {
return {value: null}
},
onChange(e) {
this.setState({value: e.target.value});
},
render() {
return (
<div className="LoginEmailDiv">
<h6>Password:</h6>
<input type="password" onChange={this.onChange}/>
</div>
)
}
});
var LoginSubmit = React.createClass({
onClick() {
this.props.ValidateLogin();
},
render() {
return (
<button onClick={this.onClick}>Login</button>
)
}
});
var LoginSuccess = React.createClass({
render() {
return (
<h2>Login Success! Welcome Back, {this.props.name}</h2>
)
}
});
var LoginFail = React.createClass({
render() {
return (
<h2>Login FAIL...</h2>
)
}
});
ReactDOM.render(
<LoginForm />,
document.getElementById("container")
);