feat(ui): Add local login setting (#817)

src/components/Login/index.tsx

@@ -9,6 +9,7 @@ import Transition from '../Transition';
 import LanguagePicker from '../Layout/LanguagePicker';
 import LocalLogin from './LocalLogin';
 import Accordion from '../Common/Accordion';
+import useSettings from '../../hooks/useSettings';
 
 const messages = defineMessages({
   signinheader: 'Sign in to continue',
@@ -23,6 +24,7 @@ const Login: React.FC = () => {
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
   const { user, revalidate } = useUser();
   const router = useRouter();
+  const settings = useSettings();
 
   // Effect that is triggered when the `authToken` comes back from the Plex OAuth
   // We take the token and attempt to login. If we get a success message, we will
@@ -124,10 +126,14 @@ const Login: React.FC = () => {
               {({ openIndexes, handleClick, AccordionContent }) => (
                 <>
                   <button
-                    className={`text-sm w-full focus:outline-none transition-colors duration-200 py-2 bg-gray-800 hover:bg-gray-700 bg-opacity-70 hover:bg-opacity-70 sm:rounded-t-lg text-center text-gray-400 ${
+                    className={`w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg ${
                       openIndexes.includes(0) && 'text-indigo-500'
+                    } ${
+                      settings.currentSettings.localLogin &&
+                      'hover:bg-gray-700 hover:cursor-pointer'
                     }`}
                     onClick={() => handleClick(0)}
+                    disabled={!settings.currentSettings.localLogin}
                   >
                     {intl.formatMessage(messages.signinwithplex)}
                   </button>
@@ -139,21 +145,25 @@ const Login: React.FC = () => {
                       />
                     </div>
                   </AccordionContent>
-                  <button
-                    className={`text-sm w-full focus:outline-none transition-colors duration-200 py-2 bg-gray-800 hover:bg-gray-700 bg-opacity-70 hover:bg-opacity-70 text-center text-gray-400 ${
-                      openIndexes.includes(1)
-                        ? 'text-indigo-500'
-                        : 'sm:rounded-b-lg '
-                    }`}
-                    onClick={() => handleClick(1)}
-                  >
-                    {intl.formatMessage(messages.signinwithoverseerr)}
-                  </button>
-                  <AccordionContent isOpen={openIndexes.includes(1)}>
-                    <div className="px-10 py-8">
-                      <LocalLogin revalidate={revalidate} />
+                  {settings.currentSettings.localLogin && (
+                    <div>
+                      <button
+                        className={`w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg hover:bg-gray-700 hover:cursor-pointer ${
+                          openIndexes.includes(1)
+                            ? 'text-indigo-500'
+                            : 'sm:rounded-b-lg '
+                        }`}
+                        onClick={() => handleClick(1)}
+                      >
+                        {intl.formatMessage(messages.signinwithoverseerr)}
+                      </button>
+                      <AccordionContent isOpen={openIndexes.includes(1)}>
+                        <div className="px-10 py-8">
+                          <LocalLogin revalidate={revalidate} />
+                        </div>
+                      </AccordionContent>
                     </div>
-                  </AccordionContent>
+                  )}
                 </>
               )}
             </Accordion>

src/components/Settings/SettingsMain.tsx

@@ -35,6 +35,9 @@ const messages = defineMessages({
   trustProxy: 'Enable Proxy Support',
   trustProxyTip:
     'Allows Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)',
+  localLogin: 'Enable Local User Sign-In',
+  localLoginTip:
+    'Disabling this option only prevents new sign-ins (no user data is deleted)',
 });
 
 const SettingsMain: React.FC = () => {
@@ -83,6 +86,7 @@ const SettingsMain: React.FC = () => {
             csrfProtection: data?.csrfProtection,
             defaultPermissions: data?.defaultPermissions ?? 0,
             hideAvailable: data?.hideAvailable,
+            localLogin: data?.localLogin,
             trustProxy: data?.trustProxy,
           }}
           enableReinitialize
@@ -93,6 +97,7 @@ const SettingsMain: React.FC = () => {
                 csrfProtection: values.csrfProtection,
                 defaultPermissions: values.defaultPermissions,
                 hideAvailable: values.hideAvailable,
+                localLogin: values.localLogin,
                 trustProxy: values.trustProxy,
               });
 
@@ -172,9 +177,7 @@ const SettingsMain: React.FC = () => {
                 </div>
                 <div className="form-row">
                   <label htmlFor="trustProxy" className="checkbox-label">
-                    <span className="mr-2">
-                      {intl.formatMessage(messages.trustProxy)}
-                    </span>
+                    <span>{intl.formatMessage(messages.trustProxy)}</span>
                     <span className="label-tip">
                       {intl.formatMessage(messages.trustProxyTip)}
                     </span>
@@ -236,6 +239,24 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="localLogin" className="checkbox-label">
+                    <span>{intl.formatMessage(messages.localLogin)}</span>
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.localLoginTip)}
+                    </span>
+                  </label>
+                  <div className="form-input">
+                    <Field
+                      type="checkbox"
+                      id="localLogin"
+                      name="localLogin"
+                      onChange={() => {
+                        setFieldValue('localLogin', !values.localLogin);
+                      }}
+                    />
+                  </div>
+                </div>
                 <div
                   role="group"
                   aria-labelledby="group-label"

src/components/Settings/SettingsNotifications.tsx

@@ -205,7 +205,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
               <Form className="section">
                 <div className="form-row">
                   <label htmlFor="name" className="checkbox-label">
-                    <span className="mr-2">
+                    <span>
                       {intl.formatMessage(messages.enablenotifications)}
                     </span>
                   </label>
@@ -222,7 +222,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
                 </div>
                 <div className="form-row">
                   <label htmlFor="name" className="checkbox-label">
-                    <span className="mr-2">
+                    <span>
                       {intl.formatMessage(messages.autoapprovedrequests)}
                     </span>
                   </label>

src/components/Settings/SettingsPlex.tsx

@@ -351,7 +351,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               <div className="form-row">
                 <label htmlFor="name" className="text-label">
                   <div className="flex flex-col">
-                    <span className="mr-2">
+                    <span>
                       <FormattedMessage {...messages.servername} />
                     </span>
                     <span className="text-gray-500">