added validated property to fields instead of only on FormGroup (#205)
* added validated to fields to make them nicer * removed console log
This commit is contained in:
parent
54550fa2f5
commit
c781d86026
8 changed files with 52 additions and 17 deletions
|
@ -49,7 +49,6 @@ export const PageNav: React.FunctionComponent = () => {
|
|||
type LeftNavProps = { title: string; path: string };
|
||||
const LeftNav = ({ title, path }: LeftNavProps) => {
|
||||
const route = routes(() => {}).find((route) => route.path === path);
|
||||
console.log(`hasAccess(${route!.access})=` + hasAccess(route!.access));
|
||||
if (!route || !hasAccess(route.access)) return <></>;
|
||||
|
||||
return (
|
||||
|
|
|
@ -16,6 +16,7 @@ import {
|
|||
Split,
|
||||
SplitItem,
|
||||
Divider,
|
||||
ValidatedOptions,
|
||||
} from "@patternfly/react-core";
|
||||
|
||||
import { useAlerts } from "../../components/alert/Alerts";
|
||||
|
@ -173,7 +174,9 @@ export const RoleMappingForm = ({ clientScopeId }: RoleMappingFormProps) => {
|
|||
}
|
||||
fieldId="name"
|
||||
isRequired
|
||||
validated={errors.name ? "error" : "default"}
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
helperTextInvalid={t("common:required")}
|
||||
>
|
||||
<TextInput
|
||||
|
@ -181,6 +184,9 @@ export const RoleMappingForm = ({ clientScopeId }: RoleMappingFormProps) => {
|
|||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
|
|
|
@ -15,6 +15,7 @@ import {
|
|||
Tabs,
|
||||
TabTitleText,
|
||||
TextInput,
|
||||
ValidatedOptions,
|
||||
} from "@patternfly/react-core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
@ -125,7 +126,11 @@ export const ClientScopeForm = () => {
|
|||
}
|
||||
fieldId="kc-name"
|
||||
isRequired
|
||||
validated={errors.name ? "error" : "default"}
|
||||
validated={
|
||||
errors.name
|
||||
? ValidatedOptions.error
|
||||
: ValidatedOptions.default
|
||||
}
|
||||
helperTextInvalid={t("common:required")}
|
||||
>
|
||||
<TextInput
|
||||
|
@ -133,6 +138,11 @@ export const ClientScopeForm = () => {
|
|||
type="text"
|
||||
id="kc-name"
|
||||
name="name"
|
||||
validated={
|
||||
errors.name
|
||||
? ValidatedOptions.error
|
||||
: ValidatedOptions.default
|
||||
}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { FormGroup, TextInput } from "@patternfly/react-core";
|
||||
import { FormGroup, TextInput, ValidatedOptions } from "@patternfly/react-core";
|
||||
import { UseFormMethods } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FormAccess } from "../components/form-access/FormAccess";
|
||||
|
@ -17,7 +17,9 @@ export const ClientDescription = ({ form }: ClientDescriptionProps) => {
|
|||
label={t("clientID")}
|
||||
fieldId="kc-client-id"
|
||||
helperTextInvalid={t("common:required")}
|
||||
validated={errors.clientId ? "error" : "default"}
|
||||
validated={
|
||||
errors.clientId ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
isRequired
|
||||
>
|
||||
<TextInput
|
||||
|
@ -25,6 +27,9 @@ export const ClientDescription = ({ form }: ClientDescriptionProps) => {
|
|||
type="text"
|
||||
id="kc-client-id"
|
||||
name="clientId"
|
||||
validated={
|
||||
errors.clientId ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={t("name")} fieldId="kc-name">
|
||||
|
|
|
@ -52,6 +52,7 @@
|
|||
"userFederation": "User federation",
|
||||
|
||||
"required": "Required field",
|
||||
"maxLength": "Max length {{length}}",
|
||||
|
||||
"createRealm": "Create Realm"
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ export class WhoAmI {
|
|||
) {
|
||||
if (this.me !== undefined && this.me.locale) {
|
||||
i18n.changeLanguage(this.me.locale, (error) => {
|
||||
if (error) console.log("Unable to set locale to " + this.me?.locale);
|
||||
if (error) console.error("Unable to set locale to", this.me?.locale);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@ import {
|
|||
Modal,
|
||||
ModalVariant,
|
||||
TextInput,
|
||||
ValidatedOptions,
|
||||
} from "@patternfly/react-core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { HttpClientContext } from "../context/http-service/HttpClientContext";
|
||||
|
@ -80,7 +81,9 @@ export const GroupsCreateModal = ({
|
|||
label={t("name")}
|
||||
fieldId="group-id"
|
||||
helperTextInvalid={t("common:required")}
|
||||
validated={errors.name ? "error" : "default"}
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
isRequired
|
||||
>
|
||||
<TextInput
|
||||
|
@ -90,6 +93,9 @@ export const GroupsCreateModal = ({
|
|||
name="name"
|
||||
value={createGroupName}
|
||||
onChange={valueChange}
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
|
|
@ -18,7 +18,7 @@ import {
|
|||
import { RoleRepresentation } from "../../model/role-model";
|
||||
import { HttpClientContext } from "../../context/http-service/HttpClientContext";
|
||||
import { useAlerts } from "../../components/alert/Alerts";
|
||||
import { Controller, useForm, FieldErrors } from "react-hook-form";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { RealmContext } from "../../context/realm-context/RealmContext";
|
||||
|
||||
export const NewRoleForm = () => {
|
||||
|
@ -40,8 +40,6 @@ export const NewRoleForm = () => {
|
|||
}
|
||||
};
|
||||
|
||||
console.log(errors);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageSection variant="light">
|
||||
|
@ -52,24 +50,35 @@ export const NewRoleForm = () => {
|
|||
<Divider />
|
||||
<PageSection variant="light">
|
||||
<Form isHorizontal onSubmit={handleSubmit(save)}>
|
||||
<FormGroup label={t("roleName")} isRequired fieldId="kc-role-name">
|
||||
<FormGroup
|
||||
label={t("roleName")}
|
||||
isRequired
|
||||
fieldId="kc-role-name"
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
helperTextInvalid={t("common:required")}
|
||||
>
|
||||
<TextInput
|
||||
isRequired
|
||||
type="text"
|
||||
id="kc-role-name"
|
||||
name="name"
|
||||
ref={register({ required: true })}
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("description")}
|
||||
fieldId="kc-role-description"
|
||||
validated={
|
||||
Object.keys(errors).length != 0
|
||||
errors.description
|
||||
? ValidatedOptions.error
|
||||
: ValidatedOptions.default
|
||||
}
|
||||
helperTextInvalid={"Max length 255"}
|
||||
helperTextInvalid={t("common:maxLength", { length: 255 })}
|
||||
>
|
||||
<Controller
|
||||
name="description"
|
||||
|
@ -80,10 +89,9 @@ export const NewRoleForm = () => {
|
|||
<TextArea
|
||||
type="text"
|
||||
validated={
|
||||
errors.description &&
|
||||
errors.description.type === "maxLength"
|
||||
? "error"
|
||||
: "default"
|
||||
errors.description
|
||||
? ValidatedOptions.error
|
||||
: ValidatedOptions.default
|
||||
}
|
||||
id="kc-role-description"
|
||||
value={value}
|
||||
|
|
Loading…
Reference in a new issue