add tooltips for client login fields (#1184)

src/clients/ClientSettings.tsx

@@ -176,7 +176,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
                 {/* The type for the children of Select are incorrect, so we need a fragment here. */}
                 {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
                 <>
-                  {loginThemes?.map((theme) => (
+                  {loginThemes.map((theme) => (
                     <SelectOption
                       selected={theme.name === value}
                       key={theme.name}
@@ -190,6 +190,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
         </FormGroup>
         <FormGroup
           label={t("consentRequired")}
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:consentRequired"
+              forLabel={t("consentRequired")}
+              forID="kc-consent-switch"
+            />
+          }
           fieldId="kc-consent"
           hasNoPaddingTop
         >
@@ -210,6 +217,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
         </FormGroup>
         <FormGroup
           label={t("displayOnClient")}
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:displayOnClient"
+              forLabel={t("displayOnClient")}
+              forID="kc-display-on-client-switch"
+            />
+          }
           fieldId="kc-display-on-client"
           hasNoPaddingTop
         >
@@ -231,6 +245,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
         </FormGroup>
         <FormGroup
           label={t("consentScreenText")}
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:consentScreenText"
+              forLabel={t("consentScreenText")}
+              forID="kc-consent-screen-text"
+            />
+          }
           fieldId="kc-consent-screen-text"
         >
           <TextArea

src/clients/help.ts

@@ -124,5 +124,10 @@ export default {
     keyAlias: "Archive alias for your private key and certificate.",
     keyPassword: "Password to access the private key in the archive",
     storePassword: "Password to access the archive itself",
+    consentRequired: "If enabled, users have to consent to client access.",
+    displayOnClient:
+      "Applicable only if 'Consent Required' is on for this client. If this switch is off, the consent screen will contain just the consents corresponding to configured client scopes. If on, there will be also one item on the consent screen about this client itself.",
+    consentScreenText:
+      "Applicable only if 'Display Client On Consent Screen' is on for this client. Contains the text which will be on the consent screen about permissions specific just for this client.",
   },
 };