@@ -290,7 +355,7 @@ const Dhcp = () => {
processingDeleting={processingDeleting}
processingUpdating={processingUpdating}
cidr={cidr}
- gatewayIp={dhcp?.values?.v4?.gateway_ip}
+ gatewayIp={ipv4Config.gateway_ip}
/>
diff --git a/client/src/components/Settings/Dns/Access/Form.tsx b/client/src/components/Settings/Dns/Access/Form.tsx
index c81d9e861b1..6b2cc7a12c7 100644
--- a/client/src/components/Settings/Dns/Access/Form.tsx
+++ b/client/src/components/Settings/Dns/Access/Form.tsx
@@ -1,118 +1,140 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { ReactNode } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import i18next from 'i18next';
+import { CLIENT_ID_LINK } from '../../../../helpers/constants';
+import { removeEmptyLines, trimMultilineString } from '../../../../helpers/helpers';
+import { Textarea } from '../../../ui/Controls/Textarea';
-import { renderTextareaField } from '../../../../helpers/form';
-import { trimMultilineString, removeEmptyLines } from '../../../../helpers/helpers';
-import { CLIENT_ID_LINK, FORM_NAME } from '../../../../helpers/constants';
+type FormData = {
+ allowed_clients: string;
+ disallowed_clients: string;
+ blocked_hosts: string;
+};
-const fields = [
+const fields: {
+ id: keyof FormData;
+ title: string;
+ subtitle: ReactNode;
+ normalizeOnBlur: (value: string) => string;
+}[] = [
{
id: 'allowed_clients',
- title: 'access_allowed_title',
- subtitle: 'access_allowed_desc',
+ title: i18next.t('access_allowed_title'),
+ subtitle: (
+
,
+ }}>
+ access_allowed_desc
+
+ ),
normalizeOnBlur: removeEmptyLines,
},
{
id: 'disallowed_clients',
- title: 'access_disallowed_title',
- subtitle: 'access_disallowed_desc',
+ title: i18next.t('access_disallowed_title'),
+ subtitle: (
+
,
+ }}>
+ access_disallowed_desc
+
+ ),
normalizeOnBlur: trimMultilineString,
},
{
id: 'blocked_hosts',
- title: 'access_blocked_title',
- subtitle: 'access_blocked_desc',
+ title: i18next.t('access_blocked_title'),
+ subtitle: i18next.t('access_blocked_desc'),
normalizeOnBlur: removeEmptyLines,
},
];
-interface FormProps {
- handleSubmit: (...args: unknown[]) => string;
- submitting: boolean;
- invalid: boolean;
- initialValues: object;
+type FormProps = {
+ initialValues?: {
+ allowed_clients?: string;
+ disallowed_clients?: string;
+ blocked_hosts?: string;
+ };
+ onSubmit: (data: FormData) => void;
processingSet: boolean;
- t: (...args: unknown[]) => string;
- textarea?: boolean;
- allowedClients?: string;
-}
+};
-interface renderFieldProps {
- id?: string;
- title?: string;
- subtitle?: string;
- disabled?: boolean;
- processingSet?: boolean;
- normalizeOnBlur?: (...args: unknown[]) => unknown;
-}
+const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
+ const { t } = useTranslation();
-let Form = (props: FormProps) => {
- const { allowedClients, handleSubmit, submitting, invalid, processingSet } = props;
+ const {
+ control,
+ handleSubmit,
+ watch,
+ formState: { isSubmitting, isDirty },
+ } = useForm
({
+ mode: 'onBlur',
+ defaultValues: {
+ allowed_clients: initialValues?.allowed_clients || '',
+ disallowed_clients: initialValues?.disallowed_clients || '',
+ blocked_hosts: initialValues?.blocked_hosts || '',
+ },
+ });
+
+ const allowedClients = watch('allowed_clients');
const renderField = ({
id,
title,
subtitle,
- disabled = false,
- processingSet,
normalizeOnBlur,
- }: renderFieldProps) => (
-
-
+ return (
+
+
-
-
- text
-
- ),
- }}>
- {subtitle}
-
-
+
{subtitle}
-
-
- );
+
(
+