Improve messaging in Authentication Required modal

Co-authored-by: bakerboy448 <55419169+bakerboy448@users.noreply.github.com>

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
         }

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}

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",