show hide dn and pw

This commit is contained in:
mfrances 2021-05-05 17:27:39 -04:00
parent 8e1a1c57bd
commit ac664a2f54

View file

@ -9,8 +9,9 @@ import {
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import React, { useState } from "react"; import React, { useState } from "react";
import _ from "lodash";
import { HelpItem } from "../../components/help-enabler/HelpItem"; import { HelpItem } from "../../components/help-enabler/HelpItem";
import { Controller, UseFormMethods } from "react-hook-form"; import { Controller, UseFormMethods, useWatch } from "react-hook-form";
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";
import { PasswordInput } from "../../components/password-input/PasswordInput"; import { PasswordInput } from "../../components/password-input/PasswordInput";
@ -36,6 +37,11 @@ export const LdapSettingsConnection = ({
const [isBindTypeDropdownOpen, setIsBindTypeDropdownOpen] = useState(false); const [isBindTypeDropdownOpen, setIsBindTypeDropdownOpen] = useState(false);
const ldapBindType = useWatch({
control: form.control,
name: "config.authType",
});
return ( return (
<> <>
{showSectionHeading && ( {showSectionHeading && (
@ -231,83 +237,90 @@ export const LdapSettingsConnection = ({
variant={SelectVariant.single} variant={SelectVariant.single}
data-testid="ldap-bind-type" data-testid="ldap-bind-type"
> >
<SelectOption key={3} value="simple" /> <SelectOption key={0} value="simple" />
<SelectOption key={4} value="none" /> <SelectOption key={1} value="none" isPlaceholder />
</Select> </Select>
)} )}
></Controller> ></Controller>
</FormGroup> </FormGroup>
<FormGroup
label={t("bindDn")} {_.isEqual(ldapBindType, ["simple"]) ? (
labelIcon={ <>
<HelpItem <FormGroup
helpText={helpText("bindDnHelp")} label={t("bindDn")}
forLabel={t("bindDn")} labelIcon={
forID="kc-console-bind-dn" <HelpItem
/> helpText={helpText("bindDnHelp")}
} forLabel={t("bindDn")}
fieldId="kc-console-bind-dn" forID="kc-console-bind-dn"
isRequired />
> }
<TextInput fieldId="kc-console-bind-dn"
type="text" isRequired
id="kc-console-bind-dn" >
data-testid="ldap-bind-dn" <TextInput
name="config.bindDn[0]" type="text"
ref={form.register({ id="kc-console-bind-dn"
required: { data-testid="ldap-bind-dn"
value: true, name="config.bindDn[0]"
message: `${t("validateBindDn")}`, ref={form.register({
}, required: {
})} value: true,
/> message: `${t("validateBindDn")}`,
{form.errors.config && },
form.errors.config.bindDn && })}
form.errors.config.bindDn[0] && ( />
<div className="error"> {form.errors.config &&
{form.errors.config.bindDn[0].message} form.errors.config.bindDn &&
</div> form.errors.config.bindDn[0] && (
)} <div className="error">
</FormGroup> {form.errors.config.bindDn[0].message}
<FormGroup </div>
label={t("bindCredentials")} )}
labelIcon={ </FormGroup>
<HelpItem <FormGroup
helpText={helpText("bindCredentialsHelp")} label={t("bindCredentials")}
forLabel={t("bindCredentials")} labelIcon={
forID="kc-console-bind-credentials" <HelpItem
/> helpText={helpText("bindCredentialsHelp")}
} forLabel={t("bindCredentials")}
fieldId="kc-console-bind-credentials" forID="kc-console-bind-credentials"
isRequired />
> }
<PasswordInput fieldId="kc-console-bind-credentials"
isRequired isRequired
id="kc-console-bind-credentials" >
data-testid="ldap-bind-credentials" <PasswordInput
name="config.bindCredential[0]" isRequired
ref={form.register({ id="kc-console-bind-credentials"
required: { data-testid="ldap-bind-credentials"
value: true, name="config.bindCredential[0]"
message: `${t("validateBindCredentials")}`, ref={form.register({
}, required: {
})} value: true,
/> message: `${t("validateBindCredentials")}`,
{form.errors.config && },
form.errors.config.bindCredential && })}
form.errors.config.bindCredential[0] && ( />
<div className="error"> {form.errors.config &&
{form.errors.config.bindCredential[0].message} form.errors.config.bindCredential &&
</div> form.errors.config.bindCredential[0] && (
)} <div className="error">
</FormGroup> {form.errors.config.bindCredential[0].message}
<FormGroup fieldId="kc-test-button"> </div>
{" "} )}
{/* TODO: whatever this button is supposed to do */} </FormGroup>
<Button variant="secondary" id="kc-test-button"> <FormGroup fieldId="kc-test-button">
{t("common:test")} {" "}
</Button> {/* TODO: whatever this button is supposed to do */}
</FormGroup> <Button variant="secondary" id="kc-test-button">
{t("common:test")}
</Button>
</FormGroup>
</>
) : (
<></>
)}
</FormAccess> </FormAccess>
</> </>
); );