wip wiring up account forms

.meteor/packages

@@ -30,3 +30,5 @@ accounts-google
 themeteorchef:bert
 fortawesome:fontawesome
 aldeed:collection2-core
+audit-argument-checks
+ddp-rate-limiter

.meteor/versions

@@ -8,6 +8,7 @@ alanning:roles@1.2.16
 aldeed:collection2-core@1.2.0
 aldeed:simple-schema@1.5.3
 allow-deny@1.0.5
+audit-argument-checks@1.0.7
 autoupdate@1.3.12
 babel-compiler@6.18.2
 babel-runtime@1.0.1

imports/api/Documents/Documents.js

@@ -46,6 +46,6 @@ Documents.schema = new SimpleSchema({
   },
 });
 
-Documents.attachSchema(Documents.schema);
+// Documents.attachSchema(Documents.schema);
 
 export default Documents;

imports/api/Documents/methods.js

@@ -0,0 +1,52 @@
+import { Meteor } from 'meteor/meteor';
+import { check } from 'meteor/check';
+import Documents from './Documents';
+import rateLimit from '../../modules/rate-limit';
+
+Meteor.methods({
+  'documents.insert': function documentsInsert(doc) {
+    check(doc, {
+      title: String,
+      body: String,
+    });
+
+    try {
+      return Documents.insert({ owner: this.userId, ...doc });
+    } catch (exception) {
+      throw new Meteor.Error('500', exception);
+    }
+  },
+  'documents.update': function documentsUpdate(doc) {
+    check(doc, {
+      _id: String,
+      title: String,
+      body: String,
+    });
+
+    try {
+      Documents.update(doc._id, { $set: doc });
+      return doc._id; // Return _id so we can redirect to document after update.
+    } catch (exception) {
+      throw new Meteor.Error('500', exception);
+    }
+  },
+  'documents.remove': function documentsRemove(documentId) {
+    check(documentId, String);
+
+    try {
+      return Documents.remove(documentId);
+    } catch (exception) {
+      throw new Meteor.Error('500', exception);
+    }
+  },
+});
+
+rateLimit({
+  methods: [
+    'documents.insert',
+    'documents.update',
+    'documents.remove',
+  ],
+  limit: 5,
+  timeRange: 1000,
+});

imports/api/Documents/server/publications.js

@@ -0,0 +1,17 @@
+import { Meteor } from 'meteor/meteor';
+import { check } from 'meteor/check';
+import Documents from '../Documents';
+
+Meteor.publish('documents', function documentsView() {
+  return Documents.find({ owner: this.userId });
+});
+
+// Note: documents.view is also used when editing an existing document.
+Meteor.publish('documents.view', function documentsView(documentId) {
+  check(documentId, String);
+
+  const doc = Documents.find(documentId);
+  const isOwner = doc.fetch()[0].owner === this.userId;
+
+  return isOwner ? doc : this.ready();
+});

imports/modules/rate-limit.js

@@ -0,0 +1,18 @@
+import { Meteor } from 'meteor/meteor';
+import { DDPRateLimiter } from 'meteor/ddp-rate-limiter';
+import { _ } from 'meteor/underscore';
+
+const fetchMethodNames = methods => _.pluck(methods, 'name');
+
+const assignLimits = ({ methods, limit, timeRange }) => {
+  const methodNames = fetchMethodNames(methods);
+
+  if (Meteor.isServer) {
+    DDPRateLimiter.addRule({
+      name(name) { return _.contains(methodNames, name); },
+      connectionId() { return true; },
+    }, limit, timeRange);
+  }
+};
+
+export default function rateLimit(options) { return assignLimits(options); }

imports/startup/server/api.js

@@ -0,0 +1,2 @@
+import '../../api/Documents/methods';
+import '../../api/Documents/server/publications';

imports/startup/server/index.js

@@ -0,0 +1 @@
+import './api';

imports/ui/components/DocumentEditor/DocumentEditor.js

