Move to new project API

src/client/api/AuthContainer.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import AuthEmailSentMessage from "./AuthEmailSentMessage";
+import AuthForm from "./AuthForm";
+
+export default class AuthContainer extends Component {
+  static propTypes = {
+    location: PropTypes.object.isRequired,
+    api: PropTypes.object.isRequired,
+    onSuccess: PropTypes.func.isRequired
+  };
+
+  state = {
+    error: null,
+    emailSent: false,
+    redirectToReferrer: false
+  };
+
+  onSubmit = email => {
+    this.props.api
+      .authenticate(email)
+      .then(this.props.onSuccess)
+      .catch(this.onError);
+  };
+
+  onError = err => {
+    this.setState({ error: err.message || "Error signing in. Please try again." });
+  };
+
+  render() {
+    if (this.state.mailSent) {
+      return <AuthEmailSentMessage />;
+    }
+
+    return <AuthForm error={this.state.error} onSubmit={this.onSubmit} />;
+  }
+}

src/client/api/AuthEmailSentMessage.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+
+export default class AuthEmailSentMessage extends Component {
+  render() {
+    return (
+      <div>
+        Email sent! <br />
+        Waiting for you to click on the link in the email...
+      </div>
+    );
+  }
+}

src/client/api/AuthForm.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+export default class AuthForm extends Component {
+  static propTypes = {
+    error: PropTypes.string,
+    onSubmit: PropTypes.func.isRequired
+  };
+
+  state = {
+    email: ""
+  };
+
+  onSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit(this.state.email);
+  };
+
+  onEmailChange = e => {
+    this.setState({ email: e.target.value });
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.onSubmit}>
+        {this.props.error && <p>{this.props.error}</p>}
+        <label>
+          Email:
+          <input type="email" placeholder="Your email address" value={this.state.email} onChange={this.handleChange} />
+        </label>
+        <p>
+          By proceeding, you agree to the{" "}
+          <a rel="noopener noreferrer" target="_blank" href="https://github.com/mozilla/hubs/blob/master/TERMS.md">
+            terms of use
+          </a>{" "}
+          and{" "}
+          <a rel="noopener noreferrer" target="_blank" href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md">
+            privacy notice
+          </a>.
+        </p>
+        <button type="submit">next</button>
+      </form>
+    );
+  }
+}

src/client/api/LoginDialog.js

@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styles from "../ui/dialogs/dialog.scss";
+import DialogHeader from "../ui/dialogs/DialogHeader";
+import AuthContainer from "./AuthContainer";
+
+export default class LoginDialog extends Component {
+  static propTypes = {
+    onSuccess: PropTypes.func.isRequired
+  };
+
+  render() {
+    return (
+      <div className={styles.dialogContainer}>
+        <DialogHeader title="Publish to Hubs" />
+        <div className={styles.loginContainer}>
+          <AuthContainer onSuccess={this.props.onSuccess} />
+        </div>
+      </div>
+    );
+  }
+}