install forms

client/package-lock.json

@@ -25,6 +25,7 @@
                 "react": "^16.13.1",
                 "react-click-outside": "^3.0.1",
                 "react-dom": "^16.13.1",
+                "react-hook-form": "^7.54.0",
                 "react-i18next": "^11.7.2",
                 "react-modal": "^3.11.2",
                 "react-popper-tooltip": "^2.11.1",
@@ -15570,6 +15571,21 @@
                 "react": "^16.13.1"
             }
         },
+        "node_modules/react-hook-form": {
+            "version": "7.54.0",
+            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.0.tgz",
+            "integrity": "sha512-PS05+UQy/IdSbJNojBypxAo9wllhHgGmyr8/dyGQcPoiMf3e7Dfb9PWYVRco55bLbxH9S+1yDDJeTdlYCSxO3A==",
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/react-hook-form"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17 || ^18 || ^19"
+            }
+        },
         "node_modules/react-hot-loader": {
             "version": "4.13.1",
             "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.1.tgz",
@@ -31540,6 +31556,12 @@
                 "scheduler": "^0.19.1"
             }
         },
+        "react-hook-form": {
+            "version": "7.54.0",
+            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.0.tgz",
+            "integrity": "sha512-PS05+UQy/IdSbJNojBypxAo9wllhHgGmyr8/dyGQcPoiMf3e7Dfb9PWYVRco55bLbxH9S+1yDDJeTdlYCSxO3A==",
+            "requires": {}
+        },
         "react-hot-loader": {
             "version": "4.13.1",
             "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.1.tgz",

client/package.json

@@ -38,6 +38,7 @@
         "react": "^16.13.1",
         "react-click-outside": "^3.0.1",
         "react-dom": "^16.13.1",
+        "react-hook-form": "^7.54.0",
         "react-i18next": "^11.7.2",
         "react-modal": "^3.11.2",
         "react-popper-tooltip": "^2.11.1",

client/src/actions/install.ts

@@ -27,7 +27,8 @@ export const setAllSettingsSuccess = createAction('SET_ALL_SETTINGS_SUCCESS');
 export const setAllSettings = (values: any) => async (dispatch: any) => {
     dispatch(setAllSettingsRequest());
     try {
-        const { confirm_password, ...config } = values;
+        const config = { ...values };
+        delete config.confirm_password;
 
         await apiClient.setAllSettings(config);
         dispatch(setAllSettingsSuccess());
@@ -48,7 +49,10 @@ export const checkConfig = (values: any) => async (dispatch: any) => {
     dispatch(checkConfigRequest());
     try {
         const check = await apiClient.checkConfig(values);
-        dispatch(checkConfigSuccess(check));
+        dispatch(checkConfigSuccess({
+            ...values,
+            check,
+        }));
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(checkConfigFailure());

client/src/install/Setup/Auth.tsx

@@ -1,47 +1,46 @@
 import React from 'react';
-
+import { useForm } from 'react-hook-form';
-import { Field, reduxForm } from 'redux-form';
 import { withTranslation, Trans } from 'react-i18next';
 import flow from 'lodash/flow';
-
+import cn from 'classnames';
 import i18n from '../../i18n';
-
 import Controls from './Controls';
-
-import { renderInputField } from '../../helpers/form';
-import { FORM_NAME } from '../../helpers/constants';
 import { validatePasswordLength } from '../../helpers/validators';
 
-const required = (value: any) => {
+type Props = {
-    if (value || value === 0) {
+    onAuthSubmit: (...args: unknown[]) => string;
-        return false;
-    }
-
-    return <Trans>form_error_required</Trans>;
-};
-
-const validate = (values: any) => {
-    const errors: { confirm_password?: string } = {};
-
-    if (values.confirm_password !== values.password) {
-        errors.confirm_password = i18n.t('form_error_password');
-    }
-
-    return errors;
-};
-
-interface AuthProps {
-    handleSubmit: (...args: unknown[]) => string;
     pristine: boolean;
     invalid: boolean;
     t: (...args: unknown[]) => string;
 }
 
-const Auth = (props: AuthProps) => {
+const Auth = (props: Props) => {
-    const { handleSubmit, pristine, invalid, t } = props;
+    const { t, onAuthSubmit } = props;
+    const {
+        register,
+        handleSubmit,
+        watch,
+        formState: { errors, isDirty, isValid },
+    } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            username: '',
+            password: '',
+            confirm_password: '',
+        },
+    });
+
+    const password = watch('password');
+
+    const validateConfirmPassword = (value: string) => {
+        if (value !== password) {
+            return i18n.t('form_error_password');
+        }
+        return undefined;
+    };
 
     return (
-        <form className="setup__step" onSubmit={handleSubmit}>
+        <form className="setup__step" onSubmit={handleSubmit(onAuthSubmit)}>
             <div className="setup__group">
                 <div className="setup__subtitle">
                     <Trans>install_auth_title</Trans>
@@ -55,62 +54,80 @@ const Auth = (props: AuthProps) => {
                     <label>
                         <Trans>install_auth_username</Trans>
                     </label>
-
+                    <input
-                    <Field
+                        {...register('username', { required: {
-                        name="username"
+                            value: true,
-                        component={renderInputField}
+                            message: i18n.t('form_error_required'),
+                        }})}
                         type="text"
-                        className="form-control"
+                        className={cn('form-control', { 'is-invalid': errors.username })}
                         placeholder={t('install_auth_username_enter')}
-                        validate={[required]}
                         autoComplete="username"
                     />
+                    {errors.username && (
+                        <div className="invalid-feedback">
+                            {errors.username.message}
+                        </div>
+                    )}
                 </div>
 
                 <div className="form-group">
                     <label>
                         <Trans>install_auth_password</Trans>
                     </label>
-
+                    <input
-                    <Field
+                        {...register('password', {
-                        name="password"
+                            required: {
-                        component={renderInputField}
+                                value: true,
+                                message: i18n.t('form_error_required'),
+                            },
+                            validate: validatePasswordLength,
+                        })}
                         type="password"
-                        className="form-control"
+                        className={cn('form-control', { 'is-invalid': errors.password })}
                         placeholder={t('install_auth_password_enter')}
-                        validate={[required, validatePasswordLength]}
                         autoComplete="new-password"
                     />
+                    {errors.password && (
+                        <div className="invalid-feedback">
+                            {errors.password.message || i18n.t('form_error_password_length')}
+                        </div>
+                    )}
                 </div>
 
                 <div className="form-group">
                     <label>
                         <Trans>install_auth_confirm</Trans>
                     </label>
-
+                    <input
-                    <Field
+                        {...register('confirm_password', {
-                        name="confirm_password"
+                            required: {
-                        component={renderInputField}
+                                value: true,
+                                message: i18n.t('form_error_required'),
+                            },
+                            validate: validateConfirmPassword,
+                        })}
                         type="password"
-                        className="form-control"
+                        className={cn('form-control', { 'is-invalid': errors.confirm_password })}
                         placeholder={t('install_auth_confirm')}
-                        validate={[required]}
                         autoComplete="new-password"
                     />
+                    {errors.confirm_password && (
+                        <div className="invalid-feedback">
+                            {errors.confirm_password.message}
+                        </div>
+                    )}
                 </div>
             </div>
 
-            <Controls pristine={pristine} invalid={invalid} />
+            <Controls
+                isDirty={isDirty}
+                isValid={isValid}
+            />
         </form>
     );
 };
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: FORM_NAME.INSTALL,
-        destroyOnUnmount: false,
-        forceUnregisterOnUnmount: true,
-        validate,
-    }),
 ])(Auth);

client/src/install/Setup/Settings.tsx

@@ -1,30 +1,65 @@
-import React, { Component } from 'react';
+import React, { useEffect, useCallback } from 'react';
-import { connect } from 'react-redux';
+import { useForm, Controller } from 'react-hook-form';
-
+import { Trans, useTranslation } from 'react-i18next';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
+import i18n from 'i18next';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import i18n, { TFunction } from 'i18next';
 
+import i18next from 'i18next';
 import Controls from './Controls';
-
 import AddressList from './AddressList';
 
 import { getInterfaceIp } from '../../helpers/helpers';
 import {
     ALL_INTERFACES_IP,
-    FORM_NAME,
     ADDRESS_IN_USE_TEXT,
     PORT_53_FAQ_LINK,
     STATUS_RESPONSE,
     STANDARD_DNS_PORT,
     STANDARD_WEB_PORT,
+    MAX_PORT,
 } from '../../helpers/constants';
 
-import { renderInputField, toNumber } from '../../helpers/form';
+import { toNumber } from '../../helpers/form';
-import { validateRequiredValue, validateInstallPort } from '../../helpers/validators';
+import { validateRequiredValue } from '../../helpers/validators';
 import { DhcpInterface } from '../../initialState';
 
+const validateInstallPort = (value: any) => {
+    if (value < 1 || value > MAX_PORT) {
+        return i18next.t('form_error_port');
+    }
+    return undefined;
+};
+
+type StaticIpType = {
+    ip: string;
+    static: string;
+};
+
+type ConfigType = {
+    web: {
+        ip: string;
+        port?: number;
+        status: string;
+        can_autofix: boolean;
+    };
+    dns: {
+        ip: string;
+        port?: number;
+        status: string;
+        can_autofix: boolean;
+    };
+    staticIp: StaticIpType;
+};
+
+type Props = {
+    handleSubmit: (data: any) => void;
+    handleChange?: (...args: unknown[]) => unknown;
+    handleFix: (web: any, dns: any, set_static_ip: boolean) => void;
+    validateForm: (data: any) => void;
+    config: ConfigType;
+    interfaces: DhcpInterface[];
+    initialValues?: object;
+};
+
 const renderInterfaces = (interfaces: DhcpInterface[]) =>
     Object.values(interfaces).map((option: DhcpInterface) => {
         const { name, ip_addresses, flags } = option;
@@ -43,113 +78,69 @@ const renderInterfaces = (interfaces: DhcpInterface[]) =>
         return null;
     });
 
-type Props = {
+const Settings: React.FC<Props> = ({
-    handleSubmit: (...args: unknown[]) => string;
+    handleSubmit,
-    handleChange?: (...args: unknown[]) => unknown;
+    handleFix,
-    handleFix: (...args: unknown[]) => unknown;
+    validateForm,
-    validateForm?: (...args: unknown[]) => unknown;
+    config,
-    webIp: string;
+    interfaces,
-    dnsIp: string;
+}) => {
-    config: {
+    const { t } = useTranslation();
+
+    const defaultValues = {
         web: {
-            status: string;
+            ip: config.web.ip || ALL_INTERFACES_IP,
-            can_autofix: boolean;
+            port: config.web.port || STANDARD_WEB_PORT,
-        };
+        },
         dns: {
-            status: string;
+            ip: config.dns.ip || ALL_INTERFACES_IP,
-            can_autofix: boolean;
+            port: config.dns.port || STANDARD_DNS_PORT,
-        };
+        },
-        staticIp: {
-            ip: string;
-            static: string;
-        };
     };
-    webPort?: number;
-    dnsPort?: number;
-    interfaces: DhcpInterface[];
-    invalid: boolean;
-    initialValues?: object;
-    t: TFunction;
-};
 
-class Settings extends Component<Props> {
+    const {
-    componentDidMount() {
+        control,
-        const { webIp, webPort, dnsIp, dnsPort } = this.props;
+        watch,
+        handleSubmit: reactHookFormSubmit,
+        formState: { isValid, errors },
+    } = useForm({
+        defaultValues,
+        mode: 'onChange',
+    });
 
-        this.props.validateForm({
+    const watchFields = watch();
+
+    const { status: webStatus, can_autofix: isWebFixAvailable } = config.web;
+    const { status: dnsStatus, can_autofix: isDnsFixAvailable } = config.dns;
+    const { staticIp } = config;
+
+    const webIpVal = watch("web.ip");
+    const webPortVal = watch("web.port");
+    const dnsIpVal = watch("dns.ip");
+    const dnsPortVal = watch("dns.port");
+    
+    useEffect(() => {
+        validateForm({
             web: {
-                ip: webIp,
+                ip: webIpVal,
-                port: webPort,
+                port: webPortVal,
             },
             dns: {
-                ip: dnsIp,
+                ip: dnsIpVal,
-                port: dnsPort,
+                port: dnsPortVal,
             },
         });
-    }
+    }, [webIpVal, webPortVal, dnsIpVal, dnsPortVal]);
-
-    getStaticIpMessage = (staticIp: { ip: string; static: string }) => {
-        const { static: status, ip } = staticIp;
-
-        switch (status) {
-            case STATUS_RESPONSE.NO: {
-                return (
-                    <>
-                        <div className="mb-2">
-                            <Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
-                                install_static_configure
-                            </Trans>
-                        </div>
-
-                        <button
-                            type="button"
-                            className="btn btn-outline-primary btn-sm"
-                            onClick={() => this.handleStaticIp(ip)}>
-                            <Trans>set_static_ip</Trans>
-                        </button>
-                    </>
-                );
-            }
-            case STATUS_RESPONSE.ERROR: {
-                return (
-                    <div className="text-danger">
-                        <Trans>install_static_error</Trans>
-                    </div>
-                );
-            }
-            case STATUS_RESPONSE.YES: {
-                return (
-                    <div className="text-success">
-                        <Trans>install_static_ok</Trans>
-                    </div>
-                );
-            }
-            default:
-                return null;
-        }
-    };
-
-    handleAutofix = (type: any) => {
-        const {
-            webIp,
-
-            webPort,
-
-            dnsIp,
-
-            dnsPort,
-
-            handleFix,
-        } = this.props;
 
+    const handleAutofix = (type: string) => {
         const web = {
-            ip: webIp,
+            ip: watchFields.web?.ip,
-            port: webPort,
+            port: watchFields.web?.port,
             autofix: false,
         };
         const dns = {
-            ip: dnsIp,
+            ip: watchFields.dns?.ip,
-            port: dnsPort,
+            port: watchFields.dns?.port,
             autofix: false,
         };
         const set_static_ip = false;
@@ -163,276 +154,315 @@ class Settings extends Component<Props> {
         handleFix(web, dns, set_static_ip);
     };
 
-    handleStaticIp = (ip: any) => {
+    const handleStaticIp = (ip: string) => {
-        const {
-            webIp,
-
-            webPort,
-
-            dnsIp,
-
-            dnsPort,
-
-            handleFix,
-        } = this.props;
-
         const web = {
-            ip: webIp,
+            ip: watchFields.web?.ip,
-            port: webPort,
+            port: watchFields.web?.port,
             autofix: false,
         };
         const dns = {
-            ip: dnsIp,
+            ip: watchFields.dns?.ip,
-            port: dnsPort,
+            port: watchFields.dns?.port,
             autofix: false,
         };
         const set_static_ip = true;
 
-        if (window.confirm(this.props.t('confirm_static_ip', { ip }))) {
+        if (window.confirm(t('confirm_static_ip', { ip }))) {
             handleFix(web, dns, set_static_ip);
         }
     };
 
-    render() {
+    const getStaticIpMessage = useCallback((staticIp: StaticIpType) => {
-        const {
+        const { static: status, ip } = staticIp;
-            handleSubmit,
 
-            handleChange,
+        switch (status) {
+            case STATUS_RESPONSE.NO:
+                return (
+                    <>
+                        <div className="mb-2">
+                            <Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
+                                install_static_configure
+                            </Trans>
+                        </div>
 
-            webIp,
+                        <button
+                            type="button"
+                            className="btn btn-outline-primary btn-sm"
+                            onClick={() => handleStaticIp(ip)}
+                        >
+                            <Trans>set_static_ip</Trans>
+                        </button>
+                    </>
+                );
+            case STATUS_RESPONSE.ERROR:
+                return (
+                    <div className="text-danger">
+                        <Trans>install_static_error</Trans>
+                    </div>
+                );
+            case STATUS_RESPONSE.YES:
+                return (
+                    <div className="text-success">
+                        <Trans>install_static_ok</Trans>
+                    </div>
+                );
+            default:
+                return null;
+        }
+    }, [handleStaticIp]);
 
-            webPort,
+    const onSubmit = (data: any) => {
+        validateForm(data);
+        handleSubmit(data);
+    };
 
-            dnsIp,
+    return (
+        <form className="setup__step" onSubmit={reactHookFormSubmit(onSubmit)}>
+            <div className="setup__group">
+                <div className="setup__subtitle">
+                    <Trans>install_settings_title</Trans>
+                </div>
 
-            dnsPort,
+                <div className="row">
-
+                    <div className="col-8">
-            interfaces,
+                        <div className="form-group">
-
+                            <label>
-            invalid,
+                                <Trans>install_settings_listen</Trans>
-
+                            </label>
-            config,
+                            <Controller
-
+                                name="web.ip"
-            t,
+                                control={control}
-        } = this.props;
+                                render={({ field }) => (
-        const { status: webStatus, can_autofix: isWebFixAvailable } = config.web;
+                                    <select
-        const { status: dnsStatus, can_autofix: isDnsFixAvailable } = config.dns;
+                                        {...field}
-        const { staticIp } = config;
+                                        className="form-control custom-select"
-
+                                        onChange={(e) => {
-        return (
+                                            field.onChange(e);
-            <form className="setup__step" onSubmit={handleSubmit}>
+                                        }}>
-                <div className="setup__group">
+                                        <option value={ALL_INTERFACES_IP}>
-                    <div className="setup__subtitle">
+                                            {t('install_settings_all_interfaces')}
-                        <Trans>install_settings_title</Trans>
+                                        </option>
+                                        {renderInterfaces(interfaces)}
+                                    </select>
+                                )}
+                            />
+                        </div>
                     </div>
 
-                    <div className="row">
+                    <div className="col-4">
-                        <div className="col-8">
+                        <div className="form-group">
-                            <div className="form-group">
+                            <label>
-                                <label>
+                                <Trans>install_settings_port</Trans>
-                                    <Trans>install_settings_listen</Trans>
+                            </label>
-                                </label>
+                            <Controller
-
+                                name="web.port"
-                                <Field
+                                control={control}
-                                    name="web.ip"
+                                rules={{
-                                    component="select"
+                                    required: t('form_error_required'),
-                                    className="form-control custom-select"
+                                    validate: {
-                                    onChange={handleChange}>
+                                        installPort: validateInstallPort,
-                                    <option value={ALL_INTERFACES_IP}>
+                                    },
-                                        {this.props.t('install_settings_all_interfaces')}
+                                }}
-                                    </option>
+                                render={({ field }) => (
-                                    {renderInterfaces(interfaces)}
+                                    <input
-                                </Field>
+                                        {...field}
-                            </div>
+                                        type="number"
+                                        className="form-control"
+                                        placeholder={STANDARD_WEB_PORT.toString()}
+                                        onChange={(e) => {
+                                            const val = toNumber(e.target.value);
+                                            field.onChange(val);
+                                        }}
+                                    />
+                                )}
+                            />
+                            {errors.web?.port && (
+                                <div className="text-danger">
+                                    {errors.web.port.message}
+                                </div>
+                            )}
                         </div>
+                    </div>
 
-                        <div className="col-4">
+                    <div className="col-12">
-                            <div className="form-group">
+                        {webStatus && (
-                                <label>
+                            <div className="setup__error text-danger">
-                                    <Trans>install_settings_port</Trans>
+                                {webStatus}
-                                </label>
+                                {isWebFixAvailable && (
-
+                                    <button
-                                <Field
+                                        type="button"
-                                    name="web.port"
+                                        className="btn btn-secondary btn-sm ml-2"
-                                    component={renderInputField}
+                                        onClick={() => handleAutofix('web')}
-                                    type="number"
+                                    >
-                                    className="form-control"
+                                        <Trans>fix</Trans>
-                                    placeholder={STANDARD_WEB_PORT.toString()}
+                                    </button>
-                                    validate={[validateInstallPort, validateRequiredValue]}
+                                )}
-                                    normalize={toNumber}
-                                    onChange={handleChange}
-                                />
                             </div>
-                        </div>
+                        )}
 
-                        <div className="col-12">
+                        <hr className="divider--small" />
-                            {webStatus && (
+                    </div>
+                </div>
+
+                <div className="setup__desc">
+                    <Trans>install_settings_interface_link</Trans>
+
+                    <div className="mt-1">
+                        <AddressList
+                            interfaces={interfaces}
+                            address={watchFields.web?.ip}
+                            port={watchFields.web?.port}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className="setup__group">
+                <div className="setup__subtitle">
+                    <Trans>install_settings_dns</Trans>
+                </div>
+
+                <div className="row">
+                    <div className="col-8">
+                        <div className="form-group">
+                            <label>
+                                <Trans>install_settings_listen</Trans>
+                            </label>
+                            <Controller
+                                name="dns.ip"
+                                control={control}
+                                render={({ field }) => (
+                                    <select
+                                        {...field}
+                                        className="form-control custom-select"
+                                        onChange={(e) => {
+                                            field.onChange(e);
+                                        }}>
+                                        <option value={ALL_INTERFACES_IP}>
+                                            {t('install_settings_all_interfaces')}
+                                        </option>
+                                        {renderInterfaces(interfaces)}
+                                    </select>
+                                )}
+                            />
+                        </div>
+                    </div>
+
+                    <div className="col-4">
+                        <div className="form-group">
+                            <label>
+                                <Trans>install_settings_port</Trans>
+                            </label>
+                            <Controller
+                                name="dns.port"
+                                control={control}
+                                rules={{
+                                    required: t('form_error_required'),
+                                    validate: {
+                                        required: validateRequiredValue,
+                                        installPort: validateInstallPort,
+                                    },
+                                }}
+                                render={({ field }) => (
+                                    <input
+                                        {...field}
+                                        type="number"
+                                        className="form-control"
+                                        placeholder={STANDARD_WEB_PORT.toString()}
+                                        onChange={(e) => {
+                                            const val = toNumber(e.target.value);
+                                            field.onChange(val);
+                                        }}
+                                    />
+                                )}
+                            />
+                            {errors.dns?.port.message && (
+                                <div className="text-danger">
+                                    {t(errors.dns.port.message)}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="col-12">
+                        {dnsStatus && (
+                            <>
                                 <div className="setup__error text-danger">
-                                    {webStatus}
+                                    {dnsStatus}
-                                    {isWebFixAvailable && (
+                                    {isDnsFixAvailable && (
                                         <button
                                             type="button"
                                             className="btn btn-secondary btn-sm ml-2"
-                                            onClick={() => this.handleAutofix('web')}>
+                                            onClick={() => handleAutofix('dns')}>
                                             <Trans>fix</Trans>
                                         </button>
                                     )}
                                 </div>
-                            )}
+                                {isDnsFixAvailable && (
-
+                                    <div className="text-muted mb-2">
-                            <hr className="divider--small" />
+                                        <p className="mb-1">
-                        </div>
+                                            <Trans>autofix_warning_text</Trans>
-                    </div>
+                                        </p>
-
+                                        <Trans components={[<li key="0">text</li>]}>autofix_warning_list</Trans>
-                    <div className="setup__desc">
+                                        <p className="mb-1">
-                        <Trans>install_settings_interface_link</Trans>
+                                            <Trans>autofix_warning_result</Trans>
-
+                                        </p>
-                        <div className="mt-1">
-                            <AddressList interfaces={interfaces} address={webIp} port={webPort} />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="setup__group">
-                    <div className="setup__subtitle">
-                        <Trans>install_settings_dns</Trans>
-                    </div>
-
-                    <div className="row">
-                        <div className="col-8">
-                            <div className="form-group">
-                                <label>
-                                    <Trans>install_settings_listen</Trans>
-                                </label>
-
-                                <Field
-                                    name="dns.ip"
-                                    component="select"
-                                    className="form-control custom-select"
-                                    onChange={handleChange}>
-                                    <option value={ALL_INTERFACES_IP}>{t('install_settings_all_interfaces')}</option>
-                                    {renderInterfaces(interfaces)}
-                                </Field>
-                            </div>
-                        </div>
-
-                        <div className="col-4">
-                            <div className="form-group">
-                                <label>
-                                    <Trans>install_settings_port</Trans>
-                                </label>
-
-                                <Field
-                                    name="dns.port"
-                                    component={renderInputField}
-                                    type="number"
-                                    className="form-control"
-                                    placeholder={STANDARD_WEB_PORT.toString()}
-                                    validate={[validateInstallPort, validateRequiredValue]}
-                                    normalize={toNumber}
-                                    onChange={handleChange}
-                                />
-                            </div>
-                        </div>
-
-                        <div className="col-12">
-                            {dnsStatus && (
-                                <>
-                                    <div className="setup__error text-danger">
-                                        {dnsStatus}
-                                        {isDnsFixAvailable && (
-                                            <button
-                                                type="button"
-                                                className="btn btn-secondary btn-sm ml-2"
-                                                onClick={() => this.handleAutofix('dns')}>
-                                                <Trans>fix</Trans>
-                                            </button>
-                                        )}
                                     </div>
-                                    {isDnsFixAvailable && (
-                                        <div className="text-muted mb-2">
-                                            <p className="mb-1">
-                                                <Trans>autofix_warning_text</Trans>
-                                            </p>
-
-                                            <Trans components={[<li key="0">text</li>]}>autofix_warning_list</Trans>
-
-                                            <p className="mb-1">
-                                                <Trans>autofix_warning_result</Trans>
-                                            </p>
-                                        </div>
-                                    )}
-                                </>
-                            )}
-                            {dnsPort === STANDARD_DNS_PORT &&
-                                !isDnsFixAvailable &&
-                                dnsStatus.includes(ADDRESS_IN_USE_TEXT) && (
-                                    <Trans
-                                        components={[
-                                            <a
-                                                href={PORT_53_FAQ_LINK}
-                                                key="0"
-                                                target="_blank"
-                                                rel="noopener noreferrer">
-                                                link
-                                            </a>,
-                                        ]}>
-                                        port_53_faq_link
-                                    </Trans>
                                 )}
+                            </>
+                        )}
+                        {watchFields.dns?.port === STANDARD_DNS_PORT &&
+                            !isDnsFixAvailable &&
+                            dnsStatus?.includes(ADDRESS_IN_USE_TEXT) && (
+                                <Trans
+                                    components={[
+                                        <a
+                                            href={PORT_53_FAQ_LINK}
+                                            key="0"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            link
+                                        </a>,
+                                    ]}
+                                >
+                                    port_53_faq_link
+                                </Trans>
+                            )}
 
-                            <hr className="divider--small" />
+                        <hr className="divider--small" />
-                        </div>
-                    </div>
-
-                    <div className="setup__desc">
-                        <Trans>install_settings_dns_desc</Trans>
-
-                        <div className="mt-1">
-                            <AddressList interfaces={interfaces} address={dnsIp} port={dnsPort} isDns={true} />
-                        </div>
                     </div>
                 </div>
 
-                <div className="setup__group">
+                <div className="setup__desc">
-                    <div className="setup__subtitle">
+                    <Trans>install_settings_dns_desc</Trans>
-                        <Trans>static_ip</Trans>
-                    </div>
 
-                    <div className="mb-2">
+                    <div className="mt-1">
-                        <Trans>static_ip_desc</Trans>
+                        <AddressList
+                            interfaces={interfaces}
+                            address={watchFields.dns?.ip}
+                            port={watchFields.dns?.port}
+                            isDns={true}
+                        />
                     </div>
+                </div>
+            </div>
 
-                    {this.getStaticIpMessage(staticIp)}
+            <div className="setup__group">
+                <div className="setup__subtitle">
+                    <Trans>static_ip</Trans>
                 </div>
 
-                <Controls invalid={invalid} />
+                <div className="mb-2">
-            </form>
+                    <Trans>static_ip_desc</Trans>
-        );
+                </div>
-    }
-}
 
-const selector = formValueSelector(FORM_NAME.INSTALL);
+                {getStaticIpMessage(staticIp)}
+            </div>
 
-const SettingsForm = connect((state) => {
+            <Controls invalid={!isValid} />
-    const webIp = selector(state, 'web.ip');
+        </form>
-    const webPort = selector(state, 'web.port');
+    );
-    const dnsIp = selector(state, 'dns.ip');
+};
-    const dnsPort = selector(state, 'dns.port');
 
-    return {
+export default Settings;
-        webIp,
-        webPort,
-        dnsIp,
-        dnsPort,
-    };
-})(Settings);
-
-export default flow([
-    withTranslation(),
-    reduxForm({
-        form: FORM_NAME.INSTALL,
-        destroyOnUnmount: false,
-        forceUnregisterOnUnmount: true,
-    }),
-])(SettingsForm);

client/src/install/Setup/index.tsx

@@ -1,101 +1,77 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect, Fragment } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import debounce from 'lodash/debounce';
 
 import * as actionCreators from '../../actions/install';
 
 import { getWebAddress } from '../../helpers/helpers';
-import { INSTALL_FIRST_STEP, INSTALL_TOTAL_STEPS, ALL_INTERFACES_IP, DEBOUNCE_TIMEOUT } from '../../helpers/constants';
+import { INSTALL_TOTAL_STEPS, ALL_INTERFACES_IP, DEBOUNCE_TIMEOUT } from '../../helpers/constants';
 
 import Loading from '../../components/ui/Loading';
-
 import Greeting from './Greeting';
-
 import Settings from './Settings';
-
-import Auth from './Auth';
-
 import Devices from './Devices';
-
 import Submit from './Submit';
-
 import Progress from './Progress';
-
 import Toasts from '../../components/Toasts';
-
 import Footer from '../../components/ui/Footer';
-
 import Icons from '../../components/ui/Icons';
-
 import { Logo } from '../../components/ui/svg/logo';
 
 import './Setup.css';
 import '../../components/ui/Tabler.css';
+import Auth from './Auth';
 
-interface SetupProps {
+const Setup = () => {
-    getDefaultAddresses: (...args: unknown[]) => unknown;
+    const dispatch = useDispatch();
-    setAllSettings: (...args: unknown[]) => unknown;
-    checkConfig: (...args: unknown[]) => unknown;
-    nextStep: (...args: unknown[]) => unknown;
-    prevStep: (...args: unknown[]) => unknown;
-    install: {
-        step: number;
-        processingDefault: boolean;
-        web;
-        dns;
-        staticIp;
-        interfaces;
-    };
-    step?: number;
-    web?: object;
-    dns?: object;
-}
 
-class Setup extends Component<SetupProps> {
+    const install = useSelector((state: any) => state.install);
-    componentDidMount() {
+    const { processingDefault, step, web, dns, staticIp, interfaces } = install;
-        this.props.getDefaultAddresses();
-    }
 
-    handleFormSubmit = (values: any) => {
+    useEffect(() => {
-        const { staticIp, ...config } = values;
+        dispatch(actionCreators.getDefaultAddresses());
+    }, []);
 
-        this.props.setAllSettings(config);
+    const handleFormSubmit = (values: any) => {
+        const config = { ...values };
+        delete config.staticIp;
+
+        if (web.port && dns.port) {
+            dispatch(actionCreators.setAllSettings({
+                web,
+                dns,
+                ...config,
+            }));
+        }
     };
 
-    handleFormChange = debounce((values) => {
+    const checkConfig = debounce((values) => {
         const { web, dns } = values;
+
         if (values && web.port && dns.port) {
-            this.props.checkConfig({ web, dns, set_static_ip: false });
+            dispatch(actionCreators.checkConfig({ web, dns, set_static_ip: false }));
         }
     }, DEBOUNCE_TIMEOUT);
 
-    handleFix = (web: any, dns: any, set_static_ip: any) => {
+    const handleFix = (web: any, dns: any, set_static_ip: any) => {
-        this.props.checkConfig({ web, dns, set_static_ip });
+        dispatch(actionCreators.checkConfig({ web, dns, set_static_ip }));
     };
 
-    openDashboard = (ip: any, port: any) => {
+    const openDashboard = (ip: any, port: any) => {
         let address = getWebAddress(ip, port);
-
         if (ip === ALL_INTERFACES_IP) {
             address = getWebAddress(window.location.hostname, port);
         }
-
         window.location.replace(address);
     };
 
-    nextStep = () => {
+    const handleNextStep = () => {
-        if (this.props.install.step < INSTALL_TOTAL_STEPS) {
+        if (step < INSTALL_TOTAL_STEPS) {
-            this.props.nextStep();
+            dispatch(actionCreators.nextStep());
         }
     };
 
-    prevStep = () => {
+    const renderPage = (step: any, config: any, interfaces: any) => {
-        if (this.props.install.step > INSTALL_FIRST_STEP) {
-            this.props.prevStep();
-        }
-    };
-
-    renderPage(step: any, config: any, interfaces: any) {
         switch (step) {
             case 1:
                 return <Greeting />;
@@ -105,55 +81,43 @@ class Setup extends Component<SetupProps> {
                         config={config}
                         initialValues={config}
                         interfaces={interfaces}
-                        onSubmit={this.nextStep}
+                        handleSubmit={handleNextStep}
-                        onChange={this.handleFormChange}
+                        validateForm={checkConfig}
-                        validateForm={this.handleFormChange}
+                        handleFix={handleFix}
-                        handleFix={this.handleFix}
                     />
                 );
             case 3:
-                return <Auth onSubmit={this.handleFormSubmit} />;
+                return <Auth onAuthSubmit={handleFormSubmit} />;
             case 4:
                 return <Devices interfaces={interfaces} />;
             case 5:
-                return <Submit openDashboard={this.openDashboard} />;
+                return <Submit openDashboard={openDashboard} />;
             default:
                 return false;
         }
+    };
+
+    if (processingDefault) {
+        return <Loading />;
     }
 
-    render() {
+    return (
-        const { processingDefault, step, web, dns, staticIp, interfaces } = this.props.install;
+        <>
+            <div className="setup">
+                <div className="setup__container">
+                    <Logo className="setup__logo" />
+                    {renderPage(step, { web, dns, staticIp }, interfaces)}
+                    <Progress step={step} />
+                </div>
+            </div>
 
-        return (
+            <Footer />
-            <Fragment>
-                {processingDefault && <Loading />}
-                {!processingDefault && (
-                    <Fragment>
-                        <div className="setup">
-                            <div className="setup__container">
-                                <Logo className="setup__logo" />
-                                {this.renderPage(step, { web, dns, staticIp }, interfaces)}
-                                <Progress step={step} />
-                            </div>
-                        </div>
 
-                        <Footer />
+            <Toasts />
 
-                        <Toasts />
+            <Icons />
-
+        </>
-                        <Icons />
+    );
-                    </Fragment>
-                )}
-            </Fragment>
-        );
-    }
-}
-
-const mapStateToProps = (state: any) => {
-    const { install, toasts } = state;
-    const props = { install, toasts };
-    return props;
 };
 
-export default connect(mapStateToProps, actionCreators)(Setup);
+export default Setup;

client/src/reducers/install.ts

@@ -10,15 +10,15 @@ import { ALL_INTERFACES_IP, INSTALL_FIRST_STEP, STANDARD_DNS_PORT, STANDARD_WEB_
 
 const install = handleActions(
     {
-        [actions.getDefaultAddressesRequest.toString().toString()]: (state: any) => ({
+        [actions.getDefaultAddressesRequest.toString()]: (state: any) => ({
             ...state,
             processingDefault: true,
         }),
-        [actions.getDefaultAddressesFailure.toString().toString()]: (state: any) => ({
+        [actions.getDefaultAddressesFailure.toString()]: (state: any) => ({
             ...state,
             processingDefault: false,
         }),
-        [actions.getDefaultAddressesSuccess.toString().toString()]: (state: any, { payload }: any) => {
+        [actions.getDefaultAddressesSuccess.toString()]: (state: any, { payload }: any) => {
             const { interfaces, version } = payload;
             const web = { ...state.web, port: payload.web_port };
             const dns = { ...state.dns, port: payload.dns_port };
@@ -35,37 +35,37 @@ const install = handleActions(
             return newState;
         },
 
-        [actions.nextStep.toString().toString()]: (state: any) => ({
+        [actions.nextStep.toString()]: (state: any) => ({
             ...state,
             step: state.step + 1,
         }),
-        [actions.prevStep.toString().toString()]: (state: any) => ({
+        [actions.prevStep.toString()]: (state: any) => ({
             ...state,
             step: state.step - 1,
         }),
 
-        [actions.setAllSettingsRequest.toString().toString()]: (state: any) => ({
+        [actions.setAllSettingsRequest.toString()]: (state: any) => ({
             ...state,
             processingSubmit: true,
         }),
-        [actions.setAllSettingsFailure.toString().toString()]: (state: any) => ({
+        [actions.setAllSettingsFailure.toString()]: (state: any) => ({
             ...state,
             processingSubmit: false,
         }),
-        [actions.setAllSettingsSuccess.toString().toString()]: (state: any) => ({
+        [actions.setAllSettingsSuccess.toString()]: (state: any) => ({
             ...state,
             processingSubmit: false,
         }),
 
-        [actions.checkConfigRequest.toString().toString()]: (state: any) => ({
+        [actions.checkConfigRequest.toString()]: (state: any) => ({
             ...state,
             processingCheck: true,
         }),
-        [actions.checkConfigFailure.toString().toString()]: (state: any) => ({
+        [actions.checkConfigFailure.toString()]: (state: any) => ({
             ...state,
             processingCheck: false,
         }),
-        [actions.checkConfigSuccess.toString().toString()]: (state: any, { payload }: any) => {
+        [actions.checkConfigSuccess.toString()]: (state: any, { payload }: any) => {
             const web = { ...state.web, ...payload.web };
             const dns = { ...state.dns, ...payload.dns };
             const staticIp = { ...state.staticIp, ...payload.static_ip };