add support for profile

imports/ui/layouts/App/App.js

@@ -17,6 +17,7 @@ import Signup from '../../pages/Signup/Signup';
 import Login from '../../pages/Login/Login';
 import RecoverPassword from '../../pages/RecoverPassword/RecoverPassword';
 import ResetPassword from '../../pages/ResetPassword/ResetPassword';
+import Profile from '../../pages/Profile/Profile';
 import NotFound from '../../pages/NotFound/NotFound';
 
 const App = props => (
@@ -30,6 +31,7 @@ const App = props => (
           <Authenticated exact path="/documents/new" component={NewDocument} {...props} />
           <Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
           <Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
+          <Authenticated exact path="/profile" component={Profile} {...props} />
           <Public path="/signup" component={Signup} {...props} />
           <Public path="/login" component={Login} {...props} />
           <Route name="recover-password" path="/recover-password" component={RecoverPassword} />

imports/ui/pages/Profile/Profile.js

@@ -0,0 +1,176 @@
+/* eslint-disable no-underscore-dangle */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Meteor } from 'meteor/meteor';
+import { Accounts } from 'meteor/accounts-base';
+import { Bert } from 'meteor/themeteorchef:bert';
+import { createContainer } from 'meteor/react-meteor-data';
+import InputHint from '../../components/InputHint/InputHint';
+import validate from '../../../modules/validate';
+
+class Profile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    const component = this;
+
+    validate(component.form, {
+      rules: {
+        firstName: {
+          required: true,
+        },
+        lastName: {
+          required: true,
+        },
+        emailAddress: {
+          required: true,
+          email: true,
+        },
+        currentPassword: {
+          required() {
+            // Only required if newPassword field has a value.
+            return component.newPassword.value.length > 0;
+          },
+        },
+        newPassword: {
+          required() {
+            // Only required if currentPassword field has a value.
+            return component.currentPassword.value.length > 0;
+          },
+        },
+      },
+      messages: {
+        firstName: {
+          required: 'What\'s your first name?',
+        },
+        lastName: {
+          required: 'What\'s your last name?',
+        },
+        emailAddress: {
+          required: 'Need an email address here.',
+          email: 'Is this email address correct?',
+        },
+        currentPassword: {
+          required: 'Need your current password if changing.',
+        },
+        newPassword: {
+          required: 'Need your new password if changing.',
+        },
+      },
+      submitHandler() { component.handleSubmit(); },
+    });
+  }
+
+  handleSubmit() {
+    const profile = {
+      emailAddress: this.emailAddress.value,
+      profile: {
+        name: {
+          first: this.firstName.value,
+          last: this.lastName.value,
+        },
+      },
+    };
+
+    if (this.newPassword.value) profile.password = Accounts._hashPassword(this.newPassword.value);
+
+    Meteor.call('users.editProfile', profile, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Profile updated!', 'success');
+      }
+    });
+  }
+
+  render() {
+    const { loading, user } = this.props;
+    return (<div className="Profile">
+      <Row>
+        <Col xs={12} sm={6} md={4}>
+          <h4 className="page-header">Edit Profile</h4>
+          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
+            {!loading ? (<div>
+              <Row>
+                <Col xs={6}>
+                  <FormGroup>
+                    <ControlLabel>First Name</ControlLabel>
+                    <input
+                      type="text"
+                      name="firstName"
+                      defaultValue={user.profile.name.first}
+                      ref={firstName => (this.firstName = firstName)}
+                      className="form-control"
+                    />
+                  </FormGroup>
+                </Col>
+                <Col xs={6}>
+                  <FormGroup>
+                    <ControlLabel>Last Name</ControlLabel>
+                    <input
+                      type="text"
+                      name="lastName"
+                      defaultValue={user.profile.name.last}
+                      ref={lastName => (this.lastName = lastName)}
+                      className="form-control"
+                    />
+                  </FormGroup>
+                </Col>
+              </Row>
+              <FormGroup>
+                <ControlLabel>Email Address</ControlLabel>
+                <input
+                  type="email"
+                  name="emailAddress"
+                  defaultValue={user.emails[0].address}
+                  ref={emailAddress => (this.emailAddress = emailAddress)}
+                  className="form-control"
+                />
+              </FormGroup>
+              <h5 className="page-header">Change Password</h5>
+              <FormGroup>
+                <ControlLabel>Current Password</ControlLabel>
+                <input
+                  type="password"
+                  name="currentPassword"
+                  ref={currentPassword => (this.currentPassword = currentPassword)}
+                  className="form-control"
+                />
+              </FormGroup>
+              <FormGroup>
+                <ControlLabel>New Password</ControlLabel>
+                <input
+                  type="password"
+                  name="newPassword"
+                  ref={newPassword => (this.newPassword = newPassword)}
+                  className="form-control"
+                />
+                <InputHint>Use at least six characters.</InputHint>
+              </FormGroup>
+              <Button type="submit" bsStyle="success">Save Profile</Button>
+            </div>) : <div />}
+          </form>
+        </Col>
+      </Row>
+    </div>);
+  }
+}
+
+Profile.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  user: PropTypes.object.isRequired,
+};
+
+export default createContainer(() => {
+  const subscription = Meteor.subscribe('users.editProfile');
+
+  return {
+    loading: !subscription.ready(),
+    user: Meteor.user(),
+  };
+}, Profile);