[user settings] rewrote it with react

frontend/src/components/user-settings/two-factor-auth.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { gettext, siteRoot } from '../../utils/constants';
+
+const {
+  defaultDevice,
+  backupTokens
+} = window.app.pageOptions;
+
+class TwoFactorAuthentication extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderEnabled = () => {
+    return (
+      <React.Fragment>
+        <p className="mb-2">{gettext('Status: enabled')}</p>
+        <a className="btn btn-secondary mb-4" href={`${siteRoot}profile/two_factor_authentication/disable/`}>
+          {gettext('Disable Two-Factor Authentication')}</a>
+        <p className="mb-2">
+          {gettext('If you don\'t have any device with you, you can access your account using backup codes.')}
+          {backupTokens == 1 ? gettext('You have only one backup code remaining.') :
+            gettext('You have {num} backup codes remaining.').replace('{num}', backupTokens)}
+        </p>
+        <a href={`${siteRoot}profile/two_factor_authentication/backup/tokens/`}
+          className="btn btn-secondary">{gettext('Show Codes')}</a>
+      </React.Fragment>
+    );
+  }
+
+  renderDisabled = () => {
+    return (
+      <React.Fragment>
+        <p className="mb-2">{gettext('Two-factor authentication is not enabled for your account. Enable two-factor authentication for enhanced account security.')}</p>
+        <a href={`${siteRoot}profile/two_factor_authentication/setup/`} className="btn btn-secondary">
+          {gettext('Enable Two-Factor Authentication')}</a>
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <div className="setting-item" id="two-factor-auth">
+        <h3 className="setting-item-heading">{gettext('Two-Factor Authentication')}</h3>
+        {defaultDevice ? this.renderEnabled() : this.renderDisabled()}
+      </div>
+    );
+  }
+}
+
+export default TwoFactorAuthentication;