diff --git a/pkg/lib/cockpit-components-password.jsx b/pkg/lib/cockpit-components-password.jsx index 780e1fcd10d4..fd2752c7cbbc 100644 --- a/pkg/lib/cockpit-components-password.jsx +++ b/pkg/lib/cockpit-components-password.jsx @@ -30,6 +30,7 @@ import { EyeIcon, EyeSlashIcon, HelpIcon } from '@patternfly/react-icons'; import { FormHelper } from "cockpit-components-form-helper"; import './cockpit-components-password.scss'; +import { Flex, FlexItem } from '@patternfly/react-core'; const _ = cockpit.gettext; @@ -62,7 +63,7 @@ export const PasswordFormFields = ({ }) => { const [password, setPassword] = useState(initial_password || ""); const [passwordConfirm, setConfirmPassword] = useState(""); - const [passwordStrength, setPasswordStrength] = useState(""); + const [passwordStrength, setPasswordStrength] = useState(); const [passwordMessage, setPasswordMessage] = useState(""); const [passwordHidden, setPasswordHidden] = useState(true); const [passwordConfirmHidden, setPasswordConfirmHidden] = useState(true); @@ -81,20 +82,30 @@ export const PasswordFormFields = ({ setPasswordMessage(strength.message); }); } else { - setPasswordStrength(""); + setPasswordStrength(); setPasswordMessage(""); } } let variant; - if (passwordStrength === "") - variant = "default"; - else if (passwordStrength > 66) + let message; + let messageColor; + if (passwordStrength > 66) { variant = "success"; - else if (passwordStrength > 33) + messageColor = "pf-v5-u-success-color-200"; + message = _("Strong password"); + } else if (passwordStrength > 33) { variant = "warning"; - else + messageColor = "pf-v5-u-warning-color-200"; + message = _("Acceptable password"); + } else { variant = "danger"; + messageColor = "pf-v5-u-danger-color-200"; + message = _("Weak password"); + } + + if (!passwordMessage && message) + setPasswordMessage(message); let passwordStrengthValue = Number.isInteger(passwordStrength) ? Number.parseInt(passwordStrength) : -1; if (password !== "" && (passwordStrengthValue >= 0 && passwordStrengthValue < 25)) @@ -129,16 +140,20 @@ export const PasswordFormFields = ({ -
- -
{passwordMessage}
-
+ {passwordStrengthValue >= 0 && + + + + +
{passwordMessage}
+
+
} {error_password && diff --git a/pkg/lib/cockpit-components-password.scss b/pkg/lib/cockpit-components-password.scss index b530e657201a..8dd66cc34c97 100644 --- a/pkg/lib/cockpit-components-password.scss +++ b/pkg/lib/cockpit-components-password.scss @@ -1,3 +1,6 @@ +@import "global-variables"; +@import "@patternfly/patternfly/utilities/Text/text.scss"; + .ct-password-strength-meter { grid-gap: var(--pf-v5-global--spacer--xs);