Pull request 2322: ADG-9415

Merge in DNS/adguard-home from ADG-9415 to master

Squashed commit of the following:

commit 76bf99499a
Merge: 29529970a 0389515ee
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Feb 26 18:31:41 2025 +0300

    Merge branch 'master' into ADG-9415

commit 29529970a3
Merge: b49790daf 782a1a982
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Mon Feb 24 15:44:38 2025 +0300

    Merge branch 'master' into ADG-9415

commit b49790daf8
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 24 15:30:18 2025 +0300

    fix default lease duration value

commit cb307472ec
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 24 10:35:26 2025 +0300

    fix default response status

commit 115e743e1a
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 24 10:32:46 2025 +0300

    fix upstream description

commit 26b0eddaca
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Feb 18 17:40:41 2025 +0300

    use const for test config file

commit 58faa7c537
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Feb 18 17:31:04 2025 +0300

    fix install config

commit 0a3346d911
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Feb 17 15:25:23 2025 +0300

    fix install check config

commit 17c4c26ea8
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Feb 14 17:18:20 2025 +0300

    fix query log

commit 14a2685ae3
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Feb 14 15:52:36 2025 +0300

    fix dhcp initial values

commit e7a8db7afd
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Feb 14 14:37:24 2025 +0300

    fix encryption form values

commit 1c8917f7ac
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Feb 14 14:07:29 2025 +0300

    fix blocked services submit

commit 4dfa536cea
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Feb 14 13:50:47 2025 +0300

    dns config ip validation

commit 4fee83fe13
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Feb 12 17:49:54 2025 +0300

    add playwright warning

commit 8c2f36e7a6
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Feb 11 18:36:18 2025 +0300

    fix config file name

commit 83db5f33dc
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Feb 11 16:16:43 2025 +0300

    temp config file

commit 9080c1620f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Feb 11 15:01:46 2025 +0300

    update readme

commit ee1520307f
Merge: fd12e33c0 2fe2d254b
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Feb 11 14:44:06 2025 +0300

    Merge branch 'master' into ADG-9415

commit fd12e33c06
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Feb 10 10:29:43 2025 +0100

    added typecheck on build, fixed eslint

commit b3849eebc4
Merge: 225167a8b 9bf3ee128
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Feb 10 09:43:32 2025 +0100

    Merge branch 'ADG-9415' of https://bit.int.agrd.dev/scm/dns/adguard-home into ADG-9415

... and 94 more commits

client/src/components/ui/Checkbox.tsx

@@ -1,59 +0,0 @@
-import React, { Component } from 'react';
-import { withTranslation } from 'react-i18next';
-
-import './Checkbox.css';
-
-interface CheckboxProps {
-    title: string;
-    subtitle: string;
-    enabled: boolean;
-    handleChange: (...args: unknown[]) => unknown;
-    disabled?: boolean;
-    t?: (...args: unknown[]) => string;
-}
-
-class Checkbox extends Component<CheckboxProps> {
-    render() {
-        const {
-            title,
-
-            subtitle,
-
-            enabled,
-
-            handleChange,
-
-            disabled,
-
-            t,
-        } = this.props;
-        return (
-            <div className="form__group form__group--checkbox">
-                <label className="checkbox checkbox--settings">
-                    <span className="checkbox__marker" />
-
-                    <input
-                        type="checkbox"
-                        className="checkbox__input"
-                        onChange={handleChange}
-                        checked={enabled}
-                        disabled={disabled}
-                    />
-
-                    <span className="checkbox__label">
-                        <span className="checkbox__label-text">
-                            <span className="checkbox__label-title">{t(title)}</span>
-
-                            <span
-                                className="checkbox__label-subtitle"
-                                dangerouslySetInnerHTML={{ __html: t(subtitle) }}
-                            />
-                        </span>
-                    </span>
-                </label>
-            </div>
-        );
-    }
-}
-
-export default withTranslation()(Checkbox);

