Merge pull request #3 from MeTaNoV/feature/reveal

Feature/reveal
GeoloeG · Jan 22, 2016 · 1631a98 · 1631a98
2 parents 74f3679 + 0553b7d
commit 1631a98
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components/
+tmp-*
diff --git a/.travis.yml b/.travis.yml
@@ -5,10 +5,12 @@ before_script:
   - npm install bower
   - 'export PATH=$PWD/node_modules/.bin:$PATH'
   - bower install
+#  - npm install polylint
+#  - polylint
 env:
   global:
-    - secure: citR35FLXNRA4C4o5Gl7gb6yvFhOq3rTd9+IQ8i9Zcf2TV2Ip2wCNANNXOvJV8szsu2fhZLttSclpW+MVePsW3ORYWOVm9neZeTczzNZkUExRKOztAyaujzzIgRd+f5ClJOsjUfGVLWKKWgKMJ8UT4pNRgqwKe4V73oW7LhYpto=
-    - secure: bWeuwHFJSBQu3v2K5I2++tCWh3K05I8NEfi6mywbrxuiOCGNvCWFLTO42+aqUp/yAnolNIKYR5NJFtty5CX2YD4oaRbryk2gzv7UtpIXRx9Jqhe7b/UBzfHIxPoT12TFS/iub+oRnZPAVPPoDrXwwoHkWltZHZwpOVTp86T6DPI=
+    - secure: gZ5vpMlc9fuKSZeMmT6xf4+FIVWxET6f6Lkp6l5Qo9vL2X/KC/bMJF1v2w5xXFLFTdm/hPUDkeQRDUBBJhGcsXhJeWIvAXdPkObV9ZPRwpDnnN1qU5lOqVIy6gFjDm2Wm6UNXcRnyP1TrGpMwbG13EUtD0rF8LZqBm3B833sKS4=
+    - secure: DObDewETPYiIsASeC3UETPbQ6YBniRZdNV2eTM1xULvuFNDxXJD09KKyWOiMduublEIJRXLjBIXmD8cbVsgrbRUYA4bxcXffDeuc6q6HaQGU9HvIbLz6o3/oxi4fX2G9GwrZtijW2p2Rgw2l9koR3ovjcM97CSTWFUMh5rtXag8=
 node_js: 4
 addons:
   firefox: latest

diff --git a/README.md b/README.md
@@ -34,6 +34,10 @@ or
 
 See the [Documentation](https://metanov.github.io/gold-password-input/) for more options.
 
+## Discussing
+
+If you have any questions, you can find me on the [Polymer Slack Channel](https://polymer.slack.com/), or just raise an Issue.
+
 ## Contributing
 
 1. Fork it!

diff --git a/bower.json b/bower.json
@@ -1,14 +1,16 @@
 {
   "name": "gold-password-input",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "authors": [
-    "Pascal Gula aka MeTaNoV"
+    "Pascal Gula aka MeTaNoV <[email protected]>"
   ],
-  "description": "An input element with Material Design that allows password with an optional strength meter.",
+  "description": "[Polymer 1.x] Input element with Material Design that allows password with an optional strength meter.",
   "keywords": [
+    "web-component",
     "web-components",
     "web",
     "component",
+    "components",
     "custom",
     "element",
     "polymer",
@@ -25,27 +27,30 @@
     "type": "git",
     "url": "git://github.com/MeTaNoV/gold-password-input.git"
   },
-  "license": "http://polymer.github.io/LICENSE.txt",
+  "license": "MIT",
   "homepage": "https://metanov.github.io/gold-password-input/",
-  "ignore": [],
+  "ignore": [
+    "/.*",
+    "/test/",
+    "/demo/"
+  ],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.2.0",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
     "iron-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
     "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
     "paper-input": "PolymerElements/paper-input#^1.0.0",
     "paper-tooltip": "PolymerElements/paper-tooltip#^1.1.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "toggle-icon": "MeTaNoV/toggle-icon#master",
     "zxcvbn": "zxcvbn#^4.2.0"
   },
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "web-component-tester": "^3.4.0"
+    "web-component-tester": "^4.0.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -101,6 +101,26 @@ <h4>With Strength Meter</h4>
           </gold-password-input>
         </template>
       </demo-snippet>
+
+      <h4>With reveal functionality</h4>
+      <demo-snippet class="centered-demo">
+        <template>
+          <gold-password-input
+            label="With reveal"
+            reveal>
+          </gold-password-input>
+        </template>
+      </demo-snippet>
+      <demo-snippet class="centered-demo">
+        <template>
+          <gold-password-input
+            label="With reveal and strength-meter"
+            reveal strength-meter>
+          </gold-password-input>
+        </template>
+      </demo-snippet>
+
+
     </div>
   </body>
 </html>
diff --git a/gold-password-input-icons.html b/gold-password-input-icons.html
@@ -0,0 +1,13 @@
+
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg size="24" name="gold-password-input">
+  <svg>
+    <defs>
+      <g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></g>
+      <g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></g>
+      <g id="visibility-off"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
diff --git a/gold-password-input-strength-meter.html b/gold-password-input-strength-meter.html
@@ -1,11 +1,12 @@
 <link rel="import" href="../polymer/polymer.html">
 
-<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
 
 <link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="../paper-input/paper-input-addon-behavior.html">
 <link rel="import" href="../paper-tooltip/paper-tooltip.html">
-<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="./gold-password-input-icons.html">
 <!-- TODO PG: load the library only if needed -->
 <script src="../zxcvbn/dist/zxcvbn.js"></script>
 
@@ -41,18 +42,17 @@
       :host-context([dir="rtl"]) {
         float: left;
       }
+      /* FIXME PG: suppress when paper-input-container has reflectToAttribute for invalid... cf. ( https://github.com/PolymerElements/paper-input/pull/258 ) */
 /*
       :host-context([invalid]) {
         visibility: hidden;
       };
 */
-      /* FIXME PG: suppress when paper-input-container has reflectToAttribute for invalid... cf. ( https://github.com/PolymerElements/paper-input/pull/258 ) */
       :host([invalid]) {
         visibility: hidden;
       };
 
       /* FIXME PG: remove !important used as current workaround before getting the proper explanation... cf. ( https://github.com/Polymer/polymer/issues/3059 )*/
-      /* TODO PG: try different colors */
       .None {
         color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700) !important;
       }
@@ -72,11 +72,11 @@
         color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700) !important;
       }
 
