├── .gitignore ├── PUBLISH.md ├── wct.conf.js ├── .editorconfig ├── test ├── index.html └── basic.html ├── .github └── ISSUE_TEMPLATE.md ├── .travis.yml ├── LICENSE ├── gold-password-input-validator.html ├── gold-password-input-icons.html ├── demo ├── noloading.html └── index.html ├── index.html ├── README.md ├── gold-password-input-warning.html ├── bower.json ├── CONTRIBUTING.md ├── hero.svg ├── gold-password-input-strength-meter.html └── gold-password-input.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components* 2 | bower-*.json 3 | -------------------------------------------------------------------------------- /PUBLISH.md: -------------------------------------------------------------------------------- 1 | ## Registering to Bower 2 | 3 | `bower register gold-password-input git://github.com/MeTaNoV/gold-password-input.git` 4 | 5 | ## Deploying to Github Pages 6 | 7 | `yo polymer:gh` 8 | -------------------------------------------------------------------------------- /wct.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | verbose: true, 3 | plugins: { 4 | local: { 5 | browsers: ['chrome', 'firefox'] 6 | }, 7 | sauce: { 8 | disabled: true, 9 | browsers: ['chrome', 'firefox'] 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | # Change these settings to your own preference 9 | indent_style = space 10 | indent_size = 2 11 | 12 | # We recommend you to keep these unchanged 13 | end_of_line = lf 14 | charset = utf-8 15 | trim_trailing_whitespace = true 16 | insert_final_newline = true 17 | 18 | [*.md] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | gold-password-input tests 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | before_script: 4 | - npm install -g bower polymer-cli@next 5 | - polymer install --variants 6 | - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old 7 | - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome 8 | env: 9 | global: 10 | - secure: >- 11 | TcDqx+YdNCa/DRQjdKt9dgYCPgXtPl2EZ7Nnv6bRvbcmUjW2eSr7Zwb+e0fO8wgwms/RqFaVx+u5jo7D1lnC4Ybcg1HKiMOvCyzY36MjF9oB/VKSEUC+p4tMVQfw1IZ/RmK3dD+WEWaoT/EKmNfctz7v5kR+yk2lZo44D9I7rrc= 12 | - secure: >- 13 | nh65tvhnhOrK05qKvDJKMV7Jm9yiCoG1wFkP3ZnqOHix9Ny+KmcTa41Bl6NXQdvYaMTFtzS7lMZX5cqIziyKyGWHVN30LzGMHJNz12fhcMi3nJ84trhQGcu/9qR9yDv16q9ouGlcz1VxnDOHaRAHnIKjLIbhN3aJtMtZBbnWihA= 14 | node_js: stable 15 | addons: 16 | firefox: latest 17 | apt: 18 | sources: 19 | - google-chrome 20 | packages: 21 | - google-chrome-beta 22 | script: 23 | - xvfb-run polymer test 24 | dist: trusty -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-2017 Pascal Gula 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /gold-password-input-validator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | 38 | 39 | -------------------------------------------------------------------------------- /gold-password-input-icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/noloading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gold-password-input no loading demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | 25 |
26 |

No strength meter configured on this page!

