Merge pull request #3043 from weseek/imprv/old-tabs-on-userpage

Imprv/old tabs on user page

src/client/js/components/Icons/LooockIcon.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const LockIcon = () => <i className="icon-fw icon-lock"></i>;
+
+export default LockIcon;

src/client/js/components/Icons/PaperPlaneIcon.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const PaperPlaneIcon = () => <i className="icon-fw icon-paper-plane"></i>;
+
+export default PaperPlaneIcon;

src/client/js/components/Icons/ShareAltIcon.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ShareAltIcon = () => <i className="icon-fw icon-share-alt"></i>;
+
+export default ShareAltIcon;

src/client/js/components/Icons/UserIcon.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const UserIcon = () => <i className="icon-fw icon-user"></i>;
+
+export default UserIcon;

src/client/js/components/Me/PersonalSettings.jsx

@@ -1,59 +1,53 @@
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-
+import CustomNavigation from '../CustomNavigation';
 import UserSettings from './UserSettings';
 import PasswordSettings from './PasswordSettings';
 import ExternalAccountLinkedMe from './ExternalAccountLinkedMe';
 import ApiSettings from './ApiSettings';
 
+import UserIcon from '../Icons/UserIcon';
+import ShareAltIcon from '../Icons/ShareAltIcon';
+import LockIcon from '../Icons/LooockIcon';
+import PaperPlaneIcon from '../Icons/PaperPlaneIcon';
+
 class PersonalSettings extends React.Component {
 
   render() {
     const { t } = this.props;
 
+    const navTabMapping = {
+      user_infomation: {
+        Icon: UserIcon,
+        Content: UserSettings,
+        i18n: t('User Information'),
+        index: 0,
+      },
+      external_accounts: {
+        Icon: ShareAltIcon,
+        Content: ExternalAccountLinkedMe,
+        i18n: t('admin:user_management.external_accounts'),
+        index: 1,
+      },
+      password_settings: {
+        Icon: LockIcon,
+        Content: PasswordSettings,
+        i18n: t('Password Settings'),
+        index: 2,
+      },
+      api_settings: {
+        Icon: PaperPlaneIcon,
+        Content: ApiSettings,
+        i18n: t('API Settings'),
+        index: 3,
+      },
+    };
+
+
     return (
-      <Fragment>
-        <div className="personal-settings">
-          <ul className="nav nav-tabs" role="tablist">
-            <li className="nav-item">
-              <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-user"></i>{ t('User Information') }
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-share-alt"></i>{ t('admin:user_management.external_accounts') }
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-lock"></i>{ t('Password Settings') }
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-paper-plane"></i>{ t('API Settings') }
-              </a>
-            </li>
-          </ul>
-          <div className="tab-content p-t-10">
-            <div id="user-settings" className="tab-pane active" role="tabpanel">
-              <UserSettings />
-            </div>
-            <div id="external-accounts" className="tab-pane" role="tabpanel">
-              <ExternalAccountLinkedMe />
-            </div>
-            <div id="password-settings" className="tab-pane" role="tabpanel">
-              <PasswordSettings />
-            </div>
-            <div id="apiToken" className="tab-pane" role="tabpanel">
-              <ApiSettings />
-            </div>
-          </div>
-        </div>
-      </Fragment>
+      <CustomNavigation navTabMapping={navTabMapping} />
     );
   }