Advertisement
Guest User

Untitled

a guest
Sep 3rd, 2015
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.04 KB | None | 0 0
  1. var contentStyle = {
  2. border: "1px solid #EDEDED",
  3. color: "#555",
  4. borderRadius: "5px",
  5. boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
  6. paddingBottom: "15px"
  7. }
  8.  
  9. var row = {
  10. marginTop: "50px"
  11. }
  12.  
  13. var rule = {
  14. borderTop: "1px solid #ccc"
  15. }
  16.  
  17. MeteorLogin = React.createClass({
  18. getInitialState: function() {
  19. return {
  20. usernameValue: "test",
  21. passwordValue: "test"
  22. }
  23. },
  24. onChangePassword: function(value){
  25. e.preventDefault();
  26. console.log(value.target.value);
  27. },
  28. onChangeUsername: function(value){
  29. e.preventDefault();
  30. console.log(value.target.value);
  31. },
  32. render: function(){
  33. return (
  34. <div className="row" style={row}>
  35. <div style={contentStyle} className="col-sm-4 col-sm-offset-4">
  36. <h1>Login</h1>
  37. <hr style={rule}/>
  38. <form>
  39. <MeteorLogin.UserInput onChange={this.onChangePassword} value={this.state.usernameValue}/>
  40. <MeteorLogin.PasswordInput onChange={this.onChangeUsername} value={this.state.passwordValue}/>
  41. <MeteorLogin.LoginButton clickLogin={this.clickLogin}/>
  42. </form>
  43. </div>
  44. </div>
  45. )
  46. }
  47. });
  48.  
  49. MeteorLogin.UserInput = React.createClass({
  50. onChange: function(){
  51. e.preventDefault();
  52. this.props.onChange(e.target.value);
  53. },
  54. getInitialState: function() {
  55. return {
  56. value: ""
  57. }
  58. },
  59. render: function(){
  60. return (
  61. <div className="form-group">
  62. <label>User</label>
  63. <input value={this.props.value} onChange={this.props.onChange} className="form-control"/>
  64. </div>
  65. )
  66. }
  67. });
  68.  
  69. MeteorLogin.PasswordInput = React.createClass({
  70. render: function(){
  71. return (
  72. <div className="form-group">
  73. <label>Password</label>
  74. <input value={this.props.value} onChange={this.props.onChange} type="password" className="form-control"/>
  75. </div>
  76. )
  77. }
  78. });
  79.  
  80. MeteorLogin.LoginButton = React.createClass({
  81. render: function(){
  82. return (
  83. <button onClick={this.props.clickLogin} className="btn btn-default">Login</button>
  84. )
  85. }
  86. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement