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 ? ' *' : ''}
${this.configOptions.type === 'password' && this.configOptions.showPasswordStrength && !this.props.disabled ? html`
-
-
-
+
+
+
` : ''}
@@ -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)
}