Merge pull request #547 from edewit/authorisation-authentication

fixing PR comment:

src/clients/add/CapabilityConfig.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
 import {
   FormGroup,
   Switch,
@@ -8,11 +9,13 @@ import {
   GridItem,
   InputGroup,
 } from "@patternfly/react-core";
-import { Controller, useFormContext } from "react-hook-form";
+
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { ClientForm } from "../ClientDetails";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 
+import "./capability-config.css";
+
 type CapabilityConfigProps = {
   unWrap?: boolean;
   protocol?: string;
@@ -26,10 +29,15 @@ export const CapabilityConfig = ({
   const { control, watch, setValue } = useFormContext<ClientForm>();
   const protocol = type || watch("protocol");
   const clientAuthentication = watch("publicClient");
-  const clientAuthorization = watch("authorizationServicesEnabled");
+  const authorization = watch("authorizationServicesEnabled");
 
   return (
-    <FormAccess isHorizontal role="manage-clients" unWrap={unWrap}>
+    <FormAccess
+      isHorizontal
+      role="manage-clients"
+      unWrap={unWrap}
+      className="keycloak__capability-config__form"
+    >
       <>
         {protocol === "openid-connect" && (
           <>
@@ -47,7 +55,7 @@ export const CapabilityConfig = ({
             >
               <Controller
                 name="publicClient"
-                defaultValue={true}
+                defaultValue={false}
                 control={control}
                 render={({ onChange, value }) => (
                   <Switch
@@ -57,7 +65,13 @@ export const CapabilityConfig = ({
                     label={t("common:on")}
                     labelOff={t("common:off")}
                     isChecked={!value}
-                    onChange={(value) => onChange(!value)}
+                    onChange={(value) => {
+                      onChange(!value);
+                      if (!value) {
+                        setValue("authorizationServicesEnabled", false);
+                        setValue("serviceAccountsEnabled", false);
+                      }
+                    }}
                   />
                 )}
               />
@@ -85,7 +99,7 @@ export const CapabilityConfig = ({
                     name="authorizationServicesEnabled"
                     label={t("common:on")}
                     labelOff={t("common:off")}
-                    isChecked={value}
+                    isChecked={value && !clientAuthentication}
                     onChange={(value) => {
                       onChange(value);
                       if (value) {
@@ -103,7 +117,7 @@ export const CapabilityConfig = ({
               fieldId="kc-flow"
             >
               <Grid>
-                <GridItem lg={3} sm={6}>
+                <GridItem lg={4} sm={6}>
                   <Controller
                     name="standardFlowEnabled"
                     defaultValue={true}
@@ -127,7 +141,7 @@ export const CapabilityConfig = ({
                     )}
                   />
                 </GridItem>
-                <GridItem lg={9} sm={6}>
+                <GridItem lg={8} sm={6}>
                   <Controller
                     name="directAccessGrantsEnabled"
                     defaultValue={true}
@@ -151,7 +165,7 @@ export const CapabilityConfig = ({
                     )}
                   />
                 </GridItem>
-                <GridItem lg={3} sm={6}>
+                <GridItem lg={4} sm={6}>
                   <Controller
                     name="implicitFlowEnabled"
                     defaultValue={false}
@@ -175,7 +189,7 @@ export const CapabilityConfig = ({
                     )}
                   />
                 </GridItem>
-                <GridItem lg={9} sm={6}>
+                <GridItem lg={8} sm={6}>
                   <Controller
                     name="serviceAccountsEnabled"
                     defaultValue={false}
@@ -187,10 +201,13 @@ export const CapabilityConfig = ({
                           label={t("serviceAccount")}
                           id="kc-flow-service-account"
                           name="serviceAccountsEnabled"
-                          isChecked={value}
+                          isChecked={
+                            value || (clientAuthentication && authorization)
+                          }
                           onChange={onChange}
                           isDisabled={
-                            !clientAuthentication || clientAuthorization
+                            (clientAuthentication && !authorization) ||
+                            (!clientAuthentication && authorization)
                           }
                         />
                         <HelpItem

src/clients/add/NewClientForm.tsx

@@ -7,7 +7,6 @@ import {
   WizardFooter,
   WizardContextConsumer,
   Button,
-  WizardStepFunctionType,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";

src/clients/add/capability-config.css

@@ -0,0 +1,5 @@
+@media (min-width: 768px) {
+  .keycloak__capability-config__form .pf-c-form__group {
+    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
+  }
+}

src/clients/messages.json

@@ -103,8 +103,8 @@
     "authentication": "Authentication",
     "authenticationFlow": "Authentication flow",
     "standardFlow": "Standard flow",
-    "directAccess": "Direct access",
-    "serviceAccount": "Service account roles",
+    "directAccess": "Direct access grants",
+    "serviceAccount": "Service accounts",
     "enableServiceAccount": "Enable service account roles",
     "assignRolesTo": "Assign roles to {{client}} account",
     "searchByRoleName": "Search by role name",