React-bootstrap

Added react-bootstrap

js/index.js

@@ -1,21 +1,20 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Remarkable = require('remarkable');
-var DatePicker = require('react-datepicker');
-require('react-datepicker/dist/react-datepicker.css');
-var Bootstrap = require('react-bootstrap');
-var moment = require('moment');
+var Button = require('react-bootstrap').Button;
+var FormControl = require('react-bootstrap').FormControl;
+var DatePicker = require('react-bootstrap-date-picker');
 var $ = require('jquery');
 
 var TodoForm = React.createClass({
   getInitialState: function() {
-    return {title: '', text: '', deadline: moment(), priority: '1'};
+    return {title: '', text: '', deadline: new Date().toISOString(), priority: '1'};
   },
   handleTitleChange: function(e) {
     this.setState({title: e.target.value});
   },
-  handleDateChange: function(date) {
-    this.setState({deadline: date});
+  handleDateChange: function(dateString) {
+    this.setState({deadline: dateString});
   },
   handlePriorityChange: function(e) {
     this.setState({priority: e.target.value});
@@ -28,52 +27,78 @@ var TodoForm = React.createClass({
     var title = this.state.title.trim();
     var text = this.state.text.trim();
     var priority = this.state.priority;
-    var deadline = this.state.deadline._d.toLocaleDateString();
+    var deadline = this.state.deadline;
     console.log(deadline);
     if (!title || !text || !deadline) {
       return;
     }
     this.props.onCommentSubmit({a: 'add', title: title, text: text, deadline: deadline, priority: priority});
-    this.setState({title: '', text: '', deadline: moment(), priority: '1'});
+    this.setState(this.getInitialState());
   },
   render: function() {
     return (
       <form className="form-inline" name="todoForm" onSubmit={this.handleSubmit}>
-        <input
-          className="form-control"
+        <FormControl
           type="text"
           placeholder="Title"
           value={this.state.title}
           onChange={this.handleTitleChange}
         />
-        <select className="form-control" value={this.state.priority} onChange={this.handlePriorityChange}>
+        <FormControl componentClass="select" value={this.state.priority} onChange={this.handlePriorityChange}>
           <option value="1">First priority</option>
           <option value="2">Second priority</option>
           <option value="3">Not very important</option>
           <option value="4">Only if you are bored</option>
-        </select>
+        </FormControl>
         <DatePicker
-          placeholder="yyyy-mm-dd"
-          selected={this.state.deadline}
+          value={this.state.deadline}
           onChange={this.handleDateChange}
         />
         <br />
-        <textarea
-          className="form-control"
+        <FormControl
+          componentClass="textarea"
           value={this.state.text}
-          onChange={this.handleTextChange}>
-        </textarea>
+          onChange={this.handleTextChange} />
         <br />
-        <input className="btn btn-primary" type="submit" value="Add" />
+        <Button bsStyle="primary" type="submit">Add</Button>
       </form>
     );
   }
 });
 
 var LoginForm = React.createClass({
+  getInitialState: function() {
+    return {user: '', pass: ''};
+  },
+  handleUserChange: function(e) {
+    this.setState({user: e.target.value});
+  },
+  handlePassChange: function(e) {
+    this.setState({pass: e.target.value});
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    var user = this.state.user;
+    var pass = this.state.pass;
+    if (!user || !pass) {
+      return;
+    }
+    $.post(
+      "https://tankernn.eu/login/check_login.php",
+      {user: user, pass: pass},
+      function(result) {
+        console.log(result);
+      }
+    );
+    this.setState(this.getInitialState());
+  },
   render: function() {
     return (
-      <a href="http://tankernn.eu/login?redirect=http://todo.tankernn.eu">Log In</a>
+      <form id="loginForm" name="loginForm" onSubmit={this.handleSubmit}>
+        <FormControl type="text" value={this.state.user} onChange={this.handleUserChange} />
+        <FormControl type="password" value={this.state.pass} onChange={this.handlePassChange} />
+        <Button bsStyle="primary" type="submit">Log in</Button>
+      </form>
     );
   }
 });
@@ -141,23 +166,31 @@ var App = React.createClass({
         if (data.result != 0) {
           console.log("Error in API: " + data.result);
         }
-        this.setState({list: data.list});
+        this.setState({list: data.list, result: data.result});
       }.bind(this),
       error: function(xhr, status, err) {
         console.error(this.props.url, status, err.toString());
+        this.setState({result: 1});
       }.bind(this)
     });
   },
   render: function() {
-    return (
-      <main>
-        <h1>Tankernn TODO list</h1>
-        <TodoForm onCommentSubmit={this.handleCommentSubmit} />
-        <TodoList list={this.state.list} />
-        <LoginForm />
-      </main>
-    );
+    if (this.state.result == 0)
+      return (
+        <main>
+          <h1>Tankernn TODO list</h1>
+          <TodoForm onCommentSubmit={this.handleCommentSubmit} />
+          <TodoList list={this.state.list} />
+        </main>
+      );
+    else
+      return (
+        <main>
+          <h1>Tankernn TODO list</h1>
+          <LoginForm />
+        </main>
+      );
   }
 });
 
-ReactDOM.render(<App url="/php/api.php" />, document.getElementById('content'));
+ReactDOM.render(<App url="https://todo.tankernn.eu/php/api.php" />, document.getElementById('content'));

package.json

@@ -10,6 +10,7 @@
     "moment": "^2.15.1",
     "react": "^15.3.2",
     "react-bootstrap": "^0.30.6",
+    "react-bootstrap-date-picker": "^3.7.0",
     "react-datepicker": "^0.32.0",
     "react-dom": "^15.3.2",
     "remarkable": "^1.7.1",