From 837e166989c96d6cbe95ff666f1429541914dbe3 Mon Sep 17 00:00:00 2001
From: Samuel Martins <samuels@take.net>
Date: Wed, 20 Oct 2021 15:47:41 -0300
Subject: [PATCH] feat(components): add new properties to enable strong
 password validation

---
 src/components/blipInput/index.js | 37 ++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/blipInput/index.js b/src/components/blipInput/index.js
index 0f0d9e1..6e32385 100644
--- a/src/components/blipInput/index.js
+++ b/src/components/blipInput/index.js
@@ -23,12 +23,13 @@ export class BlipInput extends Component {
     focused: false,
     readOnly: false,
     pristine: true,
-    placeholder: '',
+    showPasswordStrength: true,
     required: false,
+    shouldValidateByPasswordStrength: false,
+    placeholder: '',
     regex: '',
     minLength: 0,
     maxLength: 0,
-    showPasswordStrength: true,
     autocomplete: 'on',
     requiredErrorMsg: 'This is a required field',
     maxLengthErrorMsg: 'The value is too long',
@@ -79,6 +80,7 @@ export class BlipInput extends Component {
     this.props = {
       ...this.props,
       ...props,
+      customError: props.customError,
     }
 
     const labelClass = this._getLabelClass()
@@ -95,9 +97,9 @@ export class BlipInput extends Component {
               ${this.props.label} ${this.configOptions.required ? ' *' : ''}
             </label>
             ${this.configOptions.type === 'password' && this.configOptions.showPasswordStrength && !this.props.disabled ? html`<div class="bp-input__password-strength">
-            <span class="str-lvl lvl-one ${this.props.valid ? this.props.passwordStrength : ''}"></span>
-            <span class="str-lvl lvl-two ${this.props.valid ? this.props.passwordStrength : ''}"></span>
-            <span class="str-lvl lvl-three ${this.props.valid ? this.props.passwordStrength : ''}"></span>
+            <span class="str-lvl lvl-one ${this._shouldDisplayPasswordStrength()}"></span>
+            <span class="str-lvl lvl-two ${this._shouldDisplayPasswordStrength()}"></span>
+            <span class="str-lvl lvl-three ${this._shouldDisplayPasswordStrength()}"></span>
           </div>` : ''}
 
           <div class="w-100 relative flex flex-row justify-between">
@@ -124,6 +126,14 @@ export class BlipInput extends Component {
     `
   }
 
+  _shouldDisplayPasswordStrength() {
+    if (this.configOptions.shouldValidateByPasswordStrength || this.props.valid) {
+      return this.props.passwordStrength
+    }
+
+    return ''
+  }
+
   _onInputFocus = () => {
     this.props.focused = true
     this.configOptions.onInputFocus()
@@ -245,6 +255,22 @@ export class BlipInput extends Component {
     } else {
       this.props.passwordStrength = 'weak'
     }
+
+    if (this.configOptions.shouldValidateByPasswordStrength) {
+      switch (this.props.passwordStrength) {
+        case 'medium':
+        case 'weak':
+          this.props.valid = false
+          this.configOptions.error = this.configOptions.passwordStrengthErrorMessage || 'The password must contain at least 8 items: an uppercase, a lowercase, a number and a special character.'
+          break
+        case 'strong':
+          this.props.valid = true
+          this.configOptions.error = ''
+          break
+        default:
+          break
+      }
+    }
   }
 
   validate() {
@@ -256,6 +282,7 @@ export class BlipInput extends Component {
     if (this.configOptions.type === 'password') {
       this._checkPasswordStrength()
     }
+
     this.render(this.props)
   }