client/src/components/ui/Controls/Checkbox/index.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import './checkbox.css';
+
+type Props = {
+    title: string;
+    subtitle?: ReactNode;
+    value: boolean;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+    error?: string;
+    onChange: (value: boolean) => void;
+    onBlur?: () => void;
+};
+
+export const Checkbox = forwardRef<HTMLInputElement, Props>(
+    (
+        { title, subtitle, value, name, disabled, error, className = 'checkbox--form', onChange, onBlur, ...rest },
+        ref,
+    ) => (
+        <>
+            <label className={clsx('checkbox', className)}>
+                <span className="checkbox__marker" />
+                <input
+                    name={name}
+                    type="checkbox"
+                    className="checkbox__input"
+                    disabled={disabled}
+                    checked={value}
+                    onChange={(e) => onChange(e.target.checked)}
+                    onBlur={onBlur}
+                    ref={ref}
+                    {...rest}
+                />
+                <span className="checkbox__label">
+                    <span className="checkbox__label-text checkbox__label-text--long">
+                        <span className="checkbox__label-title">{title}</span>
+
+                        {subtitle && <span className="checkbox__label-subtitle">{subtitle}</span>}
+                    </span>
+                </span>
+            </label>
+            {error && <div className="form__message form__message--error">{error}</div>}
+        </>
+    ),
+);
+
+Checkbox.displayName = 'Checkbox';

client/src/components/ui/Controls/Input.tsx

@@ -0,0 +1,45 @@
+import React, { ComponentProps, forwardRef, ReactNode } from 'react';
+import clsx from 'clsx';
+
+type Props = ComponentProps<'input'> & {
+    label?: string;
+    desc?: string;
+    leftAddon?: ReactNode;
+    rightAddon?: ReactNode;
+    error?: string;
+    trimOnBlur?: boolean;
+};
+
+export const Input = forwardRef<HTMLInputElement, Props>(
+    ({ name, label, desc, className, leftAddon, rightAddon, error, trimOnBlur, onBlur, ...rest }, ref) => (
+        <div className={clsx('form-group', { 'has-error': !!error })}>
+            {label && (
+                <label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
+                    {label}
+                </label>
+            )}
+            {desc && <div className="form__desc form__desc--top">{desc}</div>}
+            <div className="input-group">
+                {leftAddon && <div>{leftAddon}</div>}
+                <input
+                    className={clsx('form-control', { 'is-invalid': !!error }, className)}
+                    ref={ref}
+                    onBlur={(e) => {
+                        if (trimOnBlur) {
+                            e.target.value = e.target.value.trim();
+                            rest.onChange(e);
+                        }
+                        if (onBlur) {
+                            onBlur(e);
+                        }
+                    }}
+                    {...rest}
+                />
+                {rightAddon && <div>{rightAddon}</div>}
+            </div>
+            {error && <div className="form__message form__message--error mt-1">{error}</div>}
+        </div>
+    ),
+);
+
+Input.displayName = 'Input';

client/src/components/ui/Controls/Radio.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, ReactNode } from 'react';
+
+type Props<T> = {
+    name: string;
+    value: T;
+    onChange: (e: T) => void;
+    options: { label: string; desc?: ReactNode; value: T }[];
+    disabled?: boolean;
+    error?: string;
+};
+
+export const Radio = forwardRef<HTMLInputElement, Props<string | boolean | number | undefined>>(
+    ({ disabled, onChange, value, options, name, error, ...rest }, ref) => {
+        const getId = (label: string) => (name ? `${label}_${name}` : label);
+
+        return (
+            <div>
+                {options.map((o) => {
+                    const checked = value === o.value;
+
+                    return (
+                        <label
+                            key={`${getId(o.label)}`}
+                            htmlFor={getId(o.label)}
+                            className="custom-control custom-radio">
+                            <input
+                                id={getId(o.label)}
+                                data-testid={o.value}
+                                type="radio"
+                                className="custom-control-input"
+                                onChange={() => onChange(o.value)}
+                                checked={checked}
+                                disabled={disabled}
+                                ref={ref}
+                                {...rest}
+                            />
+
+                            <span className="custom-control-label">{o.label}</span>
+
+                            {o.desc && <span className="checkbox__label-subtitle">{o.desc}</span>}
+                        </label>
+                    );
+                })}
+                {!disabled && error && <span className="form__message form__message--error">{error}</span>}
+            </div>
+        );
+    },
+);
+
+Radio.displayName = 'Radio';

client/src/components/ui/Controls/Select.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentProps, forwardRef } from 'react';
+import clsx from 'clsx';
+
+type SelectProps = ComponentProps<'select'> & {
+    label?: string;
+    error?: string;
+};
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+    ({ name, label, className, error, children, ...rest }, ref) => (
+        <div className={clsx('form-group', { 'has-error': !!error })}>
+            {label && (
+                <label className="form__label" htmlFor={name}>
+                    {label}
+                </label>
+            )}
+            <div className="input-group">
+                <select className={clsx('form-control custom-select', className)} ref={ref} {...rest}>
+                    {children}
+                </select>
+            </div>
+            {error && <div className="form__message form__message--error mt-1">{error}</div>}
+        </div>
+    ),
+);
+
+Select.displayName = 'Select';

client/src/components/ui/Controls/Textarea.tsx

@@ -0,0 +1,45 @@
+import React, { ComponentProps, forwardRef } from 'react';
+import clsx from 'clsx';
+import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
+
+type Props = ComponentProps<'textarea'> & {
+    className?: string;
+    wrapperClassName?: string;
+    label?: string;
+    desc?: string;
+    error?: string;
+    trimOnBlur?: boolean;
+};
+
+export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
+    ({ name, label, desc, className, wrapperClassName, error, trimOnBlur, onBlur, ...rest }, ref) => (
+        <div className={clsx('form-group', wrapperClassName, { 'has-error': !!error })}>
+            {label && (
+                <label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
+                    {label}
+                </label>
+            )}
+            {desc && <div className="form__desc form__desc--top">{desc}</div>}
+            <textarea
+                className={clsx(
+                    'form-control form-control--textarea form-control--textarea-small font-monospace',
+                    className,
+                )}
+                ref={ref}
+                onBlur={(e) => {
+                    if (trimOnBlur) {
+                        const normalizedValue = trimLinesAndRemoveEmpty(e.target.value);
+                        rest.onChange(normalizedValue);
+                    }
+                    if (onBlur) {
+                        onBlur(e);
+                    }
+                }}
+                {...rest}
+            />
+            {error && <div className="form__message form__message--error">{error}</div>}
+        </div>
+    ),
+);
+
+Textarea.displayName = 'Textarea';

client/src/components/ui/Guide/Guide.tsx

@@ -7,7 +7,7 @@ import { MOBILE_CONFIG_LINKS } from '../../../helpers/constants';
 
 import Tabs from '../Tabs';
 
