refactor(ui): move user-related settings out of "General Settings" (#1143)

src/components/Settings/SettingsLayout.tsx

@@ -7,6 +7,7 @@ import PageTitle from '../Common/PageTitle';
 const messages = defineMessages({
   settings: 'Settings',
   menuGeneralSettings: 'General Settings',
+  menuUsers: 'Users',
   menuPlexSettings: 'Plex',
   menuServices: 'Services',
   menuNotifications: 'Notifications',
@@ -31,6 +32,11 @@ const SettingsLayout: React.FC = ({ children }) => {
       route: '/settings/main',
       regex: /^\/settings(\/main)?$/,
     },
+    {
+      text: intl.formatMessage(messages.menuUsers),
+      route: '/settings/users',
+      regex: /^\/settings\/users/,
+    },
     {
       text: intl.formatMessage(messages.menuPlexSettings),
       route: '/settings/plex',

src/components/Settings/SettingsMain.tsx

@@ -11,7 +11,6 @@ import { useUser, Permission } from '../../hooks/useUser';
 import { useToasts } from 'react-toast-notifications';
 import Badge from '../Common/Badge';
 import globalMessages from '../../i18n/globalMessages';
-import PermissionEdit from '../PermissionEdit';
 import * as Yup from 'yup';
 import RegionSelector from '../RegionSelector';
 
@@ -34,7 +33,6 @@ const messages = defineMessages({
   toastApiKeyFailure: 'Something went wrong while generating a new API key.',
   toastSettingsSuccess: 'Settings successfully saved!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
-  defaultPermissions: 'Default User Permissions',
   hideAvailable: 'Hide Available Media',
   csrfProtection: 'Enable CSRF Protection',
   csrfProtectionTip:
@@ -44,7 +42,6 @@ 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',
   validationApplicationTitle: 'You must provide an application title',
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
@@ -116,9 +113,7 @@ const SettingsMain: React.FC = () => {
             applicationTitle: data?.applicationTitle,
             applicationUrl: data?.applicationUrl,
             csrfProtection: data?.csrfProtection,
-            defaultPermissions: data?.defaultPermissions ?? 0,
             hideAvailable: data?.hideAvailable,
-            localLogin: data?.localLogin,
             region: data?.region,
             originalLanguage: data?.originalLanguage,
             trustProxy: data?.trustProxy,
@@ -131,9 +126,7 @@ const SettingsMain: React.FC = () => {
                 applicationTitle: values.applicationTitle,
                 applicationUrl: values.applicationUrl,
                 csrfProtection: values.csrfProtection,
-                defaultPermissions: values.defaultPermissions,
                 hideAvailable: values.hideAvailable,
-                localLogin: values.localLogin,
                 region: values.region,
                 originalLanguage: values.originalLanguage,
                 trustProxy: values.trustProxy,
@@ -345,42 +338,6 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
-                <div className="form-row">
-                  <label htmlFor="localLogin" className="checkbox-label">
-                    <span>{intl.formatMessage(messages.localLogin)}</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"
-                  className="form-group"
-                >
-                  <div className="form-row">
-                    <span id="group-label" className="group-label">
-                      {intl.formatMessage(messages.defaultPermissions)}
-                    </span>
-                    <div className="form-input">
-                      <div className="max-w-lg">
-                        <PermissionEdit
-                          currentPermission={values.defaultPermissions}
-                          onUpdate={(newPermissions) =>
-                            setFieldValue('defaultPermissions', newPermissions)
-                          }
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
                 <div className="actions">
                   <div className="flex justify-end">
                     <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/SettingsUsers/index.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import useSWR from 'swr';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import type { MainSettings } from '../../../../server/lib/settings';
+import { Form, Formik, Field } from 'formik';
+import axios from 'axios';
+import Button from '../../Common/Button';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import PermissionEdit from '../../PermissionEdit';
+
+const messages = defineMessages({
+  userSettings: 'Users',
+  userSettingsDescription: 'Configure global and default user settings.',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  toastSettingsSuccess: 'Settings successfully saved!',
+  toastSettingsFailure: 'Something went wrong while saving settings.',
+  localLogin: 'Enable Local User Sign-In',
+  defaultPermissions: 'Default User Permissions',
+});
+
+const SettingsUsers: React.FC = () => {
+  const { addToast } = useToasts();
+  const intl = useIntl();
+  const { data, error, revalidate } = useSWR<MainSettings>(
+    '/api/v1/settings/main'
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h3 className="heading">{intl.formatMessage(messages.userSettings)}</h3>
+        <p className="description">
+          {intl.formatMessage(messages.userSettingsDescription)}
+        </p>
+      </div>
+      <div className="section">
+        <Formik
+          initialValues={{
+            localLogin: data?.localLogin,
+            defaultPermissions: data?.defaultPermissions ?? 0,
+          }}
+          enableReinitialize
+          onSubmit={async (values) => {
+            try {
+              await axios.post('/api/v1/settings/main', {
+                localLogin: values.localLogin,
+                defaultPermissions: values.defaultPermissions,
+              });
+
+              addToast(intl.formatMessage(messages.toastSettingsSuccess), {
+                autoDismiss: true,
+                appearance: 'success',
+              });
+            } catch (e) {
+              addToast(intl.formatMessage(messages.toastSettingsFailure), {
+                autoDismiss: true,
+                appearance: 'error',
+              });
+            } finally {
+              revalidate();
+            }
+          }}
+        >
+          {({ isSubmitting, values, setFieldValue }) => {
+            return (
+              <Form className="section">
+                <div className="form-row">
+                  <label htmlFor="localLogin" className="checkbox-label">
+                    <span>{intl.formatMessage(messages.localLogin)}</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"
+                  className="form-group"
+                >
+                  <div className="form-row">
+                    <span id="group-label" className="group-label">
+                      {intl.formatMessage(messages.defaultPermissions)}
+                    </span>
+                    <div className="form-input">
+                      <div className="max-w-lg">
+                        <PermissionEdit
+                          currentPermission={values.defaultPermissions}
+                          onUpdate={(newPermissions) =>
+                            setFieldValue('defaultPermissions', newPermissions)
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="actions">
+                  <div className="flex justify-end">
+                    <span className="inline-flex ml-3 rounded-md shadow-sm">
+                      <Button
+                        buttonType="primary"
+                        type="submit"
+                        disabled={isSubmitting}
+                      >
+                        {isSubmitting
+                          ? intl.formatMessage(messages.saving)
+                          : intl.formatMessage(messages.save)}
+                      </Button>
+                    </span>
+                  </div>
+                </div>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+};
+
+export default SettingsUsers;