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: 4c89cf720 1085d59a6 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Mon Jun 10 17:22:20 2024 +0200 merge commit 4c89cf7209 Author: Ildar Kamalov <ik@adguard.com> Date: Thu Jun 6 13:27:18 2024 +0300 remove install from initial state commit b943f2011f Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 23:10:55 2024 +0200 frontend production build fix commit cd1be2d66d Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 20:23:14 2024 +0200 production build quickfix commit 7b8ac01fc2 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jun 5 19:57:31 2024 +0300 all: upd node docker commit 02afed66d5 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:23:12 2024 +0200 changelog fixes commit 9c0f736f0c Merge: 62c4fbf1e e04775c4f Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:18:29 2024 +0200 merge commit 62c4fbf1e3 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:22:22 2024 +0200 empty line in changelog commit 76b1e44a93 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:20:37 2024 +0200 changelog commit f783e90040 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:19:13 2024 +0200 filters.js -> filters.ts commit 3d4ce6554c Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:18:03 2024 +0200 generated file removed commit e35ba58f2a Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:45:21 2024 +0200 rollback unwanted changes commit 1f30d4216d Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:27:36 2024 +0200 review fix commit 6cd4e44f07 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:55:39 2024 +0200 missing generated file restoresd commit 2ab738b303 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:40:32 2024 +0200 Frontend rewritten in TypeScript, added Node 18 support
2024-06-10 18:42:23 +03:00
parent 1085d59a65
commit 1afe226ce8
296 changed files with 32122 additions and 32651 deletions
--- a/client/src/components/Settings/Encryption/index.tsx
+++ b/client/src/components/Settings/Encryption/index.tsx
@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import debounce from 'lodash/debounce';
+
+import { DEBOUNCE_TIMEOUT, ENCRYPTION_SOURCE } from '../../../helpers/constants';
+
+import Form from './Form';
+
+import Card from '../../ui/Card';
+
+import PageTitle from '../../ui/PageTitle';
+
+import Loading from '../../ui/Loading';
+import { EncryptionData } from '../../../initialState';
+
+interface EncryptionProps {
+    setTlsConfig: (...args: unknown[]) => unknown;
+    validateTlsConfig: (...args: unknown[]) => unknown;
+    encryption: EncryptionData;
+    t: (...args: unknown[]) => string;
+}
+
+class Encryption extends Component<EncryptionProps> {
+    componentDidMount() {
+        const { validateTlsConfig, encryption } = this.props;
+
+        if (encryption.enabled) {
+            validateTlsConfig(encryption);
+        }
+    }
+
+    handleFormSubmit = (values: any) => {
+        const submitValues = this.getSubmitValues(values);
+
+        this.props.setTlsConfig(submitValues);
+    };
+
+    handleFormChange = debounce((values) => {
+        const submitValues = this.getSubmitValues(values);
+
+        if (submitValues.enabled || submitValues.serve_plain_dns) {
+            this.props.validateTlsConfig(submitValues);
+        }
+    }, DEBOUNCE_TIMEOUT);
+
+    getInitialValues = (data: any) => {
+        const { certificate_chain, private_key, private_key_saved } = data;
+        const certificate_source = certificate_chain ? ENCRYPTION_SOURCE.CONTENT : ENCRYPTION_SOURCE.PATH;
+        const key_source = private_key || private_key_saved ? ENCRYPTION_SOURCE.CONTENT : ENCRYPTION_SOURCE.PATH;
+
+        return {
+            ...data,
+            certificate_source,
+            key_source,
+        };
+    };
+
+    getSubmitValues = (values: any) => {
+        const { certificate_source, key_source, private_key_saved, ...config } = values;
+
+        if (certificate_source === ENCRYPTION_SOURCE.PATH) {
+            config.certificate_chain = '';
+        } else {
+            config.certificate_path = '';
+        }
+
+        if (key_source === ENCRYPTION_SOURCE.PATH) {
+            config.private_key = '';
+        } else {
+            config.private_key_path = '';
+
+            if (private_key_saved) {
+                config.private_key = '';
+                config.private_key_saved = private_key_saved;
+            }
+        }
+
+        return config;
+    };
+
+    render() {
+        const { encryption, t } = this.props;
+        const {
+            enabled,
+            server_name,
+            force_https,
+            port_https,
+            port_dns_over_tls,
+            port_dns_over_quic,
+            certificate_chain,
+            private_key,
+            certificate_path,
+            private_key_path,
+            private_key_saved,
+            serve_plain_dns,
+        } = encryption;
+
+        const initialValues = this.getInitialValues({
+            enabled,
+            server_name,
+            force_https,
+            port_https,
+            port_dns_over_tls,
+            port_dns_over_quic,
+            certificate_chain,
+            private_key,
+            certificate_path,
+            private_key_path,
+            private_key_saved,
+            serve_plain_dns,
+        });
+
+        return (
+            <div className="encryption">
+                <PageTitle title={t('encryption_settings')} />
+
+                {encryption.processing && <Loading />}
+                {!encryption.processing && (
+                    <Card
+                        title={t('encryption_title')}
+                        subtitle={t('encryption_desc')}
+                        bodyType="card-body box-body--settings">
+                        <Form
+                            initialValues={initialValues}
+                            onSubmit={this.handleFormSubmit}
+                            onChange={this.handleFormChange}
+                            setTlsConfig={this.props.setTlsConfig}
+                            validateTlsConfig={this.props.validateTlsConfig}
+                            {...this.props.encryption}
+                        />
+                    </Card>
+                )}
+            </div>
+        );
+    }
+}
+
+export default withTranslation()(Encryption);