27 | 28 | 31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | gold-password-input 18 | 19 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/GeoloeG/gold-password-input) 2 | 3 | # `` 4 | 5 | ## Descripton 6 | 7 | `` is an input element with Material Design that allows password with an optional strength meter and reveal functionality. 8 | 9 | ## Install 10 | 11 | Install the component using [Bower](http://bower.io/): 12 | 13 | ```sh 14 | $ bower install gold-password-input --save 15 | ``` 16 | 17 | ## Usage 18 | 19 | Import Custom Element: 20 | 21 | ```html 22 | 23 | ``` 24 | 25 | And then use it: 26 | 27 | 37 | ```html 38 | 39 | ``` 40 | or 41 | 51 | ```html 52 | 53 | ``` 54 | 55 | See the [Documentation](https://geoloeg.github.io/gold-password-input/) for more options. 56 | 57 | ## More Demos 58 | 59 | [https://geoloeg.github.io/gold-password-input/](https://geoloeg.github.io/gold-password-input/components/gold-password-input/demo/) 60 | 61 | ## Discussing 62 | 63 | If you have any questions, you can find me on the [Polymer Slack Channel](https://polymer.slack.com/), or just raise an Issue. 64 | 65 | ## Contributing 66 | 67 | 1. Fork it! 68 | 2. Create your feature branch: `git checkout -b my-new-feature` 69 | 3. Commit your changes: `git commit -m 'Add some feature'` 70 | 4. Push to the branch: `git push origin my-new-feature` 71 | 5. Submit a pull request :D 72 | -------------------------------------------------------------------------------- /gold-password-input-warning.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 20 | 21 | 22 | 44 | 45 | 46 | 84 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gold-password-input", 3 | "version": "2.0.2", 4 | "description": "[Polymer 2.x] Input element with Material Design that allows password with an optional strength meter.", 5 | "authors": [ 6 | "Pascal Gula aka MeTaNoV " 7 | ], 8 | "keywords": [ 9 | "web-component", 10 | "web-components", 11 | "web", 12 | "component", 13 | "components", 14 | "custom", 15 | "element", 16 | "polymer", 17 | "gold", 18 | "password", 19 | "input", 20 | "strength", 21 | "meter", 22 | "zxcvbn" 23 | ], 24 | "main": "gold-password-input.html", 25 | "private": false, 26 | "repository": { 27 | "type": "git", 28 | "url": "git://github.com/GeoloeG/gold-password-input.git" 29 | }, 30 | "license": "MIT", 31 | "homepage": "https://geoloeg.github.io/gold-password-input/", 32 | "ignore": [ 33 | "/.*", 34 | "/test/" 35 | ], 36 | "dependencies": { 37 | "polymer": "Polymer/polymer#^2.0.0", 38 | "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0", 39 | "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^2.0.0", 40 | "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^2.0.0", 41 | "iron-icon": "PolymerElements/iron-icon#^2.0.0", 42 | "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0", 43 | "paper-input": "PolymerElements/paper-input#^2.0.0", 44 | "paper-progress": "PolymerElements/paper-progress#^2.0.0", 45 | "paper-styles": "PolymerElements/paper-styles#^2.0.0", 46 | "paper-tooltip": "PolymerElements/paper-tooltip#^2.0.0", 47 | "toggle-icon": "fxedel/toggle-icon#^1.2.1", 48 | "web-animations-js": "web-animations/web-animations-js#^2.3.1", 49 | "zxcvbn": "zxcvbn#^4.4.0" 50 | }, 51 | "devDependencies": { 52 | "iron-component-page": "PolymerElements/iron-component-page#^2.0.0", 53 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0", 54 | "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0", 55 | "web-component-tester": "Polymer/web-component-tester#^6.0.0", 56 | "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0" 57 | }, 58 | "variants": { 59 | "dependencies": { 60 | "polymer": "Polymer/polymer#^1.2.0", 61 | "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", 62 | "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", 63 | "iron-icon": "PolymerElements/iron-icon#^1.0.0", 64 | "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0", 65 | "paper-input": "PolymerElements/paper-input#^1.0.0", 66 | "paper-tooltip": "PolymerElements/paper-tooltip#^1.1.0", 67 | "paper-styles": "PolymerElements/paper-styles#^1.0.0", 68 | "toggle-icon": "toggle-icon#^1.0.3", 69 | "zxcvbn": "zxcvbn#^4.2.0" 70 | }, 71 | "devDependencies": { 72 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", 73 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", 74 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", 75 | "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", 76 | "web-component-tester": "^4.0.0" 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | 9 | # Polymer Elements 10 | ## Guide for Contributors 11 | 12 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: 13 | 14 | ### Filing Issues 15 | 16 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: 17 | 18 | 1. **Who will use the feature?** _“As someone filling out a form…”_ 19 | 2. **When will they use the feature?** _“When I enter an invalid value…”_ 20 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ 21 | 22 | **If you are filing an issue to report a bug**, please provide: 23 | 24 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: 25 | 26 | ```markdown 27 | The `paper-foo` element causes the page to turn pink when clicked. 28 | 29 | ## Expected outcome 30 | 31 | The page stays the same color. 32 | 33 | ## Actual outcome 34 | 35 | The page turns pink. 36 | 37 | ## Steps to reproduce 38 | 39 | 1. Put a `paper-foo` element in the page. 40 | 2. Open the page in a web browser. 41 | 3. Click the `paper-foo` element. 42 | ``` 43 | 44 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output). 45 | 46 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 47 | 48 | ### Submitting Pull Requests 49 | 50 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. 51 | 52 | When submitting pull requests, please provide: 53 | 54 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax: 55 | 56 | ```markdown 57 | (For a single issue) 58 | Fixes #20 59 | 60 | (For multiple issues) 61 | Fixes #32, #40 62 | ``` 63 | 64 | 2. **A succinct description of the design** used to fix any related issues. For example: 65 | 66 | ```markdown 67 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. 68 | ``` 69 | 70 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. 71 | 72 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! 73 | -------------------------------------------------------------------------------- /hero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 27 | 28 | 29 | 32 | 38 | 43 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gold-password-input demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | 34 | 35 | 36 |
37 |

Standard

38 | 39 | 42 | 43 | 44 |

With Validation

45 | 46 | 56 | 57 | 58 | 59 | 68 | 69 | 70 |

With Strength Meter

71 | 72 | 78 | 79 | 80 | 81 | 95 | 96 | 97 | 98 | 108 | 109 | 110 |

With reveal functionality

111 | 112 | 118 | 119 | 120 | 127 | 128 | 129 |

With progress bar functionality

130 | 131 | 139 | 140 | 141 | 149 | 150 | 151 |

With Caps Lock detection

152 | 153 | 162 | 163 |
164 | 165 | 166 | -------------------------------------------------------------------------------- /test/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | gold-password-input tests 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 47 | 48 | 49 | 50 | 60 | 61 | 62 | 63 | 74 | 75 | 76 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /gold-password-input-strength-meter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 28 | 29 | 124 | 125 | 126 | 336 | 337 | 338 | -------------------------------------------------------------------------------- /gold-password-input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 92 | 93 | 211 | 212 | 235 | 236 | 261 | 262 | 488 | 489 | 490 | --------------------------------------------------------------------------------