scottk/wlan-cloud-ui-library
1
0
Fork 0
mirror of https://github.com/Telecominfraproject/wlan-cloud-ui-library.git synced 2025-11-21 12:24:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

added text wrappers

Browse Source
This commit is contained in:
chris-cosentino
2021-09-09 18:17:37 -04:00
parent e4d9cc9edb
commit 6a791ccd02
16 changed files with 317 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/containers/Accounts/components/FormModal/index.js
View File

@@ -25,6 +25,7 @@ const FormModal = ({
isAuth0Enabled, isAuth0Enabled,
onResetUserPassword, onResetUserPassword,
allUserRoles, allUserRoles,
text,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
@@ -41,7 +42,7 @@ const FormModal = ({
const content = ( const content = (
<Form {...modalLayout} form={form}> <Form {...modalLayout} form={form}>
<Item <Item
label="E-mail" label={text('E-Mail')}
name="email" name="email"
rules={[ rules={[
{ {
@@ -61,7 +62,11 @@ const FormModal = ({
)} )}
</Item> </Item>
<Item label="Role" name="roles" rules={[{ required: true, message: 'Please select a role' }]}> <Item
label={text('Role')}
name="roles"
rules={[{ required: true, message: 'Please select a role' }]}
>
<ContainedSelect <ContainedSelect
placeholder="Select role" placeholder="Select role"
getPopupContainer={triggerNode => triggerNode.parentElement} getPopupContainer={triggerNode => triggerNode.parentElement}
@@ -75,7 +80,7 @@ const FormModal = ({
{!isAuth0Enabled && ( {!isAuth0Enabled && (
<> <>
<Item <Item
label="Password" label={text('Password')}
name="password" name="password"
rules={[ rules={[
{ {
@@ -161,6 +166,7 @@ FormModal.propTypes = {
isAuth0Enabled: PropTypes.bool, isAuth0Enabled: PropTypes.bool,
onResetUserPassword: PropTypes.func, onResetUserPassword: PropTypes.func,
allUserRoles: PropTypes.instanceOf(Array), allUserRoles: PropTypes.instanceOf(Array),
text: PropTypes.func,
}; };
FormModal.defaultProps = { FormModal.defaultProps = {
@@ -169,6 +175,7 @@ FormModal.defaultProps = {
isAuth0Enabled: false, isAuth0Enabled: false,
onResetUserPassword: () => {}, onResetUserPassword: () => {},
allUserRoles: ['SuperUser', 'CustomerIT'], allUserRoles: ['SuperUser', 'CustomerIT'],
text: str => str,
}; };
export default FormModal; export default FormModal;

17
src/containers/Accounts/index.js
View File

@@ -26,6 +26,7 @@ const Accounts = ({
allUserRoles, allUserRoles,
FormModal, FormModal,
loading, loading,
text,
}) => { }) => {
const [editModal, setEditModal] = useState(false); const [editModal, setEditModal] = useState(false);
const [addModal, setAddModal] = useState(false); const [addModal, setAddModal] = useState(false);
@@ -51,13 +52,13 @@ const Accounts = ({
const columns = [ const columns = [
{ {
title: 'E-MAIL', title: text('E-MAIL'),
dataIndex: 'email', dataIndex: 'email',
key: 'email', key: 'email',
width: width > 992 && 620, width: width > 992 && 620,
}, },
{ {
title: 'ROLES', title: text('ROLES'),
dataIndex: 'roles', dataIndex: 'roles',
key: 'roles', key: 'roles',
width: 120, width: 120,
@@ -112,9 +113,9 @@ const Accounts = ({
return ( return (
<div className={styles.Container}> <div className={styles.Container}>
<Header> <Header>
<h1>Users</h1> <h1>{text('Users')}</h1>
<RoleProtectedBtn title="addaccount" type="primary" onClick={() => setAddModal(true)}> <RoleProtectedBtn title="addaccount" type="primary" onClick={() => setAddModal(true)}>
Add User {text('Add User')}
</RoleProtectedBtn> </RoleProtectedBtn>
</Header> </Header>
@@ -122,7 +123,7 @@ const Accounts = ({
onCancel={() => setEditModal(false)} onCancel={() => setEditModal(false)}
visible={editModal} visible={editModal}
onSubmit={editUser} onSubmit={editUser}
title="Edit User" title={text('Edit User')}
data={activeUser} data={activeUser}
isAuth0Enabled={isAuth0Enabled} isAuth0Enabled={isAuth0Enabled}
onResetUserPassword={onResetUserPassword} onResetUserPassword={onResetUserPassword}
@@ -132,7 +133,7 @@ const Accounts = ({
onCancel={() => setAddModal(false)} onCancel={() => setAddModal(false)}
visible={addModal} visible={addModal}
onSubmit={addUser} onSubmit={addUser}
title="Add User" title={text('Add User')}
isAuth0Enabled={isAuth0Enabled} isAuth0Enabled={isAuth0Enabled}
allUserRoles={allUserRoles} allUserRoles={allUserRoles}
/> />
@@ -146,7 +147,7 @@ const Accounts = ({
/> />
{!isLastPage && ( {!isLastPage && (
<div className={styles.LoadMore}> <div className={styles.LoadMore}>
<Button onClick={onLoadMore}>Load More</Button> <Button onClick={onLoadMore}>{text('Load More')}</Button>
</div> </div>
)} )}
</div> </div>
@@ -166,6 +167,7 @@ Accounts.propTypes = {
allUserRoles: PropTypes.instanceOf(Array), allUserRoles: PropTypes.instanceOf(Array),
FormModal: PropTypes.func, FormModal: PropTypes.func,
loading: PropTypes.bool, loading: PropTypes.bool,
text: PropTypes.func,
}; };
Accounts.defaultProps = { Accounts.defaultProps = {
@@ -178,6 +180,7 @@ Accounts.defaultProps = {
allUserRoles: ['SuperUser', 'CustomerIT'], allUserRoles: ['SuperUser', 'CustomerIT'],
FormModal: DefaultModal, FormModal: DefaultModal,
loading: false, loading: false,
text: str => str,
}; };
export default Accounts; export default Accounts;

34
src/containers/AddProfile/index.js
View File

@@ -63,6 +63,7 @@ const AddProfile = ({
loadingPasspointProfiles, loadingPasspointProfiles,
fileUpload, fileUpload,
extraFields, extraFields,
text,
}) => { }) => {
const { routes } = useContext(ThemeContext); const { routes } = useContext(ThemeContext);
const [form] = Form.useForm(); const [form] = Form.useForm();
@@ -272,8 +273,8 @@ const AddProfile = ({
onCancel={() => setConfirmModal(false)} onCancel={() => setConfirmModal(false)}
onSuccess={() => history.push(routes.profiles)} onSuccess={() => history.push(routes.profiles)}
visible={confirmModal} visible={confirmModal}
buttonText="Leave Page" buttonText={text('Leave Page')}
title="Leave Page?" title={`${text('Leave Page')}?`}
content={ content={
<p> <p>
You have unsaved changes. Please confirm leaving without saving this wireless profile You have unsaved changes. Please confirm leaving without saving this wireless profile
@@ -293,19 +294,19 @@ const AddProfile = ({
<Button className={styles.backButton} icon={<LeftOutlined />} onClick={handleOnBack}> <Button className={styles.backButton} icon={<LeftOutlined />} onClick={handleOnBack}>
Back Back
</Button> </Button>
<h1>Add Profile</h1> <h1>{text('Add Profile')}</h1>
</div> </div>
<div> <div>
<Item noStyle> <Item noStyle>
<Button icon={<PlusOutlined />} type="primary" htmlType="submit"> <Button icon={<PlusOutlined />} type="primary" htmlType="submit">
Add {text('Add')}
</Button> </Button>
</Item> </Item>
</div> </div>
</Header> </Header>
<Card> <Card>
<Item <Item
label="Type" label={text('Type')}
name="profileType" name="profileType"
rules={[ rules={[
{ {
@@ -325,7 +326,7 @@ const AddProfile = ({
<Item <Item
id="name" id="name"
name="name" name="name"
label="Name" label={text('Name')}
rules={[{ required: true, message: 'Please input your profile name' }]} rules={[{ required: true, message: 'Please input your profile name' }]}
> >
<Input id="profileName" placeholder="Enter profile name" /> <Input id="profileName" placeholder="Enter profile name" />
@@ -343,6 +344,7 @@ const AddProfile = ({
loadingCaptiveProfiles={loadingCaptiveProfiles} loadingCaptiveProfiles={loadingCaptiveProfiles}
loadingRadiusProfiles={loadingRadiusProfiles} loadingRadiusProfiles={loadingRadiusProfiles}
loadingPasspointProfiles={loadingPasspointProfiles} loadingPasspointProfiles={loadingPasspointProfiles}
text={text}
/> />
)} )}
{profileType === PROFILES.accessPoint && ( {profileType === PROFILES.accessPoint && (
@@ -357,6 +359,7 @@ const AddProfile = ({
loadingSSIDProfiles={loadingSSIDProfiles} loadingSSIDProfiles={loadingSSIDProfiles}
loadingRFProfiles={loadingRFProfiles} loadingRFProfiles={loadingRFProfiles}
fileUpload={fileUpload} fileUpload={fileUpload}
text={text}
/> />
)} )}
{profileType === PROFILES.bonjour && ( {profileType === PROFILES.bonjour && (
@@ -371,14 +374,20 @@ const AddProfile = ({
onFetchMoreProfiles={onFetchMoreProfiles} onFetchMoreProfiles={onFetchMoreProfiles}
loadingRadiusProfiles={loadingRadiusProfiles} loadingRadiusProfiles={loadingRadiusProfiles}
fileUpload={fileUpload} fileUpload={fileUpload}
text={text}
/> />
)} )}
{profileType === PROFILES.radius && ( {profileType === PROFILES.radius && (
<RadiusForm form={form} details={initialValues?.details} /> <RadiusForm form={form} details={initialValues?.details} text={text} />
)} )}
{profileType === PROFILES.rf && ( {profileType === PROFILES.rf && (
<RFForm form={form} details={initialValues?.details} extraFields={extraFields} /> <RFForm
form={form}
details={initialValues?.details}
extraFields={extraFields}
text={text}
/>
)} )}
{profileType === PROFILES.passpoint && ( {profileType === PROFILES.passpoint && (
<PasspointProfileForm <PasspointProfileForm
@@ -394,16 +403,17 @@ const AddProfile = ({
loadingOperatorProfiles={loadingOperatorProfiles} loadingOperatorProfiles={loadingOperatorProfiles}
loadingIdProviderProfiles={loadingIdProviderProfiles} loadingIdProviderProfiles={loadingIdProviderProfiles}
fileUpload={fileUpload} fileUpload={fileUpload}
text={text}
/> />
)} )}
{profileType === PROFILES.providerID && ( {profileType === PROFILES.providerID && (
<ProviderIdForm form={form} details={initialValues?.details} /> <ProviderIdForm form={form} details={initialValues?.details} text={text} />
)} )}
{profileType === PROFILES.operator && ( {profileType === PROFILES.operator && (
<OperatorForm form={form} details={initialValues?.details} /> <OperatorForm form={form} details={initialValues?.details} text={text} />
)} )}
{profileType === PROFILES.venue && ( {profileType === PROFILES.venue && (
<VenueForm form={form} details={initialValues?.details} /> <VenueForm form={form} details={initialValues?.details} text={text} />
)} )}
</Form> </Form>
</div> </div>
@@ -435,6 +445,7 @@ AddProfile.propTypes = {
fileUpload: PropTypes.func, fileUpload: PropTypes.func,
extraFields: PropTypes.instanceOf(Array), extraFields: PropTypes.instanceOf(Array),
text: PropTypes.func,
}; };
AddProfile.defaultProps = { AddProfile.defaultProps = {
@@ -459,6 +470,7 @@ AddProfile.defaultProps = {
loadingPasspointProfiles: false, loadingPasspointProfiles: false,
fileUpload: () => {}, fileUpload: () => {},
extraFields: [], extraFields: [],
text: str => str,
}; };
export default AddProfile; export default AddProfile;

6
src/containers/BlockedList/components/FormModal/index.js
View File

@@ -7,13 +7,13 @@ import { modalLayout } from 'utils/form';
const { Item } = Form; const { Item } = Form;
const FormModal = ({ onCancel, onSubmit, visible, title }) => { const FormModal = ({ onCancel, onSubmit, visible, title, text }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const content = ( const content = (
<Form {...modalLayout} form={form}> <Form {...modalLayout} form={form}>
<Item <Item
label="MAC Address" label={text('MAC Address')}
name="macAddress" name="macAddress"
rules={[ rules={[
{ {
@@ -64,6 +64,7 @@ FormModal.propTypes = {
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
title: PropTypes.string, title: PropTypes.string,
buttonText: PropTypes.string, buttonText: PropTypes.string,
text: PropTypes.func,
}; };
FormModal.defaultProps = { FormModal.defaultProps = {
@@ -72,6 +73,7 @@ FormModal.defaultProps = {
onSubmit: () => {}, onSubmit: () => {},
title: '', title: '',
buttonText: '', buttonText: '',
text: str => str,
}; };
export default FormModal; export default FormModal;

13
src/containers/BlockedList/index.js
View File

@@ -12,7 +12,7 @@ import WithRoles, { RoleProtectedBtn } from 'components/WithRoles';
import FormModal from './components/FormModal'; import FormModal from './components/FormModal';
import styles from './index.module.scss'; import styles from './index.module.scss';
const BlockedList = ({ data, onUpdateClient, onAddClient, loading }) => { const BlockedList = ({ data, onUpdateClient, onAddClient, loading, text }) => {
const { routes } = useContext(ThemeContext); const { routes } = useContext(ThemeContext);
const [addModal, setAddModal] = useState(false); const [addModal, setAddModal] = useState(false);
const [activeMac, setActiveMac] = useState({}); const [activeMac, setActiveMac] = useState({});
@@ -37,7 +37,7 @@ const BlockedList = ({ data, onUpdateClient, onAddClient, loading }) => {
const columns = [ const columns = [
{ {
title: 'MAC ADDRESS', title: text('MAC ADDRESS'),
dataIndex: 'macAddress', dataIndex: 'macAddress',
width: 900, width: 900,
render: value => ( render: value => (
@@ -77,14 +77,15 @@ const BlockedList = ({ data, onUpdateClient, onAddClient, loading }) => {
onCancel={() => setAddModal(false)} onCancel={() => setAddModal(false)}
visible={addModal} visible={addModal}
onSubmit={addClient} onSubmit={addClient}
title="Add Client" title={text('Add Client')}
text={text}
/> />
<div className={styles.BlockedList}> <div className={styles.BlockedList}>
<Header> <Header>
<h1>Client Blocked List</h1> <h1>{text('Client Blocked List')}</h1>
<RoleProtectedBtn type="primary" onClick={() => setAddModal(true)}> <RoleProtectedBtn type="primary" onClick={() => setAddModal(true)}>
Add Client {text('Add Client')}
</RoleProtectedBtn> </RoleProtectedBtn>
</Header> </Header>
@@ -106,6 +107,7 @@ BlockedList.propTypes = {
onUpdateClient: Proptypes.func, onUpdateClient: Proptypes.func,
onAddClient: Proptypes.func, onAddClient: Proptypes.func,
loading: Proptypes.bool, loading: Proptypes.bool,
text: Proptypes.func,
}; };
BlockedList.defaultProps = { BlockedList.defaultProps = {
@@ -113,6 +115,7 @@ BlockedList.defaultProps = {
onUpdateClient: () => {}, onUpdateClient: () => {},
onAddClient: () => {}, onAddClient: () => {},
loading: false, loading: false,
text: str => str,
}; };
export default BlockedList; export default BlockedList;

68
src/containers/ProfileDetails/components/AccessPoint/index.js
View File

@@ -55,6 +55,7 @@ const AccessPointForm = ({
fileUpload, fileUpload,
handleOnFormChange, handleOnFormChange,
loading, loading,
text,
}) => { }) => {
const { radioTypes } = useContext(ThemeContext); const { radioTypes } = useContext(ThemeContext);
@@ -210,15 +211,15 @@ const AccessPointForm = ({
const columnsGre = [ const columnsGre = [
{ {
title: 'Name', title: text('text'),
dataIndex: 'greTunnelName', dataIndex: 'greTunnelName',
}, },
{ {
title: 'Remote IP Address', title: text('Remote IP Address'),
dataIndex: 'greRemoteInetAddr', dataIndex: 'greRemoteInetAddr',
}, },
{ {
title: 'VLAN IDs', title: text('VLAN IDs'),
dataIndex: 'vlanIdsInGreTunnel', dataIndex: 'vlanIdsInGreTunnel',
render: items => (!items?.length ? 'N/A' : items?.join(', ')), render: items => (!items?.length ? 'N/A' : items?.join(', ')),
}, },
@@ -240,8 +241,8 @@ const AccessPointForm = ({
const enabledRadioOptions = options => { const enabledRadioOptions = options => {
return ( return (
<Group {...options}> <Group {...options}>
<Radio value="false">Disabled</Radio> <Radio value="false">{text('Disabled')}</Radio>
<Radio value="true">Enabled</Radio> <Radio value="true">{text('Enabled')}</Radio>
</Group> </Group>
); );
}; };
@@ -382,7 +383,7 @@ const AccessPointForm = ({
return ( return (
<div className={styles.ProfilePage}> <div className={styles.ProfilePage}>
<Card title="LAN and Services" loading={loading}> <Card title={text('LAN and Services')} loading={loading}>
<Item label="NTP" name={['ntpServer', 'auto']} valuePropName="checked"> <Item label="NTP" name={['ntpServer', 'auto']} valuePropName="checked">
<Checkbox data-testid="ntpCheckbox">Use Default Servers</Checkbox> <Checkbox data-testid="ntpCheckbox">Use Default Servers</Checkbox>
</Item> </Item>
@@ -407,7 +408,7 @@ const AccessPointForm = ({
help={ntpServerValidation.help} help={ntpServerValidation.help}
> >
<Search <Search
placeholder="Enter NTP server..." placeholder={text('Enter NTP server...')}
enterButton="Add" enterButton="Add"
onSearch={handleOnAddServer} onSearch={handleOnAddServer}
value={ntpServerSearch} value={ntpServerSearch}
@@ -441,11 +442,11 @@ const AccessPointForm = ({
); );
}} }}
</Item> </Item>
<Item label="LED Status" name="ledControlEnabled" valuePropName="checked"> <Item label={text('LED Status')} name="ledControlEnabled" valuePropName="checked">
<Checkbox disabled>Show LED indicators on APs</Checkbox> <Checkbox disabled>Show LED indicators on APs</Checkbox>
</Item> </Item>
<Item <Item
label="RTLS" label={text('RTLS')}
name={['rtlsSettings', 'enabled']} name={['rtlsSettings', 'enabled']}
rules={[ rules={[
{ {
@@ -630,12 +631,12 @@ const AccessPointForm = ({
{enabledRadioOptions()} {enabledRadioOptions()}
</Item> </Item>
</Card> </Card>
<Card title="RF Enabled on This Profile" loading={loading}> <Card title={text('RF Enabled on This Profile')} loading={loading}>
<Item name="rfProfileId"> <Item name="rfProfileId">
<Select <Select
onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.rf)} onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.rf)}
showSearch={onSearchProfile} showSearch={onSearchProfile}
placeholder="Select a RF Profile" placeholder={text('Select a RF Profile')}
filterOption={false} filterOption={false}
onSearch={name => onSearchProfile(PROFILES.rf, name)} onSearch={name => onSearchProfile(PROFILES.rf, name)}
onSelect={() => onSearchProfile && onSearchProfile(PROFILES.rf)} onSelect={() => onSearchProfile && onSearchProfile(PROFILES.rf)}
@@ -651,13 +652,13 @@ const AccessPointForm = ({
</Select> </Select>
</Item> </Item>
</Card> </Card>
<Card title="Wireless Networks (SSIDs) Enabled on This Profile" loading={loading}> <Card title={text('Wireless Networks (SSIDs) Enabled on This Profile')} loading={loading}>
<Item> <Item>
<Select <Select
onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.ssid)} onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.ssid)}
data-testid="ssidProfile" data-testid="ssidProfile"
showSearch={onSearchProfile} showSearch={onSearchProfile}
placeholder="Select a SSID Profile" placeholder={text('Select a SSID Profile')}
filterOption={false} filterOption={false}
onSearch={name => onSearchProfile(PROFILES.ssid, name)} onSearch={name => onSearchProfile(PROFILES.ssid, name)}
onSelect={() => onSearchProfile && onSearchProfile(PROFILES.ssid)} onSelect={() => onSearchProfile && onSearchProfile(PROFILES.ssid)}
@@ -700,7 +701,7 @@ const AccessPointForm = ({
</Card> </Card>
<Card <Card
title="GRE Tunnel Configuration" title={text('GRE Tunnel Configuration')}
loading={loading} loading={loading}
extra={ extra={
<WithRoles> <WithRoles>
@@ -741,7 +742,7 @@ const AccessPointForm = ({
<Form.List name="radiusProxyConfigurations"> <Form.List name="radiusProxyConfigurations">
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<Card <Card
title="RADIUS Proxy Configuration" title={text('RADIUS Proxy Configuration')}
loading={loading} loading={loading}
bodyStyle={{ padding: fields.length <= 0 && '0' }} bodyStyle={{ padding: fields.length <= 0 && '0' }}
extra={ extra={
@@ -767,7 +768,9 @@ const AccessPointForm = ({
> >
{fields.map(field => ( {fields.map(field => (
<div key={field.name}> <div key={field.name}>
<Divider orientation="left"> Proxy Configuration {field.name + 1}</Divider> <Divider orientation="left">
{text('Proxy Configuration')} {field.name + 1}
</Divider>
<Item <Item
name={[field.name, 'useRadSec']} name={[field.name, 'useRadSec']}
label="RADSEC" label="RADSEC"
@@ -784,7 +787,7 @@ const AccessPointForm = ({
<Item <Item
name={[field.name, 'server']} name={[field.name, 'server']}
label="Authentication Server" label={text('Authentication Server')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -798,7 +801,7 @@ const AccessPointForm = ({
</Item> </Item>
<Item <Item
name={[field.name, 'port']} name={[field.name, 'port']}
label="Authentication Port" label={text('Authentication Port')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -819,7 +822,7 @@ const AccessPointForm = ({
initialValue="2083" initialValue="2083"
> >
<Input <Input
placeholder="Enter Authentication Port" placeholder={text('Enter Authentication Port')}
type="number" type="number"
min={1} min={1}
max={65535} max={65535}
@@ -846,7 +849,7 @@ const AccessPointForm = ({
}, },
]} ]}
> >
<Password placeholder="Enter Authentication Shared Secret" /> <Password placeholder={text('Enter Authentication Shared Secret')} />
</Item> </Item>
) )
); );
@@ -854,12 +857,12 @@ const AccessPointForm = ({
</Item> </Item>
<Item <Item
label="RADIUS Accounting" label={text('RADIUS Accounting')}
name={[field.name, 'useAccounting']} name={[field.name, 'useAccounting']}
valuePropName="checked" valuePropName="checked"
initialValue initialValue
> >
<Checkbox>Use RADIUS Accounting Server</Checkbox> <Checkbox>{text('Use RADIUS Accounting Server')}</Checkbox>
</Item> </Item>
<Item <Item
@@ -961,7 +964,7 @@ const AccessPointForm = ({
}} }}
</Item> </Item>
<Item label="Realm"> <Item label={text('Realm')}>
<Form.List name={[field.name, 'realm']} initialValue={['']}> <Form.List name={[field.name, 'realm']} initialValue={['']}>
{(realmFields, { add: addRealm, remove: removeRealm }) => { {(realmFields, { add: addRealm, remove: removeRealm }) => {
return ( return (
@@ -1024,7 +1027,7 @@ const AccessPointForm = ({
</div> </div>
))} ))}
<Button type="dashed" onClick={() => addRealm()}> <Button type="dashed" onClick={() => addRealm()}>
<PlusOutlined /> Add Realm <PlusOutlined /> {text('Add Realm')}
</Button> </Button>
</> </>
); );
@@ -1049,7 +1052,7 @@ const AccessPointForm = ({
wildCardUsed && ( wildCardUsed && (
<Item <Item
name={[field.name, 'dynamicDiscovery']} name={[field.name, 'dynamicDiscovery']}
label="Auto Discovery" label={text('Auto Discovery')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -1082,7 +1085,7 @@ const AccessPointForm = ({
<> <>
<Item <Item
name={[field.name, 'caCert']} name={[field.name, 'caCert']}
label="CA Certification" label={text('CA Certification')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -1103,13 +1106,13 @@ const AccessPointForm = ({
showRemoveIcon: false, showRemoveIcon: false,
}} }}
> >
<Button icon={<UploadOutlined />}>Click to Upload</Button> <Button icon={<UploadOutlined />}>{text('Click to Upload')}</Button>
</Upload> </Upload>
</Item> </Item>
<Item <Item
name={[field.name, 'clientCert']} name={[field.name, 'clientCert']}
label="Client Certification" label={text('Client Certification')}
tooltip="PEM File" tooltip="PEM File"
> >
<Upload <Upload
@@ -1130,7 +1133,7 @@ const AccessPointForm = ({
<Item <Item
name={[field.name, 'clientKey']} name={[field.name, 'clientKey']}
label="Client Key" label={text('Client Key')}
tooltip="KEY File" tooltip="KEY File"
> >
<Upload <Upload
@@ -1148,7 +1151,10 @@ const AccessPointForm = ({
<Button icon={<UploadOutlined />}>Click to Upload</Button> <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload> </Upload>
</Item> </Item>
<Item name={[field.name, 'passphrase']} label="Certificate Passphrase"> <Item
name={[field.name, 'passphrase']}
label={text('Certificate Passphrase')}
>
<Password placeholder="Enter Passphrase" /> <Password placeholder="Enter Passphrase" />
</Item> </Item>
</> </>
@@ -1191,6 +1197,7 @@ AccessPointForm.propTypes = {
handleOnFormChange: PropTypes.func, handleOnFormChange: PropTypes.func,
fileUpload: PropTypes.func, fileUpload: PropTypes.func,
loading: PropTypes.bool, loading: PropTypes.bool,
text: PropTypes.func,
}; };
AccessPointForm.defaultProps = { AccessPointForm.defaultProps = {
@@ -1206,6 +1213,7 @@ AccessPointForm.defaultProps = {
handleOnFormChange: () => {}, handleOnFormChange: () => {},
fileUpload: () => {}, fileUpload: () => {},
loading: false, loading: false,
text: str => str,
}; };
export default AccessPointForm; export default AccessPointForm;

47
src/containers/ProfileDetails/components/CaptivePortal/index.js
View File

@@ -44,6 +44,7 @@ const CaptivePortalForm = ({
onFetchMoreProfiles, onFetchMoreProfiles,
loadingRadiusProfiles, loadingRadiusProfiles,
handleOnFormChange, handleOnFormChange,
text,
}) => { }) => {
const formatFile = async file => { const formatFile = async file => {
const src = await onDownloadFile(file?.apExportUrl); const src = await onDownloadFile(file?.apExportUrl);
@@ -332,9 +333,9 @@ const CaptivePortalForm = ({
<img className={styles.Image} alt="Loading..." src={previewImage.thumbUrl} /> <img className={styles.Image} alt="Loading..." src={previewImage.thumbUrl} />
</Modal> </Modal>
<Card title="General Settings "> <Card title={text('General Settings')}>
<Item <Item
label="Authentication" label={text('Authentication')}
name="authenticationType" name="authenticationType"
rules={[ rules={[
{ {
@@ -353,7 +354,7 @@ const CaptivePortalForm = ({
<Item <Item
name="sessionTimeoutInMinutes" name="sessionTimeoutInMinutes"
label="Session Timeout " label={text('Session Timeout')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -381,7 +382,7 @@ const CaptivePortalForm = ({
</Item> </Item>
<Item <Item
name="redirectURL" name="redirectURL"
label="Redirect URL" label={text('Redirect URL')}
rules={[ rules={[
{ {
type: 'url', type: 'url',
@@ -391,13 +392,13 @@ const CaptivePortalForm = ({
> >
<Input placeholder="http://... or https://..." /> <Input placeholder="http://... or https://..." />
</Item> </Item>
<Item label="Splash Page" name="externalSplashPage"> <Item label={text('Splash Page')} name="externalSplashPage">
<Group> <Group>
<Radio value="false" onChange={disableExternalSplashChange}> <Radio value="false" onChange={disableExternalSplashChange}>
Access Point Hosted {text('Access Point Hosted')}
</Radio> </Radio>
<Radio value="true" disabled onChange={() => setExternalSplash(true)}> <Radio value="true" disabled onChange={() => setExternalSplash(true)}>
Externally Hosted {text('Externally Hosted')}
</Radio> </Radio>
</Group> </Group>
</Item> </Item>
@@ -417,10 +418,10 @@ const CaptivePortalForm = ({
</> </>
)} )}
{authentication === 'radius' && ( {authentication === 'radius' && (
<Card title="RADIUS"> <Card title={text('RADIUS')}>
<Item <Item
name="radiusAuthMethod" name="radiusAuthMethod"
label="Authentication" label={text('Authentication')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -436,7 +437,7 @@ const CaptivePortalForm = ({
</Item> </Item>
<Item <Item
name="radiusServiceId" name="radiusServiceId"
label="Service" label={text('Service')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -532,7 +533,7 @@ const CaptivePortalForm = ({
<Panel header="Splash Page Content" key="splashcontent" forceRender> <Panel header="Splash Page Content" key="splashcontent" forceRender>
<Item <Item
name="browserTitle" name="browserTitle"
label="Browser Title" label={text('Browser Title')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -544,7 +545,7 @@ const CaptivePortalForm = ({
</Item> </Item>
<Item <Item
name="headerContent" name="headerContent"
label="Page Title" label={text('Page Title')}
rules={[ rules={[
{ {
message: 'Please enter the page title', message: 'Please enter the page title',
@@ -553,21 +554,21 @@ const CaptivePortalForm = ({
> >
<Input placeholder="Page title" /> <Input placeholder="Page title" />
</Item> </Item>
<Item label="Body Content"> <Item label={text('Body Content')}>
<div className={styles.InlineDiv}> <div className={styles.InlineDiv}>
<Button <Button
onClick={() => setContentText(false)} onClick={() => setContentText(false)}
type={!isLoginText ? 'primary ' : 'ghost'} type={!isLoginText ? 'primary ' : 'ghost'}
className={styles.Header} className={styles.Header}
> >
User Acceptance Policy Text {text('User Acceptance Policy Text')}
</Button> </Button>
<Button <Button
onClick={() => setContentText(true)} onClick={() => setContentText(true)}
type={isLoginText ? 'primary ' : 'ghost'} type={isLoginText ? 'primary ' : 'ghost'}
className={styles.Header} className={styles.Header}
> >
Login Success Text {text('Login Success Text')}
</Button> </Button>
</div> </div>
<Item name="userAcceptancePolicy" hidden={isLoginText}> <Item name="userAcceptancePolicy" hidden={isLoginText}>
@@ -581,14 +582,14 @@ const CaptivePortalForm = ({
</Panel> </Panel>
</Collapse> </Collapse>
<Collapse expandIconPosition="right"> <Collapse expandIconPosition="right">
<Panel header="Splash Page Images" forceRender> <Panel header={text('Splash Page Images')} forceRender>
<Item label="Configure"> <Item label={text('Configure')}>
<div className={styles.InlineDiv}> <div className={styles.InlineDiv}>
<Tooltip <Tooltip
title="Max dimensions recommended are: 1000px by 250px with a max file size of 180KB" title="Max dimensions recommended are: 1000px by 250px with a max file size of 180KB"
text="Logo" text={text('Logo')}
/> />
<Tooltip title="Max file size of 400KB" text="Background" /> <Tooltip title="Max file size of 400KB" text={text('Background')} />
</div> </div>
</Item> </Item>
@@ -623,7 +624,7 @@ const CaptivePortalForm = ({
</div> </div>
</Item> </Item>
{bgFileList.length > 0 && ( {bgFileList.length > 0 && (
<Item label="Background Styles"> <Item label={text('Background Styles')}>
<div className={styles.InlineDiv}> <div className={styles.InlineDiv}>
<Item name="backgroundRepeat"> <Item name="backgroundRepeat">
<Select placeholder="Select Background Repeat"> <Select placeholder="Select Background Repeat">
@@ -651,9 +652,9 @@ const CaptivePortalForm = ({
</Panel> </Panel>
</Collapse> </Collapse>
<Collapse expandIconPosition="right"> <Collapse expandIconPosition="right">
<Panel header="Allow List" forceRender> <Panel header={text('Allow List')} forceRender>
<Item <Item
label="Configure" label={text('Configure')}
rules={[{ validator: validateWhitelist }]} rules={[{ validator: validateWhitelist }]}
validateStatus={whitelistValidation.status} validateStatus={whitelistValidation.status}
help={whitelistValidation.help} help={whitelistValidation.help}
@@ -710,6 +711,7 @@ CaptivePortalForm.propTypes = {
onFetchMoreProfiles: PropTypes.func, onFetchMoreProfiles: PropTypes.func,
loadingRadiusProfiles: PropTypes.bool, loadingRadiusProfiles: PropTypes.bool,
handleOnFormChange: PropTypes.func, handleOnFormChange: PropTypes.func,
text: PropTypes.func,
}; };
CaptivePortalForm.defaultProps = { CaptivePortalForm.defaultProps = {
@@ -723,6 +725,7 @@ CaptivePortalForm.defaultProps = {
onFetchMoreProfiles: () => {}, onFetchMoreProfiles: () => {},
loadingRadiusProfiles: false, loadingRadiusProfiles: false,
handleOnFormChange: () => {}, handleOnFormChange: () => {},
text: str => str,
}; };
export default CaptivePortalForm; export default CaptivePortalForm;

14
src/containers/ProfileDetails/components/Operator/index.js
View File

@@ -12,7 +12,7 @@ import styles from '../index.module.scss';
const { Item } = Form; const { Item } = Form;
const { Option } = AntdSelect; const { Option } = AntdSelect;
const OperatorForm = ({ details, form, handleOnFormChange }) => { const OperatorForm = ({ details, form, handleOnFormChange, text }) => {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [operatorFriendlyName, setOperatorFriendlyName] = useState( const [operatorFriendlyName, setOperatorFriendlyName] = useState(
@@ -50,7 +50,7 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
return ( return (
<div className={styles.ProfilePage}> <div className={styles.ProfilePage}>
<Card title="Security"> <Card title={text('Security')}>
<Item <Item
label="OSEN:" label="OSEN:"
name="serverOnlyAuthenticatedL2EncryptionNetwork" name="serverOnlyAuthenticatedL2EncryptionNetwork"
@@ -62,7 +62,7 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
</Select> </Select>
</Item> </Item>
<Item label="Domain Name List"> <Item label={text('Domain Name List')}>
<Form.List name="domainNameList"> <Form.List name="domainNameList">
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
@@ -111,7 +111,7 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
</div> </div>
))} ))}
<RoleProtectedBtn type="dashed" onClick={() => add()}> <RoleProtectedBtn type="dashed" onClick={() => add()}>
<PlusOutlined /> Add Domain Name <PlusOutlined /> {text('Add Domain Name')}
</RoleProtectedBtn> </RoleProtectedBtn>
</> </>
); );
@@ -121,10 +121,10 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
</Card> </Card>
<Card <Card
title="Operator Name" title={text('Operator Name')}
extra={ extra={
<RoleProtectedBtn type="solid" onClick={() => setModalVisible(true)}> <RoleProtectedBtn type="solid" onClick={() => setModalVisible(true)}>
Add Name {text('Add Name')}
</RoleProtectedBtn> </RoleProtectedBtn>
} }
> >
@@ -152,12 +152,14 @@ OperatorForm.propTypes = {
details: PropTypes.instanceOf(Object), details: PropTypes.instanceOf(Object),
form: PropTypes.instanceOf(Object), form: PropTypes.instanceOf(Object),
handleOnFormChange: PropTypes.func, handleOnFormChange: PropTypes.func,
text: PropTypes.func,
}; };
OperatorForm.defaultProps = { OperatorForm.defaultProps = {
form: null, form: null,
details: {}, details: {},
handleOnFormChange: () => {}, handleOnFormChange: () => {},
text: str => str,
}; };
export default OperatorForm; export default OperatorForm;

61
src/containers/ProfileDetails/components/PasspointProfile/index.js
View File

@@ -49,6 +49,7 @@ const PasspointProfileForm = ({
loadingOperatorProfiles, loadingOperatorProfiles,
loadingIdProviderProfiles, loadingIdProviderProfiles,
handleOnFormChange, handleOnFormChange,
text,
}) => { }) => {
const history = useHistory(); const history = useHistory();
const { radioTypes, routes } = useContext(ThemeContext); const { radioTypes, routes } = useContext(ThemeContext);
@@ -204,17 +205,17 @@ const PasspointProfileForm = ({
const columns = [ const columns = [
{ {
title: 'Status', title: text('Status'),
dataIndex: 'connectionCapabilitiesStatus', dataIndex: 'connectionCapabilitiesStatus',
width: 300, width: 300,
}, },
{ {
title: 'Protocol', title: text('Protocol'),
dataIndex: 'connectionCapabilitiesIpProtocol', dataIndex: 'connectionCapabilitiesIpProtocol',
width: 300, width: 300,
}, },
{ {
title: 'Port', title: text('Port'),
dataIndex: 'connectionCapabilitiesPortNumber', dataIndex: 'connectionCapabilitiesPortNumber',
width: 300, width: 300,
}, },
@@ -234,24 +235,24 @@ const PasspointProfileForm = ({
const columnsSsid = [ const columnsSsid = [
{ {
title: 'Profile Name', title: text('Profile Name'),
dataIndex: 'name', dataIndex: 'name',
}, },
{ {
title: 'Type', title: text('Type'),
dataIndex: 'id', dataIndex: 'id',
render: id => (parseInt(id, 10) === details?.osuSsidProfileId ? 'OSU' : 'Access'), render: id => (parseInt(id, 10) === details?.osuSsidProfileId ? 'OSU' : 'Access'),
}, },
{ {
title: 'SSID', title: text('SSID'),
dataIndex: ['details', 'ssid'], dataIndex: ['details', 'ssid'],
}, },
{ {
title: 'Security Mode', title: text('Security Mode'),
dataIndex: ['details', 'secureMode'], dataIndex: ['details', 'secureMode'],
}, },
{ {
title: 'Radio', title: text('Radio'),
dataIndex: ['details', 'appliedRadios'], dataIndex: ['details', 'appliedRadios'],
render: appliedRadios => render: appliedRadios =>
sortRadioTypes([...appliedRadios]) sortRadioTypes([...appliedRadios])
@@ -262,8 +263,8 @@ const PasspointProfileForm = ({
return ( return (
<div className={styles.ProfilePage}> <div className={styles.ProfilePage}>
<Card title="General"> <Card title={text('General')}>
<Item label="Venue" name="passpointVenueProfileId"> <Item label={text('Venue')} name="passpointVenueProfileId">
<Select <Select
onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.venue)} onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.venue)}
data-testid="venueProfile" data-testid="venueProfile"
@@ -283,7 +284,7 @@ const PasspointProfileForm = ({
))} ))}
</Select> </Select>
</Item> </Item>
<Item label="Operator" name="passpointOperatorProfileId"> <Item label={text('Operator')} name="passpointOperatorProfileId">
<Select <Select
onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.operator)} onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.operator)}
data-testid="operatorProfile" data-testid="operatorProfile"
@@ -303,7 +304,7 @@ const PasspointProfileForm = ({
))} ))}
</Select> </Select>
</Item> </Item>
<Item label="ID Provider" name="passpointOsuProviderProfileIds"> <Item label={text('ID Provider')} name="passpointOsuProviderProfileIds">
<Select <Select
onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.providerID)} onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.providerID)}
data-testid="idProviderProfiles" data-testid="idProviderProfiles"
@@ -328,7 +329,7 @@ const PasspointProfileForm = ({
</Item> </Item>
<Item <Item
label="Deauthentication Request Timeout" label={text('Deauthentication Request Timeout')}
name="deauthRequestTimeout" name="deauthRequestTimeout"
rules={[ rules={[
{ {
@@ -349,7 +350,7 @@ const PasspointProfileForm = ({
> >
<Input min={0} max={255} type="number" placeholder="0-255" addonAfter="Seconds" /> <Input min={0} max={255} type="number" placeholder="0-255" addonAfter="Seconds" />
</Item> </Item>
<Item label="Interworking Hot 2.0" name="enableInterworkingAndHs20"> <Item label={text('Interworking Hot 2.0')} name="enableInterworkingAndHs20">
{defaultRadios} {defaultRadios}
</Item> </Item>
<Item <Item
@@ -382,16 +383,16 @@ const PasspointProfileForm = ({
<Item <Item
label="ASRA" label="ASRA"
name="additionalStepsRequiredForAccess" name="additionalStepsRequiredForAccess"
tooltip="Additional Steps Required For Access" tooltip={text('Additional Steps Required For Access')}
> >
{defaultRadios} {defaultRadios}
</Item> </Item>
<Item label="Quality of Service Configuration" name="qosMapSetConfiguration"> <Item label={text('Quality of Service Configuration')} name="qosMapSetConfiguration">
{defaultRadios} {defaultRadios}
</Item> </Item>
<Item label="Operating Class" name="useOperatingClass"> <Item label={text('Operating Class')} name="useOperatingClass">
{defaultRadios} {defaultRadios}
</Item> </Item>
<Item <Item
@@ -433,7 +434,7 @@ const PasspointProfileForm = ({
<Card <Card
title={ title={
<> <>
Wireless Networks (SSIDs) Enabled on This Profile {text('Wireless Networks (SSIDs) Enabled on This Profile')}
<Tooltip title="Please configure the OSU and Access SSIDs for this Passpoint profile in the SSID profile"> <Tooltip title="Please configure the OSU and Access SSIDs for this Passpoint profile in the SSID profile">
<InfoCircleOutlined className={styles.ToolTip} /> <InfoCircleOutlined className={styles.ToolTip} />
</Tooltip> </Tooltip>
@@ -453,8 +454,8 @@ const PasspointProfileForm = ({
})} })}
/> />
</Card> </Card>
<Card title="Access Network"> <Card title={text('Access Network')}>
<Item label="Access Network Type" name="accessNetworkType"> <Item label={text('Access Network Type')} name="accessNetworkType">
<Select> <Select>
<Option value="private_network">Private Network</Option> <Option value="private_network">Private Network</Option>
<Option value="private_network_guest_access">Private Network Guest Access</Option> <Option value="private_network_guest_access">Private Network Guest Access</Option>
@@ -466,7 +467,7 @@ const PasspointProfileForm = ({
<Option value="wildcard">Wildcard</Option> <Option value="wildcard">Wildcard</Option>
</Select> </Select>
</Item> </Item>
<Item label="Authentication Type" name="networkAuthenticationType"> <Item label={text('Authentication Type')} name="networkAuthenticationType">
<Select onChange={value => setAuthType(value)}> <Select onChange={value => setAuthType(value)}>
<Option value="acceptance_of_terms_and_conditions"> <Option value="acceptance_of_terms_and_conditions">
Acceptance of Terms & Conditions Acceptance of Terms & Conditions
@@ -478,7 +479,7 @@ const PasspointProfileForm = ({
</Item> </Item>
{authType === 'acceptance_of_terms_and_conditions' && ( {authType === 'acceptance_of_terms_and_conditions' && (
<Item label="Terms & Conditions" name="termsAndConditionsFile"> <Item label={text('Terms & Conditions')} name="termsAndConditionsFile">
<Upload <Upload
accept="image/*, text/plain" accept="image/*, text/plain"
data-testid="termsAndConditionsUpload" data-testid="termsAndConditionsUpload"
@@ -491,21 +492,21 @@ const PasspointProfileForm = ({
</Item> </Item>
)} )}
<Item label="Emergency Services Reachable" name="emergencyServicesReachable"> <Item label={text('Emergency Services Reachable')} name="emergencyServicesReachable">
{defaultRadios} {defaultRadios}
</Item> </Item>
<Item <Item
label="Unauthenticated Emergency Service Accessible" label={text('Unauthenticated Emergency Service Accessible')}
name="unauthenticatedEmergencyServiceAccessible" name="unauthenticatedEmergencyServiceAccessible"
> >
{defaultRadios} {defaultRadios}
</Item> </Item>
</Card> </Card>
<Card title="IP Connectivity"> <Card title={text('IP Connectivity')}>
<Item label="Internet Connectivity" name="internetConnectivity"> <Item label={text('Internet Connectivity')} name="internetConnectivity">
{defaultRadios} {defaultRadios}
</Item> </Item>
<Item label="IP Address Type" name="ipAddressTypeAvailability"> <Item label={text('IP Address Type')} name="ipAddressTypeAvailability">
<Select> <Select>
<Option value="address_type_not_available">Address Type Not Available</Option> <Option value="address_type_not_available">Address Type Not Available</Option>
<Option value="address_type_available">Address Type Available</Option> <Option value="address_type_available">Address Type Available</Option>
@@ -530,7 +531,7 @@ const PasspointProfileForm = ({
</Option> </Option>
</Select> </Select>
</Item> </Item>
<Item label="Connection Capability"> <Item label={text('Connection Capability')}>
<Button type="solid" onClick={() => setModalVisible(true)}> <Button type="solid" onClick={() => setModalVisible(true)}>
Add Add
</Button> </Button>
@@ -543,7 +544,7 @@ const PasspointProfileForm = ({
rowKey="connectionCapabilitiesPortNumber" rowKey="connectionCapabilitiesPortNumber"
/> />
</Card> </Card>
<Card title="Advanced"> <Card title={text('Advanced')}>
<Item <Item
label="ANQP Domain ID" label="ANQP Domain ID"
name="anqpDomainId" name="anqpDomainId"
@@ -615,6 +616,7 @@ PasspointProfileForm.propTypes = {
loadingOperatorProfiles: PropTypes.bool, loadingOperatorProfiles: PropTypes.bool,
loadingIdProviderProfiles: PropTypes.bool, loadingIdProviderProfiles: PropTypes.bool,
handleOnFormChange: PropTypes.func, handleOnFormChange: PropTypes.func,
text: PropTypes.func,
}; };
PasspointProfileForm.defaultProps = { PasspointProfileForm.defaultProps = {
@@ -633,6 +635,7 @@ PasspointProfileForm.defaultProps = {
loadingOperatorProfiles: false, loadingOperatorProfiles: false,
loadingIdProviderProfiles: false, loadingIdProviderProfiles: false,
handleOnFormChange: () => {}, handleOnFormChange: () => {},
text: str => str,
}; };
export default PasspointProfileForm; export default PasspointProfileForm;

11
src/containers/ProfileDetails/components/ProviderId/components/NaiRealm/index.js
View File

@@ -19,7 +19,7 @@ const naiLayout = {
wrapperCol: { span: 20 }, wrapperCol: { span: 20 },
}; };
const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm }) => { const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm, text }) => {
const [eapModal, setEapModal] = useState(false); const [eapModal, setEapModal] = useState(false);
const columnsNai = [ const columnsNai = [
@@ -176,12 +176,12 @@ const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm }) => {
onSuccess={addEapMethod} onSuccess={addEapMethod}
onCancel={canceledModal} onCancel={canceledModal}
visible={eapModal} visible={eapModal}
title="Add EAP Method" title={text('Add EAP Method')}
content={ content={
<Form {...naiLayout} form={form}> <Form {...naiLayout} form={form}>
<Item <Item
name="method" name="method"
label="Method:" label={text('Method')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -205,7 +205,7 @@ const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm }) => {
</Item> </Item>
<Item <Item
name="auth" name="auth"
label="Authentication" label={text('Authentication')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -229,8 +229,9 @@ NaiRealm.propTypes = {
addEap: PropTypes.func.isRequired, addEap: PropTypes.func.isRequired,
removeEap: PropTypes.func.isRequired, removeEap: PropTypes.func.isRequired,
addRealm: PropTypes.func.isRequired, addRealm: PropTypes.func.isRequired,
text: PropTypes.func,
}; };
NaiRealm.defaultProps = { eapMap: {}, form: null }; NaiRealm.defaultProps = { eapMap: {}, form: null, text: str => str };
export default NaiRealm; export default NaiRealm;

17
src/containers/ProfileDetails/components/ProviderId/index.js
View File

@@ -13,7 +13,7 @@ import styles from '../index.module.scss';
const { Item } = Form; const { Item } = Form;
const ProviderIdForm = ({ form, details, handleOnFormChange }) => { const ProviderIdForm = ({ form, details, handleOnFormChange, text }) => {
const [modalForm] = Form.useForm(); const [modalForm] = Form.useForm();
const [plmnModal, setPlmnModal] = useState(false); const [plmnModal, setPlmnModal] = useState(false);
const [mccMncList, setMccMncList] = useState(details?.mccMncList || []); const [mccMncList, setMccMncList] = useState(details?.mccMncList || []);
@@ -167,8 +167,8 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
return ( return (
<div className={styles.ProfilePage}> <div className={styles.ProfilePage}>
<Card title="Network Identifier"> <Card title={text('Network Identifier')}>
<Item label="Roaming OI"> <Item label={text('Roaming OI')}>
<Form.List name="roamingOi"> <Form.List name="roamingOi">
{(fields, { add: addRoamingOI, remove: removeRoamingOI }) => { {(fields, { add: addRoamingOI, remove: removeRoamingOI }) => {
return ( return (
@@ -216,7 +216,7 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
</div> </div>
))} ))}
<RoleProtectedBtn type="dashed" onClick={() => addRoamingOI()}> <RoleProtectedBtn type="dashed" onClick={() => addRoamingOI()}>
<PlusOutlined /> Add Roaming OI <PlusOutlined /> {text('Add Roaming OI')}
</RoleProtectedBtn> </RoleProtectedBtn>
</> </>
); );
@@ -226,10 +226,10 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
</Card> </Card>
<Card <Card
title="Public Land Mobile Networks (PLMN)" title={text('Public Land Mobile Networks (PLMN)')}
extra={ extra={
<RoleProtectedBtn type="solid" onClick={() => setPlmnModal(true)} data-testid="addPlmn"> <RoleProtectedBtn type="solid" onClick={() => setPlmnModal(true)} data-testid="addPlmn">
Add {text('Add')}
</RoleProtectedBtn> </RoleProtectedBtn>
} }
> >
@@ -239,7 +239,7 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
visible={plmnModal} visible={plmnModal}
onSuccess={handleAddPlmnItem} onSuccess={handleAddPlmnItem}
onCancel={handleClosePlmnModal} onCancel={handleClosePlmnModal}
title="Add Public Land Mobile Network (PLMN)" title={text('Add Public Land Mobile Network (PLMN)')}
content={ content={
<Form {...modalLayout} form={modalForm}> <Form {...modalLayout} form={modalForm}>
<Item <Item
@@ -278,6 +278,7 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
addEap={handleAddEapMethod} addEap={handleAddEapMethod}
removeEap={handleRemoveEapMethod} removeEap={handleRemoveEapMethod}
addRealm={handleAddNaiRealm} addRealm={handleAddNaiRealm}
text={text}
/> />
<OsuForm <OsuForm
@@ -296,12 +297,14 @@ ProviderIdForm.propTypes = {
details: PropTypes.instanceOf(Object), details: PropTypes.instanceOf(Object),
form: PropTypes.instanceOf(Object), form: PropTypes.instanceOf(Object),
handleOnFormChange: PropTypes.func, handleOnFormChange: PropTypes.func,
text: PropTypes.func,
}; };
ProviderIdForm.defaultProps = { ProviderIdForm.defaultProps = {
form: null, form: null,
details: {}, details: {},
handleOnFormChange: () => {}, handleOnFormChange: () => {},
text: str => str,
}; };
export default ProviderIdForm; export default ProviderIdForm;

60
src/containers/ProfileDetails/components/RF/index.js
View File

@@ -21,7 +21,7 @@ const defaultOptions = (
</Select> </Select>
); );
const RFForm = ({ form, details, extraFields }) => { const RFForm = ({ form, details, extraFields, text }) => {
const { radioTypes } = useContext(ThemeContext); const { radioTypes } = useContext(ThemeContext);
const currentRadios = Object.keys(details.rfConfigMap).sort(); const currentRadios = Object.keys(details.rfConfigMap).sort();
@@ -290,7 +290,7 @@ const RFForm = ({ form, details, extraFields }) => {
}; };
return ( return (
<Item label="Channel Bandwidth" key="Channel Bandwidth"> <Item label={text('Channel Bandwidth')} key="Channel Bandwidth">
<div className={styles.InlineDiv}>{currentRadios.map(i => optionItem(i))}</div> <div className={styles.InlineDiv}>{currentRadios.map(i => optionItem(i))}</div>
</Item> </Item>
); );
@@ -326,12 +326,12 @@ const RFForm = ({ form, details, extraFields }) => {
))} ))}
</div> </div>
</Item> </Item>
{renderItem('Maximum Devices', ['maxNumClients'], renderInputItem, { {renderItem(text('Maximum Devices'), ['maxNumClients'], renderInputItem, {
min: 0, min: 0,
max: 100, max: 100,
error: '0 - 100', error: '0 - 100',
})} })}
{renderItem('Radio Mode', ['radioMode'], renderOptionItem, { {renderItem(text('Radio Mode'), ['radioMode'], renderOptionItem, {
dropdown: key => { dropdown: key => {
return ( return (
<Select onChange={value => onRadioModeChange(value, key)}> <Select onChange={value => onRadioModeChange(value, key)}>
@@ -353,20 +353,20 @@ const RFForm = ({ form, details, extraFields }) => {
); );
}, },
})} })}
{channelBandwidthSelect()} {channelBandwidthSelect(text)}
{renderItem('Beacon Interval', ['beaconInterval'], renderInputItem, { {renderItem(text('Beacon Interval'), ['beaconInterval'], renderInputItem, {
min: 50, min: 50,
max: 65535, max: 65535,
error: '50 - 65535', error: '50 - 65535',
addOnText: 'ms', addOnText: 'ms',
})} })}
{renderItem('RTS/CTS threshold', ['rtsCtsThreshold'], renderInputItem, { {renderItem(text('RTS/CTS threshold'), ['rtsCtsThreshold'], renderInputItem, {
min: 0, min: 0,
max: 65535, max: 65535,
error: '0 - 65535 (Bytes)', error: '0 - 65535 (Bytes)',
addOnText: 'bytes', addOnText: 'bytes',
})} })}
{renderItem('MIMO Mode', ['mimoMode'], renderOptionItem, { {renderItem(text('MIMO Mode'), ['mimoMode'], renderOptionItem, {
dropdown: ( dropdown: (
<Select> <Select>
<Option value="none">Auto</Option> <Option value="none">Auto</Option>
@@ -386,7 +386,7 @@ const RFForm = ({ form, details, extraFields }) => {
field.options field.options
) )
)} )}
{renderItem('Management Rate (Mbps)', ['managementRate'], renderOptionItem, { {renderItem(text('Management Rate (Mbps)'), ['managementRate'], renderOptionItem, {
dropdown: key => ( dropdown: key => (
<Select> <Select>
<Option value="auto">Auto</Option> <Option value="auto">Auto</Option>
@@ -407,7 +407,7 @@ const RFForm = ({ form, details, extraFields }) => {
), ),
dependencies: { autoCellSizeSelection: 'true' }, dependencies: { autoCellSizeSelection: 'true' },
})} })}
{renderItem('Multicast Rate (Mbps)', ['multicastRate'], renderOptionItem, { {renderItem(text('Multicast Rate (Mbps)'), ['multicastRate'], renderOptionItem, {
dropdown: ( dropdown: (
<Select> <Select>
<Option value="auto">Auto</Option> <Option value="auto">Auto</Option>
@@ -423,15 +423,20 @@ const RFForm = ({ form, details, extraFields }) => {
), ),
dependencies: { autoCellSizeSelection: 'true' }, dependencies: { autoCellSizeSelection: 'true' },
})} })}
{renderItem('Probe Response Threshold', ['probeResponseThresholdDb'], renderInputItem, { {renderItem(
text('Probe Response Threshold'),
['probeResponseThresholdDb'],
renderInputItem,
{
min: -100, min: -100,
max: -40, max: -40,
error: '-100 - -40 dBm', error: '-100 - -40 dBm',
addOnText: 'dBm', addOnText: 'dBm',
dependencies: { autoCellSizeSelection: 'true' }, dependencies: { autoCellSizeSelection: 'true' },
})} }
)}
{renderItem( {renderItem(
'Client Disconnect Threshold', text('Client Disconnect Threshold'),
['clientDisconnectThresholdDb'], ['clientDisconnectThresholdDb'],
renderInputItem, renderInputItem,
{ {
@@ -442,11 +447,11 @@ const RFForm = ({ form, details, extraFields }) => {
dependencies: { autoCellSizeSelection: 'true' }, dependencies: { autoCellSizeSelection: 'true' },
} }
)} )}
{renderItem('Max EIRP Tx Power', ['useMaxTxPower'], renderOptionItem, { {renderItem(text('Max EIRP Tx Power'), ['useMaxTxPower'], renderOptionItem, {
dropdown: defaultOptions, dropdown: defaultOptions,
dependencies: { autoCellSizeSelection: 'true' }, dependencies: { autoCellSizeSelection: 'true' },
})} })}
{renderItem('EIRP Tx Power', ['eirpTxPower'], renderInputItem, { {renderItem(text('EIRP Tx Power'), ['eirpTxPower'], renderInputItem, {
min: 1, min: 1,
max: 32, max: 32,
error: '1 - 32 dBm', error: '1 - 32 dBm',
@@ -454,23 +459,23 @@ const RFForm = ({ form, details, extraFields }) => {
dependencies: { autoCellSizeSelection: 'true', useMaxTxPower: 'true' }, dependencies: { autoCellSizeSelection: 'true', useMaxTxPower: 'true' },
})} })}
{renderItem('Min Load', ['bestApSettings', 'minLoadFactor'], renderInputItem, { {renderItem(text('Min Load'), ['bestApSettings', 'minLoadFactor'], renderInputItem, {
min: 0, min: 0,
max: 100, max: 100,
error: '0 - 100%', error: '0 - 100%',
addOnText: '%', addOnText: '%',
hidden: true, hidden: true,
})} })}
{renderItem('SNR', ['bestApSettings', 'dropInSnrPercentage'], renderInputItem, { {renderItem(text('SNR'), ['bestApSettings', 'dropInSnrPercentage'], renderInputItem, {
min: 0, min: 0,
max: 100, max: 100,
error: '0 - 100%', error: '0 - 100%',
addOnText: '% Drop', addOnText: '% Drop',
hidden: true, hidden: true,
})} })}
<p>Channel Hop Configuration:</p> <p>{text('Channel Hop Configuration')}:</p>
{renderItem( {renderItem(
'Noise Floor', text('Noise Floor'),
['channelHopSettings', 'noiseFloorThresholdInDB'], ['channelHopSettings', 'noiseFloorThresholdInDB'],
renderInputItem, renderInputItem,
{ {
@@ -481,7 +486,7 @@ const RFForm = ({ form, details, extraFields }) => {
} }
)} )}
{renderItem( {renderItem(
'Noise Floor Time', text('Noise Floor Time'),
['channelHopSettings', 'noiseFloorThresholdTimeInSeconds'], ['channelHopSettings', 'noiseFloorThresholdTimeInSeconds'],
renderInputItem, renderInputItem,
{ {
@@ -492,7 +497,7 @@ const RFForm = ({ form, details, extraFields }) => {
} }
)} )}
{renderItem( {renderItem(
'Non WIFI', text('Non WIFI'),
['channelHopSettings', 'nonWifiThresholdInPercentage'], ['channelHopSettings', 'nonWifiThresholdInPercentage'],
renderInputItem, renderInputItem,
{ {
@@ -503,7 +508,7 @@ const RFForm = ({ form, details, extraFields }) => {
} }
)} )}
{renderItem( {renderItem(
'Non WIFI Time', text('Non WIFI Time'),
['channelHopSettings', 'nonWifiThresholdTimeInSeconds'], ['channelHopSettings', 'nonWifiThresholdTimeInSeconds'],
renderInputItem, renderInputItem,
{ {
@@ -513,14 +518,19 @@ const RFForm = ({ form, details, extraFields }) => {
addOnText: 'sec', addOnText: 'sec',
} }
)} )}
{renderItem('OBSS Hop Mode', ['channelHopSettings', 'obssHopMode'], renderOptionItem, { {renderItem(
text('OBSS Hop Mode'),
['channelHopSettings', 'obssHopMode'],
renderOptionItem,
{
dropdown: ( dropdown: (
<Select> <Select>
<Option value="NON_WIFI">Non-IBSS</Option> <Option value="NON_WIFI">Non-IBSS</Option>
<Option value="NON_WIFI_AND_OBSS">Non-IBSS Time</Option> <Option value="NON_WIFI_AND_OBSS">Non-IBSS Time</Option>
</Select> </Select>
), ),
})} }
)}
</Card> </Card>
</div> </div>
); );
@@ -530,6 +540,7 @@ RFForm.propTypes = {
form: PropTypes.instanceOf(Object), form: PropTypes.instanceOf(Object),
details: PropTypes.instanceOf(Object), details: PropTypes.instanceOf(Object),
extraFields: PropTypes.instanceOf(Array), extraFields: PropTypes.instanceOf(Array),
text: PropTypes.func,
}; };
RFForm.defaultProps = { RFForm.defaultProps = {
@@ -539,6 +550,7 @@ RFForm.defaultProps = {
rfConfigMap: RADIOS.reduce((acc, i) => ((acc[i] = {}), acc), {}), rfConfigMap: RADIOS.reduce((acc, i) => ((acc[i] = {}), acc), {}),
}, },
extraFields: [], extraFields: [],
text: str => str,
}; };
export default RFForm; export default RFForm;

34
src/containers/ProfileDetails/components/Radius/index.js
View File

@@ -13,7 +13,7 @@ const MAX_RADIUS = 1;
const { Item, List } = Form; const { Item, List } = Form;
const RadiusForm = ({ form, details }) => { const RadiusForm = ({ form, details, text }) => {
const formatInitialAuthenticationValues = () => { const formatInitialAuthenticationValues = () => {
const values = [details?.primaryRadiusAuthServer]; const values = [details?.primaryRadiusAuthServer];
if (details?.secondaryRadiusAuthServer) { if (details?.secondaryRadiusAuthServer) {
@@ -46,7 +46,7 @@ const RadiusForm = ({ form, details }) => {
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
<Card <Card
title="RADIUS Authentication Server" title={text('RADIUS Authentication Server')}
extra={ extra={
<> <>
{fields.length >= MAX_RADIUS && ( {fields.length >= MAX_RADIUS && (
@@ -62,14 +62,16 @@ const RadiusForm = ({ form, details }) => {
}} }}
disabled={fields.length >= MAX_RADIUS} disabled={fields.length >= MAX_RADIUS}
> >
<PlusOutlined /> Add Authentication Server <PlusOutlined /> {text('Add Authentication Server')}
</Button> </Button>
</> </>
} }
> >
{fields.map((field, index) => ( {fields.map((field, index) => (
<div key={field.name}> <div key={field.name}>
<span>{index === 0 ? 'Primary' : 'Secondary'} Authentication Server</span> <span>
{index === 0 ? 'Primary' : 'Secondary'} {text('Authentication Server')}
</span>
<Item <Item
name={[field.name, 'ipAddress']} name={[field.name, 'ipAddress']}
label="IP" label="IP"
@@ -89,7 +91,7 @@ const RadiusForm = ({ form, details }) => {
<Item <Item
name={[field.name, 'secret']} name={[field.name, 'secret']}
label="Shared Secret" label={text('Shared Secret')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -105,7 +107,7 @@ const RadiusForm = ({ form, details }) => {
<Item <Item
name={[field.name, 'port']} name={[field.name, 'port']}
label="Port" label={text('Port')}
initialValue={1812} initialValue={1812}
rules={[ rules={[
{ {
@@ -135,7 +137,7 @@ const RadiusForm = ({ form, details }) => {
<Item <Item
name={[field.name, 'timeout']} name={[field.name, 'timeout']}
label="Session Timeout" label={text('Session Timeout')}
initialValue={5} initialValue={5}
rules={[ rules={[
{ {
@@ -189,7 +191,7 @@ const RadiusForm = ({ form, details }) => {
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
<Card <Card
title="RADIUS Accounting Server" title={text('RADIUS Accounting Server')}
bodyStyle={{ padding: fields.length <= 0 && '0' }} bodyStyle={{ padding: fields.length <= 0 && '0' }}
extra={ extra={
<> <>
@@ -206,14 +208,16 @@ const RadiusForm = ({ form, details }) => {
}} }}
disabled={fields.length >= MAX_RADIUS} disabled={fields.length >= MAX_RADIUS}
> >
<PlusOutlined /> Add Accounting Server <PlusOutlined /> {text('Add Accounting Server')}
</Button> </Button>
</> </>
} }
> >
{fields.map((field, index) => ( {fields.map((field, index) => (
<div key={field.name}> <div key={field.name}>
<span>{index === 0 ? 'Primary' : 'Secondary'} Accounting Server</span> <span>
{index === 0 ? 'Primary' : 'Secondary'} {text('Accounting Server')}
</span>
<Item <Item
name={[field.name, 'ipAddress']} name={[field.name, 'ipAddress']}
label="IP" label="IP"
@@ -233,7 +237,7 @@ const RadiusForm = ({ form, details }) => {
<Item <Item
name={[field.name, 'secret']} name={[field.name, 'secret']}
label="Shared Secret" label={text('Shared Secret')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -249,7 +253,7 @@ const RadiusForm = ({ form, details }) => {
<Item <Item
name={[field.name, 'port']} name={[field.name, 'port']}
label="Port" label={text('Port')}
initialValue={1813} initialValue={1813}
rules={[ rules={[
{ {
@@ -279,7 +283,7 @@ const RadiusForm = ({ form, details }) => {
<Item <Item
name={[field.name, 'timeout']} name={[field.name, 'timeout']}
label="Session Timeout" label={text('Session Timeout')}
initialValue={5} initialValue={5}
rules={[ rules={[
{ {
@@ -318,7 +322,7 @@ const RadiusForm = ({ form, details }) => {
}} }}
data-testid={`accountingDelete${field.name}`} data-testid={`accountingDelete${field.name}`}
> >
Remove {text('Remove')}
</RoleProtectedBtn> </RoleProtectedBtn>
</div> </div>
))} ))}
@@ -333,11 +337,13 @@ const RadiusForm = ({ form, details }) => {
RadiusForm.propTypes = { RadiusForm.propTypes = {
form: PropTypes.instanceOf(Object), form: PropTypes.instanceOf(Object),
details: PropTypes.instanceOf(Object), details: PropTypes.instanceOf(Object),
text: PropTypes.func,
}; };
RadiusForm.defaultProps = { RadiusForm.defaultProps = {
form: null, form: null,
details: {}, details: {},
text: str => str,
}; };
export default RadiusForm; export default RadiusForm;

59
src/containers/ProfileDetails/components/SSID/index.js
View File

@@ -33,6 +33,7 @@ const SSIDForm = ({
loadingCaptiveProfiles, loadingCaptiveProfiles,
loadingRadiusProfiles, loadingRadiusProfiles,
loadingPasspointProfiles, loadingPasspointProfiles,
text,
}) => { }) => {
const { radioTypes } = useContext(ThemeContext); const { radioTypes } = useContext(ThemeContext);
const [mode, setMode] = useState(details.secureMode || DEFAULT_SSID_PROFILE.secureMode); const [mode, setMode] = useState(details.secureMode || DEFAULT_SSID_PROFILE.secureMode);
@@ -172,9 +173,9 @@ const SSIDForm = ({
return ( return (
<div className={styles.ProfilePage}> <div className={styles.ProfilePage}>
<Card title="SSID"> <Card title={text('SSID')}>
<Item <Item
label="SSID Name" label={text('SSID Name')}
name="ssid" name="ssid"
rules={[ rules={[
{ {
@@ -201,7 +202,7 @@ const SSIDForm = ({
</Item> </Item>
<Item <Item
label="Broadcast SSID" label={text('Broadcast SSID')}
name="broadcastSsid" name="broadcastSsid"
rules={[ rules={[
{ {
@@ -211,12 +212,12 @@ const SSIDForm = ({
]} ]}
> >
<RadioGroup> <RadioGroup>
<Radio value="enabled">Show SSID</Radio> <Radio value="enabled">{text('Show SSID')}</Radio>
<Radio value="disabled">Hide SSID</Radio> <Radio value="disabled">{text('Hide SSID')}</Radio>
</RadioGroup> </RadioGroup>
</Item> </Item>
<Item label="Client Rate Limit"> <Item label={text('Client Rate Limit')}>
<div className={styles.InlineDiv}> <div className={styles.InlineDiv}>
<Item <Item
name="bandwidthLimitDown" name="bandwidthLimitDown"
@@ -283,7 +284,7 @@ const SSIDForm = ({
</div> </div>
</Item> </Item>
<Item name="appliedRadios" label="Use On"> <Item name="appliedRadios" label={text('Use On')}>
<CheckboxGroup> <CheckboxGroup>
{Object.keys(radioTypes || {})?.map(i => ( {Object.keys(radioTypes || {})?.map(i => (
<Checkbox key={i} value={i}> <Checkbox key={i} value={i}>
@@ -293,7 +294,7 @@ const SSIDForm = ({
</CheckboxGroup> </CheckboxGroup>
</Item> </Item>
</Card> </Card>
<Card title="Network Connectivity"> <Card title={text('Network Connectivity')}>
<Item <Item
name="forwardMode" name="forwardMode"
label={ label={
@@ -321,7 +322,7 @@ const SSIDForm = ({
> >
<RadioGroup> <RadioGroup>
<Radio value="BRIDGE" defaultSelected> <Radio value="BRIDGE" defaultSelected>
Bridge {text('Bridge')}
</Radio> </Radio>
<Radio <Radio
value="NAT" value="NAT"
@@ -356,22 +357,22 @@ const SSIDForm = ({
> >
{getFieldValue('forwardMode') === 'BRIDGE' ? ( {getFieldValue('forwardMode') === 'BRIDGE' ? (
<RadioGroup> <RadioGroup>
<Radio value="false">Allow Local Access</Radio> <Radio value="false">{text('Allow Local Access')}</Radio>
<Radio value="true">No Local Access</Radio> <Radio value="true">{text('No Local Access')}</Radio>
</RadioGroup> </RadioGroup>
) : ( ) : (
<span className={styles.Disclaimer}>Not Applicable</span> <span className={styles.Disclaimer}>Not Applicable</span>
)} )}
</Item> </Item>
<Item label="Captive Portal" name="captivePortal"> <Item label={text('Captive Portal')} name="captivePortal">
{getFieldValue('forwardMode') === 'NAT' ? ( {getFieldValue('forwardMode') === 'NAT' ? (
<RadioGroup> <RadioGroup>
<Radio value="notPortal">Do Not Use</Radio> <Radio value="notPortal">{text('Do Not Use')}</Radio>
<Radio value="usePortal">Use</Radio> <Radio value="usePortal">{text('Use')}</Radio>
</RadioGroup> </RadioGroup>
) : ( ) : (
<span className={styles.Disclaimer}>Requires NAT Mode</span> <span className={styles.Disclaimer}>{text('Requires NAT Mode')}</span>
)} )}
</Item> </Item>
</> </>
@@ -481,7 +482,7 @@ const SSIDForm = ({
> >
{({ getFieldValue }) => { {({ getFieldValue }) => {
return ( return (
<Item name="dynamicVlan" label="Dynamic VLAN"> <Item name="dynamicVlan" label={text('Dynamic VLAN')}>
{getFieldValue('forwardMode') === 'BRIDGE' && {getFieldValue('forwardMode') === 'BRIDGE' &&
getFieldValue('vlan') === 'defaultVLAN' && getFieldValue('vlan') === 'defaultVLAN' &&
(mode === 'wpa3OnlyEAP' || (mode === 'wpa3OnlyEAP' ||
@@ -511,7 +512,7 @@ const SSIDForm = ({
{radioOptions} {radioOptions}
</Item> </Item>
<Item name="passpointConfig" label="Passpoint"> <Item name="passpointConfig" label={text('Passpoint')}>
<Select <Select
placeholder="Select Passpoint Configuration" placeholder="Select Passpoint Configuration"
onChange={() => { onChange={() => {
@@ -579,8 +580,8 @@ const SSIDForm = ({
</Item> </Item>
</Card> </Card>
<Card title="Security and Encryption"> <Card title={text('Security and Encryption')}>
<Item label="Mode" name="secureMode"> <Item label={text('Mode')} name="secureMode">
<Select <Select
data-testid="securityMode" data-testid="securityMode"
onChange={value => { onChange={value => {
@@ -620,7 +621,7 @@ const SSIDForm = ({
mode === 'wpa3OnlySAE' || mode === 'wpa3OnlySAE' ||
mode === 'wpa3MixedSAE') && ( mode === 'wpa3MixedSAE') && (
<Item <Item
label="Security Key" label={text('Security Key')}
name="keyStr" name="keyStr"
rules={[ rules={[
{ {
@@ -639,7 +640,7 @@ const SSIDForm = ({
{mode === 'wep' && ( {mode === 'wep' && (
<> <>
<Item <Item
label="WEP Key" label={text('WEP Key')}
name="wepKey" name="wepKey"
rules={[ rules={[
{ {
@@ -669,7 +670,7 @@ const SSIDForm = ({
/> />
</Item> </Item>
<Item <Item
label="Default Key ID " label={text('Default Key ID')}
name="wepDefaultKeyId" name="wepDefaultKeyId"
rules={[ rules={[
{ {
@@ -696,7 +697,7 @@ const SSIDForm = ({
mode === 'wpa3OnlyEAP192') && ( mode === 'wpa3OnlyEAP192') && (
<Card title="RADIUS"> <Card title="RADIUS">
<Item <Item
label="RADIUS Proxy" label={text('RADIUS Proxy')}
name="useRadiusProxy" name="useRadiusProxy"
rules={[ rules={[
{ {
@@ -706,8 +707,8 @@ const SSIDForm = ({
]} ]}
> >
<RadioGroup> <RadioGroup>
<Radio value="true">Enabled</Radio> <Radio value="true">{text('Enabled')}</Radio>
<Radio value="false">Disabled</Radio> <Radio value="false">{text('Disabled')}</Radio>
</RadioGroup> </RadioGroup>
</Item> </Item>
<Item <Item
@@ -744,7 +745,7 @@ const SSIDForm = ({
</Item> </Item>
<Item <Item
name="radiusAcountingServiceInterval" name="radiusAcountingServiceInterval"
label="RADIUS Accounting Interval" label={text('RADIUS Accounting Interval')}
rules={[ rules={[
{ {
required: true, required: true,
@@ -852,8 +853,8 @@ const SSIDForm = ({
</Card> </Card>
)} )}
<Card title="Roaming"> <Card title={text('Roaming')}>
<Item label="Advanced Settings" colon={false}> <Item label={text('Advanced Settings')} colon={false}>
<div className={styles.InlineDiv}> <div className={styles.InlineDiv}>
{Object.keys(radioTypes || {})?.map(i => ( {Object.keys(radioTypes || {})?.map(i => (
<span key={i}>{radioTypes?.[i]}</span> <span key={i}>{radioTypes?.[i]}</span>
@@ -927,6 +928,7 @@ SSIDForm.propTypes = {
loadingCaptiveProfiles: PropTypes.bool, loadingCaptiveProfiles: PropTypes.bool,
loadingRadiusProfiles: PropTypes.bool, loadingRadiusProfiles: PropTypes.bool,
loadingPasspointProfiles: PropTypes.bool, loadingPasspointProfiles: PropTypes.bool,
text: PropTypes.func,
}; };
SSIDForm.defaultProps = { SSIDForm.defaultProps = {
@@ -942,6 +944,7 @@ SSIDForm.defaultProps = {
loadingCaptiveProfiles: false, loadingCaptiveProfiles: false,
loadingRadiusProfiles: false, loadingRadiusProfiles: false,
loadingPasspointProfiles: false, loadingPasspointProfiles: false,
text: str => str,
}; };
export default SSIDForm; export default SSIDForm;

22
src/containers/ProfileDetails/components/Venue/index.js
View File

@@ -9,7 +9,7 @@ import FormModal from './components/FormModal';
const { Item } = Form; const { Item } = Form;
const { Option } = AntdSelect; const { Option } = AntdSelect;
const VenueForm = ({ form, details, handleOnFormChange }) => { const VenueForm = ({ form, details, handleOnFormChange, text }) => {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [currentVenueGroupId, setCurrentVenueGroupId] = useState( const [currentVenueGroupId, setCurrentVenueGroupId] = useState(
details?.venueTypeAssignment?.venueGroupId || 0 details?.venueTypeAssignment?.venueGroupId || 0
@@ -48,15 +48,15 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
const columns = [ const columns = [
{ {
title: 'Name', title: text('Name'),
dataIndex: 'dupleName', dataIndex: 'dupleName',
}, },
{ {
title: 'Locale', title: text('Locale'),
dataIndex: 'locale', dataIndex: 'locale',
}, },
{ {
title: 'URL', title: text('URL'),
dataIndex: 'venueUrl', dataIndex: 'venueUrl',
}, },
{ {
@@ -75,8 +75,8 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
return ( return (
<div className={styles.ProfilePage}> <div className={styles.ProfilePage}>
<Card title="Venue Type"> <Card title={text('Venue Type')}>
<Item label="Group:" name={['venueTypeAssignment', 'venueGroupId']}> <Item label={text('Group')} name={['venueTypeAssignment', 'venueGroupId']}>
<Select <Select
data-testid="venueGroup" data-testid="venueGroup"
placeholder="Select Venue Group" placeholder="Select Venue Group"
@@ -99,7 +99,7 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
<Option value={11}>Outdoor</Option> <Option value={11}>Outdoor</Option>
</Select> </Select>
</Item> </Item>
<Item label="Type:" name={['venueTypeAssignment', 'venueTypeId']}> <Item label={text('Type')} name={['venueTypeAssignment', 'venueTypeId']}>
{(currentVenueGroupId === 0 && ( {(currentVenueGroupId === 0 && (
<Select placeholder="Select Venue Type"> <Select placeholder="Select Venue Type">
<Option value={0}>Unspecified</Option> <Option value={0}>Unspecified</Option>
@@ -219,10 +219,10 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
</Card> </Card>
<Card <Card
title="Venue Name" title={text('Venue Name')}
extra={ extra={
<RoleProtectedBtn type="solid" onClick={() => setModalVisible(true)}> <RoleProtectedBtn type="solid" onClick={() => setModalVisible(true)}>
Add Name {text('Add Name')}
</RoleProtectedBtn> </RoleProtectedBtn>
} }
> >
@@ -240,7 +240,7 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
visible={modalVisible} visible={modalVisible}
closeModal={handleCloseModal} closeModal={handleCloseModal}
onSubmit={handleNameSave} onSubmit={handleNameSave}
title="Add name" title={text('Add name')}
/> />
</div> </div>
); );
@@ -250,12 +250,14 @@ VenueForm.propTypes = {
details: PropTypes.instanceOf(Object), details: PropTypes.instanceOf(Object),
form: PropTypes.instanceOf(Object), form: PropTypes.instanceOf(Object),
handleOnFormChange: PropTypes.func, handleOnFormChange: PropTypes.func,
text: PropTypes.func,
}; };
VenueForm.defaultProps = { VenueForm.defaultProps = {
form: null, form: null,
details: {}, details: {},
handleOnFormChange: () => {}, handleOnFormChange: () => {},
text: str => str,
}; };
export default VenueForm; export default VenueForm;

42
src/containers/ProfileDetails/index.js
View File

@@ -71,6 +71,7 @@ const ProfileDetails = ({
loadingRFProfiles, loadingRFProfiles,
loadingPasspointProfiles, loadingPasspointProfiles,
extraFields, extraFields,
text,
}) => { }) => {
const { routes } = useContext(ThemeContext); const { routes } = useContext(ThemeContext);
const history = useHistory(); const history = useHistory();
@@ -284,7 +285,7 @@ const ProfileDetails = ({
Back Back
</Button> </Button>
<Skeleton loading={loadingProfile || !name} title paragraph={false} active width={220}> <Skeleton loading={loadingProfile || !name} title paragraph={false} active width={220}>
<h1>{`Edit ${name}`}</h1> <h1>{`${text('Edit')} ${name}`}</h1>
</Skeleton> </Skeleton>
</div> </div>
<WithRoles> <WithRoles>
@@ -292,21 +293,21 @@ const ProfileDetails = ({
<div className={styles.HeaderButton}>{extraButtons}</div> <div className={styles.HeaderButton}>{extraButtons}</div>
<Item noStyle> <Item noStyle>
<Button type="primary" htmlType="submit" disabled={!isFormDirty}> <Button type="primary" htmlType="submit" disabled={!isFormDirty}>
Save {text('Save')}
</Button> </Button>
</Item> </Item>
</div> </div>
</WithRoles> </WithRoles>
</Header> </Header>
<Card loading={loadingProfile}> <Card loading={loadingProfile}>
<Item label="Type"> <Item label={text('Type')}>
<Select defaultValue={profileType} disabled> <Select defaultValue={profileType} disabled>
<Select.Option value={profileType}>{profileTypes[profileType]}</Select.Option> <Select.Option value={profileType}>{profileTypes[profileType]}</Select.Option>
</Select> </Select>
</Item> </Item>
<Item <Item
name="name" name="name"
label="Profile Name" label={text('Profile Name')}
rules={[{ required: true, message: 'Please input your new profile name' }]} rules={[{ required: true, message: 'Please input your new profile name' }]}
> >
<Input placeholder="Enter profile name" /> <Input placeholder="Enter profile name" />
@@ -326,6 +327,7 @@ const ProfileDetails = ({
loadingCaptiveProfiles={loadingCaptiveProfiles} loadingCaptiveProfiles={loadingCaptiveProfiles}
loadingRadiusProfiles={loadingRadiusProfiles} loadingRadiusProfiles={loadingRadiusProfiles}
loadingPasspointProfiles={loadingPasspointProfiles} loadingPasspointProfiles={loadingPasspointProfiles}
text={text}
/> />
)} )}
{profileType === PROFILES.accessPoint && ( {profileType === PROFILES.accessPoint && (
@@ -342,6 +344,7 @@ const ProfileDetails = ({
loadingRFProfiles={loadingRFProfiles} loadingRFProfiles={loadingRFProfiles}
fileUpload={fileUpload} fileUpload={fileUpload}
handleOnFormChange={handleOnFormChange} handleOnFormChange={handleOnFormChange}
text={text}
/> />
)} )}
{profileType === PROFILES.captivePortal && ( {profileType === PROFILES.captivePortal && (
@@ -356,12 +359,15 @@ const ProfileDetails = ({
onFetchMoreProfiles={onFetchMoreProfiles} onFetchMoreProfiles={onFetchMoreProfiles}
loadingRadiusProfiles={loadingRadiusProfiles} loadingRadiusProfiles={loadingRadiusProfiles}
handleOnFormChange={handleOnFormChange} handleOnFormChange={handleOnFormChange}
text={text}
/> />
)} )}
{profileType === PROFILES.radius && <RadiusForm details={details} form={form} />} {profileType === PROFILES.radius && (
<RadiusForm details={details} form={form} text={text} />
)}
{profileType === PROFILES.bonjour && <BonjourGatewayForm details={details} form={form} />} {profileType === PROFILES.bonjour && <BonjourGatewayForm details={details} form={form} />}
{profileType === PROFILES.rf && ( {profileType === PROFILES.rf && (
<RFForm details={details} form={form} extraFields={extraFields} /> <RFForm details={details} form={form} extraFields={extraFields} text={text} />
)} )}
{profileType === PROFILES.passpoint && ( {profileType === PROFILES.passpoint && (
<PasspointProfileForm <PasspointProfileForm
@@ -380,16 +386,32 @@ const ProfileDetails = ({
loadingOperatorProfiles={loadingOperatorProfiles} loadingOperatorProfiles={loadingOperatorProfiles}
loadingIdProviderProfiles={loadingIdProviderProfiles} loadingIdProviderProfiles={loadingIdProviderProfiles}
handleOnFormChange={handleOnFormChange} handleOnFormChange={handleOnFormChange}
text={text}
/> />
)} )}
{profileType === PROFILES.providerID && ( {profileType === PROFILES.providerID && (
<ProviderIdForm form={form} details={details} handleOnFormChange={handleOnFormChange} /> <ProviderIdForm
form={form}
details={details}
handleOnFormChange={handleOnFormChange}
text={text}
/>
)} )}
{profileType === PROFILES.operator && ( {profileType === PROFILES.operator && (
<OperatorForm form={form} details={details} handleOnFormChange={handleOnFormChange} /> <OperatorForm
form={form}
details={details}
handleOnFormChange={handleOnFormChange}
text={text}
/>
)} )}
{profileType === PROFILES.venue && ( {profileType === PROFILES.venue && (
<VenueForm form={form} details={details} handleOnFormChange={handleOnFormChange} /> <VenueForm
form={form}
details={details}
handleOnFormChange={handleOnFormChange}
text={text}
/>
)} )}
</Form> </Form>
</Container> </Container>
@@ -429,6 +451,7 @@ ProfileDetails.propTypes = {
loadingPasspointProfiles: PropTypes.bool, loadingPasspointProfiles: PropTypes.bool,
extraFields: PropTypes.instanceOf(Array), extraFields: PropTypes.instanceOf(Array),
loadingProfile: PropTypes.bool, loadingProfile: PropTypes.bool,
text: PropTypes.func,
}; };
ProfileDetails.defaultProps = { ProfileDetails.defaultProps = {
@@ -461,6 +484,7 @@ ProfileDetails.defaultProps = {
loadingPasspointProfiles: false, loadingPasspointProfiles: false,
extraFields: [], extraFields: [],
loadingProfile: false, loadingProfile: false,
text: str => str,
}; };
export default ProfileDetails; export default ProfileDetails;