@@ -0,0 +1,97 @@
+/* eslint-disable max-len, no-return-assign */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Meteor } from 'meteor/meteor';
+import { Bert } from 'meteor/themeteorchef:bert';
+import validate from '../../../modules/validate';
+
+class DocumentEditor extends React.Component {
+  componentDidMount() {
+    const component = this;
+    validate(component.form, {
+      rules: {
+        title: {
+          required: true,
+        },
+        body: {
+          required: true,
+        },
+      },
+      messages: {
+        title: {
+          required: 'Need a title in here, Seuss.',
+        },
+        body: {
+          required: 'This thneeds a body, please.',
+        },
+      },
+      submitHandler() { component.handleSubmit(); },
+    });
+  }
+
+  handleSubmit() {
+    const { history } = this.props;
+    const existingDocument = this.props.doc && this.props.doc._id;
+    const methodToCall = existingDocument ? 'documents.update' : 'documents.insert';
+    const doc = {
+      title: this.title.value.trim(),
+      body: this.body.value.trim(),
+    };
+
+    if (existingDocument) doc._id = existingDocument;
+
+    Meteor.call(methodToCall, doc, (error, documentId) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        const confirmation = existingDocument ? 'Document updated!' : 'Document added!';
+        this.form.reset();
+        Bert.alert(confirmation, 'success');
+        history.push(`/documents/${documentId}`);
+      }
+    });
+  }
+
+  render() {
+    const { doc } = this.props;
+    return (<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
+      <FormGroup>
+        <ControlLabel>Title</ControlLabel>
+        <input
+          type="text"
+          className="form-control"
+          name="title"
+          ref={title => (this.title = title)}
+          defaultValue={doc && doc.title}
+          placeholder="Oh, The Places You'll Go!"
+        />
+      </FormGroup>
+      <FormGroup>
+        <ControlLabel>Body</ControlLabel>
+        <textarea
+          className="form-control"
+          name="body"
+          ref={body => (this.body = body)}
+          defaultValue={doc && doc.body}
+          placeholder="Congratulations! Today is your day. You're off to Great Places! You're off and away!"
+        />
+      </FormGroup>
+      <Button type="submit" bsStyle="success">
+        {doc && doc._id ? 'Save Changes' : 'Add Document'}
+      </Button>
+    </form>);
+  }
+}
+
+DocumentEditor.defaultProps = {
+  doc: PropTypes.object,
+};
+
+DocumentEditor.propTypes = {
+  doc: PropTypes.object,
+  history: PropTypes.object.isRequired,
+};
+
+export default DocumentEditor;

imports/ui/components/OAuthLoginButton/OAuthLoginButton.js

