enable unlock functionality

ui/src/ui-root.html

@@ -11,7 +11,7 @@
 <link rel="import" href="./initialize-error.html">
 <link rel="import" href="./initialize-pending.html">
 <link rel="import" href="./create/create-container.html">
-<link rel="import" href="./unlock/unlock-view.html">
+<link rel="import" href="./unlock/unlock-container.html">
 <link rel="import" href="./main/main-view.html">
 
 <dom-module id="ui-root">
@@ -35,7 +35,7 @@
           <create-container id="create"></create-container>
         </template>
         <template is="dom-if" if="[[_unlock(hasSettings, isUnlocked)]]">
-          <unlock-view id="unlock"></unlock-view>
+          <unlock-container id="unlock"></unlock-container>
         </template>
         <template is="dom-if" if="[[isUnlocked]]">
           <main-view id="main" settings="[[settings]]"></main-view>

ui/src/unlock/unlock-container.html

@@ -0,0 +1,74 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../lib/redux-mixin.html">
+<link rel="import" href="./unlock-view.html">
+
+<dom-module id="unlock-container">
+  <template>
+    <unlock-view
+      id="view"
+      pending="[[pending]]"
+      has-error="[[hasError]]"
+      error-text="[[errorText]]"
+      on-unlock="_unlock"
+    ></unlock-view>
+  </template>
+
+  <script>
+    class UnlockContainer extends Polymer.ReduxMixin(Polymer.Element) {
+      static get is() {
+        return 'unlock-container';
+      }
+
+      static get properties() {
+        return {
+          is: {
+            type: String,
+            value: UnlockContainer.is,
+          },
+          hasError: {
+            type: Boolean,
+            statePath: app.unlock.hasError,
+          },
+          errorText: {
+            type: String,
+            statePath: app.unlock.getErrorText,
+          },
+          complete: {
+            type: Boolean,
+            statePath: app.unlock.isComplete,
+          },
+          settings: {
+            type: Object,
+            statePath: app.unlock.getSettings,
+          },
+        };
+      }
+
+      static get actions() {
+        return {
+          submit: app.unlock.submit,
+          complete: app.completeUnlock,
+        };
+      }
+
+      ready() {
+        super.ready();
+        this.addEventListener('state-changed', () => this._stateChanged());
+      }
+
+      _stateChanged() {
+        if (this.complete) {
+          this.$.view.reset();
+          this.dispatch('complete', {
+            settings: this.settings,
+          });
+        }
+      }
+
+      _unlock(event) {
+        this.dispatch('submit', event.detail.passphrase);
+      }
+    }
+    window.customElements.define(UnlockContainer.is, UnlockContainer);
+  </script>
+</dom-module>

ui/src/unlock/unlock-view.html

@@ -10,6 +10,7 @@
     <paper-card>
       <div class="card-content">
         <div>[[localize('unlock-view-message')]]</div>
+        <div id="error" hidden="[[!hasError]]">[[errorText]]</div>
         <paper-input
           id="passphrase"
           type="password"
@@ -50,6 +51,14 @@
             type: String,
             value: '',
           },
+          hasError: {
+            type: Boolean,
+            value: false,
+          },
+          errorText: {
+            type: String,
+            value: '',
+          },
         };
       }
 
@@ -68,6 +77,10 @@
       attached() {
         this.loadResources(this.resolveUrl('../../../locales.json'));
       }
+
+      reset() {
+        this.passphrase = '';
+      }
     }
     window.customElements.define(UnlockView.is, UnlockView);
   </script>

ui/test/helpers/stubs.html

@@ -10,6 +10,7 @@
 app.helpers.stub([], 'getSettings', undefined);
 app.helpers.stub([], 'initialize');
 app.helpers.stub([], 'completeCreate');
+app.helpers.stub([], 'completeUnlock');
 
 app.helpers.stub(['unlock'], 'hasError', false);
 app.helpers.stub(['unlock'], 'getErrorText', '');

