Added labels for loa properties (#2411)

src/authentication/components/ExecutionConfigModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import {
   ActionGroup,
   AlertVariant,
@@ -22,9 +22,11 @@ import type { ExpandableExecution } from "../execution-model";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 
 type ExecutionConfigModalForm = {
-  [index: string]: string;
+  alias: string;
+  config: { [index: string]: string };
 };
 
 type ExecutionConfigModalProps = {
@@ -43,12 +45,13 @@ export const ExecutionConfigModal = ({
   const [configDescription, setConfigDescription] =
     useState<AuthenticatorConfigInfoRepresentation>();
 
+  const form = useForm<ExecutionConfigModalForm>();
   const {
     register,
     setValue,
     handleSubmit,
     formState: { errors },
-  } = useForm<ExecutionConfigModalForm>();
+  } = form;
 
   const setupForm = (
     configDescription: AuthenticatorConfigInfoRepresentation,
@@ -57,7 +60,7 @@ export const ExecutionConfigModal = ({
     configDescription.properties!.map(
       (property: ConfigPropertyRepresentation) => {
         setValue(
-          property.name!,
+          `config.${property.name}`,
           config?.config?.[property.name!] || property.defaultValue || ""
         );
       }
@@ -98,20 +101,20 @@ export const ExecutionConfigModal = ({
       if (config) {
         const newConfig = {
           ...config,
-          config: changedConfig,
+          config: changedConfig.config,
         };
         await adminClient.authenticationManagement.updateConfig(newConfig);
-        setConfig(newConfig);
+        setConfig({ ...newConfig.config });
       } else {
         const newConfig = {
           id: execution.id!,
           alias: changedConfig.alias,
-          config: changedConfig,
+          config: changedConfig.config,
         };
         const { id } = await adminClient.authenticationManagement.createConfig(
           newConfig
         );
-        setConfig({ ...newConfig, id });
+        setConfig({ ...newConfig.config, id, alias: newConfig.alias });
       }
       addAlert(t("configSaveSuccess"), AlertVariant.success);
       setShow(false);
@@ -166,26 +169,11 @@ export const ExecutionConfigModal = ({
                 }
               />
             </FormGroup>
-            {configDescription.properties?.map((property) => (
+            <FormProvider {...form}>
-              <FormGroup
+              <DynamicComponents
-                key={property.name}
+                properties={configDescription.properties || []}
-                label={property.label}
+              />
-                fieldId={property.name!}
+            </FormProvider>
-                labelIcon={
-                  <HelpItem
-                    helpText={property.helpText}
-                    fieldLabelId={property.name!}
-                  />
-                }
-              >
-                <TextInput
-                  type="text"
-                  id={property.name}
-                  name={property.name}
-                  ref={register}
-                />
-              </FormGroup>
-            ))}
             <ActionGroup>
               <Button data-testid="save" variant="primary" type="submit">
                 {t("common:save")}

src/components/dynamic/labels.ts

@@ -7,6 +7,12 @@ export default {
     roleGroup: "Use a realm role from:",
     clientGroup: "Use a client role from:",
     selectGroup: "Select group",
+    "loa-condition-level": "Level of Authentication (LoA)",
+    "loa-condition-level.tooltip":
+      "The number value, usually 1 or bigger, which specifies level of authentication. Condition evaluates to true if user does not yet have this authentication level and this level is requested. This level of authentication will be set to the session after the subflow, where this condition is configured, is successfully finished.",
+    "loa-max-age": "Max Age",
+    "loa-max-age.tooltip":
+      "Maximum age in seconds for which this level is considered valid after successful authentication. For example if this is set to 300 and user authenticated with this level and then tries to authenticate again in less than 300 second, then this level will be automatically considered as authenticated without need of user to re-authenticate. If it is set to 0, then the authenticated level is valid just for this authentication and next authentication will always need to re-authenticate. Default value is 10 hours, which is same as default SSO session timeout and it means that level is valid until end of SSO session and user doesn't need to re-authenticate.",
     usermodel: {
       prop: {
         label: "Property",