From 60ca0db26f3c515cdad745d5705a16b82c704e53 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Mon, 28 Aug 2023 22:31:12 +0300
Subject: [PATCH] Improve messaging in Authentication Required modal

Co-authored-by: bakerboy448 <55419169+bakerboy448@users.noreply.github.com>
---
 .../AuthenticationRequiredModalContent.js     | 92 +++++++++----------
 .../src/Settings/General/SecuritySettings.js  | 72 ++++++++++++---
 src/NzbDrone.Core/Localization/Core/en.json   | 15 ++-
 3 files changed, 113 insertions(+), 66 deletions(-)

diff --git a/frontend/src/FirstRun/AuthenticationRequiredModalContent.js b/frontend/src/FirstRun/AuthenticationRequiredModalContent.js
index 920c59a31..2c881d75a 100644
--- a/frontend/src/FirstRun/AuthenticationRequiredModalContent.js
+++ b/frontend/src/FirstRun/AuthenticationRequiredModalContent.js
@@ -11,7 +11,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
-import { authenticationMethodOptions, authenticationRequiredOptions, authenticationRequiredWarning } from 'Settings/General/SecuritySettings';
+import { authenticationMethodOptions, authenticationRequiredOptions } from 'Settings/General/SecuritySettings';
 import translate from 'Utilities/String/translate';
 import styles from './AuthenticationRequiredModalContent.css';
 
@@ -63,71 +63,63 @@ function AuthenticationRequiredModalContent(props) {
           className={styles.authRequiredAlert}
           kind={kinds.WARNING}
         >
-          {authenticationRequiredWarning}
+          {translate('AuthenticationRequiredWarning', { appName: 'Prowlarr' })}
         </Alert>
 
         {
           isPopulated && !error ?
             <div>
               <FormGroup>
-                <FormLabel>{translate('Authentication')}</FormLabel>
+                <FormLabel>{translate('AuthenticationMethod')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
                   name="authenticationMethod"
                   values={authenticationMethodOptions}
-                  helpText={translate('AuthenticationMethodHelpText')}
+                  helpText={translate('AuthenticationMethodHelpText', { appName: 'Prowlarr' })}
+                  helpTextWarning={authenticationMethod.value === 'none' ? translate('AuthenticationMethodHelpTextWarning') : undefined}
+                  helpLink="https://wiki.servarr.com/prowlarr/faq#forced-authentication"
                   onChange={onInputChange}
                   {...authenticationMethod}
                 />
               </FormGroup>
 
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="authenticationRequired"
-                      values={authenticationRequiredOptions}
-                      helpText={translate('AuthenticationRequiredHelpText')}
-                      onChange={onInputChange}
-                      {...authenticationRequired}
-                    />
-                  </FormGroup> :
-                  null
-              }
-
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('Username')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.TEXT}
-                      name="username"
-                      onChange={onInputChange}
-                      {...username}
-                    />
-                  </FormGroup> :
-                  null
-              }
-
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('Password')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.PASSWORD}
-                      name="password"
-                      onChange={onInputChange}
-                      {...password}
-                    />
-                  </FormGroup> :
-                  null
-              }
+              <FormGroup>
+                <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="authenticationRequired"
+                  values={authenticationRequiredOptions}
+                  helpText={translate('AuthenticationRequiredHelpText')}
+                  onChange={onInputChange}
+                  {...authenticationRequired}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('Username')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TEXT}
+                  name="username"
+                  onChange={onInputChange}
+                  helpTextWarning={username.value === '' ? translate('AuthenticationRequiredUsernameHelpTextWarning') : undefined}
+                  {...username}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('Password')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.PASSWORD}
+                  name="password"
+                  onChange={onInputChange}
+                  helpTextWarning={password.value === '' ? translate('AuthenticationRequiredPasswordHelpTextWarning') : undefined}
+                  {...password}
+                />
+              </FormGroup>
             </div> :
             null
         }
diff --git a/frontend/src/Settings/General/SecuritySettings.js b/frontend/src/Settings/General/SecuritySettings.js
index 4b382800c..a7d64bdc0 100644
--- a/frontend/src/Settings/General/SecuritySettings.js
+++ b/frontend/src/Settings/General/SecuritySettings.js
@@ -11,24 +11,69 @@ import ConfirmModal from 'Components/Modal/ConfirmModal';
 import { icons, inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
-export const authenticationRequiredWarning = translate('AuthenticationRequiredWarning');
-
 export const authenticationMethodOptions = [
-  { key: 'none', value: 'None', isDisabled: true },
-  { key: 'external', value: 'External', isHidden: true },
-  { key: 'basic', value: 'Basic (Browser Popup)' },
-  { key: 'forms', value: 'Forms (Login Page)' }
+  {
+    key: 'none',
+    get value() {
+      return translate('None');
+    },
+    isDisabled: true
+  },
+  {
+    key: 'external',
+    get value() {
+      return translate('External');
+    },
+    isHidden: true
+  },
+  {
+    key: 'basic',
+    get value() {
+      return translate('AuthBasic');
+    }
+  },
+  {
+    key: 'forms',
+    get value() {
+      return translate('AuthForm');
+    }
+  }
 ];
 
 export const authenticationRequiredOptions = [
-  { key: 'enabled', value: 'Enabled' },
-  { key: 'disabledForLocalAddresses', value: 'Disabled for Local Addresses' }
+  {
+    key: 'enabled',
+    get value() {
+      return translate('Enabled');
+    }
+  },
+  {
+    key: 'disabledForLocalAddresses',
+    get value() {
+      return translate('DisabledForLocalAddresses');
+    }
+  }
 ];
 
 const certificateValidationOptions = [
-  { key: 'enabled', value: 'Enabled' },
-  { key: 'disabledForLocalAddresses', value: 'Disabled for Local Addresses' },
-  { key: 'disabled', value: 'Disabled' }
+  {
+    key: 'enabled',
+    get value() {
+      return translate('Enabled');
+    }
+  },
+  {
+    key: 'disabledForLocalAddresses',
+    get value() {
+      return translate('DisabledForLocalAddresses');
+    }
+  },
+  {
+    key: 'disabled',
+    get value() {
+      return translate('Disabled');
+    }
+  }
 ];
 
 class SecuritySettings extends Component {
@@ -95,7 +140,7 @@ class SecuritySettings extends Component {
             name="authenticationMethod"
             values={authenticationMethodOptions}
             helpText={translate('AuthenticationMethodHelpText')}
-            helpTextWarning={authenticationRequiredWarning}
+            helpTextWarning={translate('AuthenticationRequiredWarning', { appName: 'Prowlarr' })}
             onChange={onInputChange}
             {...authenticationMethod}
           />
@@ -155,6 +200,7 @@ class SecuritySettings extends Component {
             type={inputTypes.TEXT}
             name="apiKey"
             readOnly={true}
+            helpTextWarning={translate('RestartRequiredHelpTextWarning')}
             buttons={[
               <ClipboardButton
                 key="copy"
@@ -196,7 +242,7 @@ class SecuritySettings extends Component {
           isOpen={this.state.isConfirmApiKeyResetModalOpen}
           kind={kinds.DANGER}
           title={translate('ResetAPIKey')}
-          message={translate('AreYouSureYouWantToResetYourAPIKey')}
+          message={translate('ResetAPIKeyMessageText')}
           confirmLabel={translate('Reset')}
           onConfirm={this.onConfirmResetApiKey}
           onCancel={this.onCloseResetApiKeyModal}
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index 7f909e29c..9baeeebbd 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -61,16 +61,21 @@
   "AppsMinimumSeedersHelpText": "Minimum seeders required by the Applications for the indexer to grab, empty is Sync profile's default",
   "AreYouSureYouWantToDeleteCategory": "Are you sure you want to delete mapped category?",
   "AreYouSureYouWantToDeleteIndexer": "Are you sure you want to delete '{name}' from Prowlarr?",
-  "AreYouSureYouWantToResetYourAPIKey": "Are you sure you want to reset your API Key?",
   "Artist": "Artist",
   "AudioSearch": "Audio Search",
   "Auth": "Auth",
+  "AuthBasic": "Basic (Browser Popup)",
+  "AuthForm": "Forms (Login Page)",
   "AuthQueries": "Auth Queries",
   "Authentication": "Authentication",
-  "AuthenticationMethodHelpText": "Require Username and Password to access Prowlarr",
+  "AuthenticationMethod": "Authentication Method",
+  "AuthenticationMethodHelpText": "Require Username and Password to access {appName}",
+  "AuthenticationMethodHelpTextWarning": "Please select a valid authentication method",
   "AuthenticationRequired": "Authentication Required",
   "AuthenticationRequiredHelpText": "Change which requests authentication is required for. Do not change unless you understand the risks.",
-  "AuthenticationRequiredWarning": "To prevent remote access without authentication, Prowlarr now requires authentication to be enabled. Configure your authentication method and credentials. You can optionally disable authentication from local addresses. Refer to the FAQ for additional information.",
+  "AuthenticationRequiredPasswordHelpTextWarning": "Enter a new password",
+  "AuthenticationRequiredUsernameHelpTextWarning": "Enter a new username",
+  "AuthenticationRequiredWarning": "To prevent remote access without authentication, {appName} now requires authentication to be enabled. You can optionally disable authentication from local addresses.",
   "Author": "Author",
   "Automatic": "Automatic",
   "AutomaticSearch": "Automatic Search",
@@ -153,6 +158,7 @@
   "Details": "Details",
   "DevelopmentSettings": "Development Settings",
   "Disabled": "Disabled",
+  "DisabledForLocalAddresses": "Disabled for Local Addresses",
   "DisabledUntil": "Disabled Until",
   "Discord": "Discord",
   "Docker": "Docker",
@@ -199,6 +205,7 @@
   "Events": "Events",
   "Exception": "Exception",
   "ExistingTag": "Existing tag",
+  "External": "External",
   "Failed": "Failed",
   "FeatureRequests": "Feature Requests",
   "Filename": "Filename",
@@ -331,6 +338,7 @@
   "NoSearchResultsFound": "No search results found, try performing a new search below.",
   "NoTagsHaveBeenAddedYet": "No tags have been added yet",
   "NoUpdatesAreAvailable": "No updates are available",
+  "None": "None",
   "NotSupported": "Not Supported",
   "Notification": "Notification",
   "NotificationStatusAllClientHealthCheckMessage": "All notifications are unavailable due to failures",
@@ -409,6 +417,7 @@
   "Replace": "Replace",
   "Reset": "Reset",
   "ResetAPIKey": "Reset API Key",
+  "ResetAPIKeyMessageText": "Are you sure you want to reset your API Key?",
   "Restart": "Restart",
   "RestartNow": "Restart Now",
   "RestartProwlarr": "Restart Prowlarr",