New: Authentication is now required

(cherry picked from commit d3018fb5015af26a897281f0e892b706cdb6e821) Closes #1807 Closes #2878 Closes #2873
2026-04-20 21:54:25 -04:00 · 2022-05-29 18:04:40 -07:00
parent b5ef0cda1e
commit 06a53ef9ca
8 changed files with 305 additions and 1 deletions
@@ -0,0 +1,157 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+import Alert from 'Components/Alert';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+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 } from 'Settings/General/SecuritySettings';
+import translate from 'Utilities/String/translate';
+import styles from './AuthenticationRequiredModalContent.css';
+
+function onModalClose() {
+  // No-op
+}
+
+function AuthenticationRequiredModalContent(props) {
+  const {
+    isPopulated,
+    error,
+    isSaving,
+    settings,
+    onInputChange,
+    onSavePress,
+    dispatchFetchStatus
+  } = props;
+
+  const {
+    authenticationMethod,
+    authenticationRequired,
+    username,
+    password
+  } = settings;
+
+  const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
+
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (!isSaving && didMount.current) {
+      dispatchFetchStatus();
+    }
+
+    didMount.current = true;
+  }, [isSaving, dispatchFetchStatus]);
+
+  return (
+    <ModalContent
+      showCloseButton={false}
+      onModalClose={onModalClose}
+    >
+      <ModalHeader>
+        {translate('AuthenticationRequired')}
+      </ModalHeader>
+
+      <ModalBody>
+        <Alert
+          className={styles.authRequiredAlert}
+          kind={kinds.WARNING}
+        >
+          {translate('AuthenticationRequiredWarning')}
+        </Alert>
+
+        {
+          isPopulated && !error ?
+            <div>
+              <FormGroup>
+                <FormLabel>{translate('AuthenticationMethod')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="authenticationMethod"
+                  values={authenticationMethodOptions}
+                  helpText={translate('AuthenticationMethodHelpText')}
+                  helpTextWarning={authenticationMethod.value === 'none' ? translate('AuthenticationMethodHelpTextWarning') : undefined}
+                  helpLink="https://wiki.servarr.com/readarr/faq#forced-authentication"
+                  onChange={onInputChange}
+                  {...authenticationMethod}
+                />
+              </FormGroup>
+
+              <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 ? undefined : translate('AuthenticationRequiredUsernameHelpTextWarning')}
+                  {...username}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('Password')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.PASSWORD}
+                  name="password"
+                  onChange={onInputChange}
+                  helpTextWarning={password?.value ? undefined : translate('AuthenticationRequiredPasswordHelpTextWarning')}
+                  {...password}
+                />
+              </FormGroup>
+            </div> :
+            null
+        }
+
+        {
+          !isPopulated && !error ? <LoadingIndicator /> : null
+        }
+      </ModalBody>
+
+      <ModalFooter>
+        <SpinnerButton
+          kind={kinds.PRIMARY}
+          isSpinning={isSaving}
+          isDisabled={!authenticationEnabled}
+          onPress={onSavePress}
+        >
+          {translate('Save')}
+        </SpinnerButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+AuthenticationRequiredModalContent.propTypes = {
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  settings: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  dispatchFetchStatus: PropTypes.func.isRequired
+};
+
+export default AuthenticationRequiredModalContent;