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:
Erik Jan de Wit 2020-11-09 20:49:32 +01:00 committed by GitHub
parent 54550fa2f5
commit c781d86026
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 52 additions and 17 deletions

View file

@ -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 (

View file

@ -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

View file

@ -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

View file

@ -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">

View file

@ -52,6 +52,7 @@
"userFederation": "User federation",
"required": "Required field",
"maxLength": "Max length {{length}}",
"createRealm": "Create Realm"
}

View file

@ -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);
});
}
}

View file

@ -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>

View file

@ -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}