From eb9b9b6c2b7705689a86fafdd7a0a11d889d4e0a Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 24 Jan 2025 17:09:54 +0300
Subject: [PATCH] fix dhcp form

---
 .../components/Settings/Dhcp/FormDHCPv4.tsx   | 159 ++++++++++--------
 .../components/Settings/Dhcp/FormDHCPv6.tsx   | 134 ++++++++-------
 client/src/components/Settings/Dhcp/index.tsx |   4 +-
 .../components/Settings/Encryption/Form.tsx   |   2 -
 .../components/Settings/Encryption/index.tsx  |   1 -
 5 files changed, 165 insertions(+), 135 deletions(-)

diff --git a/client/src/components/Settings/Dhcp/FormDHCPv4.tsx b/client/src/components/Settings/Dhcp/FormDHCPv4.tsx
index 729b6a80..e0aec054 100644
--- a/client/src/components/Settings/Dhcp/FormDHCPv4.tsx
+++ b/client/src/components/Settings/Dhcp/FormDHCPv4.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { UINT32_RANGE } from '../../../helpers/constants';
@@ -12,6 +12,8 @@ import {
     validateRequiredValue,
 } from '../../../helpers/validators';
 import { DhcpFormValues } from '.';
+import { Input } from '../../ui/Controls/Input';
+import { toNumber } from '../../../helpers/form';
 
 type FormDHCPv4Props = {
     processingConfig?: boolean;
@@ -30,9 +32,9 @@ const FormDHCPv4 = ({ processingConfig, ipv4placeholders, interfaces, onSubmit }
     const { t } = useTranslation();
 
     const {
-        register,
         handleSubmit,
         formState: { errors, isSubmitting },
+        control,
         watch,
     } = useFormContext<DhcpFormValues>();
 
@@ -52,121 +54,138 @@ const FormDHCPv4 = ({ processingConfig, ipv4placeholders, interfaces, onSubmit }
             <div className="row">
                 <div className="col-lg-6">
                     <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_gateway_input')}</label>
-                        <input
-                            data-testid="v4_gateway_ip"
-                            type="text"
-                            className="form-control"
-                            placeholder={t(ipv4placeholders?.gateway_ip || '')}
-                            disabled={!isInterfaceIncludesIpv4}
-                            {...register('v4.gateway_ip', {
+                        <Controller
+                            name="v4.gateway_ip"
+                            control={control}
+                            rules={{
                                 validate: {
                                     ipv4: validateIpv4,
                                     required: (value) => (isEmptyConfig ? undefined : validateRequiredValue(value)),
                                     notInRange: validateNotInRange,
                                 },
-                            })}
+                            }}
+                            render={({ field, fieldState }) => (
+                                <Input
+                                    {...field}
+                                    type="text"
+                                    data-testid="v4_gateway_ip"
+                                    label={t('dhcp_form_gateway_input')}
+                                    placeholder={t(ipv4placeholders.gateway_ip)}
+                                    error={fieldState.error?.message}
+                                    disabled={!isInterfaceIncludesIpv4}
+                                />
+                            )}
                         />
-                        {errors.v4?.gateway_ip && (
-                            <div className="form__message form__message--error">{t(errors.v4.gateway_ip.message)}</div>
-                        )}
                     </div>
 
                     <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_subnet_input')}</label>
-                        <input
-                            data-testid="v4_subnet_mask"
-                            type="text"
-                            className="form-control"
-                            placeholder={t(ipv4placeholders?.subnet_mask || '')}
-                            disabled={!isInterfaceIncludesIpv4}
-                            {...register('v4.subnet_mask', {
+                        <Controller
+                            name="v4.subnet_mask"
+                            control={control}
+                            rules={{
                                 validate: {
                                     required: (value) => (isEmptyConfig ? undefined : validateRequiredValue(value)),
                                     subnet: validateGatewaySubnetMask,
                                 },
-                            })}
+                            }}
+                            render={({ field, fieldState }) => (
+                                <Input
+                                    {...field}
+                                    type="text"
+                                    data-testid="v4_subnet_mask"
+                                    label={t('dhcp_form_subnet_input')}
+                                    placeholder={t(ipv4placeholders.subnet_mask)}
+                                    error={fieldState.error?.message}
+                                    disabled={!isInterfaceIncludesIpv4}
+                                />
+                            )}
                         />
-                        {errors.v4?.subnet_mask && (
-                            <div className="form__message form__message--error">{t(errors.v4.subnet_mask.message)}</div>
-                        )}
                     </div>
                 </div>
 
                 <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
+                    <div className="form__group mb-0">
                         <div className="row">
                             <div className="col-12">
                                 <label>{t('dhcp_form_range_title')}</label>
                             </div>
 
                             <div className="col">
-                                <input
-                                    data-testid="v4_range_start"
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t(ipv4placeholders?.range_start || '')}
-                                    disabled={!isInterfaceIncludesIpv4}
-                                    {...register('v4.range_start', {
+                                <Controller
+                                    name="v4.range_start"
+                                    control={control}
+                                    rules={{
                                         validate: {
                                             ipv4: validateIpv4,
                                             gateway: validateIpForGatewaySubnetMask,
                                         },
-                                    })}
+                                    }}
+                                    render={({ field, fieldState }) => (
+                                        <Input
+                                            {...field}
+                                            type="text"
+                                            data-testid="v4_range_start"
+                                            placeholder={t(ipv4placeholders.range_start)}
+                                            error={fieldState.error?.message}
+                                            disabled={!isInterfaceIncludesIpv4}
+                                        />
+                                    )}
                                 />
-                                {errors.v4?.range_start && (
-                                    <div className="form__message form__message--error">
-                                        {t(errors.v4.range_start.message)}
-                                    </div>
-                                )}
                             </div>
 
                             <div className="col">
-                                <input
-                                    data-testid="v4_range_end"
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t(ipv4placeholders?.range_end || '')}
-                                    disabled={!isInterfaceIncludesIpv4}
-                                    {...register('v4.range_end', {
+                                <Controller
+                                    name="v4.range_end"
+                                    control={control}
+                                    rules={{
                                         validate: {
                                             ipv4: validateIpv4,
                                             rangeEnd: validateIpv4RangeEnd,
                                             gateway: validateIpForGatewaySubnetMask,
                                         },
-                                    })}
+                                    }}
+                                    render={({ field, fieldState }) => (
+                                        <Input
+                                            {...field}
+                                            type="text"
+                                            data-testid="v4_range_end"
+                                            placeholder={t(ipv4placeholders.range_end)}
+                                            error={fieldState.error?.message}
+                                            disabled={!isInterfaceIncludesIpv4}
+                                        />
+                                    )}
                                 />
-                                {errors.v4?.range_end && (
-                                    <div className="form__message form__message--error">
-                                        {errors.v4.range_end.message}
-                                    </div>
-                                )}
                             </div>
                         </div>
                     </div>
 
                     <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_lease_title')}</label>
-                        <input
-                            data-testid="v4_lease_duration"
-                            type="number"
-                            className="form-control"
-                            placeholder={t(ipv4placeholders?.lease_duration || '')}
-                            disabled={!isInterfaceIncludesIpv4}
-                            min={1}
-                            max={UINT32_RANGE.MAX}
-                            {...register('v4.lease_duration', {
-                                valueAsNumber: true,
+                        <Controller
+                            name="v4.lease_duration"
+                            control={control}
+                            rules={{
                                 validate: {
                                     required: (value) => (isEmptyConfig ? undefined : validateRequiredValue(value)),
                                 },
-                            })}
+                            }}
+                            render={({ field, fieldState }) => (
+                                <Input
+                                    {...field}
+                                    type="number"
+                                    data-testid="v4_lease_duration"
+                                    label={t('dhcp_form_lease_title')}
+                                    placeholder={t(ipv4placeholders.lease_duration)}
+                                    error={fieldState.error?.message}
+                                    disabled={!isInterfaceIncludesIpv4}
+                                    min={1}
+                                    max={UINT32_RANGE.MAX}
+                                    onChange={(e) => {
+                                        const { value } = e.target;
+                                        field.onChange(toNumber(value));
+                                    }}
+                                />
+                            )}
                         />
-                        {errors.v4?.lease_duration && (
-                            <div className="form__message form__message--error">
-                                {t(errors.v4.lease_duration.message)}
-                            </div>
-                        )}
                     </div>
                 </div>
             </div>
diff --git a/client/src/components/Settings/Dhcp/FormDHCPv6.tsx b/client/src/components/Settings/Dhcp/FormDHCPv6.tsx
index 16facdb4..2f5cd2b8 100644
--- a/client/src/components/Settings/Dhcp/FormDHCPv6.tsx
+++ b/client/src/components/Settings/Dhcp/FormDHCPv6.tsx
@@ -1,10 +1,12 @@
 import React, { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { UINT32_RANGE } from '../../../helpers/constants';
 import { validateIpv6, validateRequiredValue } from '../../../helpers/validators';
 import { DhcpFormValues } from '.';
+import { Input } from '../../ui/Controls/Input';
+import { toNumber } from '../../../helpers/form';
 
 type FormDHCPv6Props = {
     processingConfig?: boolean;
@@ -20,9 +22,9 @@ type FormDHCPv6Props = {
 const FormDHCPv6 = ({ processingConfig, ipv6placeholders, interfaces, onSubmit }: FormDHCPv6Props) => {
     const { t } = useTranslation();
     const {
-        register,
         handleSubmit,
-        formState: { errors, isSubmitting, isValid },
+        formState: { isSubmitting, isValid },
+        control,
         watch,
     } = useFormContext<DhcpFormValues>();
 
@@ -40,54 +42,60 @@ const FormDHCPv6 = ({ processingConfig, ipv6placeholders, interfaces, onSubmit }
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="row">
                 <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
+                    <div className="form__group mb-0">
                         <div className="row">
                             <div className="col-12">
                                 <label>{t('dhcp_form_range_title')}</label>
                             </div>
 
                             <div className="col">
-                                <input
-                                    data-testid="v6_range_start"
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t(ipv6placeholders?.range_start || '')}
-                                    disabled={!isInterfaceIncludesIpv6}
-                                    {...register('v6.range_start', {
-                                        validate: {
-                                            ipv6: validateIpv6,
-                                            required: (value) =>
-                                                isInterfaceIncludesIpv6 ? undefined : validateRequiredValue(value),
-                                        },
-                                    })}
+                                <Controller
+                                    name="v6.range_start"
+                                    control={control}
+                                    rules={{
+                                        validate: isInterfaceIncludesIpv6
+                                            ? {
+                                                  ipv6: validateIpv6,
+                                                  required: validateRequiredValue,
+                                              }
+                                            : undefined,
+                                    }}
+                                    render={({ field, fieldState }) => (
+                                        <Input
+                                            {...field}
+                                            type="text"
+                                            data-testid="v6_range_start"
+                                            placeholder={t(ipv6placeholders.range_start)}
+                                            error={fieldState.error?.message}
+                                            disabled={!isInterfaceIncludesIpv6}
+                                        />
+                                    )}
                                 />
-                                {errors.v6?.range_start && (
-                                    <div className="form__message form__message--error">
-                                        {t(errors.v6.range_start.message)}
-                                    </div>
-                                )}
                             </div>
 
                             <div className="col">
-                                <input
-                                    data-testid="v6_range_end"
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t(ipv6placeholders?.range_end || '')}
-                                    disabled={!isInterfaceIncludesIpv6}
-                                    {...register('v6.range_end', {
-                                        validate: {
-                                            ipv6: validateIpv6,
-                                            required: (value) =>
-                                                isInterfaceIncludesIpv6 ? undefined : validateRequiredValue(value),
-                                        },
-                                    })}
+                                <Controller
+                                    name="v6.range_end"
+                                    control={control}
+                                    rules={{
+                                        validate: isInterfaceIncludesIpv6
+                                            ? {
+                                                  ipv6: validateIpv6,
+                                                  required: validateRequiredValue,
+                                              }
+                                            : undefined,
+                                    }}
+                                    render={({ field, fieldState }) => (
+                                        <Input
+                                            {...field}
+                                            type="text"
+                                            data-testid="v6_range_end"
+                                            placeholder={t(ipv6placeholders.range_end)}
+                                            error={fieldState.error?.message}
+                                            disabled={!isInterfaceIncludesIpv6}
+                                        />
+                                    )}
                                 />
-                                {errors.v6?.range_end && (
-                                    <div className="form__message form__message--error">
-                                        {t(errors.v6.range_end.message)}
-                                    </div>
-                                )}
                             </div>
                         </div>
                     </div>
@@ -96,26 +104,34 @@ const FormDHCPv6 = ({ processingConfig, ipv6placeholders, interfaces, onSubmit }
 
             <div className="row">
                 <div className="col-lg-6 form__group form__group--settings">
-                    <label>{t('dhcp_form_lease_title')}</label>
-                    <input
-                        data-testid="v6_lease_duration"
-                        type="number"
-                        className="form-control"
-                        placeholder={t(ipv6placeholders?.lease_duration || '')}
-                        disabled={!isInterfaceIncludesIpv6}
-                        min={1}
-                        max={UINT32_RANGE.MAX}
-                        {...register('v6.lease_duration', {
-                            valueAsNumber: true,
-                            validate: {
-                                required: (value) =>
-                                    isInterfaceIncludesIpv6 ? undefined : validateRequiredValue(value),
-                            },
-                        })}
+                    <Controller
+                        name="v6.lease_duration"
+                        control={control}
+                        rules={{
+                            validate: isInterfaceIncludesIpv6
+                                ? {
+                                      required: validateRequiredValue,
+                                  }
+                                : undefined,
+                        }}
+                        render={({ field, fieldState }) => (
+                            <Input
+                                {...field}
+                                type="number"
+                                data-testid="v6_lease_duration"
+                                label={t('dhcp_form_lease_title')}
+                                placeholder={t(ipv6placeholders.lease_duration)}
+                                error={fieldState.error?.message}
+                                disabled={!isInterfaceIncludesIpv6}
+                                min={1}
+                                max={UINT32_RANGE.MAX}
+                                onChange={(e) => {
+                                    const { value } = e.target;
+                                    field.onChange(toNumber(value));
+                                }}
+                            />
+                        )}
                     />
-                    {errors.v6?.lease_duration && (
-                        <div className="form__message form__message--error">{t(errors.v6.lease_duration.message)}</div>
-                    )}
                 </div>
             </div>
 
diff --git a/client/src/components/Settings/Dhcp/index.tsx b/client/src/components/Settings/Dhcp/index.tsx
index 1f6957e6..fc807bb2 100644
--- a/client/src/components/Settings/Dhcp/index.tsx
+++ b/client/src/components/Settings/Dhcp/index.tsx
@@ -168,7 +168,7 @@ const Dhcp = () => {
         }
     };
 
-    const handleSubmit = (values: any) => {
+    const handleSubmit = (values: DhcpFormValues) => {
         dispatch(
             setDhcpConfig({
                 interface_name,
@@ -293,7 +293,6 @@ const Dhcp = () => {
 
                     <FormProvider {...methods}>
                         <Interfaces />
-
                         <Card title={t('dhcp_ipv4_settings')} bodyType="card-body box-body--settings">
                             <div>
                                 <FormDHCPv4
@@ -304,7 +303,6 @@ const Dhcp = () => {
                                 />
                             </div>
                         </Card>
-
                         <Card title={t('dhcp_ipv6_settings')} bodyType="card-body box-body--settings">
                             <div>
                                 <FormDHCPv6
diff --git a/client/src/components/Settings/Encryption/Form.tsx b/client/src/components/Settings/Encryption/Form.tsx
index 5b76858c..97b166e8 100644
--- a/client/src/components/Settings/Encryption/Form.tsx
+++ b/client/src/components/Settings/Encryption/Form.tsx
@@ -143,7 +143,6 @@ export const Form = ({
     subject,
     warning_validation,
     onSubmit,
-    debouncedConfigValidation,
     setTlsConfig,
     validateTlsConfig,
 }: Props) => {
@@ -187,7 +186,6 @@ export const Form = ({
         if (JSON.stringify(previousValues) !== JSON.stringify(watchedValues)) {
             // TODO(ik) onChange TLS config validation
             console.log('debouncedConfigValidation');
-            debouncedConfigValidation(watchedValues);
             previousValuesRef.current = watchedValues;
         }
     }, [watchedValues]);
diff --git a/client/src/components/Settings/Encryption/index.tsx b/client/src/components/Settings/Encryption/index.tsx
index 4f3e142a..4dda55bc 100644
--- a/client/src/components/Settings/Encryption/index.tsx
+++ b/client/src/components/Settings/Encryption/index.tsx
@@ -72,7 +72,6 @@ export const Encryption = ({ encryption, setTlsConfig, validateTlsConfig }: Prop
             const submitValues = getSubmitValues(values);
 
             if (submitValues.enabled) {
-                console.log('validateTlsConfig');
                 validateTlsConfig(submitValues);
             }
         }, DEBOUNCE_TIMEOUT),