From d26626a96989563fe2a5e9a8f04007e07200693e Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 26 Dec 2018 22:02:41 +0300
Subject: [PATCH] Implemented PasswordStrength Component

---
 src/AppMenu.vue                               |   1 +
 src/assets/styles/primevue.css                |   1 +
 src/components/password/Password.css          |  19 +++
 src/components/password/Password.vue          | 154 ++++++++++++++++++
 .../password/images/password-meter.png        | Bin 0 -> 118 bytes
 src/main.js                                   |   2 +
 src/router.js                                 |   5 +
 src/views/password/PasswordDemo.vue           |  28 ++++
 8 files changed, 210 insertions(+)
 create mode 100644 src/components/password/Password.css
 create mode 100644 src/components/password/Password.vue
 create mode 100644 src/components/password/images/password-meter.png
 create mode 100644 src/views/password/PasswordDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 7d004164e..dbe620b0f 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -14,6 +14,7 @@
                     <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>
+                    <router-link to="/password">&#9679; Password</router-link>
                     <router-link to="/radiobutton">&#9679; RadioButton</router-link>
                     <router-link to="/rating">&#9679; Rating</router-link>
                     <router-link to="/selectbutton">&#9679; SelectButton</router-link>
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 68ff9b398..a510190a2 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -9,6 +9,7 @@
 @import '../../components/inputswitch/InputSwitch.css';
 @import '../../components/listbox/Listbox.css';
 @import '../../components/panel/Panel.css';
+@import '../../components/password/Password.css';
 @import '../../components/progressbar/ProgressBar.css';
 @import '../../components/radiobutton/RadioButton.css';
 @import '../../components/rating/Rating.css';
