encryption

This commit is contained in:
Ildar Kamalov
2025-01-28 16:50:30 +03:00
parent 6cb3d85d01
commit 47216d6c05
2 changed files with 29 additions and 33 deletions

View File

@@ -74,20 +74,20 @@ const validationMessage = (warningValidation: string, isWarning: boolean) => {
}; };
export type EncryptionFormValues = { export type EncryptionFormValues = {
enabled: boolean; enabled?: boolean;
serve_plain_dns: boolean; serve_plain_dns?: boolean;
server_name: string; server_name?: string;
force_https: boolean; force_https?: boolean;
port_https: number; port_https?: number;
port_dns_over_tls: number; port_dns_over_tls?: number;
port_dns_over_quic: number; port_dns_over_quic?: number;
certificate_chain: string; certificate_chain?: string;
private_key: string; private_key?: string;
certificate_path: string; certificate_path?: string;
private_key_path: string; private_key_path?: string;
certificate_source: string; certificate_source?: string;
key_source: string; key_source?: string;
private_key_saved: boolean; private_key_saved?: boolean;
}; };
type Props = { type Props = {
@@ -173,11 +173,11 @@ export const Form = ({
serve_plain_dns: servePlainDns, serve_plain_dns: servePlainDns,
certificate_chain: certificateChain, certificate_chain: certificateChain,
private_key: privateKey, private_key: privateKey,
certificate_path: certificatePath,
private_key_path: privateKeyPath, private_key_path: privateKeyPath,
certificate_source: certificateSource,
private_key_saved: privateKeySaved,
key_source: privateKeySource, key_source: privateKeySource,
private_key_saved: privateKeySaved,
certificate_path: certificatePath,
certificate_source: certificateSource,
} = watchedValues; } = watchedValues;
useEffect(() => { useEffect(() => {
@@ -185,7 +185,6 @@ export const Form = ({
if (JSON.stringify(previousValues) !== JSON.stringify(watchedValues)) { if (JSON.stringify(previousValues) !== JSON.stringify(watchedValues)) {
// TODO(ik) onChange TLS config validation // TODO(ik) onChange TLS config validation
console.log('debouncedConfigValidation');
previousValuesRef.current = watchedValues; previousValuesRef.current = watchedValues;
} }
}, [watchedValues]); }, [watchedValues]);

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useCallback } from 'react'; import React, { useEffect, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { DEBOUNCE_TIMEOUT, ENCRYPTION_SOURCE } from '../../../helpers/constants'; import { DEBOUNCE_TIMEOUT, ENCRYPTION_SOURCE } from '../../../helpers/constants';
@@ -24,17 +24,17 @@ export const Encryption = ({ encryption, setTlsConfig, validateTlsConfig }: Prop
} }
}, [encryption, validateTlsConfig]); }, [encryption, validateTlsConfig]);
const getInitialValues = useCallback((data: any): EncryptionFormValues => { const initialValues = useMemo((): EncryptionFormValues => {
const { certificate_chain, private_key, private_key_saved } = data; const { certificate_chain, private_key, private_key_saved } = encryption;
const certificate_source = certificate_chain ? ENCRYPTION_SOURCE.CONTENT : ENCRYPTION_SOURCE.PATH; 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; const key_source = private_key || private_key_saved ? ENCRYPTION_SOURCE.CONTENT : ENCRYPTION_SOURCE.PATH;
return { return {
...data, ...encryption,
certificate_source, certificate_source,
key_source, key_source,
}; };
}, []); }, [encryption]);
const getSubmitValues = useCallback((values: any) => { const getSubmitValues = useCallback((values: any) => {
const { certificate_source, key_source, private_key_saved, ...config } = values; const { certificate_source, key_source, private_key_saved, ...config } = values;
@@ -67,18 +67,15 @@ export const Encryption = ({ encryption, setTlsConfig, validateTlsConfig }: Prop
[getSubmitValues, setTlsConfig], [getSubmitValues, setTlsConfig],
); );
const debouncedConfigValidation = useCallback( const validateConfig = useCallback((values) => {
debounce((values) => { const submitValues = getSubmitValues(values);
const submitValues = getSubmitValues(values);
if (submitValues.enabled) { if (submitValues.enabled) {
validateTlsConfig(submitValues); validateTlsConfig(submitValues);
} }
}, DEBOUNCE_TIMEOUT), }, []);
[],
);
const initialValues = getInitialValues(encryption); const debouncedConfigValidation = useCallback(debounce(validateConfig, DEBOUNCE_TIMEOUT), [validateConfig]);
return ( return (
<div className="encryption"> <div className="encryption">