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
This commit is contained in:
Erik Jan de Wit 2021-08-17 14:58:07 +02:00 committed by GitHub
parent f93d478f44
commit 2581da0765
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 10 deletions

View file

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

View file

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

View file

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