add FormAccess

src/user-federation/LdapSettingsAdvanced.tsx

@@ -1,22 +1,20 @@
-import { Form, FormGroup, Switch } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsAdvanced = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
-  const { handleSubmit, control } = useForm<ComponentRepresentation>();
+  const { control } = useForm<ComponentRepresentation>();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
 
   return (
     <>
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("enableLdapv3Password")}
           labelIcon={
@@ -103,9 +101,7 @@ export const LdapSettingsAdvanced = () => {
             )}
           ></Controller>
         </FormGroup>
-
+      </FormAccess>
-        <button type="submit">Test submit</button>
-      </Form>
     </>
   );
 };

src/user-federation/LdapSettingsCache.tsx

@@ -1,5 +1,4 @@
 import {
-  Form,
   FormGroup,
   Select,
   SelectOption,
@@ -11,6 +10,7 @@ import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsCache = () => {
   const { t } = useTranslation("user-federation");
@@ -27,17 +27,11 @@ export const LdapSettingsCache = () => {
     isEvictionMinuteDropdownOpen,
     setIsEvictionMinuteDropdownOpen,
   ] = useState(false);
+
   const [isEvictionDayDropdownOpen, setIsEvictionDayDropdownOpen] = useState(
     false
   );
 
-  const { handleSubmit, control, register } = useForm<
-    ComponentRepresentation
-  >();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
-
   const hourOptions = [
     <SelectOption key={0} value={t("common:selectOne")} isPlaceholder />,
   ];
@@ -52,10 +46,12 @@ export const LdapSettingsCache = () => {
     minuteOptions.push(<SelectOption key={index + 1} value={index} />);
   }
 
+  const { control, register } = useForm<ComponentRepresentation>();
+
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("cachePolicy")}
           labelIcon={
@@ -241,9 +237,7 @@ export const LdapSettingsCache = () => {
             ref={register}
           />
         </FormGroup>
-
+      </FormAccess>
-        <button type="submit">Test submit</button>
-      </Form>
     </>
   );
 };

src/user-federation/LdapSettingsConnection.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  Form,
   FormGroup,
   InputGroup,
   Select,
@@ -15,6 +14,7 @@ import { HelpItem } from "../components/help-enabler/HelpItem";
 import { Controller, useForm } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { EyeIcon } from "@patternfly/react-icons";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsConnection = () => {
   const { t } = useTranslation("user-federation");
@@ -24,18 +24,15 @@ export const LdapSettingsConnection = () => {
     isTruststoreSpiDropdownOpen,
     setIsTruststoreSpiDropdownOpen,
   ] = useState(false);
+
   const [isBindTypeDropdownOpen, setIsBindTypeDropdownOpen] = useState(false);
-  const { register, handleSubmit, control } = useForm<
+
-    ComponentRepresentation
+  const { register, control } = useForm<ComponentRepresentation>();
-  >();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
 
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("connectionURL")}
           labelIcon={
@@ -249,9 +246,9 @@ export const LdapSettingsConnection = () => {
           isRequired
         >
           <InputGroup>
-            <TextInput // TODO: Make password field
+            <TextInput // TODO: Make password field switch to type=text with button
               isRequired
-              type="text"
+              type="password"
               id="kc-console-bind-credentials"
               name="bindCredentials"
               ref={register}
@@ -266,13 +263,13 @@ export const LdapSettingsConnection = () => {
         </FormGroup>
 
         <FormGroup fieldId="kc-test-button">
+          {" "}
+          {/* TODO: whatever this button is supposed to do */}
           <Button variant="secondary" id="kc-test-button">
             Test
           </Button>
         </FormGroup>
-
+      </FormAccess>
-        <button type="submit">Test Submit</button>
-      </Form>
     </>
   );
 };

src/user-federation/LdapSettingsGeneral.tsx

@@ -1,5 +1,4 @@
 import {
-  Form,
   FormGroup,
   Select,
   SelectOption,
@@ -11,23 +10,20 @@ import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsGeneral = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
   const [isVendorDropdownOpen, setIsVendorDropdownOpen] = useState(false);
-  const { register, handleSubmit, control } = useForm<
+
-    ComponentRepresentation
+  const { register, control } = useForm<ComponentRepresentation>();
-  >();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
 
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("consoleDisplayName")}
           labelIcon={
@@ -90,8 +86,7 @@ export const LdapSettingsGeneral = () => {
             )}
           ></Controller>
         </FormGroup>
-        <button type="submit">Test submit</button>
+      </FormAccess>
-      </Form>
     </>
   );
 };

src/user-federation/LdapSettingsKerberosIntegration.tsx

@@ -1,23 +1,21 @@
-import { Form, FormGroup, Switch } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsKerberosIntegration = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
-  const { handleSubmit, control } = useForm<ComponentRepresentation>();
+  const { control } = useForm<ComponentRepresentation>();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
 
   return (
     <>
       {/* Kerberos integration */}
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("allowKerberosAuthentication")}
           labelIcon={
@@ -75,9 +73,7 @@ export const LdapSettingsKerberosIntegration = () => {
             )}
           ></Controller>
         </FormGroup>
-
+      </FormAccess>
-        <button type="submit">Test submit</button>
-      </Form>
     </>
   );
 };

src/user-federation/LdapSettingsSearching.tsx

@@ -1,5 +1,4 @@
 import {
-  Form,
   FormGroup,
   Select,
   SelectOption,
@@ -12,31 +11,29 @@ import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsSearching = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
   const [isEditModeDropdownOpen, setIsEditModeDropdownOpen] = useState(false);
+
   const [
     isUserLdapFilterModeDropdownOpen,
     setIsUserLdapFilterModeDropdownOpen,
   ] = useState(false);
+
   const [isSearchScopeDropdownOpen, setIsSearchScopeDropdownOpen] = useState(
     false
   );
 
-  const { register, handleSubmit, control } = useForm<
+  const { register, control } = useForm<ComponentRepresentation>();
-    ComponentRepresentation
-  >();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
 
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("editMode")}
           labelIcon={
@@ -308,9 +305,7 @@ export const LdapSettingsSearching = () => {
             )}
           ></Controller>
         </FormGroup>
-
+      </FormAccess>
-        <button type="submit">Test Submit</button>
-      </Form>
     </>
   );
 };

src/user-federation/LdapSettingsSynchronization.tsx

@@ -1,25 +1,21 @@
-import { Form, FormGroup, Switch, TextInput } from "@patternfly/react-core";
+import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+import { FormAccess } from "../components/form-access/FormAccess";
 
 export const LdapSettingsSynchronization = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
-  const { register, handleSubmit, control } = useForm<
+  const { register, control } = useForm<ComponentRepresentation>();
-    ComponentRepresentation
-  >();
-  const onSubmit = (data: ComponentRepresentation) => {
-    console.log(data);
-  };
 
   return (
     <>
       {/* Synchronization settings */}
-      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
+      <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("importUsers")}
           labelIcon={
@@ -121,8 +117,7 @@ export const LdapSettingsSynchronization = () => {
             )}
           ></Controller>
         </FormGroup>
-        <button type="submit">Test submit</button>
+      </FormAccess>
-      </Form>
     </>
   );
 };