-import MobileConfigForm from './MobileConfigForm';
+import { MobileConfigForm } from './MobileConfigForm';
 import { RootState } from '../../../initialState';
 
 interface renderLiProps {
@@ -346,7 +346,7 @@ interface GuideProps {
     dnsAddresses?: unknown[];
 }
 
-const Guide = ({ dnsAddresses }: GuideProps) => {
+export const Guide = ({ dnsAddresses }: GuideProps) => {
     const { t } = useTranslation();
 
     const serverName = useSelector((state: RootState) => state.encryption?.server_name);
@@ -381,5 +381,3 @@ const Guide = ({ dnsAddresses }: GuideProps) => {
 Guide.defaultProps = {
     dnsAddresses: [],
 };
-
-export default Guide;

client/src/components/ui/Guide/MobileConfigForm.tsx

@@ -1,32 +1,31 @@
 import React from 'react';
-import { Trans } from 'react-i18next';
-import { useSelector } from 'react-redux';
-
-import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
 import i18next from 'i18next';
 import cn from 'classnames';
 
 import { getPathWithQueryString } from '../../../helpers/helpers';
-import { CLIENT_ID_LINK, FORM_NAME, MOBILE_CONFIG_LINKS, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
-import { renderInputField, renderSelectField, toNumber } from '../../../helpers/form';
+import { CLIENT_ID_LINK, MOBILE_CONFIG_LINKS, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
+import { toNumber } from '../../../helpers/form';
 import {
     validateConfigClientId,
     validateServerName,
     validatePort,
     validateIsSafePort,
 } from '../../../helpers/validators';
-import { RootState } from '../../../initialState';
+import { Input } from '../Controls/Input';
+import { Select } from '../Controls/Select';
 
-const getDownloadLink = (host: any, clientId: any, protocol: any, invalid: any) => {
+const getDownloadLink = (host: string, clientId: string, protocol: string, invalid: boolean) => {
     if (!host || invalid) {
         return (
             <button type="button" className="btn btn-success btn-standard btn-large disabled">
-                <Trans>download_mobileconfig</Trans>
+                {i18next.t('download_mobileconfig')}
             </button>
         );
     }
 
-    const linkParams: { host: string, client_id?: string } = { host };
+    const linkParams: { host: string; client_id?: string } = { host };
 
     if (clientId) {
         linkParams.client_id = clientId;
@@ -37,29 +36,48 @@ const getDownloadLink = (host: any, clientId: any, protocol: any, invalid: any)
             href={getPathWithQueryString(protocol, linkParams)}
             className={cn('btn btn-success btn-standard btn-large')}
             download>
-            <Trans>download_mobileconfig</Trans>
+            {i18next.t('download_mobileconfig')}
         </a>
     );
 };
 
-interface MobileConfigFormProps {
-    invalid: boolean;
-}
+type FormValues = {
+    host: string;
+    clientId: string;
+    protocol: string;
+    port?: number;
+};
 
-const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
-    const formValues = useSelector((state: RootState) => state.form[FORM_NAME.MOBILE_CONFIG]?.values);
+type Props = {
+    initialValues?: FormValues;
+};
 
-    if (!formValues) {
-        return null;
-    }
+const defaultFormValues = {
+    host: '',
+    clientId: '',
+    protocol: MOBILE_CONFIG_LINKS.DOT,
+    port: undefined,
+};
 
-    const { host, clientId, protocol, port } = formValues;
+export const MobileConfigForm = ({ initialValues }: Props) => {
+    const { t } = useTranslation();
 
-    const githubLink = (
-        <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer">
-            text
-        </a>
-    );
+    const {
+        watch,
+        control,
+        formState: { isValid },
+    } = useForm<FormValues>({
+        mode: 'onBlur',
+        defaultValues: {
+            ...defaultFormValues,
+            ...initialValues,
+        },
+    });
+
+    const protocol = watch('protocol');
+    const host = watch('host');
+    const clientId = watch('clientId');
+    const port = watch('port');
 
     const getHostName = () => {
         if (port && port !== STANDARD_HTTPS_PORT && protocol === MOBILE_CONFIG_LINKS.DOH) {
@@ -75,33 +93,47 @@ const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
                 <div className="form__group form__group--settings">
                     <div className="row">
                         <div className="col">
-                            <label htmlFor="host" className="form__label">
-                                {i18next.t('dhcp_table_hostname')}
-                            </label>
-
-                            <Field
+                            <Controller
                                 name="host"
-                                type="text"
-                                component={renderInputField}
-                                className="form-control"
-                                placeholder={i18next.t('form_enter_hostname')}
-                                validate={validateServerName}
+                                control={control}
+                                rules={{ validate: validateServerName }}
+                                render={({ field, fieldState }) => (
+                                    <Input
+                                        {...field}
+                                        type="text"
+                                        data-testid="mobile_config_host"
+                                        label={t('dhcp_table_hostname')}
+                                        placeholder={t('form_enter_hostname')}
+                                        error={fieldState.error?.message}
+                                    />
+                                )}
                             />
                         </div>
                         {protocol === MOBILE_CONFIG_LINKS.DOH && (
                             <div className="col">
-                                <label htmlFor="port" className="form__label">
-                                    {i18next.t('encryption_https')}
-                                </label>
-
-                                <Field
+                                <Controller
                                     name="port"
-                                    type="number"
-                                    component={renderInputField}
-                                    className="form-control"
-                                    placeholder={i18next.t('encryption_https')}
-                                    validate={[validatePort, validateIsSafePort]}
-                                    normalize={toNumber}
+                                    control={control}
+                                    rules={{
+                                        validate: {
+                                            range: (value) => validatePort(value) || true,
+                                            safety: (value) => validateIsSafePort(value) || true,
+                                        },
+                                    }}
+                                    render={({ field, fieldState }) => (
+                                        <Input
+                                            {...field}
+                                            type="number"
+                                            data-testid="mobile_config_port"
+                                            label={t('encryption_https')}
+                                            placeholder={t('encryption_https')}
+                                            error={fieldState.error?.message}
+                                            onChange={(e) => {
+                                                const { value } = e.target;
+                                                field.onChange(toNumber(value));
+                                            }}
+                                        />
+                                    )}
                                 />
                             </div>
                         )}
@@ -110,39 +142,49 @@ const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
 
                 <div className="form__group form__group--settings">
                     <label htmlFor="clientId" className="form__label form__label--with-desc">
-                        {i18next.t('client_id')}
+                        {t('client_id')}
                     </label>
 
                     <div className="form__desc form__desc--top">
-                        <Trans components={{ a: githubLink }}>client_id_desc</Trans>
+                        <Trans
+                            components={{ a: <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer" /> }}>
+                            client_id_desc
+                        </Trans>
                     </div>
 
-                    <Field
+                    <Controller
                         name="clientId"
-                        type="text"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={i18next.t('client_id_placeholder')}
-                        validate={validateConfigClientId}
+                        control={control}
+                        rules={{
+                            validate: validateConfigClientId,
+                        }}
+                        render={({ field, fieldState }) => (
+                            <Input
+                                {...field}
+                                type="text"
+                                data-testid="mobile_config_client_id"
+                                placeholder={t('client_id_placeholder')}
+                                error={fieldState.error?.message}
+                            />
+                        )}
                     />
                 </div>
 
                 <div className="form__group form__group--settings">
-                    <label htmlFor="protocol" className="form__label">
-                        {i18next.t('protocol')}
-                    </label>
-
-                    <Field name="protocol" type="text" component={renderSelectField} className="form-control">
-                        <option value={MOBILE_CONFIG_LINKS.DOT}>{i18next.t('dns_over_tls')}</option>
-
-                        <option value={MOBILE_CONFIG_LINKS.DOH}>{i18next.t('dns_over_https')}</option>
-                    </Field>
+                    <Controller
+                        name="protocol"
+                        control={control}
+                        render={({ field }) => (
+                            <Select {...field} label={t('protocol')} data-testid="mobile_config_protocol">
+                                <option value={MOBILE_CONFIG_LINKS.DOT}>{t('dns_over_tls')}</option>
+                                <option value={MOBILE_CONFIG_LINKS.DOH}>{t('dns_over_https')}</option>
+                            </Select>
+                        )}
+                    />
                 </div>
             </div>
 
-            {getDownloadLink(getHostName(), clientId, protocol, invalid)}
+            {getDownloadLink(getHostName(), clientId, protocol, !isValid)}
         </form>
     );
 };
-
-export default reduxForm({ form: FORM_NAME.MOBILE_CONFIG })(MobileConfigForm);

client/src/components/ui/Guide/index.ts

@@ -1 +1 @@
-export { default } from './Guide';
+export * from './Guide';