From 961ad267df93cbb3fc61d0a999bd78f132c877b1 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 25 Mar 2019 13:43:23 -0230
Subject: New settings page rebased (#6333)

* New setting tab

* Add InfoTab

* Add Advanced tab

* Add Security Tab

* Finish mobile view

* Make new setting page responsive

* Fix linter

* Fix y scrolling

* Update link in network dropdown

* Fix e2e tests

* Remove duplicate translation key

* Resolve merge conflict

* Only change settings header in popup view.

* Place mobile-sync button in advanced-tab of settings
---
 .../security-tab/security-tab.component.js         | 195 +++++++++++++++++++++
 1 file changed, 195 insertions(+)
 create mode 100644 ui/app/pages/settings/security-tab/security-tab.component.js

(limited to 'ui/app/pages/settings/security-tab/security-tab.component.js')

diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js
new file mode 100644
index 000000000..233561115
--- /dev/null
+++ b/ui/app/pages/settings/security-tab/security-tab.component.js
@@ -0,0 +1,195 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { exportAsFile } from '../../../helpers/utils/util'
+import ToggleButton from 'react-toggle-button'
+import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes'
+import Button from '../../../components/ui/button'
+
+export default class SecurityTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    setPrivacyMode: PropTypes.func,
+    privacyMode: PropTypes.bool,
+    displayWarning: PropTypes.func,
+    revealSeedConfirmation: PropTypes.func,
+    showClearApprovalModal: PropTypes.func,
+    warning: PropTypes.string,
+    history: PropTypes.object,
+    mobileSync: PropTypes.bool,
+    participateInMetaMetrics: PropTypes.bool,
+    setParticipateInMetaMetrics: PropTypes.func,
+  }
+
+  renderStateLogs () {
+    const { t } = this.context
+    const { displayWarning } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('stateLogs') }</span>
+          <span className="settings-page__content-description">
+            { t('stateLogsDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="primary"
+              large
+              onClick={() => {
+                window.logStateString((err, result) => {
+                  if (err) {
+                    displayWarning(t('stateLogError'))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
+              }}
+            >
+              { t('downloadStateLogs') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderClearApproval () {
+    const { t } = this.context
+    const { showClearApprovalModal } = this.props
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('approvalData') }</span>
+          <span className="settings-page__content-description">
+            { t('approvalDataDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                showClearApprovalModal()
+              }}
+            >
+              { t('clearApprovalData') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderSeedWords () {
+    const { t } = this.context
+    const { history } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('revealSeedWords') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              onClick={event => {
+                event.preventDefault()
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Settings',
+                    action: 'Reveal Seed Phrase',
+                    name: 'Reveal Seed Phrase',
+                  },
+                })
+                history.push(REVEAL_SEED_ROUTE)
+              }}
+            >
+              { t('revealSeedWords') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderPrivacyOptIn () {
+    const { t } = this.context
+    const { privacyMode, setPrivacyMode } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('privacyMode') }</span>
+          <div className="settings-page__content-description">
+            { t('privacyModeDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={privacyMode}
+              onToggle={value => setPrivacyMode(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderMetaMetricsOptIn () {
+    const { t } = this.context
+    const { participateInMetaMetrics, setParticipateInMetaMetrics } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('participateInMetaMetrics') }</span>
+          <div className="settings-page__content-description">
+            <span>{ t('participateInMetaMetricsDescription') }</span>
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={participateInMetaMetrics}
+              onToggle={value => setParticipateInMetaMetrics(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderContent () {
+    const { warning } = this.props
+
+    return (
+      <div className="settings-page__body">
+        { warning && <div className="settings-tab__error">{ warning }</div> }
+        { this.renderPrivacyOptIn() }
+        { this.renderClearApproval() }
+        { this.renderSeedWords() }
+        { this.renderMetaMetricsOptIn() }
+      </div>
+    )
+  }
+
+  render () {
+    return this.renderContent()
+  }
+}
-- 
cgit