-      /* TODO PG: those should be calculated from the font size? */
-      #strengthLabel paper-icon-button {
+      #strengthLabel iron-icon {
         width: 14px;
         height: 14px;
-        padding: 0px;
+        padding-bottom: 3px;
+        color: var(--paper-grey-700);
       };
 
       #strengthTooltip * {
@@ -88,19 +88,17 @@
     <span id="strengthLabel">
       [[strengthMeterLabels.Label]]:
       <span class$=[[_strengthMeterScore]]>[[_computeStrengthMeterLabel(_strengthMeterScore)]]</span>
-      <paper-icon-button icon="info" alt="info" disabled noink></paper-icon-button>
+      <iron-icon icon="gold-password-input:info"></iron-icon>
     </span>
     <paper-tooltip
       id="strengthTooltip"
       for="strengthLabel"
       position="bottom"
       offset="14">
-      <!-- TODO PG: add possible small icons for warning and suggestions... -->
       <div class="warning">
         <span><b>Warning: </b>[[_strengthMeterFeedback.warning]]</span>
       </div>
       <div class="suggestions">
-        <!-- TODO PG: play with dom repeat to show the array of suggestions -->
         <span><b>Suggestions: </b>[[_strengthMeterFeedback.suggestions]]</span>
       </div>
     </paper-tooltip>
@@ -158,7 +156,6 @@
         }
       },
 
-      // TODO PG: add comment
       update: function(state) {
         // FIXME PG: suppress when paper-input-container has reflectToAttribute for invalid... cf. ( https://github.com/PolymerElements/paper-input/pull/258 )
         this._setInvalid(state.invalid);

diff --git a/gold-password-input.html b/gold-password-input.html
@@ -7,9 +7,13 @@
 <link rel="import" href="../paper-input/paper-input-container.html">
 <link rel="import" href="../paper-input/paper-input-error.html">
 
-<link rel="import" href="gold-password-input-strength-meter.html">
-<!-- FIXME PG: remove the import when the corresponding issue is fixed: (https://github.com/PolymerElements/iron-component-page/issues/34) -->
-<link rel="import" href="gold-password-input-validator.html">
+<link rel="import" href="../toggle-icon/toggle-icon.html">
+
+<link rel="import" href="./gold-password-input-icons.html">
+<link rel="import" href="./gold-password-input-strength-meter.html">
+<!-- FIXME PG: remove the import when the corresponding issue is fixed:
+(https://github.com/PolymerElements/iron-component-page/issues/34) -->
+<link rel="import" href="./gold-password-input-validator.html">
 
 <!--
 `<gold-password-input>` is a single-line text field with Material Design styling
@@ -25,6 +29,10 @@
 
     <gold-password-input label="Account Password"></gold-password-input>
 
+It may include a reveal option to be able to show the plain text password with a toggle icon.
+
+    <gold-password-input reveal></gold-password-input>
+
 It may include an optional label configuration object.
 
     <gold-password-input
@@ -75,6 +83,14 @@
       :host {
         display: block;
       }
+
+      toggle-icon {
+        --paper-icon-button: {
+          padding: 2px;
+          width: 26px;
+          height: 26px;          
+        };
+      }
     </style>
 
     <paper-input-container
@@ -109,6 +125,14 @@
         aria-labelledby$="[[_ariaLabelledBy]]"
         aria-describedby$="[[_ariaDescribedBy]]">
 
+      <template is="dom-if" if="[[reveal]]">
+        <toggle-icon suffix
+          icon="gold-password-input:visibility-off"
+          icon-active="gold-password-input:visibility" 
+          active="{{active}}" noink>
+        </toggle-icon>
+      </template>
+
       <template is="dom-if" if="[[errorMessage]]">
         <paper-input-error id="error">[[errorMessage]]</paper-input-error>
       </template>
@@ -145,14 +169,33 @@
         strengthMeterLabels: {
           type: Object
         },
+        /**
+         * Set to true to show a reveal password icon.
+         */
+        reveal: {
+          type: Boolean,
+          value: false
+        },
+        active: {
+          type: Boolean,
+          value: false,
+          observer: '_activeChanged'
+        }
       },
 
       ready: function() {
         if (!this.label) {
           this.label = "Password";
         }
       },
-    })
+      _activeChanged: function(active) {
+        if (active) {
+          this.$.input.type="text";
+        } else {
+          this.$.input.type="password";
+        }
+      }
+    });
   </script>
 </dom-module>