fixed create client scope header (#155)
This commit is contained in:
Erik Jan de Wit
GitHub
parent
0aa63ddfbb
commit
b49d07e18c
3 changed files with 170 additions and 152 deletions
|
|
@ -56,7 +56,11 @@ export const ClientScopesSection = () => {
|
|||
inputGroupPlaceholder={t("searchFor")}
|
||||
inputGroupOnChange={filterData}
|
||||
toolbarItem={
|
||||
<Button onClick={() => history.push("/add-client-scopes")}>
|
||||
<Button
|
||||
onClick={() =>
|
||||
history.push("/client-scopes/add-client-scopes/")
|
||||
}
|
||||
>
|
||||
{t("createClientScope")}
|
||||
</Button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useContext, useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import {
|
||||
ActionGroup,
|
||||
AlertVariant,
|
||||
|
|
@ -21,13 +22,15 @@ import { HttpClientContext } from "../../context/http-service/HttpClientContext"
|
|||
import { RealmContext } from "../../context/realm-context/RealmContext";
|
||||
import { useAlerts } from "../../components/alert/Alerts";
|
||||
import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
|
||||
import { ViewHeader } from "../../components/view-header/ViewHeader";
|
||||
|
||||
export const NewClientScopeForm = () => {
|
||||
const { t } = useTranslation("client-scopes");
|
||||
const helpText = useTranslation("client-scopes-help").t;
|
||||
const { register, control, handleSubmit } = useForm<
|
||||
const { register, control, handleSubmit, errors } = useForm<
|
||||
ClientScopeRepresentation
|
||||
>();
|
||||
const history = useHistory();
|
||||
|
||||
const httpClient = useContext(HttpClientContext)!;
|
||||
const { realm } = useContext(RealmContext);
|
||||
|
|
@ -58,156 +61,167 @@ export const NewClientScopeForm = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<PageSection variant="light">
|
||||
<Form isHorizontal onSubmit={handleSubmit(save)}>
|
||||
<FormGroup
|
||||
label={t("name")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("name")}
|
||||
forLabel={t("name")}
|
||||
forID="kc-name"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-name"
|
||||
isRequired
|
||||
>
|
||||
<TextInput
|
||||
ref={register({ required: true })}
|
||||
type="text"
|
||||
id="kc-name"
|
||||
name="name"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("description")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("description")}
|
||||
forLabel={t("description")}
|
||||
forID="kc-description"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-description"
|
||||
>
|
||||
<TextInput
|
||||
ref={register}
|
||||
type="text"
|
||||
id="kc-description"
|
||||
name="description"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("protocol")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("protocol")}
|
||||
forLabel="protocol"
|
||||
forID="kc-protocol"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-protocol"
|
||||
>
|
||||
<Controller
|
||||
name="protocol"
|
||||
defaultValue=""
|
||||
control={control}
|
||||
render={({ onChange, value }) => (
|
||||
<Select
|
||||
toggleId="kc-protocol"
|
||||
required
|
||||
onToggle={() => isOpen(!open)}
|
||||
onSelect={(_, value, isPlaceholder) => {
|
||||
onChange(isPlaceholder ? "" : (value as string));
|
||||
isOpen(false);
|
||||
}}
|
||||
selections={value}
|
||||
variant={SelectVariant.single}
|
||||
aria-label={t("selectEncryptionType")}
|
||||
placeholderText={t("common:selectOne")}
|
||||
isOpen={open}
|
||||
>
|
||||
{providers.map((option) => (
|
||||
<SelectOption
|
||||
selected={option === value}
|
||||
key={option}
|
||||
value={option}
|
||||
/>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
hasNoPaddingTop
|
||||
label={t("displayOnConsentScreen")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("displayOnConsentScreen")}
|
||||
forLabel={t("displayOnConsentScreen")}
|
||||
forID="kc-display.on.consent.screen"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-display.on.consent.screen"
|
||||
>
|
||||
<Controller
|
||||
name="attributes.display_on_consent_screen"
|
||||
control={control}
|
||||
defaultValue={false}
|
||||
render={({ onChange, value }) => (
|
||||
<Switch
|
||||
id="kc-display.on.consent.screen"
|
||||
label={t("common:on")}
|
||||
labelOff={t("common:off")}
|
||||
isChecked={value}
|
||||
onChange={onChange}
|
||||
<>
|
||||
<ViewHeader
|
||||
titleKey="client-scopes:createClientScope"
|
||||
subKey="client-scopes:clientScopeExplain"
|
||||
/>
|
||||
|
||||
<PageSection variant="light">
|
||||
<Form isHorizontal onSubmit={handleSubmit(save)}>
|
||||
<FormGroup
|
||||
label={t("name")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("name")}
|
||||
forLabel={t("name")}
|
||||
forID="kc-name"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("consentScreenText")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("consentScreenText")}
|
||||
forLabel={t("consentScreenText")}
|
||||
forID="kc-consent-screen-text"
|
||||
}
|
||||
fieldId="kc-name"
|
||||
isRequired
|
||||
validated={errors.name ? "error" : "default"}
|
||||
helperTextInvalid={t("common:required")}
|
||||
>
|
||||
<TextInput
|
||||
ref={register({ required: true })}
|
||||
type="text"
|
||||
id="kc-name"
|
||||
name="name"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-consent-screen-text"
|
||||
>
|
||||
<TextInput
|
||||
ref={register}
|
||||
type="text"
|
||||
id="kc-consent-screen-text"
|
||||
name="attributes.consent_screen_text"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("guiOrder")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("guiOrder")}
|
||||
forLabel={t("guiOrder")}
|
||||
forID="kc-gui-order"
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("description")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("description")}
|
||||
forLabel={t("description")}
|
||||
forID="kc-description"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-description"
|
||||
>
|
||||
<TextInput
|
||||
ref={register}
|
||||
type="text"
|
||||
id="kc-description"
|
||||
name="description"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-gui-order"
|
||||
>
|
||||
<TextInput
|
||||
ref={register}
|
||||
type="number"
|
||||
id="kc-gui-order"
|
||||
name="attributes.gui_order"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button variant="primary" type="submit">
|
||||
{t("common:save")}
|
||||
</Button>
|
||||
<Button variant="link">{t("common:cancel")}</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</PageSection>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("protocol")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("protocol")}
|
||||
forLabel="protocol"
|
||||
forID="kc-protocol"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-protocol"
|
||||
>
|
||||
<Controller
|
||||
name="protocol"
|
||||
defaultValue=""
|
||||
control={control}
|
||||
render={({ onChange, value }) => (
|
||||
<Select
|
||||
toggleId="kc-protocol"
|
||||
required
|
||||
onToggle={() => isOpen(!open)}
|
||||
onSelect={(_, value, isPlaceholder) => {
|
||||
onChange(isPlaceholder ? "" : (value as string));
|
||||
isOpen(false);
|
||||
}}
|
||||
selections={value}
|
||||
variant={SelectVariant.single}
|
||||
aria-label={t("selectEncryptionType")}
|
||||
placeholderText={t("common:selectOne")}
|
||||
isOpen={open}
|
||||
>
|
||||
{providers.map((option) => (
|
||||
<SelectOption
|
||||
selected={option === value}
|
||||
key={option}
|
||||
value={option}
|
||||
/>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
hasNoPaddingTop
|
||||
label={t("displayOnConsentScreen")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("displayOnConsentScreen")}
|
||||
forLabel={t("displayOnConsentScreen")}
|
||||
forID="kc-display.on.consent.screen"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-display.on.consent.screen"
|
||||
>
|
||||
<Controller
|
||||
name="attributes.display_on_consent_screen"
|
||||
control={control}
|
||||
defaultValue={false}
|
||||
render={({ onChange, value }) => (
|
||||
<Switch
|
||||
id="kc-display.on.consent.screen"
|
||||
label={t("common:on")}
|
||||
labelOff={t("common:off")}
|
||||
isChecked={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("consentScreenText")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("consentScreenText")}
|
||||
forLabel={t("consentScreenText")}
|
||||
forID="kc-consent-screen-text"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-consent-screen-text"
|
||||
>
|
||||
<TextInput
|
||||
ref={register}
|
||||
type="text"
|
||||
id="kc-consent-screen-text"
|
||||
name="attributes.consent_screen_text"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("guiOrder")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={helpText("guiOrder")}
|
||||
forLabel={t("guiOrder")}
|
||||
forID="kc-gui-order"
|
||||
/>
|
||||
}
|
||||
fieldId="kc-gui-order"
|
||||
>
|
||||
<TextInput
|
||||
ref={register}
|
||||
type="number"
|
||||
id="kc-gui-order"
|
||||
name="attributes.gui_order"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button variant="primary" type="submit">
|
||||
{t("common:save")}
|
||||
</Button>
|
||||
<Button variant="link" onClick={() => history.push("..")}>
|
||||
{t("common:cancel")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</PageSection>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@ export const routes = (t: TFunction) => [
|
|||
{
|
||||
path: "/client-scopes",
|
||||
component: ClientScopesSection,
|
||||
breadcrumb: t("clientScopeList"),
|
||||
breadcrumb: t("client-scopes:clientScopeList"),
|
||||
},
|
||||
{
|
||||
path: "/add-client-scopes",
|
||||
path: "/client-scopes/add-client-scopes",
|
||||
component: NewClientScopeForm,
|
||||
breadcrumb: t("client-scopes:createClientScope"),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue