change to TextInput when editing (#991)

* change to TextInput when editing
as keycloak doesn't store the password as clear text

fixes: #971

* now part of the password field

src/components/password-input/PasswordInput.tsx

@@ -8,7 +8,15 @@ import {
 } from "@patternfly/react-core";
 import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
 
-const PasswordInputBase = ({ innerRef, ...rest }: TextInputProps) => {
+type PasswordInputProps = TextInputProps & {
+  hasReveal?: boolean;
+};
+
+const PasswordInputBase = ({
+  hasReveal = true,
+  innerRef,
+  ...rest
+}: PasswordInputProps) => {
   const { t } = useTranslation("common-help");
   const [hidePassword, setHidePassword] = useState(true);
   return (
@@ -18,19 +26,21 @@ const PasswordInputBase = ({ innerRef, ...rest }: TextInputProps) => {
         type={hidePassword ? "password" : "text"}
         ref={innerRef}
       />
-      <Button
-        variant="control"
-        aria-label={t("showPassword")}
-        onClick={() => setHidePassword(!hidePassword)}
-      >
-        {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
-      </Button>
+      {hasReveal && (
+        <Button
+          variant="control"
+          aria-label={t("showPassword")}
+          onClick={() => setHidePassword(!hidePassword)}
+        >
+          {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
+        </Button>
+      )}
     </InputGroup>
   );
 };
 
 export const PasswordInput = React.forwardRef(
-  (props: TextInputProps, ref: React.Ref<HTMLInputElement>) => (
+  (props: PasswordInputProps, ref: React.Ref<HTMLInputElement>) => (
     <PasswordInputBase
       {...props}
       innerRef={ref as React.MutableRefObject<any>}

src/user-federation/UserFederationLdapSettings.tsx

@@ -298,7 +298,7 @@ export const UserFederationLdapSettings = () => {
           ]}
         >
           <LdapSettingsGeneral form={form} />
-          <LdapSettingsConnection form={form} />
+          <LdapSettingsConnection form={form} edit={!!id} />
           <LdapSettingsSearching form={form} />
           <LdapSettingsSynchronization form={form} />
           <LdapSettingsKerberosIntegration form={form} />

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -27,6 +27,7 @@ export type LdapSettingsConnectionProps = {
   form: UseFormMethods;
   showSectionHeading?: boolean;
   showSectionDescription?: boolean;
+  edit?: boolean;
 };
 
 const testLdapProperties: Array<keyof TestLdapConnectionRepresentation> = [
@@ -43,6 +44,7 @@ export const LdapSettingsConnection = ({
   form,
   showSectionHeading = false,
   showSectionDescription = false,
+  edit = false,
 }: LdapSettingsConnectionProps) => {
   const { t } = useTranslation("user-federation");
   const { t: helpText } = useTranslation("user-federation-help");
@@ -319,6 +321,7 @@ export const LdapSettingsConnection = ({
               isRequired
             >
               <PasswordInput
+                hasReveal={!edit}
                 isRequired
                 id="kc-console-bind-credentials"
                 data-testid="ldap-bind-credentials"