feat: Allow showing the password being typed in the new user form

Closes #10

app/components/new-user/template.hbs

@@ -3,9 +3,9 @@
     New user's name:
     {{input value=username data-test-selector="new-user-name"}}
   </label>
-  <label>
+  <label data-test-selector="new-user-password">
     New user's password:
-    {{input type='password' value=password data-test-selector="new-user-password"}}
+    {{show-password-toggle value=password}}
   </label>
   <button {{action createUser (hash username=username password=password)}} data-test-selector='new-user-submit'>Add user</button>
 </form>

app/components/show-password-toggle/component.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  inputType: 'password'
+});

app/components/show-password-toggle/template.hbs

@@ -0,0 +1,11 @@
+{{input type=inputType value=value}}
+{{#if (eq inputType 'password')}}
+  <button {{action (action (mut inputType) 'text')}} data-test-selector="password-visibility-toggle">
+    Show password
+  </button>
+{{else}}
+  <button {{action (action (mut inputType) 'password')}} data-test-selector="password-visibility-toggle">
+    Hide password
+  </button>
+{{/if}}
+

package.json

@@ -63,5 +63,8 @@
     "loader.js": "^4.0.1",
     "morgan": "^1.7.0",
     "semantic-release": "^6.2.2"
+  },
+  "dependencies": {
+    "ember-truth-helpers": "^1.2.0"
   }
 }

tests/integration/components/new-user-test.js

@@ -22,7 +22,7 @@ test('it renders', function(assert) {
 
   this.$('[data-test-selector="new-user-name"]').val(username);
   this.$('[data-test-selector="new-user-name"]').trigger('change');
-  this.$('[data-test-selector="new-user-password"]').val(password);
-  this.$('[data-test-selector="new-user-password"]').trigger('change');
+  this.$('[data-test-selector="new-user-password"] input').val(password);
+  this.$('[data-test-selector="new-user-password"] input').trigger('change');
   this.$('[data-test-selector="new-user-submit"]').click();
 });

tests/integration/components/show-password-toggle-test.js

@@ -0,0 +1,39 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('show-password-toggle', 'Integration | Component | show password toggle', {
+  integration: true
+});
+
+test('it toggles input type', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`{{show-password-toggle}}`);
+
+  assert.equal(this.$('input').attr('type'), 'password');
+
+  this.$('[data-test-selector="password-visibility-toggle"]').click();
+
+  assert.equal(this.$('input').attr('type'), 'text');
+});
+
+test('it binds to `value` just like `{{input`', function(assert) {
+  assert.expect(3);
+
+  this.set('value', 'hello');
+
+  this.render(hbs`{{show-password-toggle value=value}}`);
+
+  assert.equal(this.$('input').val(), 'hello');
+
+  this.$('input').val('hello world');
+  this.$('input').trigger('change');
+
+  assert.equal(this.get('value'), 'hello world');
+
+  this.$('[data-test-selector="password-visibility-toggle"]').click();
+  this.$('input').val('hello world!');
+  this.$('input').trigger('change');
+
+  assert.equal(this.get('value'), 'hello world!');
+});