ui/test/src/create/create-container.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 
-    <title>create-view</title>
+    <title>create-container</title>
 
     <script src="../../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../../../bower_components/web-component-tester/browser.js"></script>

ui/test/src/ui-root.html

@@ -119,7 +119,7 @@
             const [unlock] = domIfGroup.check([
               'unlock',
             ]);
-            unlock.is.should.eql('unlock-view');
+            unlock.is.should.eql('unlock-container');
           });
         });
 

ui/test/src/unlock/unlock-container.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>unlock-container</title>
+
+    <script src="../../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../../bower_components/web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../../helpers/common.html">
+    <link rel="import" href="../../../src/unlock/unlock-container.html">
+  </head>
+  <body>
+    <test-fixture id="defaultAttributes">
+      <template>
+        <unlock-container></unlock-container>
+      </template>
+    </test-fixture>
+
+    <script>
+      let unlockContainer;
+      describe('unlock-container', function() {
+        beforeEach(function() {
+          app.helpers.reset();
+          unlockContainer = fixture('defaultAttributes');
+        });
+
+        it('should have the correct type', function() {
+          unlockContainer.is.should.eql('unlock-container');
+        });
+
+        it('should contain a view element', function() {
+          unlockContainer.$.view.is.should.eql('unlock-view');
+        });
+
+        it('should set the default view attributes', function() {
+          unlockContainer.$.view.hasError.should.be.false;
+          unlockContainer.$.view.errorText.should.eql('');
+        });
+
+        it('should set the view error attributes', function() {
+          app.unlock.hasError.value = true;
+          app.unlock.getErrorText.value = 'FAIL';
+          app.helpers.notifyStateChange();
+          unlockContainer.$.view.hasError.should.be.true;
+          unlockContainer.$.view.errorText.should.eql('FAIL');
+        });
+
+        describe('on an unlock event', function() {
+          beforeEach(function() {
+            unlockContainer.$.view.dispatchEvent(new CustomEvent('unlock', {
+              detail: {
+                passphrase: 'passphrase',
+              },
+            }));
+          });
+
+          it('should unlock the settings', function() {
+            app.unlock.submit.should.have.been.calledWith(
+              'passphrase'
+            );
+            app.store.dispatch.should.have.been.calledWith(
+              app.unlock.submit.value
+            );
+          });
+        });
+
+        describe('on complete', function() {
+          beforeEach(function() {
+            sinon.spy(unlockContainer.$.view, 'reset');
+            app.unlock.getSettings.value = {};
+            app.unlock.isComplete.value = true;
+            app.helpers.notifyStateChange();
+          });
+
+          it('should reset the view', function() {
+            unlockContainer.$.view.reset.should.have.been.calledOnce;
+          });
+
+          it('should complete the unlock', function() {
+            app.completeUnlock.should.have.been.calledWith({
+              settings: {},
+            });
+            app.store.dispatch.should.have.been.calledWith(
+              app.completeUnlock.value
+            );
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

ui/test/src/unlock/unlock-view.html

@@ -41,6 +41,10 @@
           unlockView.is.should.eql('unlock-view');
         });
 
+        it('should not display any error text', function() {
+          unlockView.$.error.hidden.should.be.true;
+        });
+
         describe('when the passphrase is empty', function() {
           beforeEach(function() {
             unlockView.$.passphrase.value = '';
@@ -63,6 +67,28 @@
             });
             unlockView.$.unlock.click();
           });
+
+          describe('#reset', function() {
+            beforeEach(function() {
+              unlockView.reset();
+            });
+
+            it('should reset the input fields', function() {
+              unlockView.$.passphrase.value.should.eql('');
+            });
+          });
+
+          describe('when there is an error', function() {
+            beforeEach(function() {
+              unlockView.hasError = true;
+              unlockView.errorText = 'FAIL';
+            });
+
+            it('should display the error text', function() {
+              unlockView.$.error.hidden.should.be.false;
+              unlockView.$.error.textContent.should.eql('FAIL');
+            });
+          });
         });
       });
     </script>