install forms

This commit is contained in:
Ildar Kamalov 2024-12-12 15:08:42 +03:00
parent 8e43af21d9
commit 0a1739df3b
7 changed files with 529 additions and 491 deletions

22
client/package-lock.json generated vendored
View file

@ -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",

1
client/package.json vendored
View file

@ -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",

View file

@ -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());

View file

@ -1,47 +1,46 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { useForm } from 'react-hook-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) => {
if (value || value === 0) {
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;
type Props = {
onAuthSubmit: (...args: unknown[]) => string;
pristine: boolean;
invalid: boolean;
t: (...args: unknown[]) => string;
}
const Auth = (props: AuthProps) => {
const { handleSubmit, pristine, invalid, t } = props;
const Auth = (props: 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>
<Field
name="username"
component={renderInputField}
<input
{...register('username', { required: {
value: true,
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>
<Field
name="password"
component={renderInputField}
<input
{...register('password', {
required: {
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>
<Field
name="confirm_password"
component={renderInputField}
<input
{...register('confirm_password', {
required: {
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);

View file

@ -1,30 +1,65 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import i18n, { TFunction } from 'i18next';
import React, { useEffect, useCallback } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Trans, useTranslation } from 'react-i18next';
import i18n 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 { validateRequiredValue, validateInstallPort } from '../../helpers/validators';
import { toNumber } from '../../helpers/form';
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 = {
handleSubmit: (...args: unknown[]) => string;
handleChange?: (...args: unknown[]) => unknown;
handleFix: (...args: unknown[]) => unknown;
validateForm?: (...args: unknown[]) => unknown;
webIp: string;
dnsIp: string;
config: {
web: {
status: string;
can_autofix: boolean;
};
dns: {
status: string;
can_autofix: boolean;
};
staticIp: {
ip: string;
static: string;
};
};
webPort?: number;
dnsPort?: number;
interfaces: DhcpInterface[];
invalid: boolean;
initialValues?: object;
t: TFunction;
};
const Settings: React.FC<Props> = ({
handleSubmit,
handleFix,
validateForm,
config,
interfaces,
}) => {
const { t } = useTranslation();
class Settings extends Component<Props> {
componentDidMount() {
const { webIp, webPort, dnsIp, dnsPort } = this.props;
this.props.validateForm({
const defaultValues = {
web: {
ip: webIp,
port: webPort,
ip: config.web.ip || ALL_INTERFACES_IP,
port: config.web.port || STANDARD_WEB_PORT,
},
dns: {
ip: dnsIp,
port: dnsPort,
ip: config.dns.ip || ALL_INTERFACES_IP,
port: config.dns.port || STANDARD_DNS_PORT,
},
};
const {
control,
watch,
handleSubmit: reactHookFormSubmit,
formState: { isValid, errors },
} = useForm({
defaultValues,
mode: 'onChange',
});
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: webIpVal,
port: webPortVal,
},
dns: {
ip: dnsIpVal,
port: 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;
}, [webIpVal, webPortVal, dnsIpVal, dnsPortVal]);
const handleAutofix = (type: string) => {
const web = {
ip: webIp,
port: webPort,
ip: watchFields.web?.ip,
port: watchFields.web?.port,
autofix: false,
};
const dns = {
ip: dnsIp,
port: dnsPort,
ip: watchFields.dns?.ip,
port: watchFields.dns?.port,
autofix: false,
};
const set_static_ip = false;
@ -163,64 +154,70 @@ class Settings extends Component<Props> {
handleFix(web, dns, set_static_ip);
};
handleStaticIp = (ip: any) => {
const {
webIp,
webPort,
dnsIp,
dnsPort,
handleFix,
} = this.props;
const handleStaticIp = (ip: string) => {
const web = {
ip: webIp,
port: webPort,
ip: watchFields.web?.ip,
port: watchFields.web?.port,
autofix: false,
};
const dns = {
ip: dnsIp,
port: dnsPort,
ip: watchFields.dns?.ip,
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 {
handleSubmit,
const getStaticIpMessage = useCallback((staticIp: StaticIpType) => {
const { static: status, ip } = staticIp;
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,
dnsIp,
dnsPort,
interfaces,
invalid,
config,
t,
} = this.props;
const { status: webStatus, can_autofix: isWebFixAvailable } = config.web;
const { status: dnsStatus, can_autofix: isDnsFixAvailable } = config.dns;
const { staticIp } = config;
const onSubmit = (data: any) => {
validateForm(data);
handleSubmit(data);
};
return (
<form className="setup__step" onSubmit={handleSubmit}>
<form className="setup__step" onSubmit={reactHookFormSubmit(onSubmit)}>
<div className="setup__group">
<div className="setup__subtitle">
<Trans>install_settings_title</Trans>
@ -232,17 +229,23 @@ class Settings extends Component<Props> {
<label>
<Trans>install_settings_listen</Trans>
</label>
<Field
<Controller
name="web.ip"
component="select"
control={control}
render={({ field }) => (
<select
{...field}
className="form-control custom-select"
onChange={handleChange}>
onChange={(e) => {
field.onChange(e);
}}>
<option value={ALL_INTERFACES_IP}>
{this.props.t('install_settings_all_interfaces')}
{t('install_settings_all_interfaces')}
</option>
{renderInterfaces(interfaces)}
</Field>
</select>
)}
/>
</div>
</div>
@ -251,17 +254,33 @@ class Settings extends Component<Props> {
<label>
<Trans>install_settings_port</Trans>
</label>
<Field
<Controller
name="web.port"
component={renderInputField}
control={control}
rules={{
required: t('form_error_required'),
validate: {
installPort: validateInstallPort,
},
}}
render={({ field }) => (
<input
{...field}
type="number"
className="form-control"
placeholder={STANDARD_WEB_PORT.toString()}
validate={[validateInstallPort, validateRequiredValue]}
normalize={toNumber}
onChange={handleChange}
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>
@ -273,7 +292,8 @@ class Settings extends Component<Props> {
<button
type="button"
className="btn btn-secondary btn-sm ml-2"
onClick={() => this.handleAutofix('web')}>
onClick={() => handleAutofix('web')}
>
<Trans>fix</Trans>
</button>
)}
@ -288,7 +308,11 @@ class Settings extends Component<Props> {
<Trans>install_settings_interface_link</Trans>
<div className="mt-1">
<AddressList interfaces={interfaces} address={webIp} port={webPort} />
<AddressList
interfaces={interfaces}
address={watchFields.web?.ip}
port={watchFields.web?.port}
/>
</div>
</div>
</div>
@ -304,15 +328,23 @@ class Settings extends Component<Props> {
<label>
<Trans>install_settings_listen</Trans>
</label>
<Field
<Controller
name="dns.ip"
component="select"
control={control}
render={({ field }) => (
<select
{...field}
className="form-control custom-select"
onChange={handleChange}>
<option value={ALL_INTERFACES_IP}>{t('install_settings_all_interfaces')}</option>
onChange={(e) => {
field.onChange(e);
}}>
<option value={ALL_INTERFACES_IP}>
{t('install_settings_all_interfaces')}
</option>
{renderInterfaces(interfaces)}
</Field>
</select>
)}
/>
</div>
</div>
@ -321,17 +353,34 @@ class Settings extends Component<Props> {
<label>
<Trans>install_settings_port</Trans>
</label>
<Field
<Controller
name="dns.port"
component={renderInputField}
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()}
validate={[validateInstallPort, validateRequiredValue]}
normalize={toNumber}
onChange={handleChange}
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>
@ -344,7 +393,7 @@ class Settings extends Component<Props> {
<button
type="button"
className="btn btn-secondary btn-sm ml-2"
onClick={() => this.handleAutofix('dns')}>
onClick={() => handleAutofix('dns')}>
<Trans>fix</Trans>
</button>
)}
@ -354,9 +403,7 @@ class Settings extends Component<Props> {
<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>
@ -364,19 +411,21 @@ class Settings extends Component<Props> {
)}
</>
)}
{dnsPort === STANDARD_DNS_PORT &&
{watchFields.dns?.port === STANDARD_DNS_PORT &&
!isDnsFixAvailable &&
dnsStatus.includes(ADDRESS_IN_USE_TEXT) && (
dnsStatus?.includes(ADDRESS_IN_USE_TEXT) && (
<Trans
components={[
<a
href={PORT_53_FAQ_LINK}
key="0"
target="_blank"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
link
</a>,
]}>
]}
>
port_53_faq_link
</Trans>
)}
@ -389,7 +438,12 @@ class Settings extends Component<Props> {
<Trans>install_settings_dns_desc</Trans>
<div className="mt-1">
<AddressList interfaces={interfaces} address={dnsIp} port={dnsPort} isDns={true} />
<AddressList
interfaces={interfaces}
address={watchFields.dns?.ip}
port={watchFields.dns?.port}
isDns={true}
/>
</div>
</div>
</div>
@ -403,36 +457,12 @@ class Settings extends Component<Props> {
<Trans>static_ip_desc</Trans>
</div>
{this.getStaticIpMessage(staticIp)}
{getStaticIpMessage(staticIp)}
</div>
<Controls invalid={invalid} />
<Controls invalid={!isValid} />
</form>
);
}
}
};
const selector = formValueSelector(FORM_NAME.INSTALL);
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;

View file

@ -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<SetupProps> {
componentDidMount() {
this.props.getDefaultAddresses();
const install = useSelector((state: any) => state.install);
const { processingDefault, step, web, dns, staticIp, interfaces } = install;
useEffect(() => {
dispatch(actionCreators.getDefaultAddresses());
}, []);
const handleFormSubmit = (values: any) => {
const config = { ...values };
delete config.staticIp;
if (web.port && dns.port) {
dispatch(actionCreators.setAllSettings({
web,
dns,
...config,
}));
}
handleFormSubmit = (values: any) => {
const { staticIp, ...config } = values;
this.props.setAllSettings(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 <Greeting />;
@ -105,35 +81,32 @@ class Setup extends Component<SetupProps> {
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 <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() {
const { processingDefault, step, web, dns, staticIp, interfaces } = this.props.install;
return (
<Fragment>
{processingDefault && <Loading />}
{!processingDefault && (
<Fragment>
<>
<div className="setup">
<div className="setup__container">
<Logo className="setup__logo" />
{this.renderPage(step, { web, dns, staticIp }, interfaces)}
{renderPage(step, { web, dns, staticIp }, interfaces)}
<Progress step={step} />
</div>
</div>
@ -143,17 +116,8 @@ class Setup extends Component<SetupProps> {
<Toasts />
<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;

View file

@ -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 };