Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var contentStyle = {
- border: "1px solid #EDEDED",
- color: "#555",
- borderRadius: "5px",
- boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
- paddingBottom: "15px"
- }
- var row = {
- marginTop: "50px"
- }
- var rule = {
- borderTop: "1px solid #ccc"
- }
- MeteorLogin = React.createClass({
- getInitialState: function() {
- return {
- usernameValue: "test",
- passwordValue: "test"
- }
- },
- onChangePassword: function(value){
- e.preventDefault();
- console.log(value.target.value);
- },
- onChangeUsername: function(value){
- e.preventDefault();
- console.log(value.target.value);
- },
- render: function(){
- return (
- <div className="row" style={row}>
- <div style={contentStyle} className="col-sm-4 col-sm-offset-4">
- <h1>Login</h1>
- <hr style={rule}/>
- <form>
- <MeteorLogin.UserInput onChange={this.onChangePassword} value={this.state.usernameValue}/>
- <MeteorLogin.PasswordInput onChange={this.onChangeUsername} value={this.state.passwordValue}/>
- <MeteorLogin.LoginButton clickLogin={this.clickLogin}/>
- </form>
- </div>
- </div>
- )
- }
- });
- MeteorLogin.UserInput = React.createClass({
- onChange: function(){
- e.preventDefault();
- this.props.onChange(e.target.value);
- },
- getInitialState: function() {
- return {
- value: ""
- }
- },
- render: function(){
- return (
- <div className="form-group">
- <label>User</label>
- <input value={this.props.value} onChange={this.props.onChange} className="form-control"/>
- </div>
- )
- }
- });
- MeteorLogin.PasswordInput = React.createClass({
- render: function(){
- return (
- <div className="form-group">
- <label>Password</label>
- <input value={this.props.value} onChange={this.props.onChange} type="password" className="form-control"/>
- </div>
- )
- }
- });
- MeteorLogin.LoginButton = React.createClass({
- render: function(){
- return (
- <button onClick={this.props.clickLogin} className="btn btn-default">Login</button>
- )
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement