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