diff --git a/src/App.tsx b/src/App.tsx index b42fa6bdc9..062f4bee99 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -38,7 +38,7 @@ export const App = () => { diff --git a/src/clients/ClientList.tsx b/src/clients/ClientList.tsx index aaf612023c..0dd76f7d64 100644 --- a/src/clients/ClientList.tsx +++ b/src/clients/ClientList.tsx @@ -36,16 +36,13 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => { const { realm } = useContext(RealmContext); const [add, Alerts] = useAlerts(); - const convertClientId = (clientId: string) => - clientId.substring(0, clientId.indexOf("#")); const enabled = (): IFormatter => (data?: IFormatterValueType) => { const field = data!.toString(); - const value = convertClientId(field); - return field.indexOf("true") !== -1 ? ( - {value} - ) : ( - - {value} Disabled + const [id, clientId, disabled] = field.split("#"); + return ( + + {clientId} + {disabled !== "true" && Disabled} ); }; @@ -75,13 +72,13 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => { }; const data = clients! - .map((r) => { - r.clientId = r.clientId + "#" + r.enabled; - r.baseUrl = replaceBaseUrl(r); - return r; + .map((client) => { + client.clientId = `${client.id}#${client.clientId}#${client.enabled}`; + client.baseUrl = replaceBaseUrl(client); + return client; }) - .map((c) => { - return { cells: columns.map((col) => c[col]), client: c }; + .map((column) => { + return { cells: columns.map((col) => column[col]), client: column }; }); return ( <> @@ -103,7 +100,8 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => { title: t("common:export"), onClick: (_, rowId) => { const clientCopy = JSON.parse(JSON.stringify(data[rowId].client)); - clientCopy.clientId = convertClientId(clientCopy.clientId); + const [, orgClientId] = clientCopy.clientId.split("#"); + clientCopy.clientId = orgClientId; delete clientCopy.id; if (clientCopy.protocolMappers) { diff --git a/src/clients/ClientSettings.tsx b/src/clients/ClientSettings.tsx index 78c9f5b7e4..1e38d5e6fc 100644 --- a/src/clients/ClientSettings.tsx +++ b/src/clients/ClientSettings.tsx @@ -1,45 +1,72 @@ -import React, { useState, FormEvent } from "react"; +import React, { useContext, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { FormGroup, TextInput, Form, - Dropdown, - DropdownToggle, - DropdownItem, Switch, TextArea, PageSection, + ActionGroup, + Button, + AlertVariant, } from "@patternfly/react-core"; -import { useForm } from "react-hook-form"; +import { useParams } from "react-router-dom"; +import { Controller, useForm } from "react-hook-form"; import { ScrollForm } from "../components/scroll-form/ScrollForm"; import { ClientDescription } from "./ClientDescription"; -import { ClientRepresentation } from "./models/client-model"; import { CapabilityConfig } from "./add/CapabilityConfig"; +import { RealmContext } from "../components/realm-context/RealmContext"; +import { HttpClientContext } from "../http-service/HttpClientContext"; +import { ClientRepresentation } from "../realm/models/Realm"; +import { + convertToMultiline, + MultiLineInput, + toValue, +} from "../components/multi-line-input/MultiLineInput"; +import { useAlerts } from "../components/alert/Alerts"; -type ClientSettingsProps = { - client: ClientRepresentation; -}; - -export const ClientSettings = ({ client: clientInit }: ClientSettingsProps) => { +export const ClientSettings = () => { const { t } = useTranslation("clients"); - const [client, setClient] = useState({ ...clientInit }); - const form = useForm(); - const onChange = ( - value: string | boolean, - event: FormEvent - ) => { - const target = event.target; - const name = (target as HTMLInputElement).name; + const httpClient = useContext(HttpClientContext)!; + const { realm } = useContext(RealmContext); + const [addAlert, Alerts] = useAlerts(); - setClient({ - ...client, - [name]: value, - }); + const { id } = useParams<{ id: string }>(); + const form = useForm(); + const url = `/admin/realms/${realm}/clients/${id}`; + + useEffect(() => { + (async () => { + const fetchedClient = await httpClient.doGet(url); + if (fetchedClient.data) { + Object.entries(fetchedClient.data).map((entry) => { + if (entry[0] !== "redirectUris") { + form.setValue(entry[0], entry[1]); + } else if (entry[1] && entry[1].length > 0) { + form.setValue(entry[0], convertToMultiline(entry[1])); + } + }); + } + })(); + }, []); + + const save = async () => { + if (await form.trigger()) { + const redirectUris = toValue(form.getValues()["redirectUris"]); + try { + httpClient.doPut(url, { ...form.getValues(), redirectUris }); + addAlert(t("clientSaveSuccess"), AlertVariant.success); + } catch (error) { + addAlert(`${t("clientSaveError")} '${error}'`, AlertVariant.danger); + } + } }; + return ( + { t("loginSettings"), ]} > -
- - +
@@ -60,64 +85,55 @@ export const ClientSettings = ({ client: clientInit }: ClientSettingsProps) => { type="text" id="kc-root-url" name="rootUrl" - value={client.rootUrl} - onChange={onChange} + ref={form.register} /> - +
- - {}}> - {t("loginTheme")} - - } - dropdownItems={[ - Link, - , - ]} - /> - - ( + + )} /> - ( + + )} /> {