added text wrappers

2025-11-02 19:58:13 +00:00 · 2021-09-09 18:17:37 -04:00
parent e4d9cc9edb
commit 6a791ccd02
16 changed files with 317 additions and 223 deletions
--- a/src/containers/Accounts/components/FormModal/index.js
+++ b/src/containers/Accounts/components/FormModal/index.js
@@ -25,6 +25,7 @@ const FormModal = ({
  isAuth0Enabled,
  onResetUserPassword,
  allUserRoles,
+  text,
 }) => {
  const [form] = Form.useForm();

@@ -41,7 +42,7 @@ const FormModal = ({
  const content = (
    <Form {...modalLayout} form={form}>
      <Item
-        label="E-mail"
+        label={text('E-Mail')}
        name="email"
        rules={[
          {
@@ -61,7 +62,11 @@ const FormModal = ({
        )}
      </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
          placeholder="Select role"
          getPopupContainer={triggerNode => triggerNode.parentElement}
@@ -75,7 +80,7 @@ const FormModal = ({
      {!isAuth0Enabled && (
        <>
          <Item
-            label="Password"
+            label={text('Password')}
            name="password"
            rules={[
              {
@@ -161,6 +166,7 @@ FormModal.propTypes = {
  isAuth0Enabled: PropTypes.bool,
  onResetUserPassword: PropTypes.func,
  allUserRoles: PropTypes.instanceOf(Array),
+  text: PropTypes.func,
 };

 FormModal.defaultProps = {
@@ -169,6 +175,7 @@ FormModal.defaultProps = {
  isAuth0Enabled: false,
  onResetUserPassword: () => {},
  allUserRoles: ['SuperUser', 'CustomerIT'],
+  text: str => str,
 };

 export default FormModal;
--- a/src/containers/Accounts/index.js
+++ b/src/containers/Accounts/index.js
@@ -26,6 +26,7 @@ const Accounts = ({
  allUserRoles,
  FormModal,
  loading,
+  text,
 }) => {
  const [editModal, setEditModal] = useState(false);
  const [addModal, setAddModal] = useState(false);
@@ -51,13 +52,13 @@ const Accounts = ({

  const columns = [
    {
-      title: 'E-MAIL',
+      title: text('E-MAIL'),
      dataIndex: 'email',
      key: 'email',
      width: width > 992 && 620,
    },
    {
-      title: 'ROLES',
+      title: text('ROLES'),
      dataIndex: 'roles',
      key: 'roles',
      width: 120,
@@ -112,9 +113,9 @@ const Accounts = ({
  return (
    <div className={styles.Container}>
      <Header>
-        <h1>Users</h1>
+        <h1>{text('Users')}</h1>
        <RoleProtectedBtn title="addaccount" type="primary" onClick={() => setAddModal(true)}>
-          Add User
+          {text('Add User')}
        </RoleProtectedBtn>
      </Header>

@@ -122,7 +123,7 @@ const Accounts = ({
        onCancel={() => setEditModal(false)}
        visible={editModal}
        onSubmit={editUser}
-        title="Edit User"
+        title={text('Edit User')}
        data={activeUser}
        isAuth0Enabled={isAuth0Enabled}
        onResetUserPassword={onResetUserPassword}
@@ -132,7 +133,7 @@ const Accounts = ({
        onCancel={() => setAddModal(false)}
        visible={addModal}
        onSubmit={addUser}
-        title="Add User"
+        title={text('Add User')}
        isAuth0Enabled={isAuth0Enabled}
        allUserRoles={allUserRoles}
      />
@@ -146,7 +147,7 @@ const Accounts = ({
      />
      {!isLastPage && (
        <div className={styles.LoadMore}>
-          <Button onClick={onLoadMore}>Load More</Button>
+          <Button onClick={onLoadMore}>{text('Load More')}</Button>
        </div>
      )}
    </div>
@@ -166,6 +167,7 @@ Accounts.propTypes = {
  allUserRoles: PropTypes.instanceOf(Array),
  FormModal: PropTypes.func,
  loading: PropTypes.bool,
+  text: PropTypes.func,
 };

 Accounts.defaultProps = {
@@ -178,6 +180,7 @@ Accounts.defaultProps = {
  allUserRoles: ['SuperUser', 'CustomerIT'],
  FormModal: DefaultModal,
  loading: false,
+  text: str => str,
 };

 export default Accounts;
--- a/src/containers/AddProfile/index.js
+++ b/src/containers/AddProfile/index.js
@@ -63,6 +63,7 @@ const AddProfile = ({
  loadingPasspointProfiles,
  fileUpload,
  extraFields,
+  text,
 }) => {
  const { routes } = useContext(ThemeContext);
  const [form] = Form.useForm();
@@ -272,8 +273,8 @@ const AddProfile = ({
          onCancel={() => setConfirmModal(false)}
          onSuccess={() => history.push(routes.profiles)}
          visible={confirmModal}
-          buttonText="Leave Page"
-          title="Leave Page?"
+          buttonText={text('Leave Page')}
+          title={`${text('Leave Page')}?`}
          content={
            <p>
              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}>
                Back
              </Button>
-              <h1>Add Profile</h1>
+              <h1>{text('Add Profile')}</h1>
            </div>
            <div>
              <Item noStyle>
                <Button icon={<PlusOutlined />} type="primary" htmlType="submit">
-                  Add
+                  {text('Add')}
                </Button>
              </Item>
            </div>
          </Header>
          <Card>
            <Item
-              label="Type"
+              label={text('Type')}
              name="profileType"
              rules={[
                {
@@ -325,7 +326,7 @@ const AddProfile = ({
            <Item
              id="name"
              name="name"
-              label="Name"
+              label={text('Name')}
              rules={[{ required: true, message: 'Please input your profile name' }]}
            >
              <Input id="profileName" placeholder="Enter profile name" />
@@ -343,6 +344,7 @@ const AddProfile = ({
              loadingCaptiveProfiles={loadingCaptiveProfiles}
              loadingRadiusProfiles={loadingRadiusProfiles}
              loadingPasspointProfiles={loadingPasspointProfiles}
+              text={text}
            />
          )}
          {profileType === PROFILES.accessPoint && (
@@ -357,6 +359,7 @@ const AddProfile = ({
              loadingSSIDProfiles={loadingSSIDProfiles}
              loadingRFProfiles={loadingRFProfiles}
              fileUpload={fileUpload}
+              text={text}
            />
          )}
          {profileType === PROFILES.bonjour && (
@@ -371,14 +374,20 @@ const AddProfile = ({
              onFetchMoreProfiles={onFetchMoreProfiles}
              loadingRadiusProfiles={loadingRadiusProfiles}
              fileUpload={fileUpload}
+              text={text}
            />
          )}

          {profileType === PROFILES.radius && (
-            <RadiusForm form={form} details={initialValues?.details} />
+            <RadiusForm form={form} details={initialValues?.details} text={text} />
          )}
          {profileType === PROFILES.rf && (
-            <RFForm form={form} details={initialValues?.details} extraFields={extraFields} />
+            <RFForm
+              form={form}
+              details={initialValues?.details}
+              extraFields={extraFields}
+              text={text}
+            />
          )}
          {profileType === PROFILES.passpoint && (
            <PasspointProfileForm
@@ -394,16 +403,17 @@ const AddProfile = ({
              loadingOperatorProfiles={loadingOperatorProfiles}
              loadingIdProviderProfiles={loadingIdProviderProfiles}
              fileUpload={fileUpload}
+              text={text}
            />
          )}
          {profileType === PROFILES.providerID && (
-            <ProviderIdForm form={form} details={initialValues?.details} />
+            <ProviderIdForm form={form} details={initialValues?.details} text={text} />
          )}
          {profileType === PROFILES.operator && (
-            <OperatorForm form={form} details={initialValues?.details} />
+            <OperatorForm form={form} details={initialValues?.details} text={text} />
          )}
          {profileType === PROFILES.venue && (
-            <VenueForm form={form} details={initialValues?.details} />
+            <VenueForm form={form} details={initialValues?.details} text={text} />
          )}
        </Form>
      </div>
@@ -435,6 +445,7 @@ AddProfile.propTypes = {

  fileUpload: PropTypes.func,
  extraFields: PropTypes.instanceOf(Array),
+  text: PropTypes.func,
 };

 AddProfile.defaultProps = {
@@ -459,6 +470,7 @@ AddProfile.defaultProps = {
  loadingPasspointProfiles: false,
  fileUpload: () => {},
  extraFields: [],
+  text: str => str,
 };

 export default AddProfile;
--- a/src/containers/BlockedList/components/FormModal/index.js
+++ b/src/containers/BlockedList/components/FormModal/index.js
@@ -7,13 +7,13 @@ import { modalLayout } from 'utils/form';

 const { Item } = Form;

-const FormModal = ({ onCancel, onSubmit, visible, title }) => {
+const FormModal = ({ onCancel, onSubmit, visible, title, text }) => {
  const [form] = Form.useForm();

  const content = (
    <Form {...modalLayout} form={form}>
      <Item
-        label="MAC Address"
+        label={text('MAC Address')}
        name="macAddress"
        rules={[
          {
@@ -64,6 +64,7 @@ FormModal.propTypes = {
  onSubmit: PropTypes.func,
  title: PropTypes.string,
  buttonText: PropTypes.string,
+  text: PropTypes.func,
 };

 FormModal.defaultProps = {
@@ -72,6 +73,7 @@ FormModal.defaultProps = {
  onSubmit: () => {},
  title: '',
  buttonText: '',
+  text: str => str,
 };

 export default FormModal;
--- a/src/containers/BlockedList/index.js
+++ b/src/containers/BlockedList/index.js
@@ -12,7 +12,7 @@ import WithRoles, { RoleProtectedBtn } from 'components/WithRoles';
 import FormModal from './components/FormModal';
 import styles from './index.module.scss';

-const BlockedList = ({ data, onUpdateClient, onAddClient, loading }) => {
+const BlockedList = ({ data, onUpdateClient, onAddClient, loading, text }) => {
  const { routes } = useContext(ThemeContext);
  const [addModal, setAddModal] = useState(false);
  const [activeMac, setActiveMac] = useState({});
@@ -37,7 +37,7 @@ const BlockedList = ({ data, onUpdateClient, onAddClient, loading }) => {

  const columns = [
    {
-      title: 'MAC ADDRESS',
+      title: text('MAC ADDRESS'),
      dataIndex: 'macAddress',
      width: 900,
      render: value => (
@@ -77,14 +77,15 @@ const BlockedList = ({ data, onUpdateClient, onAddClient, loading }) => {
        onCancel={() => setAddModal(false)}
        visible={addModal}
        onSubmit={addClient}
-        title="Add Client"
+        title={text('Add Client')}
+        text={text}
      />
      <div className={styles.BlockedList}>
        <Header>
-          <h1>Client Blocked List</h1>
+          <h1>{text('Client Blocked List')}</h1>

          <RoleProtectedBtn type="primary" onClick={() => setAddModal(true)}>
-            Add Client
+            {text('Add Client')}
          </RoleProtectedBtn>
        </Header>

@@ -106,6 +107,7 @@ BlockedList.propTypes = {
  onUpdateClient: Proptypes.func,
  onAddClient: Proptypes.func,
  loading: Proptypes.bool,
+  text: Proptypes.func,
 };

 BlockedList.defaultProps = {
@@ -113,6 +115,7 @@ BlockedList.defaultProps = {
  onUpdateClient: () => {},
  onAddClient: () => {},
  loading: false,
+  text: str => str,
 };

 export default BlockedList;
--- a/src/containers/ProfileDetails/components/AccessPoint/index.js
+++ b/src/containers/ProfileDetails/components/AccessPoint/index.js
@@ -55,6 +55,7 @@ const AccessPointForm = ({
  fileUpload,
  handleOnFormChange,
  loading,
+  text,
 }) => {
  const { radioTypes } = useContext(ThemeContext);

@@ -210,15 +211,15 @@ const AccessPointForm = ({

  const columnsGre = [
    {
-      title: 'Name',
+      title: text('text'),
      dataIndex: 'greTunnelName',
    },
    {
-      title: 'Remote IP Address',
+      title: text('Remote IP Address'),
      dataIndex: 'greRemoteInetAddr',
    },
    {
-      title: 'VLAN IDs',
+      title: text('VLAN IDs'),
      dataIndex: 'vlanIdsInGreTunnel',
      render: items => (!items?.length ? 'N/A' : items?.join(', ')),
    },
@@ -240,8 +241,8 @@ const AccessPointForm = ({
  const enabledRadioOptions = options => {
    return (
      <Group {...options}>
-        <Radio value="false">Disabled</Radio>
-        <Radio value="true">Enabled</Radio>
+        <Radio value="false">{text('Disabled')}</Radio>
+        <Radio value="true">{text('Enabled')}</Radio>
      </Group>
    );
  };
@@ -382,7 +383,7 @@ const AccessPointForm = ({

  return (
    <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">
          <Checkbox data-testid="ntpCheckbox">Use Default Servers</Checkbox>
        </Item>
@@ -407,7 +408,7 @@ const AccessPointForm = ({
                    help={ntpServerValidation.help}
                  >
                    <Search
-                      placeholder="Enter NTP server..."
+                      placeholder={text('Enter NTP server...')}
                      enterButton="Add"
                      onSearch={handleOnAddServer}
                      value={ntpServerSearch}
@@ -441,11 +442,11 @@ const AccessPointForm = ({
            );
          }}
        </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>
        </Item>
        <Item
-          label="RTLS"
+          label={text('RTLS')}
          name={['rtlsSettings', 'enabled']}
          rules={[
            {
@@ -630,12 +631,12 @@ const AccessPointForm = ({
          {enabledRadioOptions()}
        </Item>
      </Card>
-      <Card title="RF Enabled on This Profile" loading={loading}>
+      <Card title={text('RF Enabled on This Profile')} loading={loading}>
        <Item name="rfProfileId">
          <Select
            onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.rf)}
            showSearch={onSearchProfile}
-            placeholder="Select a RF Profile"
+            placeholder={text('Select a RF Profile')}
            filterOption={false}
            onSearch={name => onSearchProfile(PROFILES.rf, name)}
            onSelect={() => onSearchProfile && onSearchProfile(PROFILES.rf)}
@@ -651,13 +652,13 @@ const AccessPointForm = ({
          </Select>
        </Item>
      </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>
          <Select
            onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.ssid)}
            data-testid="ssidProfile"
            showSearch={onSearchProfile}
-            placeholder="Select a SSID Profile"
+            placeholder={text('Select a SSID Profile')}
            filterOption={false}
            onSearch={name => onSearchProfile(PROFILES.ssid, name)}
            onSelect={() => onSearchProfile && onSearchProfile(PROFILES.ssid)}
@@ -700,7 +701,7 @@ const AccessPointForm = ({
      </Card>

      <Card
-        title="GRE Tunnel Configuration"
+        title={text('GRE Tunnel Configuration')}
        loading={loading}
        extra={
          <WithRoles>
@@ -741,7 +742,7 @@ const AccessPointForm = ({
      <Form.List name="radiusProxyConfigurations">
        {(fields, { add, remove }) => (
          <Card
-            title="RADIUS Proxy Configuration"
+            title={text('RADIUS Proxy Configuration')}
            loading={loading}
            bodyStyle={{ padding: fields.length <= 0 && '0' }}
            extra={
@@ -767,7 +768,9 @@ const AccessPointForm = ({
          >
            {fields.map(field => (
              <div key={field.name}>
-                <Divider orientation="left"> Proxy Configuration {field.name + 1}</Divider>
+                <Divider orientation="left">
+                  {text('Proxy Configuration')} {field.name + 1}
+                </Divider>
                <Item
                  name={[field.name, 'useRadSec']}
                  label="RADSEC"
@@ -784,7 +787,7 @@ const AccessPointForm = ({

                <Item
                  name={[field.name, 'server']}
-                  label="Authentication Server"
+                  label={text('Authentication Server')}
                  rules={[
                    {
                      required: true,
@@ -798,7 +801,7 @@ const AccessPointForm = ({
                </Item>
                <Item
                  name={[field.name, 'port']}
-                  label="Authentication Port"
+                  label={text('Authentication Port')}
                  rules={[
                    {
                      required: true,
@@ -819,7 +822,7 @@ const AccessPointForm = ({
                  initialValue="2083"
                >
                  <Input
-                    placeholder="Enter Authentication Port"
+                    placeholder={text('Enter Authentication Port')}
                    type="number"
                    min={1}
                    max={65535}
@@ -846,7 +849,7 @@ const AccessPointForm = ({
                            },
                          ]}
                        >
-                          <Password placeholder="Enter Authentication Shared Secret" />
+                          <Password placeholder={text('Enter Authentication Shared Secret')} />
                        </Item>
                      )
                    );
@@ -854,12 +857,12 @@ const AccessPointForm = ({
                </Item>

                <Item
-                  label="RADIUS Accounting"
+                  label={text('RADIUS Accounting')}
                  name={[field.name, 'useAccounting']}
                  valuePropName="checked"
                  initialValue
                >
-                  <Checkbox>Use RADIUS Accounting Server</Checkbox>
+                  <Checkbox>{text('Use RADIUS Accounting Server')}</Checkbox>
                </Item>

                <Item
@@ -961,7 +964,7 @@ const AccessPointForm = ({
                  }}
                </Item>

-                <Item label="Realm">
+                <Item label={text('Realm')}>
                  <Form.List name={[field.name, 'realm']} initialValue={['']}>
                    {(realmFields, { add: addRealm, remove: removeRealm }) => {
                      return (
@@ -1024,7 +1027,7 @@ const AccessPointForm = ({
                            </div>
                          ))}
                          <Button type="dashed" onClick={() => addRealm()}>
-                            <PlusOutlined /> Add Realm
+                            <PlusOutlined /> {text('Add Realm')}
                          </Button>
                        </>
                      );
@@ -1049,7 +1052,7 @@ const AccessPointForm = ({
                      wildCardUsed && (
                        <Item
                          name={[field.name, 'dynamicDiscovery']}
-                          label="Auto Discovery"
+                          label={text('Auto Discovery')}
                          rules={[
                            {
                              required: true,
@@ -1082,7 +1085,7 @@ const AccessPointForm = ({
                        <>
                          <Item
                            name={[field.name, 'caCert']}
-                            label="CA Certification"
+                            label={text('CA Certification')}
                            rules={[
                              {
                                required: true,
@@ -1103,13 +1106,13 @@ const AccessPointForm = ({
                                showRemoveIcon: false,
                              }}
                            >
-                              <Button icon={<UploadOutlined />}>Click to Upload</Button>
+                              <Button icon={<UploadOutlined />}>{text('Click to Upload')}</Button>
                            </Upload>
                          </Item>

                          <Item
                            name={[field.name, 'clientCert']}
-                            label="Client Certification"
+                            label={text('Client Certification')}
                            tooltip="PEM File"
                          >
                            <Upload
@@ -1130,7 +1133,7 @@ const AccessPointForm = ({

                          <Item
                            name={[field.name, 'clientKey']}
-                            label="Client Key"
+                            label={text('Client Key')}
                            tooltip="KEY File"
                          >
                            <Upload
@@ -1148,7 +1151,10 @@ const AccessPointForm = ({
                              <Button icon={<UploadOutlined />}>Click to Upload</Button>
                            </Upload>
                          </Item>
-                          <Item name={[field.name, 'passphrase']} label="Certificate Passphrase">
+                          <Item
+                            name={[field.name, 'passphrase']}
+                            label={text('Certificate Passphrase')}
+                          >
                            <Password placeholder="Enter Passphrase" />
                          </Item>
                        </>
@@ -1191,6 +1197,7 @@ AccessPointForm.propTypes = {
  handleOnFormChange: PropTypes.func,
  fileUpload: PropTypes.func,
  loading: PropTypes.bool,
+  text: PropTypes.func,
 };

 AccessPointForm.defaultProps = {
@@ -1206,6 +1213,7 @@ AccessPointForm.defaultProps = {
  handleOnFormChange: () => {},
  fileUpload: () => {},
  loading: false,
+  text: str => str,
 };

 export default AccessPointForm;
--- a/src/containers/ProfileDetails/components/CaptivePortal/index.js
+++ b/src/containers/ProfileDetails/components/CaptivePortal/index.js
@@ -44,6 +44,7 @@ const CaptivePortalForm = ({
  onFetchMoreProfiles,
  loadingRadiusProfiles,
  handleOnFormChange,
+  text,
 }) => {
  const formatFile = async file => {
    const src = await onDownloadFile(file?.apExportUrl);
@@ -332,9 +333,9 @@ const CaptivePortalForm = ({
        <img className={styles.Image} alt="Loading..." src={previewImage.thumbUrl} />
      </Modal>

-      <Card title="General Settings ">
+      <Card title={text('General Settings')}>
        <Item
-          label="Authentication"
+          label={text('Authentication')}
          name="authenticationType"
          rules={[
            {
@@ -353,7 +354,7 @@ const CaptivePortalForm = ({

        <Item
          name="sessionTimeoutInMinutes"
-          label="Session Timeout "
+          label={text('Session Timeout')}
          rules={[
            {
              required: true,
@@ -381,7 +382,7 @@ const CaptivePortalForm = ({
        </Item>
        <Item
          name="redirectURL"
-          label="Redirect URL"
+          label={text('Redirect URL')}
          rules={[
            {
              type: 'url',
@@ -391,13 +392,13 @@ const CaptivePortalForm = ({
        >
          <Input placeholder="http://... or https://..." />
        </Item>
-        <Item label="Splash Page" name="externalSplashPage">
+        <Item label={text('Splash Page')} name="externalSplashPage">
          <Group>
            <Radio value="false" onChange={disableExternalSplashChange}>
-              Access Point Hosted
+              {text('Access Point Hosted')}
            </Radio>
            <Radio value="true" disabled onChange={() => setExternalSplash(true)}>
-              Externally Hosted
+              {text('Externally Hosted')}
            </Radio>
          </Group>
        </Item>
@@ -417,10 +418,10 @@ const CaptivePortalForm = ({
        </>
      )}
      {authentication === 'radius' && (
-        <Card title="RADIUS">
+        <Card title={text('RADIUS')}>
          <Item
            name="radiusAuthMethod"
-            label="Authentication"
+            label={text('Authentication')}
            rules={[
              {
                required: true,
@@ -436,7 +437,7 @@ const CaptivePortalForm = ({
          </Item>
          <Item
            name="radiusServiceId"
-            label="Service"
+            label={text('Service')}
            rules={[
              {
                required: true,
@@ -532,7 +533,7 @@ const CaptivePortalForm = ({
        <Panel header="Splash Page Content" key="splashcontent" forceRender>
          <Item
            name="browserTitle"
-            label="Browser Title"
+            label={text('Browser Title')}
            rules={[
              {
                required: true,
@@ -544,7 +545,7 @@ const CaptivePortalForm = ({
          </Item>
          <Item
            name="headerContent"
-            label="Page Title"
+            label={text('Page Title')}
            rules={[
              {
                message: 'Please enter the page title',
@@ -553,21 +554,21 @@ const CaptivePortalForm = ({
          >
            <Input placeholder="Page title" />
          </Item>
-          <Item label="Body Content">
+          <Item label={text('Body Content')}>
            <div className={styles.InlineDiv}>
              <Button
                onClick={() => setContentText(false)}
                type={!isLoginText ? 'primary ' : 'ghost'}
                className={styles.Header}
              >
-                User Acceptance Policy Text
+                {text('User Acceptance Policy Text')}
              </Button>
              <Button
                onClick={() => setContentText(true)}
                type={isLoginText ? 'primary ' : 'ghost'}
                className={styles.Header}
              >
-                Login Success Text
+                {text('Login Success Text')}
              </Button>
            </div>
            <Item name="userAcceptancePolicy" hidden={isLoginText}>
@@ -581,14 +582,14 @@ const CaptivePortalForm = ({
        </Panel>
      </Collapse>
      <Collapse expandIconPosition="right">
-        <Panel header="Splash Page Images" forceRender>
-          <Item label="Configure">
+        <Panel header={text('Splash Page Images')} forceRender>
+          <Item label={text('Configure')}>
            <div className={styles.InlineDiv}>
              <Tooltip
                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>
          </Item>

@@ -623,7 +624,7 @@ const CaptivePortalForm = ({
            </div>
          </Item>
          {bgFileList.length > 0 && (
-            <Item label="Background Styles">
+            <Item label={text('Background Styles')}>
              <div className={styles.InlineDiv}>
                <Item name="backgroundRepeat">
                  <Select placeholder="Select Background Repeat">
@@ -651,9 +652,9 @@ const CaptivePortalForm = ({
        </Panel>
      </Collapse>
      <Collapse expandIconPosition="right">
-        <Panel header="Allow List" forceRender>
+        <Panel header={text('Allow List')} forceRender>
          <Item
-            label="Configure"
+            label={text('Configure')}
            rules={[{ validator: validateWhitelist }]}
            validateStatus={whitelistValidation.status}
            help={whitelistValidation.help}
@@ -710,6 +711,7 @@ CaptivePortalForm.propTypes = {
  onFetchMoreProfiles: PropTypes.func,
  loadingRadiusProfiles: PropTypes.bool,
  handleOnFormChange: PropTypes.func,
+  text: PropTypes.func,
 };

 CaptivePortalForm.defaultProps = {
@@ -723,6 +725,7 @@ CaptivePortalForm.defaultProps = {
  onFetchMoreProfiles: () => {},
  loadingRadiusProfiles: false,
  handleOnFormChange: () => {},
+  text: str => str,
 };

 export default CaptivePortalForm;
--- a/src/containers/ProfileDetails/components/Operator/index.js
+++ b/src/containers/ProfileDetails/components/Operator/index.js
@@ -12,7 +12,7 @@ import styles from '../index.module.scss';
 const { Item } = Form;
 const { Option } = AntdSelect;

-const OperatorForm = ({ details, form, handleOnFormChange }) => {
+const OperatorForm = ({ details, form, handleOnFormChange, text }) => {
  const [modalVisible, setModalVisible] = useState(false);

  const [operatorFriendlyName, setOperatorFriendlyName] = useState(
@@ -50,7 +50,7 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {

  return (
    <div className={styles.ProfilePage}>
-      <Card title="Security">
+      <Card title={text('Security')}>
        <Item
          label="OSEN:"
          name="serverOnlyAuthenticatedL2EncryptionNetwork"
@@ -62,7 +62,7 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
          </Select>
        </Item>

-        <Item label="Domain Name List">
+        <Item label={text('Domain Name List')}>
          <Form.List name="domainNameList">
            {(fields, { add, remove }) => {
              return (
@@ -111,7 +111,7 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
                    </div>
                  ))}
                  <RoleProtectedBtn type="dashed" onClick={() => add()}>
-                    <PlusOutlined /> Add Domain Name
+                    <PlusOutlined /> {text('Add Domain Name')}
                  </RoleProtectedBtn>
                </>
              );
@@ -121,10 +121,10 @@ const OperatorForm = ({ details, form, handleOnFormChange }) => {
      </Card>

      <Card
-        title="Operator Name"
+        title={text('Operator Name')}
        extra={
          <RoleProtectedBtn type="solid" onClick={() => setModalVisible(true)}>
-            Add Name
+            {text('Add Name')}
          </RoleProtectedBtn>
        }
      >
@@ -152,12 +152,14 @@ OperatorForm.propTypes = {
  details: PropTypes.instanceOf(Object),
  form: PropTypes.instanceOf(Object),
  handleOnFormChange: PropTypes.func,
+  text: PropTypes.func,
 };

 OperatorForm.defaultProps = {
  form: null,
  details: {},
  handleOnFormChange: () => {},
+  text: str => str,
 };

 export default OperatorForm;
--- a/src/containers/ProfileDetails/components/PasspointProfile/index.js
+++ b/src/containers/ProfileDetails/components/PasspointProfile/index.js
@@ -49,6 +49,7 @@ const PasspointProfileForm = ({
  loadingOperatorProfiles,
  loadingIdProviderProfiles,
  handleOnFormChange,
+  text,
 }) => {
  const history = useHistory();
  const { radioTypes, routes } = useContext(ThemeContext);
@@ -204,17 +205,17 @@ const PasspointProfileForm = ({

  const columns = [
    {
-      title: 'Status',
+      title: text('Status'),
      dataIndex: 'connectionCapabilitiesStatus',
      width: 300,
    },
    {
-      title: 'Protocol',
+      title: text('Protocol'),
      dataIndex: 'connectionCapabilitiesIpProtocol',
      width: 300,
    },
    {
-      title: 'Port',
+      title: text('Port'),
      dataIndex: 'connectionCapabilitiesPortNumber',
      width: 300,
    },
@@ -234,24 +235,24 @@ const PasspointProfileForm = ({

  const columnsSsid = [
    {
-      title: 'Profile Name',
+      title: text('Profile Name'),
      dataIndex: 'name',
    },
    {
-      title: 'Type',
+      title: text('Type'),
      dataIndex: 'id',
      render: id => (parseInt(id, 10) === details?.osuSsidProfileId ? 'OSU' : 'Access'),
    },
    {
-      title: 'SSID',
+      title: text('SSID'),
      dataIndex: ['details', 'ssid'],
    },
    {
-      title: 'Security Mode',
+      title: text('Security Mode'),
      dataIndex: ['details', 'secureMode'],
    },
    {
-      title: 'Radio',
+      title: text('Radio'),
      dataIndex: ['details', 'appliedRadios'],
      render: appliedRadios =>
        sortRadioTypes([...appliedRadios])
@@ -262,8 +263,8 @@ const PasspointProfileForm = ({

  return (
    <div className={styles.ProfilePage}>
-      <Card title="General">
-        <Item label="Venue" name="passpointVenueProfileId">
+      <Card title={text('General')}>
+        <Item label={text('Venue')} name="passpointVenueProfileId">
          <Select
            onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.venue)}
            data-testid="venueProfile"
@@ -283,7 +284,7 @@ const PasspointProfileForm = ({
            ))}
          </Select>
        </Item>
-        <Item label="Operator" name="passpointOperatorProfileId">
+        <Item label={text('Operator')} name="passpointOperatorProfileId">
          <Select
            onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.operator)}
            data-testid="operatorProfile"
@@ -303,7 +304,7 @@ const PasspointProfileForm = ({
            ))}
          </Select>
        </Item>
-        <Item label="ID Provider" name="passpointOsuProviderProfileIds">
+        <Item label={text('ID Provider')} name="passpointOsuProviderProfileIds">
          <Select
            onPopupScroll={e => onFetchMoreProfiles(e, PROFILES.providerID)}
            data-testid="idProviderProfiles"
@@ -328,7 +329,7 @@ const PasspointProfileForm = ({
        </Item>

        <Item
-          label="Deauthentication Request Timeout"
+          label={text('Deauthentication Request Timeout')}
          name="deauthRequestTimeout"
          rules={[
            {
@@ -349,7 +350,7 @@ const PasspointProfileForm = ({
        >
          <Input min={0} max={255} type="number" placeholder="0-255" addonAfter="Seconds" />
        </Item>
-        <Item label="Interworking Hot 2.0" name="enableInterworkingAndHs20">
+        <Item label={text('Interworking Hot 2.0')} name="enableInterworkingAndHs20">
          {defaultRadios}
        </Item>
        <Item
@@ -382,16 +383,16 @@ const PasspointProfileForm = ({
        <Item
          label="ASRA"
          name="additionalStepsRequiredForAccess"
-          tooltip="Additional Steps Required For Access"
+          tooltip={text('Additional Steps Required For Access')}
        >
          {defaultRadios}
        </Item>

-        <Item label="Quality of Service Configuration" name="qosMapSetConfiguration">
+        <Item label={text('Quality of Service Configuration')} name="qosMapSetConfiguration">
          {defaultRadios}
        </Item>

-        <Item label="Operating Class" name="useOperatingClass">
+        <Item label={text('Operating Class')} name="useOperatingClass">
          {defaultRadios}
        </Item>
        <Item
@@ -433,7 +434,7 @@ const PasspointProfileForm = ({
      <Card
        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">
              <InfoCircleOutlined className={styles.ToolTip} />
            </Tooltip>
@@ -453,8 +454,8 @@ const PasspointProfileForm = ({
          })}
        />
      </Card>
-      <Card title="Access Network">
-        <Item label="Access Network Type" name="accessNetworkType">
+      <Card title={text('Access Network')}>
+        <Item label={text('Access Network Type')} name="accessNetworkType">
          <Select>
            <Option value="private_network">Private Network</Option>
            <Option value="private_network_guest_access">Private Network Guest Access</Option>
@@ -466,7 +467,7 @@ const PasspointProfileForm = ({
            <Option value="wildcard">Wildcard</Option>
          </Select>
        </Item>
-        <Item label="Authentication Type" name="networkAuthenticationType">
+        <Item label={text('Authentication Type')} name="networkAuthenticationType">
          <Select onChange={value => setAuthType(value)}>
            <Option value="acceptance_of_terms_and_conditions">
              Acceptance of Terms & Conditions
@@ -478,7 +479,7 @@ const PasspointProfileForm = ({
        </Item>

        {authType === 'acceptance_of_terms_and_conditions' && (
-          <Item label="Terms & Conditions" name="termsAndConditionsFile">
+          <Item label={text('Terms & Conditions')} name="termsAndConditionsFile">
            <Upload
              accept="image/*, text/plain"
              data-testid="termsAndConditionsUpload"
@@ -491,21 +492,21 @@ const PasspointProfileForm = ({
          </Item>
        )}

-        <Item label="Emergency Services Reachable" name="emergencyServicesReachable">
+        <Item label={text('Emergency Services Reachable')} name="emergencyServicesReachable">
          {defaultRadios}
        </Item>
        <Item
-          label="Unauthenticated Emergency Service Accessible"
+          label={text('Unauthenticated Emergency Service Accessible')}
          name="unauthenticatedEmergencyServiceAccessible"
        >
          {defaultRadios}
        </Item>
      </Card>
-      <Card title="IP Connectivity">
-        <Item label="Internet Connectivity" name="internetConnectivity">
+      <Card title={text('IP Connectivity')}>
+        <Item label={text('Internet Connectivity')} name="internetConnectivity">
          {defaultRadios}
        </Item>
-        <Item label="IP Address Type" name="ipAddressTypeAvailability">
+        <Item label={text('IP Address Type')} name="ipAddressTypeAvailability">
          <Select>
            <Option value="address_type_not_available">Address Type Not Available</Option>
            <Option value="address_type_available">Address Type Available</Option>
@@ -530,7 +531,7 @@ const PasspointProfileForm = ({
            </Option>
          </Select>
        </Item>
-        <Item label="Connection Capability">
+        <Item label={text('Connection Capability')}>
          <Button type="solid" onClick={() => setModalVisible(true)}>
            Add
          </Button>
@@ -543,7 +544,7 @@ const PasspointProfileForm = ({
          rowKey="connectionCapabilitiesPortNumber"
        />
      </Card>
-      <Card title="Advanced">
+      <Card title={text('Advanced')}>
        <Item
          label="ANQP Domain ID"
          name="anqpDomainId"
@@ -615,6 +616,7 @@ PasspointProfileForm.propTypes = {
  loadingOperatorProfiles: PropTypes.bool,
  loadingIdProviderProfiles: PropTypes.bool,
  handleOnFormChange: PropTypes.func,
+  text: PropTypes.func,
 };

 PasspointProfileForm.defaultProps = {
@@ -633,6 +635,7 @@ PasspointProfileForm.defaultProps = {
  loadingOperatorProfiles: false,
  loadingIdProviderProfiles: false,
  handleOnFormChange: () => {},
+  text: str => str,
 };

 export default PasspointProfileForm;
--- a/src/containers/ProfileDetails/components/ProviderId/components/NaiRealm/index.js
+++ b/src/containers/ProfileDetails/components/ProviderId/components/NaiRealm/index.js
@@ -19,7 +19,7 @@ const naiLayout = {
  wrapperCol: { span: 20 },
 };

-const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm }) => {
+const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm, text }) => {
  const [eapModal, setEapModal] = useState(false);

  const columnsNai = [
@@ -176,12 +176,12 @@ const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm }) => {
          onSuccess={addEapMethod}
          onCancel={canceledModal}
          visible={eapModal}
-          title="Add EAP Method"
+          title={text('Add EAP Method')}
          content={
            <Form {...naiLayout} form={form}>
              <Item
                name="method"
-                label="Method:"
+                label={text('Method')}
                rules={[
                  {
                    required: true,
@@ -205,7 +205,7 @@ const NaiRealm = ({ eapMap, form, addEap, removeEap, addRealm }) => {
              </Item>
              <Item
                name="auth"
-                label="Authentication"
+                label={text('Authentication')}
                rules={[
                  {
                    required: true,
@@ -229,8 +229,9 @@ NaiRealm.propTypes = {
  addEap: PropTypes.func.isRequired,
  removeEap: 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;
--- a/src/containers/ProfileDetails/components/ProviderId/index.js
+++ b/src/containers/ProfileDetails/components/ProviderId/index.js
@@ -13,7 +13,7 @@ import styles from '../index.module.scss';

 const { Item } = Form;

-const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
+const ProviderIdForm = ({ form, details, handleOnFormChange, text }) => {
  const [modalForm] = Form.useForm();
  const [plmnModal, setPlmnModal] = useState(false);
  const [mccMncList, setMccMncList] = useState(details?.mccMncList || []);
@@ -167,8 +167,8 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {

  return (
    <div className={styles.ProfilePage}>
-      <Card title="Network Identifier">
-        <Item label="Roaming OI">
+      <Card title={text('Network Identifier')}>
+        <Item label={text('Roaming OI')}>
          <Form.List name="roamingOi">
            {(fields, { add: addRoamingOI, remove: removeRoamingOI }) => {
              return (
@@ -216,7 +216,7 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
                    </div>
                  ))}
                  <RoleProtectedBtn type="dashed" onClick={() => addRoamingOI()}>
-                    <PlusOutlined /> Add Roaming OI
+                    <PlusOutlined /> {text('Add Roaming OI')}
                  </RoleProtectedBtn>
                </>
              );
@@ -226,10 +226,10 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
      </Card>

      <Card
-        title="Public Land Mobile Networks (PLMN)"
+        title={text('Public Land Mobile Networks (PLMN)')}
        extra={
          <RoleProtectedBtn type="solid" onClick={() => setPlmnModal(true)} data-testid="addPlmn">
-            Add
+            {text('Add')}
          </RoleProtectedBtn>
        }
      >
@@ -239,7 +239,7 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
            visible={plmnModal}
            onSuccess={handleAddPlmnItem}
            onCancel={handleClosePlmnModal}
-            title="Add Public Land Mobile Network (PLMN)"
+            title={text('Add Public Land Mobile Network (PLMN)')}
            content={
              <Form {...modalLayout} form={modalForm}>
                <Item
@@ -278,6 +278,7 @@ const ProviderIdForm = ({ form, details, handleOnFormChange }) => {
        addEap={handleAddEapMethod}
        removeEap={handleRemoveEapMethod}
        addRealm={handleAddNaiRealm}
+        text={text}
      />

      <OsuForm
@@ -296,12 +297,14 @@ ProviderIdForm.propTypes = {
  details: PropTypes.instanceOf(Object),
  form: PropTypes.instanceOf(Object),
  handleOnFormChange: PropTypes.func,
+  text: PropTypes.func,
 };

 ProviderIdForm.defaultProps = {
  form: null,
  details: {},
  handleOnFormChange: () => {},
+  text: str => str,
 };

 export default ProviderIdForm;
--- a/src/containers/ProfileDetails/components/RF/index.js
+++ b/src/containers/ProfileDetails/components/RF/index.js
@@ -21,7 +21,7 @@ const defaultOptions = (
  </Select>
 );

-const RFForm = ({ form, details, extraFields }) => {
+const RFForm = ({ form, details, extraFields, text }) => {
  const { radioTypes } = useContext(ThemeContext);
  const currentRadios = Object.keys(details.rfConfigMap).sort();

@@ -290,7 +290,7 @@ const RFForm = ({ form, details, extraFields }) => {
    };

    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>
      </Item>
    );
@@ -326,12 +326,12 @@ const RFForm = ({ form, details, extraFields }) => {
            ))}
          </div>
        </Item>
-        {renderItem('Maximum Devices', ['maxNumClients'], renderInputItem, {
+        {renderItem(text('Maximum Devices'), ['maxNumClients'], renderInputItem, {
          min: 0,
          max: 100,
          error: '0 - 100',
        })}
-        {renderItem('Radio Mode', ['radioMode'], renderOptionItem, {
+        {renderItem(text('Radio Mode'), ['radioMode'], renderOptionItem, {
          dropdown: key => {
            return (
              <Select onChange={value => onRadioModeChange(value, key)}>
@@ -353,20 +353,20 @@ const RFForm = ({ form, details, extraFields }) => {
            );
          },
        })}
-        {channelBandwidthSelect()}
-        {renderItem('Beacon Interval', ['beaconInterval'], renderInputItem, {
+        {channelBandwidthSelect(text)}
+        {renderItem(text('Beacon Interval'), ['beaconInterval'], renderInputItem, {
          min: 50,
          max: 65535,
          error: '50 - 65535',
          addOnText: 'ms',
        })}
-        {renderItem('RTS/CTS threshold', ['rtsCtsThreshold'], renderInputItem, {
+        {renderItem(text('RTS/CTS threshold'), ['rtsCtsThreshold'], renderInputItem, {
          min: 0,
          max: 65535,
          error: '0 - 65535 (Bytes)',
          addOnText: 'bytes',
        })}
-        {renderItem('MIMO Mode', ['mimoMode'], renderOptionItem, {
+        {renderItem(text('MIMO Mode'), ['mimoMode'], renderOptionItem, {
          dropdown: (
            <Select>
              <Option value="none">Auto</Option>
@@ -386,7 +386,7 @@ const RFForm = ({ form, details, extraFields }) => {
            field.options
          )
        )}
-        {renderItem('Management Rate (Mbps)', ['managementRate'], renderOptionItem, {
+        {renderItem(text('Management Rate (Mbps)'), ['managementRate'], renderOptionItem, {
          dropdown: key => (
            <Select>
              <Option value="auto">Auto</Option>
@@ -407,7 +407,7 @@ const RFForm = ({ form, details, extraFields }) => {
          ),
          dependencies: { autoCellSizeSelection: 'true' },
        })}
-        {renderItem('Multicast Rate (Mbps)', ['multicastRate'], renderOptionItem, {
+        {renderItem(text('Multicast Rate (Mbps)'), ['multicastRate'], renderOptionItem, {
          dropdown: (
            <Select>
              <Option value="auto">Auto</Option>
@@ -423,15 +423,20 @@ const RFForm = ({ form, details, extraFields }) => {
          ),
          dependencies: { autoCellSizeSelection: 'true' },
        })}
-        {renderItem('Probe Response Threshold', ['probeResponseThresholdDb'], renderInputItem, {
-          min: -100,
-          max: -40,
-          error: '-100 - -40 dBm',
-          addOnText: 'dBm',
-          dependencies: { autoCellSizeSelection: 'true' },
-        })}
        {renderItem(
-          'Client Disconnect Threshold',
+          text('Probe Response Threshold'),
+          ['probeResponseThresholdDb'],
+          renderInputItem,
+          {
+            min: -100,
+            max: -40,
+            error: '-100 - -40 dBm',
+            addOnText: 'dBm',
+            dependencies: { autoCellSizeSelection: 'true' },
+          }
+        )}
+        {renderItem(
+          text('Client Disconnect Threshold'),
          ['clientDisconnectThresholdDb'],
          renderInputItem,
          {
@@ -442,11 +447,11 @@ const RFForm = ({ form, details, extraFields }) => {
            dependencies: { autoCellSizeSelection: 'true' },
          }
        )}
-        {renderItem('Max EIRP Tx Power', ['useMaxTxPower'], renderOptionItem, {
+        {renderItem(text('Max EIRP Tx Power'), ['useMaxTxPower'], renderOptionItem, {
          dropdown: defaultOptions,
          dependencies: { autoCellSizeSelection: 'true' },
        })}
-        {renderItem('EIRP Tx Power', ['eirpTxPower'], renderInputItem, {
+        {renderItem(text('EIRP Tx Power'), ['eirpTxPower'], renderInputItem, {
          min: 1,
          max: 32,
          error: '1 - 32 dBm',
@@ -454,23 +459,23 @@ const RFForm = ({ form, details, extraFields }) => {
          dependencies: { autoCellSizeSelection: 'true', useMaxTxPower: 'true' },
        })}

-        {renderItem('Min Load', ['bestApSettings', 'minLoadFactor'], renderInputItem, {
+        {renderItem(text('Min Load'), ['bestApSettings', 'minLoadFactor'], renderInputItem, {
          min: 0,
          max: 100,
          error: '0 - 100%',
          addOnText: '%',
          hidden: true,
        })}
-        {renderItem('SNR', ['bestApSettings', 'dropInSnrPercentage'], renderInputItem, {
+        {renderItem(text('SNR'), ['bestApSettings', 'dropInSnrPercentage'], renderInputItem, {
          min: 0,
          max: 100,
          error: '0 - 100%',
          addOnText: '% Drop',
          hidden: true,
        })}
-        <p>Channel Hop Configuration:</p>
+        <p>{text('Channel Hop Configuration')}:</p>
        {renderItem(
-          'Noise Floor',
+          text('Noise Floor'),
          ['channelHopSettings', 'noiseFloorThresholdInDB'],
          renderInputItem,
          {
@@ -481,7 +486,7 @@ const RFForm = ({ form, details, extraFields }) => {
          }
        )}
        {renderItem(
-          'Noise Floor Time',
+          text('Noise Floor Time'),
          ['channelHopSettings', 'noiseFloorThresholdTimeInSeconds'],
          renderInputItem,
          {
@@ -492,7 +497,7 @@ const RFForm = ({ form, details, extraFields }) => {
          }
        )}
        {renderItem(
-          'Non WIFI',
+          text('Non WIFI'),
          ['channelHopSettings', 'nonWifiThresholdInPercentage'],
          renderInputItem,
          {
@@ -503,7 +508,7 @@ const RFForm = ({ form, details, extraFields }) => {
          }
        )}
        {renderItem(
-          'Non WIFI Time',
+          text('Non WIFI Time'),
          ['channelHopSettings', 'nonWifiThresholdTimeInSeconds'],
          renderInputItem,
          {
@@ -513,14 +518,19 @@ const RFForm = ({ form, details, extraFields }) => {
            addOnText: 'sec',
          }
        )}
-        {renderItem('OBSS Hop Mode', ['channelHopSettings', 'obssHopMode'], renderOptionItem, {
-          dropdown: (
-            <Select>
-              <Option value="NON_WIFI">Non-IBSS</Option>
-              <Option value="NON_WIFI_AND_OBSS">Non-IBSS Time</Option>
-            </Select>
-          ),
-        })}
+        {renderItem(
+          text('OBSS Hop Mode'),
+          ['channelHopSettings', 'obssHopMode'],
+          renderOptionItem,
+          {
+            dropdown: (
+              <Select>
+                <Option value="NON_WIFI">Non-IBSS</Option>
+                <Option value="NON_WIFI_AND_OBSS">Non-IBSS Time</Option>
+              </Select>
+            ),
+          }
+        )}
      </Card>
    </div>
  );
@@ -530,6 +540,7 @@ RFForm.propTypes = {
  form: PropTypes.instanceOf(Object),
  details: PropTypes.instanceOf(Object),
  extraFields: PropTypes.instanceOf(Array),
+  text: PropTypes.func,
 };

 RFForm.defaultProps = {
@@ -539,6 +550,7 @@ RFForm.defaultProps = {
    rfConfigMap: RADIOS.reduce((acc, i) => ((acc[i] = {}), acc), {}),
  },
  extraFields: [],
+  text: str => str,
 };

 export default RFForm;
--- a/src/containers/ProfileDetails/components/Radius/index.js
+++ b/src/containers/ProfileDetails/components/Radius/index.js
@@ -13,7 +13,7 @@ const MAX_RADIUS = 1;

 const { Item, List } = Form;

-const RadiusForm = ({ form, details }) => {
+const RadiusForm = ({ form, details, text }) => {
  const formatInitialAuthenticationValues = () => {
    const values = [details?.primaryRadiusAuthServer];
    if (details?.secondaryRadiusAuthServer) {
@@ -46,7 +46,7 @@ const RadiusForm = ({ form, details }) => {
        {(fields, { add, remove }) => {
          return (
            <Card
-              title="RADIUS Authentication Server"
+              title={text('RADIUS Authentication Server')}
              extra={
                <>
                  {fields.length >= MAX_RADIUS && (
@@ -62,14 +62,16 @@ const RadiusForm = ({ form, details }) => {
                    }}
                    disabled={fields.length >= MAX_RADIUS}
                  >
-                    <PlusOutlined /> Add Authentication Server
+                    <PlusOutlined /> {text('Add Authentication Server')}
                  </Button>
                </>
              }
            >
              {fields.map((field, index) => (
                <div key={field.name}>
-                  <span>{index === 0 ? 'Primary' : 'Secondary'} Authentication Server</span>
+                  <span>
+                    {index === 0 ? 'Primary' : 'Secondary'} {text('Authentication Server')}
+                  </span>
                  <Item
                    name={[field.name, 'ipAddress']}
                    label="IP"
@@ -89,7 +91,7 @@ const RadiusForm = ({ form, details }) => {

                  <Item
                    name={[field.name, 'secret']}
-                    label="Shared Secret"
+                    label={text('Shared Secret')}
                    rules={[
                      {
                        required: true,
@@ -105,7 +107,7 @@ const RadiusForm = ({ form, details }) => {

                  <Item
                    name={[field.name, 'port']}
-                    label="Port"
+                    label={text('Port')}
                    initialValue={1812}
                    rules={[
                      {
@@ -135,7 +137,7 @@ const RadiusForm = ({ form, details }) => {

                  <Item
                    name={[field.name, 'timeout']}
-                    label="Session Timeout"
+                    label={text('Session Timeout')}
                    initialValue={5}
                    rules={[
                      {
@@ -189,7 +191,7 @@ const RadiusForm = ({ form, details }) => {
        {(fields, { add, remove }) => {
          return (
            <Card
-              title="RADIUS Accounting Server"
+              title={text('RADIUS Accounting Server')}
              bodyStyle={{ padding: fields.length <= 0 && '0' }}
              extra={
                <>
@@ -206,14 +208,16 @@ const RadiusForm = ({ form, details }) => {
                    }}
                    disabled={fields.length >= MAX_RADIUS}
                  >
-                    <PlusOutlined /> Add Accounting Server
+                    <PlusOutlined /> {text('Add Accounting Server')}
                  </Button>
                </>
              }
            >
              {fields.map((field, index) => (
                <div key={field.name}>
-                  <span>{index === 0 ? 'Primary' : 'Secondary'} Accounting Server</span>
+                  <span>
+                    {index === 0 ? 'Primary' : 'Secondary'} {text('Accounting Server')}
+                  </span>
                  <Item
                    name={[field.name, 'ipAddress']}
                    label="IP"
@@ -233,7 +237,7 @@ const RadiusForm = ({ form, details }) => {

                  <Item
                    name={[field.name, 'secret']}
-                    label="Shared Secret"
+                    label={text('Shared Secret')}
                    rules={[
                      {
                        required: true,
@@ -249,7 +253,7 @@ const RadiusForm = ({ form, details }) => {

                  <Item
                    name={[field.name, 'port']}
-                    label="Port"
+                    label={text('Port')}
                    initialValue={1813}
                    rules={[
                      {
@@ -279,7 +283,7 @@ const RadiusForm = ({ form, details }) => {

                  <Item
                    name={[field.name, 'timeout']}
-                    label="Session Timeout"
+                    label={text('Session Timeout')}
                    initialValue={5}
                    rules={[
                      {
@@ -318,7 +322,7 @@ const RadiusForm = ({ form, details }) => {
                    }}
                    data-testid={`accountingDelete${field.name}`}
                  >
-                    Remove
+                    {text('Remove')}
                  </RoleProtectedBtn>
                </div>
              ))}
@@ -333,11 +337,13 @@ const RadiusForm = ({ form, details }) => {
 RadiusForm.propTypes = {
  form: PropTypes.instanceOf(Object),
  details: PropTypes.instanceOf(Object),
+  text: PropTypes.func,
 };

 RadiusForm.defaultProps = {
  form: null,
  details: {},
+  text: str => str,
 };

 export default RadiusForm;
--- a/src/containers/ProfileDetails/components/SSID/index.js
+++ b/src/containers/ProfileDetails/components/SSID/index.js
@@ -33,6 +33,7 @@ const SSIDForm = ({
  loadingCaptiveProfiles,
  loadingRadiusProfiles,
  loadingPasspointProfiles,
+  text,
 }) => {
  const { radioTypes } = useContext(ThemeContext);
  const [mode, setMode] = useState(details.secureMode || DEFAULT_SSID_PROFILE.secureMode);
@@ -172,9 +173,9 @@ const SSIDForm = ({

  return (
    <div className={styles.ProfilePage}>
-      <Card title="SSID">
+      <Card title={text('SSID')}>
        <Item
-          label="SSID Name"
+          label={text('SSID Name')}
          name="ssid"
          rules={[
            {
@@ -201,7 +202,7 @@ const SSIDForm = ({
        </Item>

        <Item
-          label="Broadcast SSID"
+          label={text('Broadcast SSID')}
          name="broadcastSsid"
          rules={[
            {
@@ -211,12 +212,12 @@ const SSIDForm = ({
          ]}
        >
          <RadioGroup>
-            <Radio value="enabled">Show SSID</Radio>
-            <Radio value="disabled">Hide SSID</Radio>
+            <Radio value="enabled">{text('Show SSID')}</Radio>
+            <Radio value="disabled">{text('Hide SSID')}</Radio>
          </RadioGroup>
        </Item>

-        <Item label="Client Rate Limit">
+        <Item label={text('Client Rate Limit')}>
          <div className={styles.InlineDiv}>
            <Item
              name="bandwidthLimitDown"
@@ -283,7 +284,7 @@ const SSIDForm = ({
          </div>
        </Item>

-        <Item name="appliedRadios" label="Use On">
+        <Item name="appliedRadios" label={text('Use On')}>
          <CheckboxGroup>
            {Object.keys(radioTypes || {})?.map(i => (
              <Checkbox key={i} value={i}>
@@ -293,7 +294,7 @@ const SSIDForm = ({
          </CheckboxGroup>
        </Item>
      </Card>
-      <Card title="Network Connectivity">
+      <Card title={text('Network Connectivity')}>
        <Item
          name="forwardMode"
          label={
@@ -321,7 +322,7 @@ const SSIDForm = ({
        >
          <RadioGroup>
            <Radio value="BRIDGE" defaultSelected>
-              Bridge
+              {text('Bridge')}
            </Radio>
            <Radio
              value="NAT"
@@ -356,22 +357,22 @@ const SSIDForm = ({
                >
                  {getFieldValue('forwardMode') === 'BRIDGE' ? (
                    <RadioGroup>
-                      <Radio value="false">Allow Local Access</Radio>
-                      <Radio value="true">No Local Access</Radio>
+                      <Radio value="false">{text('Allow Local Access')}</Radio>
+                      <Radio value="true">{text('No Local Access')}</Radio>
                    </RadioGroup>
                  ) : (
                    <span className={styles.Disclaimer}>Not Applicable</span>
                  )}
                </Item>

-                <Item label="Captive Portal" name="captivePortal">
+                <Item label={text('Captive Portal')} name="captivePortal">
                  {getFieldValue('forwardMode') === 'NAT' ? (
                    <RadioGroup>
-                      <Radio value="notPortal">Do Not Use</Radio>
-                      <Radio value="usePortal">Use</Radio>
+                      <Radio value="notPortal">{text('Do Not Use')}</Radio>
+                      <Radio value="usePortal">{text('Use')}</Radio>
                    </RadioGroup>
                  ) : (
-                    <span className={styles.Disclaimer}>Requires NAT Mode</span>
+                    <span className={styles.Disclaimer}>{text('Requires NAT Mode')}</span>
                  )}
                </Item>
              </>
@@ -481,7 +482,7 @@ const SSIDForm = ({
        >
          {({ getFieldValue }) => {
            return (
-              <Item name="dynamicVlan" label="Dynamic VLAN">
+              <Item name="dynamicVlan" label={text('Dynamic VLAN')}>
                {getFieldValue('forwardMode') === 'BRIDGE' &&
                getFieldValue('vlan') === 'defaultVLAN' &&
                (mode === 'wpa3OnlyEAP' ||
@@ -511,7 +512,7 @@ const SSIDForm = ({
          {radioOptions}
        </Item>

-        <Item name="passpointConfig" label="Passpoint">
+        <Item name="passpointConfig" label={text('Passpoint')}>
          <Select
            placeholder="Select Passpoint Configuration"
            onChange={() => {
@@ -579,8 +580,8 @@ const SSIDForm = ({
        </Item>
      </Card>

-      <Card title="Security and Encryption">
-        <Item label="Mode" name="secureMode">
+      <Card title={text('Security and Encryption')}>
+        <Item label={text('Mode')} name="secureMode">
          <Select
            data-testid="securityMode"
            onChange={value => {
@@ -620,7 +621,7 @@ const SSIDForm = ({
          mode === 'wpa3OnlySAE' ||
          mode === 'wpa3MixedSAE') && (
          <Item
-            label="Security Key"
+            label={text('Security Key')}
            name="keyStr"
            rules={[
              {
@@ -639,7 +640,7 @@ const SSIDForm = ({
        {mode === 'wep' && (
          <>
            <Item
-              label="WEP Key"
+              label={text('WEP Key')}
              name="wepKey"
              rules={[
                {
@@ -669,7 +670,7 @@ const SSIDForm = ({
              />
            </Item>
            <Item
-              label="Default Key ID "
+              label={text('Default Key ID')}
              name="wepDefaultKeyId"
              rules={[
                {
@@ -696,7 +697,7 @@ const SSIDForm = ({
        mode === 'wpa3OnlyEAP192') && (
        <Card title="RADIUS">
          <Item
-            label="RADIUS Proxy"
+            label={text('RADIUS Proxy')}
            name="useRadiusProxy"
            rules={[
              {
@@ -706,8 +707,8 @@ const SSIDForm = ({
            ]}
          >
            <RadioGroup>
-              <Radio value="true">Enabled</Radio>
-              <Radio value="false">Disabled</Radio>
+              <Radio value="true">{text('Enabled')}</Radio>
+              <Radio value="false">{text('Disabled')}</Radio>
            </RadioGroup>
          </Item>
          <Item
@@ -744,7 +745,7 @@ const SSIDForm = ({
          </Item>
          <Item
            name="radiusAcountingServiceInterval"
-            label="RADIUS Accounting Interval"
+            label={text('RADIUS Accounting Interval')}
            rules={[
              {
                required: true,
@@ -852,8 +853,8 @@ const SSIDForm = ({
        </Card>
      )}

-      <Card title="Roaming">
-        <Item label="Advanced Settings" colon={false}>
+      <Card title={text('Roaming')}>
+        <Item label={text('Advanced Settings')} colon={false}>
          <div className={styles.InlineDiv}>
            {Object.keys(radioTypes || {})?.map(i => (
              <span key={i}>{radioTypes?.[i]}</span>
@@ -927,6 +928,7 @@ SSIDForm.propTypes = {
  loadingCaptiveProfiles: PropTypes.bool,
  loadingRadiusProfiles: PropTypes.bool,
  loadingPasspointProfiles: PropTypes.bool,
+  text: PropTypes.func,
 };

 SSIDForm.defaultProps = {
@@ -942,6 +944,7 @@ SSIDForm.defaultProps = {
  loadingCaptiveProfiles: false,
  loadingRadiusProfiles: false,
  loadingPasspointProfiles: false,
+  text: str => str,
 };

 export default SSIDForm;
--- a/src/containers/ProfileDetails/components/Venue/index.js
+++ b/src/containers/ProfileDetails/components/Venue/index.js
@@ -9,7 +9,7 @@ import FormModal from './components/FormModal';
 const { Item } = Form;
 const { Option } = AntdSelect;

-const VenueForm = ({ form, details, handleOnFormChange }) => {
+const VenueForm = ({ form, details, handleOnFormChange, text }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentVenueGroupId, setCurrentVenueGroupId] = useState(
    details?.venueTypeAssignment?.venueGroupId || 0
@@ -48,15 +48,15 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {

  const columns = [
    {
-      title: 'Name',
+      title: text('Name'),
      dataIndex: 'dupleName',
    },
    {
-      title: 'Locale',
+      title: text('Locale'),
      dataIndex: 'locale',
    },
    {
-      title: 'URL',
+      title: text('URL'),
      dataIndex: 'venueUrl',
    },
    {
@@ -75,8 +75,8 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {

  return (
    <div className={styles.ProfilePage}>
-      <Card title="Venue Type">
-        <Item label="Group:" name={['venueTypeAssignment', 'venueGroupId']}>
+      <Card title={text('Venue Type')}>
+        <Item label={text('Group')} name={['venueTypeAssignment', 'venueGroupId']}>
          <Select
            data-testid="venueGroup"
            placeholder="Select Venue Group"
@@ -99,7 +99,7 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
            <Option value={11}>Outdoor</Option>
          </Select>
        </Item>
-        <Item label="Type:" name={['venueTypeAssignment', 'venueTypeId']}>
+        <Item label={text('Type')} name={['venueTypeAssignment', 'venueTypeId']}>
          {(currentVenueGroupId === 0 && (
            <Select placeholder="Select Venue Type">
              <Option value={0}>Unspecified</Option>
@@ -219,10 +219,10 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
      </Card>

      <Card
-        title="Venue Name"
+        title={text('Venue Name')}
        extra={
          <RoleProtectedBtn type="solid" onClick={() => setModalVisible(true)}>
-            Add Name
+            {text('Add Name')}
          </RoleProtectedBtn>
        }
      >
@@ -240,7 +240,7 @@ const VenueForm = ({ form, details, handleOnFormChange }) => {
        visible={modalVisible}
        closeModal={handleCloseModal}
        onSubmit={handleNameSave}
-        title="Add name"
+        title={text('Add name')}
      />
    </div>
  );
@@ -250,12 +250,14 @@ VenueForm.propTypes = {
  details: PropTypes.instanceOf(Object),
  form: PropTypes.instanceOf(Object),
  handleOnFormChange: PropTypes.func,
+  text: PropTypes.func,
 };

 VenueForm.defaultProps = {
  form: null,
  details: {},
  handleOnFormChange: () => {},
+  text: str => str,
 };

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

 ProfileDetails.defaultProps = {
@@ -461,6 +484,7 @@ ProfileDetails.defaultProps = {
  loadingPasspointProfiles: false,
  extraFields: [],
  loadingProfile: false,
+  text: str => str,
 };

 export default ProfileDetails;