diff --git a/src/components/password/Password.css b/src/components/password/Password.css
new file mode 100644
index 000000000..84ca6ce44
--- /dev/null
+++ b/src/components/password/Password.css
@@ -0,0 +1,19 @@
+.p-password-panel {
+    padding: .25em .5em;
+    margin-top: 2px;
+}
+ 
+.p-password-panel .p-password-meter {
+    height: 10px;
+    background:transparent url("./images/password-meter.png") no-repeat left top;
+    padding: 0;
+    margin: 0;
+}
+ 
+.p-password-info {
+    margin-top: .25em;
+}
+ 
+.p-password-panel-overlay {
+    position: absolute;
+} 
\ No newline at end of file
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
new file mode 100644
index 000000000..727c29317
--- /dev/null
+++ b/src/components/password/Password.vue
@@ -0,0 +1,154 @@
+<template>
+    <input ref="input" type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" v-on="listeners" :value="value" />
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        value: String,
+        promptLabel: {
+            type: String,
+            default: 'Enter a password'
+        },
+        weakLabel: {
+            type: String,
+            default: 'Weak'
+        },
+        mediumLabel: {
+            type: String,
+            default: 'Medium'
+        },
+        strongLabel: {
+            type: String,
+            default: 'Strong'
+        },
+        feedback: {
+            type: Boolean,
+            default: true
+        }
+    },
+    panel: null,
+    meter: null,
+    info: null,
+    methods: {
+        testStrength(str) {
+            let grade = 0;
+            let val;
+
+            val = str.match('[0-9]');
+            grade += this.normalize(val ? val.length : 1/4, 1) * 25;
+
+            val = str.match('[a-zA-Z]');
+            grade += this.normalize(val ? val.length : 1/2, 3) * 10;
+
+            val = str.match('[!@#$%^&*?_~.,;=]');
+            grade += this.normalize(val ? val.length : 1/6, 1) * 35;
+
+            val = str.match('[A-Z]');
+            grade += this.normalize(val ? val.length : 1/6, 1) * 30;
+
+            grade *= str.length / 8;
+
+            return grade > 100 ? 100 : grade;
+        },
+        normalize(x, y) {
+            let diff = x - y;
+
+            if(diff <= 0)
+                return x / y;
+            else
+                return 1 + 0.5 * (x / (x + y/4));
+        },
+        createPanel() {
+            this.panel = document.createElement('div');
+            this.panel.className = 'p-password-panel p-component p-hidden p-password-panel-overlay p-input-overlay';
+            this.meter = document.createElement('div');
+            this.meter.className = 'p-password-meter';
+            this.info = document.createElement('div');
+            this.info.className = 'p-password-info';
+            this.info.textContent = this.promptLabel;
+
+            this.panel.style.minWidth = DomHandler.getOuterWidth(this.$refs.input) + 'px';
+            this.panel.appendChild(this.meter);
+            this.panel.appendChild(this.info);
+            document.body.appendChild(this.panel);
+        }
+    },
+    computed: {
+        listeners() {
+            return {
+                ...this.$listeners,
+                input: event => this.$emit('input', event.target.value),
+                focus: event => {
+                    if (this.feedback) {
+                        if (!this.panel) {
+                            this.createPanel();
+                        }
+                        
+                        this.panel.style.zIndex = String(DomHandler.generateZIndex());
+                        this.panel.style.display = 'block';
+                        setTimeout(() => {
+                            DomHandler.addClass(this.panel, 'p-input-overlay-visible');
+                            DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
+                        }, 1);
+                        DomHandler.absolutePosition(this.panel, this.$refs.input);
+                    }
+                    
+                    this.$emit('focus', event);
+                },
+                blur: event => {
+                    if (this.panel) {
+                        DomHandler.addClass(this.panel, 'p-input-overlay-hidden');
+                        DomHandler.removeClass(this.panel, 'p-input-overlay-visible');
+
+                        setTimeout(() => {
+                            this.panel.style.display = 'none';
+                            DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
+                        }, 150);
+                    }
+
+                    this.$emit('blur', event);
+                },
+                keyup: event => {
+                    if(this.panel) {
+                        let value = event.target.value;
+                        let label = null;
+                        let meterPos = null;
+
+                        if (value.length === 0) {
+                            label = this.promptLabel;
+                            meterPos = '0px 0px';
+                        }
+                        else {
+                            let score = this.testStrength(value);
+
+                            if (score < 30) {
+                                label = this.weakLabel;
+                                meterPos = '0px -10px';
+                            }
+                            else if (score >= 30 && score < 80) {
+                                label = this.mediumLabel;
+                                meterPos = '0px -20px';
+                            } 
+                            else if (score >= 80) {
+                                label = this.strongLabel;
+                                meterPos = '0px -30px';
+                            }
+                        }
+
+                        this.meter.style.backgroundPosition = meterPos;
+                        this.info.textContent = label;
+                    }
+
+                    this.$emit('keyup', event);
+                }
+            };
+        },
+        filled() {
+            return (this.value != null && this.value.toString().length > 0)
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/password/images/password-meter.png b/src/components/password/images/password-meter.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddb456d3f8014647b6b193ceaf506e91f72fe819
GIT binary patch
literal 118
zcmeAS@N?(olHy`uVBq!ia0vp^(|}lmi5W;Hu76zuq<8{+LR>$7{P<YL_U{fkucax8
z$E2%);;No5jv*C{$r3yXA}vad4U9o%t8zs39NbeEpZX`vY<D5#<_aT*${=sfcFWje
Ppaup{S3j3^P6<r_Pbea)

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index c7f30a9d9..527f500f0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import Listbox from './components/listbox/Listbox';
 import Panel from './components/panel/Panel';
+import Password from './components/password/Password';
 import ProgressBar from './components/progressbar/ProgressBar';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
@@ -44,6 +45,7 @@ Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);
 Vue.component('p-fieldset', Fieldset);
 Vue.component('p-panel', Panel);
+Vue.component('p-password', Password);
 Vue.component('p-progressBar', ProgressBar);
 Vue.component('p-radioButton', RadioButton);
 Vue.component('p-rating', Rating);
diff --git a/src/router.js b/src/router.js
index b26f731a1..5c272f7bc 100644
--- a/src/router.js
+++ b/src/router.js
@@ -71,6 +71,11 @@ export default new Router({
         name: 'panel',
         component: () => import('./views/panel/PanelDemo.vue')
     },
+    {
+        path: '/password',
+        name: 'password',
+        component: () => import('./views/password/PasswordDemo.vue')
+    },
     {
         path: '/progressbar',
         name: 'progressbar',
diff --git a/src/views/password/PasswordDemo.vue b/src/views/password/PasswordDemo.vue
new file mode 100644
index 000000000..ad8e81bb0
--- /dev/null
+++ b/src/views/password/PasswordDemo.vue
@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Password</h1>
+                <p>Password displays strength indicator for password fields.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-password v-model="value" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>