diff --git a/package-lock.json b/package-lock.json index 7deb6dc..cd7bfd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wlan-cloud-owprov-ui", - "version": "2.8.0(18)", + "version": "2.8.0(19)", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "wlan-cloud-owprov-ui", - "version": "2.8.0(18)", + "version": "2.8.0(19)", "license": "ISC", "dependencies": { "@chakra-ui/icons": "^2.0.11", diff --git a/package.json b/package.json index 1da2848..aca80af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wlan-cloud-owprov-ui", - "version": "2.8.0(18)", + "version": "2.8.0(19)", "description": "", "main": "index.tsx", "scripts": { diff --git a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Encryption.tsx b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Encryption.tsx index 6a3ac13..41421a4 100644 --- a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Encryption.tsx +++ b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Encryption.tsx @@ -15,6 +15,7 @@ interface Props { isKeyNeeded: boolean; isUsingRadius: boolean; isPasspoint?: boolean; + canUseRadius: boolean; } const EncryptionForm = ({ @@ -26,6 +27,7 @@ const EncryptionForm = ({ isKeyNeeded, isUsingRadius, isPasspoint, + canUseRadius, }: Props) => ( <> @@ -77,7 +79,9 @@ const EncryptionForm = ({ defaultValue /> - {isUsingRadius && } + {(isUsingRadius || canUseRadius) && ( + + )} ); diff --git a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/Radius.tsx b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/Radius.tsx index 826c524..a3a8ac9 100644 --- a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/Radius.tsx +++ b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/Radius.tsx @@ -19,6 +19,9 @@ type Props = { variableBlock?: string; // eslint-disable-next-line react/no-unused-prop-types isPasspoint?: boolean; + isEnabled: boolean; + onEnableToggle: () => void; + isNotRequired: boolean; }; const RadiusForm = ({ editing, @@ -29,6 +32,9 @@ const RadiusForm = ({ onDynamicChange, isDynamicEnabled, variableBlock, + isEnabled, + onEnableToggle, + isNotRequired, }: Props) => ( <> @@ -37,137 +43,141 @@ const RadiusForm = ({ Radius - + {isNotRequired && } + {isEnabled && ( + + )} - {isUsingCustom || !variableBlock ? ( - <> - - - - - - - - - Enable Accounting - - - - {isAccountingEnabled && ( + {isEnabled && + (isUsingCustom || !variableBlock ? ( + <> - - )} - - - Enable Dynamic Authorization - - - - {isDynamicEnabled && ( - - - - - )} - - - - - - - ) : ( - - )} + + + Enable Accounting + + + + {isAccountingEnabled && ( + + + + + + )} + + + Enable Dynamic Authorization + + + + {isDynamicEnabled && ( + + + + + + )} + + + + + + + ) : ( + + ))} ); diff --git a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/index.tsx b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/index.tsx index c580c7c..bbac967 100644 --- a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/index.tsx +++ b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/Radius/index.tsx @@ -1,11 +1,15 @@ import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { INTERFACE_SSID_RADIUS_SCHEMA } from '../../../../interfacesConstants'; import RadiusForm from './Radius'; import useFastField from 'hooks/useFastField'; -type Props = { editing: boolean; namePrefix: string; isPasspoint?: boolean }; +type Props = { editing: boolean; namePrefix: string; isPasspoint?: boolean; isNotRequired: boolean }; -const Radius = ({ editing, namePrefix, isPasspoint }: Props) => { +const Radius = ({ editing, namePrefix, isPasspoint, isNotRequired }: Props) => { + const { t } = useTranslation(); const { value: customRadius } = useFastField({ name: `${namePrefix}.__variableBlock` }); + const { value: radius, onChange: onRadiusChange } = useFastField({ name: `${namePrefix}` }); const { value: accounting, onChange: setAccounting } = useFastField({ name: `${namePrefix}.accounting` }); const { value: dynamicAuth, onChange: setDynamicAuth } = useFastField({ name: `${namePrefix}.dynamic-authorization`, @@ -27,6 +31,11 @@ const Radius = ({ editing, namePrefix, isPasspoint }: Props) => { const isAccountingEnabled = useMemo(() => accounting !== undefined, [accounting !== undefined]); + const isEnabled = React.useMemo(() => radius !== undefined, [radius !== undefined]); + const onEnableToggle = React.useCallback(() => { + if (isEnabled) onRadiusChange(undefined); + else onRadiusChange(INTERFACE_SSID_RADIUS_SCHEMA(t, true).cast()); + }, [isEnabled]); const onEnableDynamicChange = (e: React.ChangeEvent) => { if (e.target.checked) { setDynamicAuth({ @@ -51,7 +60,10 @@ const Radius = ({ editing, namePrefix, isPasspoint }: Props) => { isDynamicEnabled={isDynamicEnabled} variableBlock={customRadius} namePrefix={namePrefix} + isEnabled={isEnabled} + onEnableToggle={onEnableToggle} isPasspoint={isPasspoint} + isNotRequired={isNotRequired} /> ); }; diff --git a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/index.tsx b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/index.tsx index 4b0894a..0a5658b 100644 --- a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/index.tsx +++ b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption/index.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { + ENCRYPTION_PROTOS_CAN_RADIUS, ENCRYPTION_PROTOS_REQUIRE_IEEE, ENCRYPTION_PROTOS_REQUIRE_KEY, ENCRYPTION_PROTOS_REQUIRE_RADIUS, @@ -57,12 +58,13 @@ const Encryption = ({ [isPasspoint], ); - const { isKeyNeeded, needIeee, isUsingRadius } = useMemo( + const { isKeyNeeded, needIeee, isUsingRadius, canUseRadius } = useMemo( () => ({ isKeyNeeded: ENCRYPTION_PROTOS_REQUIRE_KEY.includes(encryptionValue?.proto ?? ''), needIeee: ENCRYPTION_PROTOS_REQUIRE_IEEE.includes(encryptionValue?.proto ?? ''), isUsingRadius: ENCRYPTION_PROTOS_REQUIRE_RADIUS.includes(encryptionValue?.proto ?? '') || radiusValue !== undefined, + canUseRadius: ENCRYPTION_PROTOS_CAN_RADIUS.includes(encryptionValue?.proto ?? ''), }), [encryptionValue?.proto, radiusValue !== undefined], ); @@ -77,6 +79,7 @@ const Encryption = ({ isKeyNeeded={isKeyNeeded} isUsingRadius={isUsingRadius} isPasspoint={isPasspoint} + canUseRadius={canUseRadius} /> ); }; diff --git a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js index c3e648c..2af0916 100644 --- a/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js +++ b/src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js @@ -41,6 +41,7 @@ export const ENCRYPTION_PROTOS_REQUIRE_IEEE = [ 'owe', 'owe-transition', ]; +export const ENCRYPTION_PROTOS_CAN_RADIUS = ['none']; export const ENCRYPTION_PROTOS_REQUIRE_RADIUS = [ 'psk2-radius', 'wpa',