Merge pull request #6122 from melloware/PR6119

Fix #6119: Password reset feedback meter when value changes
primefaces · Mar 18, 2024 · c007c7d · c007c7d
2 parents 4c5a93c + 8082b25
commit c007c7d
Showing 1 changed file with 61 additions and 42 deletions.
diff --git 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();
         });