@@ -56,7 +56,7 @@ OAuthLoginButton.defaultProps = {
 
 OAuthLoginButton.propTypes = {
   service: PropTypes.string.isRequired,
-  options: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  options: PropTypes.object,
   callback: PropTypes.func,
 };
 

imports/ui/pages/Documents/Documents.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Table, Alert, Button } from 'react-bootstrap';
+import { timeago, monthDayYearAtTime } from '@cleverbeagle/dates';
+import { Meteor } from 'meteor/meteor';
+import { createContainer } from 'meteor/react-meteor-data';
+import { Bert } from 'meteor/themeteorchef:bert';
+import DocumentsCollection from '../../../api/Documents/Documents';
+
+import './Documents.scss';
+
+const handleRemove = (documentId) => {
+  if (confirm('Are you sure? This is permanent!')) {
+    Meteor.call('documents.remove', documentId, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Document deleted!', 'success');
+      }
+    });
+  }
+};
+
+const Documents = ({ documents, match, history }) => (
+  <div className="Documents">
+    <div className="page-header clearfix">
+      <h4 className="pull-left">Documents</h4>
+      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add Document</Link>
+    </div>
+    {documents.length ? <Table responsive>
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Last Updated</th>
+          <th>Created</th>
+          <th />
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {documents.map(({ _id, title, createdAt, updatedAt }) => (
+          <tr key={_id}>
+            <td>{title}</td>
+            <td>{timeago(updatedAt)}</td>
+            <td>{monthDayYearAtTime(createdAt)}</td>
+            <td>
+              <Button
+                bsStyle="primary"
+                onClick={() => history.push(`${match.url}/${_id}`)}
+                block
+              >View</Button>
+            </td>
+            <td>
+              <Button
+                bsStyle="danger"
+                onClick={() => handleRemove(_id)}
+                block
+              >Delete</Button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table> : <Alert bsStyle="warning">No documents yet!</Alert>}
+  </div>
+);
+
+Documents.propTypes = {
+  documents: PropTypes.arrayOf(PropTypes.object).isRequired,
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default createContainer(() => {
+  const subscription = Meteor.subscribe('documents');
+  return {
+    loading: !subscription.ready(),
+    documents: DocumentsCollection.find().fetch(),
+  };
+}, Documents);

imports/ui/pages/Documents/Documents.scss

@@ -0,0 +1,3 @@
+.Documents table tbody tr td {
+  vertical-align: middle;
+}

imports/ui/pages/EditDocument/EditDocument.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createContainer } from 'meteor/react-meteor-data';
+import { Meteor } from 'meteor/meteor';
+import Documents from '../../../api/Documents/Documents';
+import DocumentEditor from '../../components/DocumentEditor/DocumentEditor';
+import NotFound from '../NotFound/NotFound';
+
+const EditDocument = ({ doc, history }) => (doc ? (
+  <div className="EditDocument">
+    <h4 className="page-header">{`Editing "${doc.title}"`}</h4>
+    <DocumentEditor doc={doc} history={history} />
+  </div>
+) : <NotFound />);
+
+EditDocument.propTypes = {
+  doc: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default createContainer(({ match }) => {
+  const documentId = match.params._id;
+  const subscription = Meteor.subscribe('documents.view', documentId);
+
+  return {
+    loading: !subscription.ready(),
+    doc: Documents.findOne(documentId),
+  };
+}, EditDocument);

imports/ui/pages/Login/Login.js

@@ -80,7 +80,10 @@ class Login extends React.Component {
               />
             </FormGroup>
             <FormGroup>
-              <ControlLabel>Password</ControlLabel>
+              <ControlLabel className="clearfix">
+                <span className="pull-left">Password</span>
+                <Link className="pull-right" to="/recover-password">Forgot password?</Link>
+              </ControlLabel>
               <input
                 type="password"
                 name="password"
@@ -100,7 +103,7 @@ class Login extends React.Component {
 }
 
 Login.propTypes = {
-  history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  history: PropTypes.object.isRequired,
 };
 
 export default Login;

imports/ui/pages/Login/Login.scss

@@ -2,10 +2,6 @@
 @import '../../stylesheets/colors';
 
 .Login {
-  .page-header {
-    margin-top: 0;
-  }
-
   form {
     position: relative;
     border-top: 1px solid $gray-lighter;
@@ -29,19 +25,3 @@
     }
   }
 }
-
-@include breakpoint(tablet) {
-  .Login {
-    .page-header {
-      margin-top: 10px;
-    }
-  }
-}
-
-@include breakpoint(desktop) {
-  .Login {
-    .page-header {
-      margin-top: 20px;
-    }
-  }
-}

imports/ui/pages/NewDocument/NewDocument.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DocumentEditor from '../../components/DocumentEditor/DocumentEditor';
+
+const NewDocument = ({ history }) => (
+  <div className="NewDocument">
+    <h4 className="page-header">New Document</h4>
+    <DocumentEditor history={history} />
+  </div>
+);
+
+NewDocument.propTypes = {
+  history: PropTypes.object.isRequired,
+};
+
+export default NewDocument;

imports/ui/pages/NotFound/NotFound.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Alert } from 'react-bootstrap';
+
+const NotFound = () => (
+  <div className="NotFound">
+    <Alert bsStyle="danger">
+      <p><strong>Error [404]</strong>: {window.location.pathname} does not exist.</p>
+    </Alert>
+  </div>
+);
+
+export default NotFound;

imports/ui/pages/Signup/Signup.js

@@ -149,7 +149,7 @@ class Signup extends React.Component {
 }
 
 Signup.propTypes = {
-  history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  history: PropTypes.object.isRequired,
 };
 
 export default Signup;

imports/ui/pages/Signup/Signup.scss

@@ -1,11 +1,6 @@
-@import '../../stylesheets/mixins';
 @import '../../stylesheets/colors';
 
 .Signup {
-  .page-header {
-    margin-top: 0;
-  }
-
   form {
     position: relative;
     border-top: 1px solid $gray-lighter;
@@ -29,19 +24,3 @@
     }
   }
 }
-
-@include breakpoint(tablet) {
-  .Signup {
-    .page-header {
-      margin-top: 10px;
-    }
-  }
-}
-
-@include breakpoint(desktop) {
-  .Signup {
-    .page-header {
-      margin-top: 20px;
-    }
-  }
-}

imports/ui/pages/ViewDocument/ViewDocument.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonToolbar, ButtonGroup, Button } from 'react-bootstrap';
+import { createContainer } from 'meteor/react-meteor-data';
+import { Meteor } from 'meteor/meteor';
+import { Bert } from 'meteor/themeteorchef:bert';
+import Documents from '../../../api/Documents/Documents';
+import NotFound from '../NotFound/NotFound';
+
+const handleRemove = (documentId, history) => {
+  if (confirm('Are you sure? This is permanent!')) {
+    Meteor.call('documents.remove', documentId, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Document deleted!', 'success');
+        history.push('/documents');
+      }
+    });
+  }
+};
+
+const ViewDocument = ({ doc, match, history }) => (doc ? (
+  <div className="ViewDocument">
+    <div className="page-header clearfix">
+      <h4 className="pull-left">{ doc && doc.title }</h4>
+      <ButtonToolbar className="pull-right">
+        <ButtonGroup bsSize="small">
+          <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
+          <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
+            Delete
+          </Button>
+        </ButtonGroup>
+      </ButtonToolbar>
+    </div>
+    { doc && doc.body }
+  </div>
+) : <NotFound />);
+
+ViewDocument.propTypes = {
+  doc: PropTypes.object.isRequired,
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default createContainer(({ match }) => {
+  const documentId = match.params._id;
+  const subscription = Meteor.subscribe('documents.view', documentId);
+
+  return {
+    loading: !subscription.ready(),
+    doc: Documents.findOne(documentId),
+  };
+}, ViewDocument);

imports/ui/stylesheets/_bootstrap-overrides.scss

@@ -0,0 +1,11 @@
+@import './mixins';
+
+.page-header {
+  margin-top: 0;
+}
+
+@include breakpoint(tablet) {
+  .page-header {
+    margin-top: 20px;
+  }
+}

imports/ui/stylesheets/_forms.scss

@@ -2,6 +2,11 @@
 @import './colors';
 
 form {
+  label,
+  .control-label {
+    display: block;
+  }
+  
   label.error {
     display: block;
     margin-top: 8px;

imports/ui/stylesheets/app.scss

@@ -1,2 +1,3 @@
 @import './colors';
 @import './forms';
+@import './bootstrap-overrides';

package.json

@@ -6,11 +6,11 @@
     "test": "jest"
   },
   "dependencies": {
+    "@cleverbeagle/dates": "^0.2.0",
     "babel-runtime": "^6.20.0",
     "jquery": "^2.2.4",
     "jquery-validation": "^1.16.0",
     "meteor-node-stubs": "~0.2.4",
-    "moment": "^2.18.1",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-addons-pure-render-mixin": "^15.5.2",
@@ -71,7 +71,8 @@
         }
       ],
       "class-methods-use-this": 0,
-      "react/jsx-filename-extension": 0
+      "react/jsx-filename-extension": 0,
+      "react/forbid-prop-types": 0
     }
   }
 }

server/main.js

@@ -1,5 +1 @@
-import { Meteor } from 'meteor/meteor';
+import '../imports/startup/server';
-
-Meteor.startup(() => {
-  // code to run on server at startup
-});