wip Pup 1.0.0

imports/ui/pages/Index/Index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Jumbotron } from 'react-bootstrap';
+
+import './Index.scss';
+
+const Index = () => (
+  <div className="Index">
+    <Jumbotron>
+      <img
+        src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
+        alt="Clever Beagle"
+      />
+      <p>Need help building your app? Check out our mentorship service.</p>
+    </Jumbotron>
+  </div>
+);
+
+export default Index;

imports/ui/pages/Login/Login.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Meteor } from 'meteor/meteor';
+import { Bert } from 'meteor/themeteorchef:bert';
+import OAuthLoginButton from '../../components/OAuthLoginButton/OAuthLoginButton';
+import validate from '../../../modules/validate';
+
+import './Login.scss';
+
+class Login extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    const component = this;
+
+    validate(component.form, {
+      rules: {
+        emailAddress: {
+          required: true,
+          email: true,
+        },
+        password: {
+          required: true,
+        },
+      },
+      messages: {
+        emailAddress: {
+          required: 'Need an email address here.',
+          email: 'Is this email address correct?',
+        },
+        password: {
+          required: 'Need a password here.',
+        },
+      },
+      submitHandler() { component.handleSubmit(); },
+    });
+  }
+
+  handleSubmit() {
+    const { history } = this.props;
+
+    Meteor.loginWithPassword(this.emailAddress.value, this.password.value, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Welcome back!', 'success');
+        history.push('/documents');
+      }
+    });
+  }
+
+  render() {
+    return (<div className="Login">
+      <Row>
+        <Col xs={12} sm={6} md={5} lg={4}>
+          <h4 className="page-header">Log In</h4>
+          <Row>
+            <Col xs={12}>
+              <FormGroup className="OAuthLoginButtons">
+                <OAuthLoginButton service="facebook" />
+                <OAuthLoginButton service="google" />
+                <OAuthLoginButton service="github" />
+              </FormGroup>
+            </Col>
+          </Row>
+          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
+            <p className="LoginWithEmail">Log In with an Email Address</p>
+            <FormGroup>
+              <ControlLabel>Email Address</ControlLabel>
+              <input
+                type="email"
+                name="emailAddress"
+                ref={emailAddress => (this.emailAddress = emailAddress)}
+                className="form-control"
+              />
+            </FormGroup>
+            <FormGroup>
+              <ControlLabel>Password</ControlLabel>
+              <input
+                type="password"
+                name="password"
+                ref={password => (this.password = password)}
+                className="form-control"
+              />
+            </FormGroup>
+            <Button type="submit" bsStyle="success">Log In</Button>
+            <p className="DontHaveAnAccount">
+              {'Don\'t have an account?'} <Link to="/signup">Sign Up</Link>.
+            </p>
+          </form>
+        </Col>
+      </Row>
+    </div>);
+  }
+}
+
+Login.propTypes = {
+  history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default Login;

imports/ui/pages/Login/Login.scss

@@ -0,0 +1,47 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
+.Login {
+  .page-header {
+    margin-top: 0;
+  }
+
+  form {
+    position: relative;
+    border-top: 1px solid $gray-lighter;
+    margin-top: 15px;
+    padding-top: 25px;
+
+    .LoginWithEmail {
+      display: inline-block;
+      background: #fff;
+      padding: 0 10px;
+      position: absolute;
+      top: -12px;
+      left: 50%;
+      margin-left: -106px;
+    }
+
+    .DontHaveAnAccount {
+      margin-top: 25px;
+      padding-top: 20px;
+      border-top: 1px solid $gray-lighter;
+    }
+  }
+}
+
+@include breakpoint(tablet) {
+  .Login {
+    .page-header {
+      margin-top: 10px;
+    }
+  }
+}
+
+@include breakpoint(desktop) {
+  .Login {
+    .page-header {
+      margin-top: 20px;
+    }
+  }
+}

imports/ui/pages/Signup/Signup.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Accounts } from 'meteor/accounts-base';
+import { Bert } from 'meteor/themeteorchef:bert';
+import OAuthLoginButton from '../../components/OAuthLoginButton/OAuthLoginButton';
+import InputHint from '../../components/InputHint/InputHint';
+import validate from '../../../modules/validate';
+
+import './Signup.scss';
+
+class Signup 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,
+        },
+        password: {
+          required: true,
+          minlength: 6,
+        },
+      },
+      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?',
+        },
+        password: {
+          required: 'Need a password here.',
+          minlength: 'Please use at least six characters.',
+        },
+      },
+      submitHandler() { component.handleSubmit(); },
+    });
+  }
+
+  handleSubmit() {
+    const { history } = this.props;
+
+    Accounts.createUser({
+      email: this.emailAddress.value,
+      password: this.password.value,
+      profile: {
+        name: {
+          first: this.firstName.value,
+          last: this.lastName.value,
+        },
+      },
+    }, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        Bert.alert('Welcome!', 'success');
+        history.push('/documents');
+      }
+    });
+  }
+
+  render() {
+    return (<div className="Signup">
+      <Row>
+        <Col xs={12} sm={6} md={5} lg={4}>
+          <h4 className="page-header">Sign Up</h4>
+          <Row>
+            <Col xs={12}>
+              <FormGroup className="OAuthLoginButtons">
+                <OAuthLoginButton service="facebook" />
+                <OAuthLoginButton service="google" />
+                <OAuthLoginButton service="github" />
+              </FormGroup>
+            </Col>
+          </Row>
+          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
+            <p className="SignupWithEmail">Sign Up with an Email Address</p>
+            <Row>
+              <Col xs={6}>
+                <FormGroup>
+                  <ControlLabel>First Name</ControlLabel>
+                  <input
+                    type="text"
+                    name="firstName"
+                    ref={firstName => (this.firstName = firstName)}
+                    className="form-control"
+                  />
+                </FormGroup>
+              </Col>
+              <Col xs={6}>
+                <FormGroup>
+                  <ControlLabel>Last Name</ControlLabel>
+                  <input
+                    type="text"
+                    name="lastName"
+                    ref={lastName => (this.lastName = lastName)}
+                    className="form-control"
+                  />
+                </FormGroup>
+              </Col>
+            </Row>
+            <FormGroup>
+              <ControlLabel>Email Address</ControlLabel>
+              <input
+                type="email"
+                name="emailAddress"
+                ref={emailAddress => (this.emailAddress = emailAddress)}
+                className="form-control"
+              />
+            </FormGroup>
+            <FormGroup>
+              <ControlLabel>Password</ControlLabel>
+              <input
+                type="password"
+                name="password"
+                ref={password => (this.password = password)}
+                className="form-control"
+              />
+              <InputHint>Use at least six characters.</InputHint>
+            </FormGroup>
+            <Button type="submit" bsStyle="success">Sign Up</Button>
+            <p className="HaveAnAccount">
+              Already have an account? <Link to="/login">Log In</Link>.
+            </p>
+          </form>
+        </Col>
+      </Row>
+    </div>);
+  }
+}
+
+Signup.propTypes = {
+  history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default Signup;

imports/ui/pages/Signup/Signup.scss

@@ -0,0 +1,47 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
+.Signup {
+  .page-header {
+    margin-top: 0;
+  }
+
+  form {
+    position: relative;
+    border-top: 1px solid $gray-lighter;
+    margin-top: 15px;
+    padding-top: 25px;
+
+    .SignupWithEmail {
+      display: inline-block;
+      background: #fff;
+      padding: 0 10px;
+      position: absolute;
+      top: -12px;
+      left: 50%;
+      margin-left: -106px;
+    }
+
+    .HaveAnAccount {
+      margin-top: 25px;
+      padding-top: 20px;
+      border-top: 1px solid $gray-lighter;
+    }
+  }
+}
+
+@include breakpoint(tablet) {
+  .Signup {
+    .page-header {
+      margin-top: 10px;
+    }
+  }
+}
+
+@include breakpoint(desktop) {
+  .Signup {
+    .page-header {
+      margin-top: 20px;
+    }
+  }
+}