From ef84981e38d35ed0976387654a31e288b5f3d3dc Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 13 Sep 2016 15:14:17 -0400
Subject: [PATCH] Invite Users step

---
 .../wizard/components/invite-list-user.js.es6 |  16 +++
 .../wizard/components/invite-list.js.es6      |  62 ++++++++
 .../templates/components/invite-list-user.hbs |   6 +
 .../templates/components/invite-list.hbs      |  20 +++
 .../components/wizard-field-dropdown.hbs      |   7 +-
 .../components/wizard-field-text.hbs          |   2 +-
 .../templates/components/wizard-field.hbs     |  19 ++-
 .../templates/components/wizard-step.hbs      |   2 +-
 .../wizard/test/acceptance/wizard-test.js.es6 |  13 +-
 .../test/components/invite-list-test.js.es6   |  60 ++++++++
 .../wizard/test/helpers/component-test.js.es6 |  16 +++
 .../wizard/test/helpers/start-app.js.es6      |  19 +++
 .../javascripts/wizard/test/test_helper.js    |  11 +-
 app/assets/stylesheets/wizard.scss            | 134 +++++++++++++-----
 config/locales/client.en.yml                  |   8 ++
 config/locales/server.en.yml                  |   4 +
 lib/wizard/builder.rb                         |  12 ++
 spec/components/step_updater_spec.rb          |  18 ++-
 .../extra_locales_controller_spec.rb          |   6 -
 19 files changed, 373 insertions(+), 62 deletions(-)
 create mode 100644 app/assets/javascripts/wizard/components/invite-list-user.js.es6
 create mode 100644 app/assets/javascripts/wizard/components/invite-list.js.es6
 create mode 100644 app/assets/javascripts/wizard/templates/components/invite-list-user.hbs
 create mode 100644 app/assets/javascripts/wizard/templates/components/invite-list.hbs
 create mode 100644 app/assets/javascripts/wizard/test/components/invite-list-test.js.es6
 create mode 100644 app/assets/javascripts/wizard/test/helpers/component-test.js.es6
 create mode 100644 app/assets/javascripts/wizard/test/helpers/start-app.js.es6

