Add external authenticator (social login) API

Allows registrations to be completed with a pre-confirmed email address
and no password.

js/forum/src/components/SignUpModal.js

@@ -2,6 +2,7 @@ import Modal from 'flarum/components/Modal';
 import LogInModal from 'flarum/components/LogInModal';
 import avatar from 'flarum/helpers/avatar';
 import Button from 'flarum/components/Button';
+import LogInButtons from 'flarum/components/LogInButtons';
 
 /**
  * The `SignUpModal` component displays a modal dialog with a singup form.
@@ -11,6 +12,7 @@ import Button from 'flarum/components/Button';
  * - `username`
  * - `email`
  * - `password`
+ * - `token` An email token to sign up with.
  */
 export default class SignUpModal extends Modal {
   constructor(...args) {
@@ -65,7 +67,9 @@ export default class SignUpModal extends Modal {
   }
 
   body() {
-    const body = [(
+    const body = [
+      this.props.token ? '' : <LogInButtons/>,
+
       <div className="Form Form--centered">
         <div className="Form-group">
           <input className="FormControl" name="username" placeholder={app.trans('core.username')}
@@ -78,26 +82,28 @@ export default class SignUpModal extends Modal {
           <input className="FormControl" name="email" type="email" placeholder={app.trans('core.email')}
             value={this.email()}
             onchange={m.withAttr('value', this.email)}
-            disabled={this.loading} />
+            disabled={this.loading || this.props.token} />
         </div>
 
-        <div className="Form-group">
-          <input className="FormControl" name="password" type="password" placeholder={app.trans('core.password')}
-            value={this.password()}
-            onchange={m.withAttr('value', this.password)}
-            disabled={this.loading} />
-        </div>
+        {this.props.token ? '' : (
+          <div className="Form-group">
+            <input className="FormControl" name="password" type="password" placeholder={app.trans('core.password')}
+              value={this.password()}
+              onchange={m.withAttr('value', this.password)}
+              disabled={this.loading} />
+          </div>
+        )}
 
         <div className="Form-group">
-          {Button.component({
-            className: 'Button Button--primary Button--block',
-            type: 'submit',
-            loading: this.loading,
-            children: app.trans('core.sign_up')
-          })}
+          <Button
+            className="Button Button--primary Button--block"
+            type="submit"
+            loading={this.loading}>
+            {app.trans('core.sign_up')}
+          </Button>
         </div>
       </div>
-    )];
+    ];
 
     if (this.welcomeUser) {
       const user = this.welcomeUser;
@@ -115,20 +121,12 @@ export default class SignUpModal extends Modal {
               {avatar(user)}
               <h3>{app.trans('core.welcome_user', {user})}</h3>
 
-              {!user.isActivated() ? [
-                <p>{app.trans('core.confirmation_email_sent', {email: <strong>{user.email()}</strong>})}</p>,
-                <p>
-                  <a href={`http://${emailProviderName}`} className="Button Button--primary" target="_blank">
-                    {app.trans('core.go_to', {location: emailProviderName})}
-                  </a>
-                </p>
-              ] : (
-                <p>
-                  <button className="Button Button--primary" onclick={this.hide.bind(this)}>
-                    {app.trans('core.dismiss')}
-                  </button>
-                </p>
-              )}
+              <p>{app.trans('core.confirmation_email_sent', {email: <strong>{user.email()}</strong>})}</p>,
+              <p>
+                <a href={`http://${emailProviderName}`} className="Button Button--primary" target="_blank">
+                  {app.trans('core.go_to', {location: emailProviderName})}
+                </a>
+              </p>
             </div>
           </div>
         </div>
@@ -150,6 +148,8 @@ export default class SignUpModal extends Modal {
   /**
    * Open the log in modal, prefilling it with an email/username/password if
    * the user has entered one.
+   *
+   * @public
    */
   logIn() {
     const props = {
@@ -161,7 +161,7 @@ export default class SignUpModal extends Modal {
   }
 
   onready() {
-    if (this.props.username) {
+    if (this.props.username && !this.props.token) {
       this.$('[name=email]').select();
     } else {
       super.onready();
@@ -175,24 +175,50 @@ export default class SignUpModal extends Modal {
 
     const data = this.submitData();
 
-    app.store.createRecord('users').save(data).then(
-      user => {
-        this.welcomeUser = user;
-        this.loading = false;
-        m.redraw();
+    app.request({
+      url: app.forum.attribute('baseUrl') + '/register',
+      method: 'POST',
+      data
+    }).then(
+      payload => {
+        const user = app.store.pushPayload(payload);
+
+        // If the user's new account has been activated, then we can assume
+        // that they have been logged in too. Thus, we will reload the page.
+        // Otherwise, we will show a message asking them to check their email.
+        if (user.isActivated()) {
+          window.location.reload();
+        } else {
+          this.welcomeUser = user;
+          this.loading = false;
+          m.redraw();
+        }
       },
       response => {
         this.loading = false;
-        this.handleErrors(response.errors);
+        this.handleErrors(response);
       }
     );
   }
 
+  /**
+   * Get the data that should be submitted in the sign-up request.
+   *
+   * @return {Object}
+   * @public
+   */
   submitData() {
-    return {
+    const data = {
       username: this.username(),
-      email: this.email(),
-      password: this.password()
+      email: this.email()
     };
+
+    if (this.props.token) {
+      data.token = this.props.token;
+    } else {
+      data.password = this.password();
+    }
+
+    return data;
   }
 }