Pull request #2231: ADG-8368 Frontend rewritten in TypeScript, added Node 18 support
Merge in DNS/adguard-home from ADG-8368-typescript-node-18 to master Squashed commit of the following: commit daa288ae0d76178af24595cc807055902e6f09ab Merge:4c89cf7201085d59a6Author: Igor Lobanov <bniwredyc@gmail.com> Date: Mon Jun 10 17:22:20 2024 +0200 merge commit4c89cf7209Author: Ildar Kamalov <ik@adguard.com> Date: Thu Jun 6 13:27:18 2024 +0300 remove install from initial state commitb943f2011fAuthor: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 23:10:55 2024 +0200 frontend production build fix commitcd1be2d66dAuthor: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 20:23:14 2024 +0200 production build quickfix commit7b8ac01fc2Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jun 5 19:57:31 2024 +0300 all: upd node docker commit02afed66d5Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:23:12 2024 +0200 changelog fixes commit9c0f736f0cMerge:62c4fbf1ee04775c4fAuthor: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:18:29 2024 +0200 merge commit62c4fbf1e3Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:22:22 2024 +0200 empty line in changelog commit76b1e44a93Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:20:37 2024 +0200 changelog commitf783e90040Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:19:13 2024 +0200 filters.js -> filters.ts commit3d4ce6554cAuthor: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:18:03 2024 +0200 generated file removed commite35ba58f2aAuthor: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:45:21 2024 +0200 rollback unwanted changes commit1f30d4216dAuthor: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:27:36 2024 +0200 review fix commit6cd4e44f07Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:55:39 2024 +0200 missing generated file restoresd commit2ab738b303Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:40:32 2024 +0200 Frontend rewritten in TypeScript, added Node 18 support
This commit is contained in:
159
client/src/install/Setup/index.tsx
Normal file
159
client/src/install/Setup/index.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { connect } 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 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';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
class Setup extends Component<SetupProps> {
|
||||
componentDidMount() {
|
||||
this.props.getDefaultAddresses();
|
||||
}
|
||||
|
||||
handleFormSubmit = (values: any) => {
|
||||
const { staticIp, ...config } = values;
|
||||
|
||||
this.props.setAllSettings(config);
|
||||
};
|
||||
|
||||
handleFormChange = debounce((values) => {
|
||||
const { web, dns } = values;
|
||||
if (values && web.port && dns.port) {
|
||||
this.props.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 });
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
prevStep = () => {
|
||||
if (this.props.install.step > INSTALL_FIRST_STEP) {
|
||||
this.props.prevStep();
|
||||
}
|
||||
};
|
||||
|
||||
renderPage(step: any, config: any, interfaces: any) {
|
||||
switch (step) {
|
||||
case 1:
|
||||
return <Greeting />;
|
||||
case 2:
|
||||
return (
|
||||
<Settings
|
||||
config={config}
|
||||
initialValues={config}
|
||||
interfaces={interfaces}
|
||||
onSubmit={this.nextStep}
|
||||
onChange={this.handleFormChange}
|
||||
validateForm={this.handleFormChange}
|
||||
handleFix={this.handleFix}
|
||||
/>
|
||||
);
|
||||
case 3:
|
||||
return <Auth onSubmit={this.handleFormSubmit} />;
|
||||
case 4:
|
||||
return <Devices interfaces={interfaces} />;
|
||||
case 5:
|
||||
return <Submit openDashboard={this.openDashboard} />;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
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)}
|
||||
<Progress step={step} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<Toasts />
|
||||
|
||||
<Icons />
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: any) => {
|
||||
const { install, toasts } = state;
|
||||
const props = { install, toasts };
|
||||
return props;
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, actionCreators)(Setup);
|
||||
Reference in New Issue
Block a user