Add Translations to Settings Pages

frontend/src/FirstRun/AuthenticationRequiredModalContent.js

@@ -11,7 +11,8 @@ 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';
 
 function onModalClose() {
@@ -54,7 +55,7 @@ function AuthenticationRequiredModalContent(props) {
       onModalClose={onModalClose}
     >
       <ModalHeader>
-        Authentication Required
+        {translate('AuthenticationRequired')}
       </ModalHeader>
 
       <ModalBody>
@@ -62,40 +63,40 @@ function AuthenticationRequiredModalContent(props) {
           className={styles.authRequiredAlert}
           kind={kinds.WARNING}
         >
-          {authenticationRequiredWarning}
+          {translate('AuthenticationRequiredWarning')}
         </Alert>
 
         {
           isPopulated && !error ?
             <div>
               <FormGroup>
-                <FormLabel>Authentication</FormLabel>
+                <FormLabel>{translate('Authentication')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
                   name="authenticationMethod"
                   values={authenticationMethodOptions}
-                  helpText="Require Username and Password to access Sonarr"
+                  helpText={translate('AuthenticationMethodHelpText')}
                   onChange={onInputChange}
                   {...authenticationMethod}
                 />
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Authentication Required</FormLabel>
+                <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
                   name="authenticationRequired"
                   values={authenticationRequiredOptions}
-                  helpText="Change which requests authentication is required for. Do not change unless you understand the risks."
+                  helpText={translate('AuthenticationRequiredHelpText')}
                   onChange={onInputChange}
                   {...authenticationRequired}
                 />
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Username</FormLabel>
+                <FormLabel>{translate('Username')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.TEXT}
@@ -106,7 +107,7 @@ function AuthenticationRequiredModalContent(props) {
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Password</FormLabel>
+                <FormLabel>{translate('Password')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.PASSWORD}
@@ -131,7 +132,7 @@ function AuthenticationRequiredModalContent(props) {
           isDisabled={!authenticationEnabled}
           onPress={onSavePress}
         >
-          Save
+          {translate('Save')}
         </SpinnerButton>
       </ModalFooter>
     </ModalContent>