diff --git a/app/assets/javascripts/wizard/components/invite-list-user.js.es6 b/app/assets/javascripts/wizard/components/invite-list-user.js.es6
new file mode 100644
index 000000000..c54290fb8
--- /dev/null
+++ b/app/assets/javascripts/wizard/components/invite-list-user.js.es6
@@ -0,0 +1,16 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  classNames: ['invite-list-user'],
+
+  @computed('user.role')
+  roleName(role) {
+    return this.get('roles').findProperty('id', role).label;
+  },
+
+  actions: {
+    removeUser(user) {
+      this.sendAction('removeUser', user);
+    }
+  }
+});
diff --git a/app/assets/javascripts/wizard/components/invite-list.js.es6 b/app/assets/javascripts/wizard/components/invite-list.js.es6
new file mode 100644
index 000000000..2083c41db
--- /dev/null
+++ b/app/assets/javascripts/wizard/components/invite-list.js.es6
@@ -0,0 +1,62 @@
+export default Ember.Component.extend({
+  classNames: ['invite-list'],
+  users: null,
+  inviteEmail: '',
+  inviteRole: '',
+  invalid: false,
+
+  init() {
+    this._super();
+    this.set('users', []);
+
+    this.set('roles', [
+      {id: 'moderator', label: I18n.t('wizard.invites.roles.moderator') },
+      {id: 'regular', label: I18n.t('wizard.invites.roles.regular') },
+    ]);
+
+    this.updateField();
+  },
+
+  keyPress(e) {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.send('addUser');
+    }
+  },
+
+  updateField() {
+    this.set('field.value', JSON.stringify(this.get('users')));
+  },
+
+  actions: {
+    addUser() {
+      const user = {
+        email: this.get('inviteEmail') || '',
+        role: this.get('inviteRole')
+      };
+
+      if (!/(.+)@(.+){2,}\.(.+){2,}/.test(user.email)) {
+        return this.set('invalid', true);
+      }
+
+      const users = this.get('users');
+      if (users.findProperty('email', user.email)) {
+        return this.set('invalid', true);
+      }
+
+      this.set('invalid', false);
+
+      users.pushObject(user);
+      this.updateField();
+
+      this.set('inviteEmail', '');
+      Ember.run.scheduleOnce('afterRender', () => this.$('.invite-email').focus());
+    },
+
+    removeUser(user) {
+      this.get('users').removeObject(user);
+      this.updateField();
+    }
+  }
+});
diff --git a/app/assets/javascripts/wizard/templates/components/invite-list-user.hbs b/app/assets/javascripts/wizard/templates/components/invite-list-user.hbs
new file mode 100644
index 000000000..b957827ad
--- /dev/null
+++ b/app/assets/javascripts/wizard/templates/components/invite-list-user.hbs
@@ -0,0 +1,6 @@
+<span class='email'>{{user.email}}</span>
+<span class='role'>{{roleName}}</span>
+
+<button class="wizard-btn small danger remove-user" {{action "removeUser" user}}>
+  {{fa-icon "times"}}
+</button>
diff --git a/app/assets/javascripts/wizard/templates/components/invite-list.hbs b/app/assets/javascripts/wizard/templates/components/invite-list.hbs
new file mode 100644
index 000000000..fb0299b70
--- /dev/null
+++ b/app/assets/javascripts/wizard/templates/components/invite-list.hbs
@@ -0,0 +1,20 @@
+
+{{#if users}}
+<div class="users-list">
+  {{#each users as |user|}}
+    {{invite-list-user user=user roles=roles removeUser="removeUser"}}
+  {{/each}}
+</div>
+{{/if}}
+
+<div class="new-user">
+  <div class="text-field {{if invalid 'invalid'}}">
+    {{input class="invite-email" value=inviteEmail placeholder="user@example.com"}}
+  </div>
+
+  {{combo-box value=inviteRole content=roles nameProperty="label" width="200px"}}
+
+  <button class="wizard-btn small add-user" {{action "addUser"}}>
+    {{fa-icon "plus"}}{{i18n "wizard.invites.add_user"}}
+  </button>
+</div>
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
index e993ecb95..6be3fc1a8 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
@@ -1 +1,6 @@
-{{combo-box class=fieldClass value=field.value content=field.choices nameProperty="label" width="400px"}}
+{{combo-box elementId=field.id
+            class=fieldClass
+            value=field.value
+            content=field.choices
+            nameProperty="label"
+            width="400px"}}
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs
index 2a0770e89..0a5d877a8 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs
@@ -1 +1 @@
-{{input value=field.value class=fieldClass placeholder=field.placeholder}}
+{{input elementId=field.id value=field.value class=fieldClass placeholder=field.placeholder}}
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field.hbs
index 21f76b269..980ed2967 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-field.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-field.hbs
@@ -1,16 +1,15 @@
-<label>
+<label for={{field.id}}>
   <span class='label-value'>{{field.label}}</span>
 
   {{#if field.description}}
     <div class='field-description'>{{{field.description}}}</div>
   {{/if}}
-
-  <div class='input-area'>
-    {{component inputComponentName field=field step=step fieldClass=fieldClass}}
-  </div>
-
-  {{#if field.errorDescription}}
-    <div class='field-error-description'>{{field.errorDescription}}</div>
-  {{/if}}
-
 </label>
+
+<div class='input-area'>
+  {{component inputComponentName field=field step=step fieldClass=fieldClass}}
+</div>
+
+{{#if field.errorDescription}}
+  <div class='field-error-description'>{{field.errorDescription}}</div>
+{{/if}}
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
index 52d174d06..7fe656e48 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs
@@ -29,7 +29,7 @@
     {{/if}}
 
     {{#if showNextButton}}
-      <button class='wizard-btn next' {{action "nextStep"}} disabled={{saving}}>
+      <button class='wizard-btn next primary' {{action "nextStep"}} disabled={{saving}}>
         {{i18n "wizard.next"}}
         {{fa-icon "chevron-right"}}
       </button>
diff --git a/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6 b/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
index 2e5c9d4f8..17e39ce34 100644
--- a/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
+++ b/app/assets/javascripts/wizard/test/acceptance/wizard-test.js.es6
@@ -1,4 +1,15 @@
-module("Acceptance: wizard");
+import startApp from 'wizard/test/helpers/start-app';
+
+var wizard;
+module("Acceptance: wizard", {
+  beforeEach() {
+    wizard = startApp();
+  },
+
+  teardown() {
+    Ember.run(wizard, 'destroy');
+  }
+});
 
 test("Wizard starts", assert => {
   visit("/");
diff --git a/app/assets/javascripts/wizard/test/components/invite-list-test.js.es6 b/app/assets/javascripts/wizard/test/components/invite-list-test.js.es6
new file mode 100644
index 000000000..3e8e0e4ea
--- /dev/null
+++ b/app/assets/javascripts/wizard/test/components/invite-list-test.js.es6
@@ -0,0 +1,60 @@
+import { componentTest } from 'wizard/test/helpers/component-test';
+
+moduleForComponent('invite-list', { integration: true });
+
+componentTest('can add users', {
+  template: `{{invite-list field=field}}`,
+
+  setup() {
+    this.set('field', {});
+  },
+
+  test(assert) {
+    assert.ok(this.$('.users-list .invite-list-user').length === 0, 'no users at first');
+    assert.ok(this.$('.new-user .invalid').length === 0, 'not invalid at first');
+
+    const firstVal = JSON.parse(this.get('field.value'));
+    assert.equal(firstVal.length, 0, 'empty JSON at first');
+
+    click('.add-user');
+    andThen(() => {
+      assert.ok(this.$('.users-list .invite-list-user').length === 0, "doesn't add a blank user");
+      assert.ok(this.$('.new-user .invalid').length === 1);
+    });
+
+    fillIn('.invite-email', 'eviltrout@example.com');
+    click('.add-user');
+
+    andThen(() => {
+      assert.ok(this.$('.users-list .invite-list-user').length === 1, 'adds the user');
+      assert.ok(this.$('.new-user .invalid').length === 0);
+
+      const val = JSON.parse(this.get('field.value'));
+      assert.equal(val.length, 1);
+      assert.equal(val[0].email, 'eviltrout@example.com', 'adds the email to the JSON');
+      assert.ok(val[0].role.length, 'adds the role to the JSON');
+    });
+
+    fillIn('.invite-email', 'eviltrout@example.com');
+    click('.add-user');
+
+    andThen(() => {
+      assert.ok(this.$('.users-list .invite-list-user').length === 1, "can't add the same user twice");
+      assert.ok(this.$('.new-user .invalid').length === 1);
+    });
+
+    fillIn('.invite-email', 'not-an-email');
+    click('.add-user');
+
+    andThen(() => {
+      assert.ok(this.$('.users-list .invite-list-user').length === 1, "won't add an invalid email");
+      assert.ok(this.$('.new-user .invalid').length === 1);
+    });
+
+    click('.invite-list .invite-list-user:eq(0) .remove-user');
+    andThen(() => {
+      assert.ok(this.$('.users-list .invite-list-user').length === 0, 'removed the user');
+    });
+  }
+
+});
diff --git a/app/assets/javascripts/wizard/test/helpers/component-test.js.es6 b/app/assets/javascripts/wizard/test/helpers/component-test.js.es6
new file mode 100644
index 000000000..806c9af8a
--- /dev/null
+++ b/app/assets/javascripts/wizard/test/helpers/component-test.js.es6
@@ -0,0 +1,16 @@
+import initializer from 'wizard/initializers/load-helpers';
+
+export function componentTest(name, opts) {
+  opts = opts || {};
+
+  test(name, function(assert) {
+    initializer.initialize();
+
+    if (opts.setup) {
+      opts.setup.call(this);
+    }
+
+    andThen(() => this.render(opts.template));
+    andThen(() => opts.test.call(this, assert));
+  });
+}
diff --git a/app/assets/javascripts/wizard/test/helpers/start-app.js.es6 b/app/assets/javascripts/wizard/test/helpers/start-app.js.es6
new file mode 100644
index 000000000..7d701562b
--- /dev/null
+++ b/app/assets/javascripts/wizard/test/helpers/start-app.js.es6
@@ -0,0 +1,19 @@
+import Wizard from 'wizard/wizard';
+import initializer from 'wizard/initializers/load-helpers';
+
+let app;
+let started = false;
+
+export default function() {
+  Ember.run(() => app = Wizard.create({ rootElement: '#ember-testing' }));
+
+  if (!started) {
+    initializer.initialize();
+    app.start();
+    started = true;
+  }
+  app.setupForTesting();
+  app.injectTestHelpers();
+  return app;
+}
+
diff --git a/app/assets/javascripts/wizard/test/test_helper.js b/app/assets/javascripts/wizard/test/test_helper.js
index caf53122b..699abf017 100644
--- a/app/assets/javascripts/wizard/test/test_helper.js
+++ b/app/assets/javascripts/wizard/test/test_helper.js
@@ -12,8 +12,10 @@
 //= require wizard-application
 //= require wizard-vendor
 //= require helpers/assertions
+//= require_tree ./helpers
 //= require_tree ./acceptance
 //= require_tree ./models
+//= require_tree ./components
 //= require locales/en
 //= require fake_xml_http_request
 //= require route-recognizer
@@ -42,13 +44,10 @@ QUnit.testDone(function() {
   server.shutdown();
 });
 
-var wizard = require('wizard/wizard').default.create({
-  rootElement: '#ember-testing'
-});
+require('wizard/test/helpers/start-app').default();
 
-wizard.setupForTesting();
-wizard.injectTestHelpers();
-wizard.start();
+var buildResolver = require('discourse-common/resolver').buildResolver;
+window.setResolver(buildResolver('wizard').create());
 
 Object.keys(requirejs.entries).forEach(function(entry) {
   if ((/\-test/).test(entry)) {
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index e7cfaf2d2..0c6210699 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -84,6 +84,11 @@ body.wizard {
     color: #333;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
 
+    &.small {
+      padding: 0.25em 0.5em;
+      font-size: 0.9em;
+    }
+
     &:hover {
       background-color: #eee;
     }
@@ -110,6 +115,42 @@ body.wizard {
     }
   }
 
+  .wizard-btn.primary {
+    background-color: #6699ff;
+    color: white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+
+    &:hover {
+      background-color: #80B3FF;
+    }
+
+    &:active {
+      background-color: #4D80E6;
+    }
+
+    &:disabled {
+      background-color: #000167;
+    }
+  }
+
+  .wizard-btn.danger {
+    background-color: #E60000;
+    color: white;
+
+    &:hover {
+      background-color: #CC0000;
+    }
+
+    &:active {
+      background-color: #B30000;
+    }
+
+    &:disabled {
+      background-color: #990000;
+    }
+  }
+
+
   .wizard-btn-upload {
     clear: both;
     display: inline-block;
@@ -125,22 +166,6 @@ body.wizard {
     align-items: center;
 
     .wizard-btn.next {
-      background-color: #6699ff;
-      color: white;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
-
-      &:hover {
-        background-color: #80B3FF;
-      }
-
-      &:active {
-        background-color: #4D80E6;
-      }
-
-      &:disabled {
-        background-color: #000167;
-      }
-
       min-width: 70px;
 
       i.fa-chevron-right {
@@ -240,29 +265,29 @@ body.wizard {
       }
     }
 
-    &.text-field {
-      input {
-        width: 100%;
-        font-size: 1.2em;
-        padding: 6px;
-        border: 1px solid #ccc;
-        transition: border-color .5s;
-        outline: none;
-      }
-
-      &.invalid {
-        input {
-          padding: 3px;
-          border: 4px solid red;
-          border-radius: 3px;
-        }
-      }
-    }
-
     margin-bottom: 2em;
   }
 }
 
+.text-field {
+  input {
+    width: 100%;
+    font-size: 1.2em;
+    padding: 6px;
+    border: 1px solid #ccc;
+    transition: border-color .5s;
+    outline: none;
+  }
+
+  &.invalid {
+    input {
+      padding: 3px;
+      border: 4px solid red;
+      border-radius: 3px;
+    }
+  }
+}
+
 .radio-field-choice {
   margin-bottom: 1.5em;
 
@@ -280,3 +305,42 @@ body.wizard {
     color: #777;
   }
 }
+
+.invite-list {
+  .users-list {
+    margin-bottom: 1em;
+
+    .invite-list-user {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 1em;
+
+      .email {
+        width: 330px;
+      }
+
+      .role {
+        width: 200px;
+      }
+    }
+  }
+
+  .new-user {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1em;
+
+    .invite-email {
+      width: 350px;
+    }
+  }
+
+  button.add-user {
+    .fa {
+      margin-right: 0.5em;
+    }
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 41eb7ddb5..719043c29 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3234,3 +3234,11 @@ en:
       upload: "Upload"
       uploading: "Uploading..."
 
+      invites:
+        add_user: "add"
+        roles:
+          admin: "Admin"
+          moderator: "Moderator"
+          regular: "Regular User"
+
+
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index 1ba5f441c..66723a3a3 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -3311,6 +3311,10 @@ en:
             label: "Large Icon"
             description: "Icon used for Apple touch devices. Recommended size is 144px by 144px."
 
+      invites:
+        title: "Invite Staff"
+        description: "We recommend you invite some staff members to help you get things started."
+
       finished:
         title: "Your Discourse Forum is Ready!"
         description: |
diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb
index addcccf55..4353e65c2 100644
--- a/lib/wizard/builder.rb
+++ b/lib/wizard/builder.rb
@@ -129,6 +129,18 @@ class Wizard
         end
       end
 
+      @wizard.append_step('invites') do |step|
+        step.add_field(id: 'invite_list', type: 'component')
+
+        step.on_update do |updater|
+          users = JSON.parse(updater.fields[:invite_list])
+
+          users.each do |u|
+            Invite.create_invite_by_email(u['email'], @wizard.user)
+          end
+        end
+      end
+
       DiscourseEvent.trigger(:build_wizard, @wizard)
 
       @wizard.append_step('finished')
diff --git a/spec/components/step_updater_spec.rb b/spec/components/step_updater_spec.rb
index 4591bffab..28feab921 100644
--- a/spec/components/step_updater_spec.rb
+++ b/spec/components/step_updater_spec.rb
@@ -141,7 +141,6 @@ describe Wizard::StepUpdater do
   end
 
   context "logos step" do
-
     it "updates the fields correctly" do
       updater = wizard.create_updater('logos',
                                       logo_url: '/uploads/logo.png',
@@ -158,5 +157,22 @@ describe Wizard::StepUpdater do
     end
   end
 
+  context "invites step" do
+
+    let(:invites) {
+      return [{ email: 'regular@example.com', role: 'regular'},
+              { email: 'moderator@example.com', role: 'moderator'}]
+    }
+
+    it "updates the fields correctly" do
+      updater = wizard.create_updater('invites', invite_list: invites.to_json)
+      updater.update
+
+      expect(updater).to be_success
+
+      expect(Invite.where(email: 'regular@example.com')).to be_present
+      expect(Invite.where(email: 'moderator@example.com')).to be_present
+    end
+  end
 
 end
diff --git a/spec/controllers/extra_locales_controller_spec.rb b/spec/controllers/extra_locales_controller_spec.rb
index c2119e83a..c7453aca5 100644
--- a/spec/controllers/extra_locales_controller_spec.rb
+++ b/spec/controllers/extra_locales_controller_spec.rb
@@ -18,12 +18,6 @@ describe ExtraLocalesController do
       get :show, bundle: '-invalid..character!!'
       expect(response).to_not be_success
     end
-
-    it "works with a valid bundle" do
-      get :show, bundle: 'admin'
-      expect(response).to be_success
-      expect(response.body).to be_present
-    end
   end
 
 end