Added help icons for password policy fields (#2502)

src/authentication/help.ts

@@ -47,5 +47,30 @@ export default {
       "Avoid registering the authenticator that has already been registered.",
     webAuthnPolicyAcceptableAaguids:
       "The list of AAGUID of which an authenticator can be registered.",
+
+    passwordPolicies: {
+      forceExpiredPasswordChange:
+        "The number of days the password is valid before a new password is required.",
+      hashIterations:
+        "The number of times a password is hashed before storage or verification. Default: 27,500.",
+      passwordHistory: "Prevents a recently used password from being reused.",
+      passwordBlacklist:
+        "Prevents the use of a password that is in a blacklist file.",
+      regexPattern:
+        "Requires that the password matches one or more defined regular expression patterns.",
+      length: "The minimum number of characters required for the password.",
+      notUsername: "The password cannot match the username.",
+      notEmail: "The password cannot match the email address of the user.",
+      specialChars:
+        "The number of special characters required in the password string.",
+      upperCase:
+        "The number of uppercase letters required in the password string.",
+      lowerCase:
+        "The number of lowercase letters required in the password string.",
+      digits: "The number of numerical digits required in the password string.",
+      hashAlgorithm:
+        "Applies a hashing algorithm to passwords, so they are not stored in clear text.",
+      maxLength: "The maximum number of characters allowed in the password.",
+    },
   },
 };

src/authentication/policies/PasswordPolicy.tsx

@@ -134,6 +134,7 @@ export const PasswordPolicy = ({
           <PageSection variant="light">
             <FormProvider {...form}>
               <FormAccess
+                className="keycloak__policies_authentication__form"
                 role="manage-realm"
                 isHorizontal
                 onSubmit={handleSubmit(save)}

src/authentication/policies/PolicyRow.tsx

@@ -14,6 +14,7 @@ import { MinusCircleIcon } from "@patternfly/react-icons";
 import type PasswordPolicyTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/passwordPolicyTypeRepresentation";
 
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
 
 import "./policy-row.css";
 
@@ -41,6 +42,12 @@ export const PolicyRow = ({
       validated={
         errors[id!] ? ValidatedOptions.error : ValidatedOptions.default
       }
+      labelIcon={
+        <HelpItem
+          helpText={`authentication-help:passwordPolicies.${id}`}
+          fieldLabelId={`authentication:${id}`}
+        />
+      }
     >
       <Split>
         <SplitItem isFilled>

src/authentication/policies/policy-row.css

@@ -1,4 +1,8 @@
-
+@media (min-width: 768px) {
+  .keycloak__policies_authentication__form .pf-c-form__group {
+    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
+  }
+}
 .keycloak__policies_authentication__minus-icon svg {
   color: var(--pf-c-button--m-plain--Color);
 }