-
- static_ip
-
+
+
install_settings_dns_desc
-
+
- {this.getStaticIpMessage(staticIp)}
+
+
+ static_ip
-
-
- );
- }
-}
+
+ static_ip_desc
+
-const selector = formValueSelector(FORM_NAME.INSTALL);
+ {getStaticIpMessage(staticIp)}
+
-const SettingsForm = connect((state) => {
- const webIp = selector(state, 'web.ip');
- const webPort = selector(state, 'web.port');
- const dnsIp = selector(state, 'dns.ip');
- const dnsPort = selector(state, 'dns.port');
+
+
+ );
+};
- return {
- webIp,
- webPort,
- dnsIp,
- dnsPort,
- };
-})(Settings);
-
-export default flow([
- withTranslation(),
- reduxForm({
- form: FORM_NAME.INSTALL,
- destroyOnUnmount: false,
- forceUnregisterOnUnmount: true,
- }),
-])(SettingsForm);
+export default Settings;
diff --git a/client/src/install/Setup/index.tsx b/client/src/install/Setup/index.tsx
index dbfa7573..1e145f17 100644
--- a/client/src/install/Setup/index.tsx
+++ b/client/src/install/Setup/index.tsx
@@ -1,101 +1,77 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect, Fragment } from 'react';
+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 {
- getDefaultAddresses: (...args: unknown[]) => unknown;
- 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;
-}
+const Setup = () => {
+ const dispatch = useDispatch();
-class Setup extends Component
{
- componentDidMount() {
- this.props.getDefaultAddresses();
- }
+ const install = useSelector((state: any) => state.install);
+ const { processingDefault, step, web, dns, staticIp, interfaces } = install;
- handleFormSubmit = (values: any) => {
- const { staticIp, ...config } = values;
+ useEffect(() => {
+ 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) => {
- this.props.checkConfig({ web, dns, set_static_ip });
+ const handleFix = (web: any, dns: any, set_static_ip: any) => {
+ 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 = () => {
- if (this.props.install.step < INSTALL_TOTAL_STEPS) {
- this.props.nextStep();
+ const handleNextStep = () => {
+ if (step < INSTALL_TOTAL_STEPS) {
+ dispatch(actionCreators.nextStep());
}
};
- prevStep = () => {
- if (this.props.install.step > INSTALL_FIRST_STEP) {
- this.props.prevStep();
- }
- };
-
- renderPage(step: any, config: any, interfaces: any) {
+ const renderPage = (step: any, config: any, interfaces: any) => {
switch (step) {
case 1:
return ;
@@ -105,55 +81,43 @@ class Setup extends Component {
config={config}
initialValues={config}
interfaces={interfaces}
- onSubmit={this.nextStep}
- onChange={this.handleFormChange}
- validateForm={this.handleFormChange}
- handleFix={this.handleFix}
+ handleSubmit={handleNextStep}
+ validateForm={checkConfig}
+ handleFix={handleFix}
/>
);
case 3:
- return ;
+ return ;
case 4:
return ;
case 5:
- return ;
+ return ;
default:
return false;
}
+ };
+
+ if (processingDefault) {
+ return ;
}
- render() {
- const { processingDefault, step, web, dns, staticIp, interfaces } = this.props.install;
+ return (
+ <>
+
+
+
+ {renderPage(step, { web, dns, staticIp }, interfaces)}
+
+
+
-
-
- {this.renderPage(step, { web, dns, staticIp }, interfaces)}
-
-
-