#130 Enable enter on password

swarmcity · Feb 20, 2017 · e642a06 · e642a06
1 parent f2c9f7f
commit e642a06
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/bower.json b/bower.json
@@ -29,7 +29,8 @@
     "ethereum-tx": "*",
     "paper-progress": "^1.0.11",
     "paper-checkbox": "^1.4.2",
-    "platinum-https-redirect": "PolymerElements/platinum-https-redirect#^1.0.2"
+    "platinum-https-redirect": "PolymerElements/platinum-https-redirect#^1.0.2",
+    "iron-a11y-keys": "^1.0.6"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

diff --git a/src/ac-password.html b/src/ac-password.html
@@ -4,6 +4,8 @@
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../bower_components/sc-style/sc-style.html">
 <link rel="import" href="../bower_components/sc-iconset/sc-iconset.html">
+<link rel="import" href="../bower_components/iron-a11y-keys/iron-a11y-keys.html">
+
 
 <dom-module id="ac-password">
 <link rel="import" href="../bower_components/sc-style/sc-style.css"  type="css">
@@ -38,7 +40,7 @@
       max-width: 500px;
       box-sizing: border-box;
       border: 2px dotted rgba(36,177,255,0.5);
-      padding: 20px 20px 20px 20px; 
+      padding: 20px 20px 20px 20px;
       margin: 30px 0px 0px 0px;
       min-width: 300px
     }
@@ -57,13 +59,13 @@
     iron-collapse {
       max-height: 500px;
     }
-@media all and (min-width: 0) and (max-width: 420px) { 
+@media all and (min-width: 0) and (max-width: 420px) {
 
     .disclaimer {
       max-width: 300px;
       box-sizing: border-box;
       border: 2px dotted rgba(36,177,255,0.5);
-      padding: 20px 20px 20px 20px; 
+      padding: 20px 20px 20px 20px;
       margin: 30px 0px 0px 0px;
       min-width: 250px
     }
@@ -73,6 +75,13 @@
 
     </style>
 
+    <iron-a11y-keys
+      id="a11y"
+      target="[[target]]"
+      keys="enter"
+      on-keys-pressed="onEnter">
+    </iron-a11y-keys>
+
 
     <div class$="totalwidth vertic {{aligner}}">
       <paper-input class$="{{alignertxtbox}}" id="pas1" label="{{passwordlabel}}" type="password" value="{{password}}" autofocus></paper-input>
@@ -87,7 +96,7 @@
       </template>
       <template is="dom-if" if="{{notequal}}">
         <div class="error">
-          <p class="red bold centertxt">The password was not repeated correctly.</p>
+          <p class="red bold centertxt">The passwords don't match.</p>
         </div>
       </template>
       <div class="flex"></div>
@@ -134,7 +143,6 @@
           type: String,
           notify: true,
           observer: '_passwordlength'
-
         },
 
         passwordlabel: {
@@ -156,6 +164,13 @@
 
         double: {
           type: Boolean
+        },
+
+        target: {
+          type: Object,
+          value: function() {
+            return this.$.pas1;
+          }
         }
 
       },
@@ -191,6 +206,10 @@
 
       },
 
+      onEnter: function() {
+        this.setPass();
+      },
+
       // _sessionName: function(name){
       //   //return 'sc-password-' + name;
       //   return name;
@@ -221,7 +240,7 @@
 
       _passwordrepeatlength: function(){
         if (this.double){
-          if (this.password && this.password.length > 4 && this.passwordrepeat.length > 4){ 
+          if (this.password && this.password.length > 4 && this.passwordrepeat.length > 4){
               this.btnable = false;
               this.btncolor = "blue";
               this.btncolor2 = "whiteback";