Convert login views to React

client/modules/accounts/components/auth/index.js

@@ -0,0 +1,3 @@
+export LoginButtons from "./loginButtons";
+export SignIn from "./signIn";
+export SignUp from "./signUp";

client/modules/accounts/components/auth/loginButtons.js

@@ -0,0 +1,75 @@
+import React, { Component, PropTypes } from "react";
+import {
+  Button
+} from "/imports/plugins/core/ui/client/components";
+
+class LoginButtons extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderLoginButtons() {
+    const enabledServices = this.props.loginServices().filter((service) =>{
+      return service.enabled;
+    });
+
+    return (
+      <div>
+        {this.props.loginServices &&
+          enabledServices.map((service) => (
+            <Button
+              key={service._id}
+              className={`btn-block provider-${service.name}`}
+              primary={true}
+              bezelStyle="solid"
+              type="button"
+              data-provider={`${service.name}`}
+              onClick={() => this.props.onSocialClick(service.name)}
+            >
+              <i className={`fa fa-${service.name}`} />
+
+              {this.props.currentView === "loginFormSignInView" &&
+                <span data-i18n="accountsUI.signInWith">Sign in with</span>}
+              {this.props.currentView === "loginFormSignUpView" &&
+                <span data-i18n="accountsUI.signUpWith">Sign up with</span>}
+
+              &nbsp;<span data-i18n={`social.${service.name}`}>{this.props.capitalizeName(service.name)}</span>
+          </Button>
+          ))
+        }
+      </div>
+    );
+  }
+
+  renderSeparator() {
+    if (this.props.onSeparator()) {
+      return (
+        <div className="loginForm-seperator">
+          <span />
+          <span className="text" data-i18n="accountsUI.or">or</span>
+          <span />
+        </div>
+      );
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderLoginButtons()}
+        {this.renderSeparator()}
+      </div>
+    );
+  }
+}
+
+LoginButtons.propTypes = {
+  capitalizeName: PropTypes.func,
+  currentView: PropTypes.string,
+  loginServices: PropTypes.func,
+  onSeparator: PropTypes.func,
+  onSocialClick: PropTypes.func
+};
+
+export default LoginButtons;

client/modules/accounts/components/auth/signIn.js

@@ -0,0 +1,186 @@
+import React, { Component, PropTypes } from "react";
+import classnames from "classnames";
+import {
+  Button,
+  TextField,
+  Translation
+} from "/imports/plugins/core/ui/client/components";
+
+class SignIn extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: props.credentials.email,
+      password: props.credentials.password
+    };
+
+    this.handleFieldChange = this.handleFieldChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleFieldChange = (event, value, field) => {
+    this.setState({
+      [field]: value
+    });
+  }
+
+  handleSubmit = (event) => {
+    if (this.props.onFormSubmit) {
+      this.props.onFormSubmit(event, this.state.email, this.state.password);
+    }
+  }
+
+  renderEmailErrors() {
+    if (this.props.onError(this.props.messages.errors && this.props.messages.errors.email)) {
+      return (
+        <span className="help-block">
+          <Translation
+            defaultValue={this.props.messages.errors.email.reason}
+            i18nKey={this.props.messages.errors.email.i18nKeyReason}
+          />
+        </span>
+      );
+    }
+  }
+
+  renderPasswordErrors() {
+    return (
+      <span className="help-block">
+        {this.props.onError(this.props.messages.errors && this.props.messages.errors.password) &&
+          this.props.messages.errors.password.map((error, i) => (
+            <Translation
+              key={i}
+              defaultValue={error.reason}
+              i18nKey={error.i18nKeyReason}
+            />
+          ))
+        }
+      </span>
+    );
+  }
+
+  renderFormMessages() {
+    if (this.props.loginFormMessages) {
+      return (
+        <div>
+          {this.props.loginFormMessages()}
+        </div>
+      );
+    }
+  }
+
+  renderSpinnerOnWait() {
+    if (this.props.isLoading === true) {
+      return (
+        <div style={{ textAlign: "center" }}>
+          <i className="fa fa-spinner fa-spin" />
+        </div>
+      );
+    }
+    return (
+      <Button
+        className="btn-block"
+        primary={true}
+        bezelStyle="solid"
+        i18nKeyLabel="accountsUI.signIn"
+        label="Sign In"
+        type="submit"
+        tabIndex="3"
+        eventAction="submitSignInForm"
+      />
+    );
+  }
+
+  render() {
+    const emailClasses = classnames({
+      "form-group": true,
+      "form-group-email": true,
+      "has-error has-feedback": this.props.onError(this.props.messages.errors && this.props.messages.errors.email)
+    });
+
+    const passwordClasses = classnames({
+      "form-group": true,
+      "has-error has-feedback": this.props.onError(this.props.messages.errors && this.props.messages.errors.password)
+    });
+    return (
+      <div>
+        <div className="loginForm-title">
+          <h2 data-i18n="accountsUI.signIn">Sign In</h2>
+        </div>
+
+        <form className="login-form" onSubmit={this.handleSubmit} noValidate>
+
+          {this.renderFormMessages()}
+
+          <div className={emailClasses}>
+            <TextField
+              i18nKeyLabel="accountsUI.emailAddress"
+              label="Email"
+              name="email"
+              type="email"
+              tabIndex="1"
+              id={`email-${this.props.uniqueId}`}
+              value={this.state.email}
+              onChange={this.handleFieldChange}
+            />
+          {this.renderEmailErrors()}
+          </div>
+
+          <div className={passwordClasses}>
+            <TextField
+              i18nKeyLabel="accountsUI.password"
+              label="Password"
+              name="password"
+              type="password"
+              tabIndex="2"
+              id={`password-${this.props.uniqueId}`}
+              value={this.state.password}
+              onChange={this.handleFieldChange}
+            />
+          {this.renderPasswordErrors()}
+          </div>
+
+          <div className="form-group">
+            {this.renderSpinnerOnWait()}
+          </div>
+
+          <div className="form-group flex flex-justify-spaceBetween">
+            <a
+              href="#"
+              data-i18n="accountsUI.forgotPassword"
+              tabIndex="4"
+              onClick={this.props.onForgotPasswordClick}
+            >
+              Reset Password
+            </a>
+            <a
+              href="#"
+              data-i18n="accountsUI.signUp"
+              tabIndex="5"
+              onClick={this.props.onSignUpClick}
+            >
+              Register
+            </a>
+          </div>
+
+        </form>
+      </div>
+    );
+  }
+}
+
+SignIn.propTypes = {
+  credentials: PropTypes.object,
+  isLoading: PropTypes.bool,
+  loginFormMessages: PropTypes.func,
+  messages: PropTypes.object,
+  onError: PropTypes.func,
+  onForgotPasswordClick: PropTypes.func,
+  onFormSubmit: PropTypes.func,
+  onSignUpClick: PropTypes.func,
+  uniqueId: PropTypes.string
+};
+
+export default SignIn;