From 24c76ee92905ed59b65f0fee740c3bfdaea9d912 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 27 Aug 2020 13:54:51 +0300
Subject: [PATCH] Refactor #439 and docs

---
 src/components/password/Password.d.ts    |  4 +--
 src/components/password/Password.vue     |  8 +++---
 src/views/password/PasswordDoc.vue       | 34 ++++++++++++++++++++++++
 src/views/progressbar/ProgressBarDoc.vue |  2 +-
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
index e63b691ed..898e572ba 100755
--- a/src/components/password/Password.d.ts
+++ b/src/components/password/Password.d.ts
@@ -3,8 +3,8 @@ import Vue from 'vue';
 export declare class Password extends Vue {
     value?: string;
     promptLabel?: string;
-    mediumCheckExpr?: string;
-    strongCheckExpr?: string;
+    mediumRegex?: string;
+    strongRegex?: string;
     weakLabel?: string;
     mediumLabel?: string;
     strongLabel?: string;
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index 893da7caf..dc604bc65 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -12,11 +12,11 @@ export default {
             type: String,
             default: 'Enter a password'
         },
-        mediumCheckExpr: {
+        mediumRegex: {
             type: String,
             default: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})' // eslint-disable-line
         },
-        strongCheckExpr: {
+        strongRegex: {
             type: String,
             default: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})' // eslint-disable-line
         },
@@ -43,8 +43,8 @@ export default {
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
     mounted() {
-        this.mediumCheckRegExp = new RegExp(this.mediumCheckExpr);
-        this.strongCheckRegExp = new RegExp(this.strongCheckExpr);
+        this.mediumCheckRegExp = new RegExp(this.mediumRegex);
+        this.strongCheckRegExp = new RegExp(this.strongRegex);
     },
     methods: {
         testStrength(str) {
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 51f107ead..f3b6e4102 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -13,6 +13,28 @@ import Password from 'primevue/password';
 &lt;Password v-model="value" /&gt;
 </CodeHighlight>
 
+                <h5>Customization</h5>
+                <p>Password components uses regular expressions for middle and strong passwords with the following defaults.</p>
+
+                <h6>Medium</h6>
+                <p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</i></p>
+                <ul>
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase or one number</li>
+                    <li>Minimum 6 characters</li>
+                </ul>
+
+                <h6>Strong</h6>
+                <p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</i></p>
+                <ul>
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase</li>
+                    <li>At least one numeric</li>
+                    <li>Minimum 8 characters</li>
+                </ul>
+
+                <p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>
+
 				<h5>Properties</h5>
 				<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
 				<div class="doc-tablewrapper">
@@ -32,6 +54,18 @@ import Password from 'primevue/password';
                                 <td>Enter a password</td>
                                 <td>Text to prompt password entry.</td>
                             </tr>
+                            <tr>
+                                <td>mediumRegex</td>
+                                <td>string</td>
+                                <td>Regex for a medium level password.</td>
+                                <td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</td>
+                            </tr>
+                            <tr>
+                                <td>strongRegex</td>
+                                <td>string</td>
+                                <td>Regex for a strong level password.</td>
+                                <td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</td>
+                            </tr>
                             <tr>
                                 <td>weakLabel</td>
                                 <td>string</td>
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index b7f2ae62a..0f12cb3a8 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -30,7 +30,7 @@ data() {
 <CodeHighlight>
 <template v-pre>
 &lt;ProgressBar :value="value"&gt;
-    Percent Complete: {{value}}%
+    Percent Complete: &#123;&#123;value&#125;&#125;%
 &lt;/ProgressBar&gt;
 </template>
 </CodeHighlight>