Separated privacy & security settings into its own tab in the preferences screen (#1416)

* Separated privacy & security settings into its own tab in the preferences screen.

* Fixing review comments.

4 files changed, 156 insertions, 111 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index e0687be12..eef529730 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -88,6 +88,10 @@ const messages = defineMessages({
     id: 'settings.app.accentColorInfo',
     defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})',
   },
+  headlinePrivacy: {
+    id: 'settings.app.headlinePrivacy',
+    defaultMessage: '!!!Privacy',
+  },
   headlineAdvanced: {
     id: 'settings.app.headlineAdvanced',
     defaultMessage: '!!!Advanced',
@@ -291,6 +295,13 @@ export default @observer class EditSettingsForm extends Component {
                 {intl.formatMessage(messages.headlineAppearance)}
               </h2>
               <h2
+                id="privacy"
+                className={this.state.activeSetttingsTab === 'privacy' ? 'badge badge--primary' : 'badge'}
+                onClick={() => { this.setActiveSettingsTab('privacy'); }}
+              >
+                {intl.formatMessage(messages.headlinePrivacy)}
+              </h2>
+              <h2
                 id="language"
                 className={this.state.activeSetttingsTab === 'language' ? 'badge badge--primary' : 'badge'}
                 onClick={() => { this.setActiveSettingsTab('language'); }}
@@ -327,19 +338,10 @@ export default @observer class EditSettingsForm extends Component {
                 {isWindows && (
                   <Toggle field={form.$('closeToSystemTray')} />
                 )}
-                <Toggle field={form.$('privateNotifications')} />
-                {(isWindows || isMac) && (
-                  <Toggle field={form.$('notifyTaskBarOnMessage')} />)}
                 <Select field={form.$('navigationBarBehaviour')} />
 
                 <Hr />
 
-                <Select field={form.$('searchEngine')} />
-                <Toggle field={form.$('sentry')} />
-                <p>{intl.formatMessage(messages.sentryInfo)}</p>
-
-                <Hr />
-
                 <Toggle field={form.$('hibernate')} />
                 {hibernationEnabled && (
                   <>
@@ -394,48 +396,6 @@ export default @observer class EditSettingsForm extends Component {
                   </>
                 )}
 
-                <Hr />
-
-                <Toggle field={form.$('lockingFeatureEnabled')} />
-                {lockingFeatureEnabled && (
-                  <>
-                    {isMac && systemPreferences.canPromptTouchID() && (
-                      <Toggle field={form.$('useTouchIdToUnlock')} />
-                    )}
-
-                    <Input
-                      placeholder={intl.formatMessage(messages.lockedPassword)}
-                      onChange={e => this.submit(e)}
-                      field={form.$('lockedPassword')}
-                      type="password"
-                      scorePassword
-                      showPasswordToggle
-                    />
-                    <p>
-                      { intl.formatMessage(messages.lockedPasswordInfo) }
-                    </p>
-
-                    <Input
-                      placeholder="Lock after inactivity"
-                      onChange={e => this.submit(e)}
-                      field={form.$('inactivityLock')}
-                      autoFocus
-                    />
-                    <p>
-                      { intl.formatMessage(messages.inactivityLockInfo) }
-                    </p>
-                  </>
-                )}
-                <p
-                  className="settings__message"
-                  style={{
-                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-                  }}
-                >
-                  <span>
-                    { intl.formatMessage(messages.lockInfo) }
-                  </span>
-                </p>
 
                 <Hr />
 
@@ -543,6 +503,64 @@ export default @observer class EditSettingsForm extends Component {
               </div>
             )}
 
+            {/* Privacy */}
+            { this.state.activeSetttingsTab === 'privacy' && (
+              <div>
+                <Toggle field={form.$('privateNotifications')} />
+                {(isWindows || isMac) && (
+                  <Toggle field={form.$('notifyTaskBarOnMessage')} />)}
+
+                <Hr />
+
+                <Select field={form.$('searchEngine')} />
+                <Toggle field={form.$('sentry')} />
+                <p>{intl.formatMessage(messages.sentryInfo)}</p>
+
+                <Hr />
+
+                <Toggle field={form.$('lockingFeatureEnabled')} />
+                {lockingFeatureEnabled && (
+                  <>
+                    {isMac && systemPreferences.canPromptTouchID() && (
+                      <Toggle field={form.$('useTouchIdToUnlock')} />
+                    )}
+
+                    <Input
+                      placeholder={intl.formatMessage(messages.lockedPassword)}
+                      onChange={e => this.submit(e)}
+                      field={form.$('lockedPassword')}
+                      type="password"
+                      scorePassword
+                      showPasswordToggle
+                    />
+                    <p>
+                      { intl.formatMessage(messages.lockedPasswordInfo) }
+                    </p>
+
+                    <Input
+                      placeholder="Lock after inactivity"
+                      onChange={e => this.submit(e)}
+                      field={form.$('inactivityLock')}
+                      autoFocus
+                    />
+                    <p>
+                      { intl.formatMessage(messages.inactivityLockInfo) }
+                    </p>
+                  </>
+                )}
+                <p
+                  className="settings__message"
+                  style={{
+                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                  }}
+                >
+                  <span>
+                    { intl.formatMessage(messages.lockInfo) }
+                  </span>
+                </p>
+              </div>
+            )}
+
             {/* Language */}
             { this.state.activeSetttingsTab === 'language' && (
               <div>
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index adffa7f43..50e7871dd 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3446,198 +3446,211 @@
         }
       },
       {
-        "defaultMessage": "!!!Advanced",
+        "defaultMessage": "!!!Privacy",
         "end": {
           "column": 3,
           "line": 94
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
+        "id": "settings.app.headlinePrivacy",
+        "start": {
+          "column": 19,
+          "line": 91
+        }
+      },
+      {
+        "defaultMessage": "!!!Advanced",
+        "end": {
+          "column": 3,
+          "line": 98
+        },
+        "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.headlineAdvanced",
         "start": {
           "column": 20,
-          "line": 91
+          "line": 95
         }
       },
       {
         "defaultMessage": "!!!Help us to translate Ferdi into your language.",
         "end": {
           "column": 3,
-          "line": 98
+          "line": 102
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.translationHelp",
         "start": {
           "column": 19,
-          "line": 95
+          "line": 99
         }
       },
       {
         "defaultMessage": "!!!Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
         "end": {
           "column": 3,
-          "line": 102
+          "line": 106
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.spellCheckerLanguageInfo",
         "start": {
           "column": 28,
-          "line": 99
+          "line": 103
         }
       },
       {
         "defaultMessage": "!!!Cache",
         "end": {
           "column": 3,
-          "line": 106
+          "line": 110
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.subheadlineCache",
         "start": {
           "column": 20,
-          "line": 103
+          "line": 107
         }
       },
       {
         "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.",
         "end": {
           "column": 3,
-          "line": 110
+          "line": 114
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.cacheInfo",
         "start": {
           "column": 13,
-          "line": 107
+          "line": 111
         }
       },
       {
         "defaultMessage": "!!!Couldn't clear all cache",
         "end": {
           "column": 3,
-          "line": 114
+          "line": 118
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.cacheNotCleared",
         "start": {
           "column": 19,
-          "line": 111
+          "line": 115
         }
       },
       {
         "defaultMessage": "!!!Clear cache",
         "end": {
           "column": 3,
-          "line": 118
+          "line": 122
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonClearAllCache",
         "start": {
           "column": 23,
-          "line": 115
+          "line": 119
         }
       },
       {
         "defaultMessage": "!!!Check for updates",
         "end": {
           "column": 3,
-          "line": 122
+          "line": 126
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonSearchForUpdate",
         "start": {
           "column": 25,
-          "line": 119
+          "line": 123
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 126
+          "line": 130
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 123
+          "line": 127
         }
       },
       {
         "defaultMessage": "!!!Is searching for update",
         "end": {
           "column": 3,
-          "line": 130
+          "line": 134
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusSearching",
         "start": {
           "column": 25,
-          "line": 127
+          "line": 131
         }
       },
       {
         "defaultMessage": "!!!Update available, downloading...",
         "end": {
           "column": 3,
-          "line": 134
+          "line": 138
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusAvailable",
         "start": {
           "column": 25,
-          "line": 131
+          "line": 135
         }
       },
       {
         "defaultMessage": "!!!You are using the latest version of Ferdi",
         "end": {
           "column": 3,
-          "line": 138
+          "line": 142
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusUpToDate",
         "start": {
           "column": 24,
-          "line": 135
+          "line": 139
         }
       },
       {
         "defaultMessage": "!!!Current version:",
         "end": {
           "column": 3,
-          "line": 142
+          "line": 146
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.currentVersion",
         "start": {
           "column": 18,
-          "line": 139
+          "line": 143
         }
       },
       {
         "defaultMessage": "!!!Changes require restart",
         "end": {
           "column": 3,
-          "line": 146
+          "line": 150
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.restartRequired",
         "start": {
           "column": 29,
-          "line": 143
+          "line": 147
         }
       },
       {
         "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.",
         "end": {
           "column": 3,
-          "line": 150
+          "line": 154
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.languageDisclaimer",
         "start": {
           "column": 22,
-          "line": 147
+          "line": 151
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index fc7f25249..1c1cbb882 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -334,6 +334,7 @@
   "settings.app.headlineAppearance": "Appearance",
   "settings.app.headlineGeneral": "General",
   "settings.app.headlineLanguage": "Language",
+  "settings.app.headlinePrivacy": "Privacy",
   "settings.app.headlineUpdates": "Updates",
   "settings.app.hibernateInfo": "By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.",
   "settings.app.inactivityLockInfo": "Minutes of inactivity, after which Ferdi should automatically lock. Use 0 to disable",
diff --git a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
index 569faa7fe..ecac749db 100644
--- a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
+++ b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
@@ -208,15 +208,28 @@
     }
   },
   {
+    "id": "settings.app.headlinePrivacy",
+    "defaultMessage": "!!!Privacy",
+    "file": "src/components/settings/settings/EditSettingsForm.js",
+    "start": {
+      "line": 91,
+      "column": 19
+    },
+    "end": {
+      "line": 94,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.headlineAdvanced",
     "defaultMessage": "!!!Advanced",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 91,
+      "line": 95,
       "column": 20
     },
     "end": {
-      "line": 94,
+      "line": 98,
       "column": 3
     }
   },
@@ -225,11 +238,11 @@
     "defaultMessage": "!!!Help us to translate Ferdi into your language.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 95,
+      "line": 99,
       "column": 19
     },
     "end": {
-      "line": 98,
+      "line": 102,
       "column": 3
     }
   },
@@ -238,11 +251,11 @@
     "defaultMessage": "!!!Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 99,
+      "line": 103,
       "column": 28
     },
     "end": {
-      "line": 102,
+      "line": 106,
       "column": 3
     }
   },
@@ -251,11 +264,11 @@
     "defaultMessage": "!!!Cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 103,
+      "line": 107,
       "column": 20
     },
     "end": {
-      "line": 106,
+      "line": 110,
       "column": 3
     }
   },
@@ -264,11 +277,11 @@
     "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 107,
+      "line": 111,
       "column": 13
     },
     "end": {
-      "line": 110,
+      "line": 114,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Couldn't clear all cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 111,
+      "line": 115,
       "column": 19
     },
     "end": {
-      "line": 114,
+      "line": 118,
       "column": 3
     }
   },
@@ -290,11 +303,11 @@
     "defaultMessage": "!!!Clear cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 115,
+      "line": 119,
       "column": 23
     },
     "end": {
-      "line": 118,
+      "line": 122,
       "column": 3
     }
   },
@@ -303,11 +316,11 @@
     "defaultMessage": "!!!Check for updates",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 119,
+      "line": 123,
       "column": 25
     },
     "end": {
-      "line": 122,
+      "line": 126,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 123,
+      "line": 127,
       "column": 23
     },
     "end": {
-      "line": 126,
+      "line": 130,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Is searching for update",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 127,
+      "line": 131,
       "column": 25
     },
     "end": {
-      "line": 130,
+      "line": 134,
       "column": 3
     }
   },
@@ -342,11 +355,11 @@
     "defaultMessage": "!!!Update available, downloading...",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 131,
+      "line": 135,
       "column": 25
     },
     "end": {
-      "line": 134,
+      "line": 138,
       "column": 3
     }
   },
@@ -355,11 +368,11 @@
     "defaultMessage": "!!!You are using the latest version of Ferdi",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 135,
+      "line": 139,
       "column": 24
     },
     "end": {
-      "line": 138,
+      "line": 142,
       "column": 3
     }
   },
@@ -368,11 +381,11 @@
     "defaultMessage": "!!!Current version:",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 139,
+      "line": 143,
       "column": 18
     },
     "end": {
-      "line": 142,
+      "line": 146,
       "column": 3
     }
   },
@@ -381,11 +394,11 @@
     "defaultMessage": "!!!Changes require restart",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 143,
+      "line": 147,
       "column": 29
     },
     "end": {
-      "line": 146,
+      "line": 150,
       "column": 3
     }
   },
@@ -394,11 +407,11 @@
     "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 147,
+      "line": 151,
       "column": 22
     },
     "end": {
-      "line": 150,
+      "line": 154,
       "column": 3
     }
   }