mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-12-24 15:48:18 +03:00
install forms
This commit is contained in:
Ildar Kamalov
parent
8e43af21d9
commit
0a1739df3b
7 changed files with 529 additions and 491 deletions
22
client/package-lock.json
generated
vendored
22
client/package-lock.json
generated
vendored
|
|
@ -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
1
client/package.json
vendored
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
const Settings: React.FC<Props> = ({
|
||||
handleSubmit,
|
||||
handleFix,
|
||||
validateForm,
|
||||
config,
|
||||
interfaces,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const defaultValues = {
|
||||
web: {
|
||||
status: string;
|
||||
can_autofix: boolean;
|
||||
};
|
||||
ip: config.web.ip || ALL_INTERFACES_IP,
|
||||
port: config.web.port || STANDARD_WEB_PORT,
|
||||
},
|
||||
dns: {
|
||||
status: string;
|
||||
can_autofix: boolean;
|
||||
};
|
||||
staticIp: {
|
||||
ip: string;
|
||||
static: string;
|
||||
};
|
||||
ip: config.dns.ip || ALL_INTERFACES_IP,
|
||||
port: config.dns.port || STANDARD_DNS_PORT,
|
||||
},
|
||||
};
|
||||
webPort?: number;
|
||||
dnsPort?: number;
|
||||
interfaces: DhcpInterface[];
|
||||
invalid: boolean;
|
||||
initialValues?: object;
|
||||
t: TFunction;
|
||||
};
|
||||
|
||||
class Settings extends Component<Props> {
|
||||
componentDidMount() {
|
||||
const { webIp, webPort, dnsIp, dnsPort } = this.props;
|
||||
const {
|
||||
control,
|
||||
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,
|
||||
port: webPort,
|
||||
ip: webIpVal,
|
||||
port: webPortVal,
|
||||
},
|
||||
dns: {
|
||||
ip: dnsIp,
|
||||
port: dnsPort,
|
||||
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,276 +154,315 @@ 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,
|
||||
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,
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
<form className="setup__step" onSubmit={handleSubmit}>
|
||||
<div className="setup__group">
|
||||
<div className="setup__subtitle">
|
||||
<Trans>install_settings_title</Trans>
|
||||
<div className="row">
|
||||
<div className="col-8">
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<Trans>install_settings_listen</Trans>
|
||||
</label>
|
||||
<Controller
|
||||
name="web.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="row">
|
||||
<div className="col-8">
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<Trans>install_settings_listen</Trans>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
name="web.ip"
|
||||
component="select"
|
||||
className="form-control custom-select"
|
||||
onChange={handleChange}>
|
||||
<option value={ALL_INTERFACES_IP}>
|
||||
{this.props.t('install_settings_all_interfaces')}
|
||||
</option>
|
||||
{renderInterfaces(interfaces)}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<Trans>install_settings_port</Trans>
|
||||
</label>
|
||||
<Controller
|
||||
name="web.port"
|
||||
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()}
|
||||
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="form-group">
|
||||
<label>
|
||||
<Trans>install_settings_port</Trans>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
name="web.port"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={STANDARD_WEB_PORT.toString()}
|
||||
validate={[validateInstallPort, validateRequiredValue]}
|
||||
normalize={toNumber}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className="col-12">
|
||||
{webStatus && (
|
||||
<div className="setup__error text-danger">
|
||||
{webStatus}
|
||||
{isWebFixAvailable && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm ml-2"
|
||||
onClick={() => handleAutofix('web')}
|
||||
>
|
||||
<Trans>fix</Trans>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-12">
|
||||
{webStatus && (
|
||||
<hr className="divider--small" />
|
||||
</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}
|
||||
{isWebFixAvailable && (
|
||||
{dnsStatus}
|
||||
{isDnsFixAvailable && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm ml-2"
|
||||
onClick={() => this.handleAutofix('web')}>
|
||||
onClick={() => handleAutofix('dns')}>
|
||||
<Trans>fix</Trans>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<hr className="divider--small" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setup__desc">
|
||||
<Trans>install_settings_interface_link</Trans>
|
||||
|
||||
<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>
|
||||
)}
|
||||
{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>
|
||||
{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" />
|
||||
</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>
|
||||
<hr className="divider--small" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setup__group">
|
||||
<div className="setup__subtitle">
|
||||
<Trans>static_ip</Trans>
|
||||
</div>
|
||||
<div className="setup__desc">
|
||||
<Trans>install_settings_dns_desc</Trans>
|
||||
|
||||
<div className="mb-2">
|
||||
<Trans>static_ip_desc</Trans>
|
||||
<div className="mt-1">
|
||||
<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} />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="mb-2">
|
||||
<Trans>static_ip_desc</Trans>
|
||||
</div>
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.INSTALL);
|
||||
{getStaticIpMessage(staticIp)}
|
||||
</div>
|
||||
|
||||
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');
|
||||
<Controls invalid={!isValid} />
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
webIp,
|
||||
webPort,
|
||||
dnsIp,
|
||||
dnsPort,
|
||||
};
|
||||
})(Settings);
|
||||
|
||||
export default flow([
|
||||
withTranslation(),
|
||||
reduxForm({
|
||||
form: FORM_NAME.INSTALL,
|
||||
destroyOnUnmount: false,
|
||||
forceUnregisterOnUnmount: true,
|
||||
}),
|
||||
])(SettingsForm);
|
||||
export default Settings;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
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 <Greeting />;
|
||||
|
|
@ -105,55 +81,43 @@ 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 (
|
||||
<>
|
||||
<div className="setup">
|
||||
<div className="setup__container">
|
||||
<Logo className="setup__logo" />
|
||||
{renderPage(step, { web, dns, staticIp }, interfaces)}
|
||||
<Progress step={step} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<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 />
|
||||
|
||||
<Footer />
|
||||
<Toasts />
|
||||
|
||||
<Toasts />
|
||||
|
||||
<Icons />
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: any) => {
|
||||
const { install, toasts } = state;
|
||||
const props = { install, toasts };
|
||||
return props;
|
||||
<Icons />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, actionCreators)(Setup);
|
||||
export default Setup;
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Reference in a new issue