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:
parent
a0fcd6c675
commit
4137394964
1 changed files with 6 additions and 4 deletions
|
@ -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 &&
|
||||||
|
|
Loading…
Reference in a new issue