diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index 854a26f20f..92b23b8a71 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { EyeIcon } from '../icons/eye'; import { EyeSlashIcon } from '../icons/eyeslash'; import { InputText } from '../inputtext/InputText'; @@ -99,6 +99,51 @@ export const Password = React.memo( } }; + const updateFeedback = (value) => { + if (!props.feedback) { + return false; + } + + let label = null; + let meter = null; + + switch (testStrength(value)) { + case 1: + label = weakLabel; + meter = { + strength: 'weak', + width: '33.33%' + }; + break; + + case 2: + label = mediumLabel; + meter = { + strength: 'medium', + width: '66.66%' + }; + break; + + case 3: + label = strongLabel; + meter = { + strength: 'strong', + width: '100%' + }; + break; + + default: + label = promptLabel; + meter = null; + break; + } + + setMeterState(meter); + setInfoTextState(label); + + return true; + }; + const onPanelClick = (event) => { if (props.feedback) { OverlayService.emit('overlay-click', { @@ -173,44 +218,6 @@ export const Password = React.memo( const keyCode = e.code; if (props.feedback) { - let value = e.target.value; - let label = null; - let meter = null; - - switch (testStrength(value)) { - case 1: - label = weakLabel; - meter = { - strength: 'weak', - width: '33.33%' - }; - break; - - case 2: - label = mediumLabel; - meter = { - strength: 'medium', - width: '66.66%' - }; - break; - - case 3: - label = strongLabel; - meter = { - strength: 'strong', - width: '100%' - }; - break; - - default: - label = promptLabel; - meter = null; - break; - } - - setMeterState(meter); - setInfoTextState(label); - if (!!keyCode && keyCode !== 'Escape' && !overlayVisibleState) { show(); } @@ -230,9 +237,17 @@ export const Password = React.memo( }; const testStrength = (str) => { - if (strongCheckRegExp.current.test(str)) return 3; - else if (mediumCheckRegExp.current.test(str)) return 2; - else if (str.length) return 1; + if (!str || str.length === 0) { + return 0; + } + + if (strongCheckRegExp.current.test(str)) { + return 3; + } else if (mediumCheckRegExp.current.test(str)) { + return 2; + } else if (str.length > 0) { + return 1; + } return 0; }; @@ -264,6 +279,10 @@ export const Password = React.memo( } }, [isFilled]); + useUpdateEffect(() => { + updateFeedback(props.value); + }, [props.value]); + useMountEffect(() => { alignOverlay(); });