Issue 327: Fix for showing/hiding password text in Bind credentials field (#350)

* show-hide password text

* show pw icon indicator
This commit is contained in:
mfrances17 2021-02-04 16:43:00 -05:00 committed by GitHub
parent a0fcd6c675
commit 4137394964
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
import React, { useState } from "react";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { Controller, UseFormMethods } from "react-hook-form";
import { EyeIcon } from "@patternfly/react-icons";
import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
import { FormAccess } from "../../components/form-access/FormAccess";
import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
@ -36,6 +36,7 @@ export const LdapSettingsConnection = ({
] = useState(false);
const [isBindTypeDropdownOpen, setIsBindTypeDropdownOpen] = useState(false);
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
return (
<>
@ -266,9 +267,9 @@ export const LdapSettingsConnection = ({
isRequired
>
<InputGroup>
<TextInput // TODO: Make password field switch to type=text with button
<TextInput
isRequired
type="password"
type={isPasswordVisible ? "text" : "password"}
id="kc-console-bind-credentials"
name="config.bindCredential[0]"
ref={form.register({
@ -281,8 +282,9 @@ export const LdapSettingsConnection = ({
<Button
variant="control"
aria-label="show password button for bind credentials"
onClick={() => setIsPasswordVisible(!isPasswordVisible)}
>
<EyeIcon />
{!isPasswordVisible ? <EyeIcon /> : <EyeSlashIcon />}
</Button>
</InputGroup>
{form.errors.config &&