libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Use react-hook-form v7 for client credentials form (#4014)

Browse source
This commit is contained in:
Erik Jan de Wit 2022-12-13 06:59:11 -05:00 committed by GitHub
parent 1cd2a099ce
commit ed8b1f5dca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-ui/src/clients/credentials/ClientSecret.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useFormContext } from "react-hook-form"; import { useFormContext } from "react-hook-form-v7";
import { import {
Alert, Alert,
Button, Button,

27
apps/admin-ui/src/clients/credentials/Credentials.tsx
View file

@ -1,9 +1,9 @@
import { useState } from "react"; import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
import { Controller, useFormContext, useWatch } from "react-hook-form"; import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import { useTranslation } from "react-i18next"; import type CredentialRepresentation from "@keycloak/keycloak-admin-client/lib/defs/credentialRepresentation";
import { import {
Alert,
ActionGroup, ActionGroup,
Alert,
AlertVariant, AlertVariant,
Button, Button,
Card, Card,
@ -18,20 +18,21 @@ import {
Split, Split,
SplitItem, SplitItem,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { useState } from "react";
import { Controller, useFormContext, useWatch } from "react-hook-form-v7";
import { useTranslation } from "react-i18next";
import type CredentialRepresentation from "@keycloak/keycloak-admin-client/lib/defs/credentialRepresentation";
import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import { useAlerts } from "../../components/alert/Alerts"; import { useAlerts } from "../../components/alert/Alerts";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog"; import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../../components/form-access/FormAccess"; import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem"; import { HelpItem } from "../../components/help-enabler/HelpItem";
import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
import { ClientSecret } from "./ClientSecret"; import { ClientSecret } from "./ClientSecret";
import { SignedJWT } from "./SignedJWT"; import { SignedJWT } from "./SignedJWT";
import { X509 } from "./X509"; import { X509 } from "./X509";
import "./credentials.css"; import "./credentials.css";
import { FormFields } from "../ClientDetails";
type AccessToken = { type AccessToken = {
registrationAccessToken: string; registrationAccessToken: string;
@ -57,7 +58,7 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
control, control,
formState: { isDirty }, formState: { isDirty },
handleSubmit, handleSubmit,
} = useFormContext<ClientRepresentation>(); } = useFormContext<FormFields>();
const clientAuthenticatorType = useWatch({ const clientAuthenticatorType = useWatch({
control: control, control: control,
@ -158,23 +159,23 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
name="clientAuthenticatorType" name="clientAuthenticatorType"
control={control} control={control}
defaultValue="" defaultValue=""
render={({ onChange, value }) => ( render={({ field }) => (
<Select <Select
toggleId="kc-client-authenticator-type" toggleId="kc-client-authenticator-type"
required required
onToggle={isOpen} onToggle={isOpen}
onSelect={(_, value) => { onSelect={(_, value) => {
onChange(value as string); field.onChange(value as string);
isOpen(false); isOpen(false);
}} }}
selections={value} selections={field.value}
variant={SelectVariant.single} variant={SelectVariant.single}
aria-label={t("clientAuthenticator")} aria-label={t("clientAuthenticator")}
isOpen={open} isOpen={open}
> >
{providers.map((option) => ( {providers.map((option) => (
<SelectOption <SelectOption
selected={option.id === value} selected={option.id === field.value}
key={option.id} key={option.id}
value={option.id} value={option.id}
> >