feat: show alert/prompt when settings changes require restart (#2401)

* fix: correct 'StatusChecker' typo

* feat: add restart required check to StatusChecker

* fix(perms): remove MANAGE_SETTINGS permission

* fix: allow alert to be dismissed

* fix(lang): add missing string in SettingsServices

* fix(frontend): fix modal icon border

* fix(frontend): un-dismiss alert if setting reverted not require server restart

* fix(backend): restart flag only needs to track main settings

* fix: rebase issue

* refactor: appease Prettier

* refactor: swap settings badge order

* fix: type import for MainSettings

* test: add cypress test for restart prompt

src/components/Common/Modal/index.tsx

@@ -130,7 +130,7 @@ const Modal: React.FC<ModalProps> = ({
               />
             </div>
           )}
-          <div className="relative overflow-x-hidden sm:flex sm:items-center">
+          <div className="relative overflow-x-hidden p-0.5 sm:flex sm:items-center">
             {iconSvg && <div className="modal-icon">{iconSvg}</div>}
             <div
               className={`mt-3 truncate text-center text-white sm:mt-0 sm:text-left ${
@@ -149,7 +149,11 @@ const Modal: React.FC<ModalProps> = ({
             </div>
           </div>
           {children && (
-            <div className="relative mt-4 text-sm leading-5 text-gray-300">
+            <div
+              className={`relative mt-4 text-sm leading-5 text-gray-300 ${
+                !(onCancel || onOk || onSecondary || onTertiary) ? 'mb-3' : ''
+              }`}
+            >
               {children}
             </div>
           )}

src/components/Layout/Sidebar/index.tsx

@@ -80,7 +80,8 @@ const SidebarLinks: SidebarLinkProps[] = [
     messagesKey: 'settings',
     svgIcon: <CogIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/settings/,
-    requiredPermission: Permission.MANAGE_SETTINGS,
+    requiredPermission: Permission.ADMIN,
+    dataTestId: 'sidebar-menu-settings',
   },
 ];
 

src/components/PermissionEdit/index.tsx

@@ -12,9 +12,6 @@ export const messages = defineMessages({
   users: 'Manage Users',
   usersDescription:
     'Grant permission to manage users. Users with this permission cannot modify users with or grant the Admin privilege.',
-  settings: 'Manage Settings',
-  settingsDescription:
-    'Grant permission to modify global settings. A user must have this permission to grant it to others.',
   managerequests: 'Manage Requests',
   managerequestsDescription:
     'Grant permission to manage media requests. All requests made by a user with this permission will be automatically approved.',
@@ -88,12 +85,6 @@ export const PermissionEdit: React.FC<PermissionEditProps> = ({
       description: intl.formatMessage(messages.adminDescription),
       permission: Permission.ADMIN,
     },
-    {
-      id: 'settings',
-      name: intl.formatMessage(messages.settings),
-      description: intl.formatMessage(messages.settingsDescription),
-      permission: Permission.MANAGE_SETTINGS,
-    },
     {
       id: 'users',
       name: intl.formatMessage(messages.users),

src/components/PermissionOption/index.tsx

@@ -67,14 +67,9 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
   }
 
   if (
-    // Non-Admin users cannot modify the Admin permission
-    (actingUser &&
-      !hasPermission(Permission.ADMIN, actingUser.permissions) &&
-      option.permission === Permission.ADMIN) ||
-    // Users without the Manage Settings permission cannot modify/grant that permission
-    (actingUser &&
-      !hasPermission(Permission.MANAGE_SETTINGS, actingUser.permissions) &&
-      option.permission === Permission.MANAGE_SETTINGS)
+    // Only the owner can modify the Admin permission
+    actingUser?.id !== 1 &&
+    option.permission === Permission.ADMIN
   ) {
     disabled = true;
   }

src/components/Settings/SettingsMain.tsx

@@ -41,8 +41,7 @@ const messages = defineMessages({
   toastSettingsFailure: 'Something went wrong while saving settings.',
   hideAvailable: 'Hide Available Media',
   csrfProtection: 'Enable CSRF Protection',
-  csrfProtectionTip:
-    'Set external API access to read-only (requires HTTPS, and Overseerr must be reloaded for changes to take effect)',
+  csrfProtectionTip: 'Set external API access to read-only (requires HTTPS)',
   csrfProtectionHoverTip:
     'Do NOT enable this setting unless you understand what you are doing!',
   cacheImages: 'Enable Image Caching',
@@ -50,7 +49,7 @@ const messages = defineMessages({
     'Optimize and store all images locally (consumes a significant amount of disk space)',
   trustProxy: 'Enable Proxy Support',
   trustProxyTip:
-    'Allow Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)',
+    'Allow Overseerr to correctly register client IP addresses behind a proxy',
   validationApplicationTitle: 'You must provide an application title',
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
@@ -151,6 +150,7 @@ const SettingsMain: React.FC = () => {
                 trustProxy: values.trustProxy,
               });
               mutate('/api/v1/settings/public');
+              mutate('/api/v1/status');
 
               if (setLocale) {
                 setLocale(
@@ -252,7 +252,12 @@ const SettingsMain: React.FC = () => {
                 </div>
                 <div className="form-row">
                   <label htmlFor="trustProxy" className="checkbox-label">
-                    <span>{intl.formatMessage(messages.trustProxy)}</span>
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.trustProxy)}
+                    </span>
+                    <Badge badgeType="primary">
+                      {intl.formatMessage(globalMessages.restartRequired)}
+                    </Badge>
                     <span className="label-tip">
                       {intl.formatMessage(messages.trustProxyTip)}
                     </span>
@@ -273,9 +278,12 @@ const SettingsMain: React.FC = () => {
                     <span className="mr-2">
                       {intl.formatMessage(messages.csrfProtection)}
                     </span>
-                    <Badge badgeType="danger">
+                    <Badge badgeType="danger" className="mr-2">
                       {intl.formatMessage(globalMessages.advanced)}
                     </Badge>
+                    <Badge badgeType="primary">
+                      {intl.formatMessage(globalMessages.restartRequired)}
+                    </Badge>
                     <span className="label-tip">
                       {intl.formatMessage(messages.csrfProtectionTip)}
                     </span>

src/components/Settings/SettingsServices.tsx

@@ -43,6 +43,7 @@ const messages = defineMessages({
     'A 4K {serverType} server must be marked as default in order to enable users to submit 4K {mediaType} requests.',
   mediaTypeMovie: 'movie',
   mediaTypeSeries: 'series',
+  deleteServer: 'Delete {serverType} Server',
 });
 
 interface ServerInstanceProps {
@@ -256,7 +257,7 @@ const SettingsServices: React.FC = () => {
         leaveTo="opacity-0"
       >
         <Modal
-          okText="Delete"
+          okText={intl.formatMessage(globalMessages.delete)}
           okButtonType="danger"
           onOk={() => deleteServer()}
           onCancel={() =>
@@ -266,7 +267,10 @@ const SettingsServices: React.FC = () => {
               type: 'radarr',
             })
           }
-          title="Delete Server"
+          title={intl.formatMessage(messages.deleteServer, {
+            serverType:
+              deleteServerModal.type === 'radarr' ? 'Radarr' : 'Sonarr',
+          })}
           iconSvg={<TrashIcon />}
         >
           {intl.formatMessage(messages.deleteserverconfirm)}

src/components/StatusChacker/index.tsx

@@ -1,54 +0,0 @@
-import { SparklesIcon } from '@heroicons/react/outline';
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import useSWR from 'swr';
-import type { StatusResponse } from '../../../server/interfaces/api/settingsInterfaces';
-import Modal from '../Common/Modal';
-import Transition from '../Transition';
-
-const messages = defineMessages({
-  newversionavailable: 'Application Update',
-  newversionDescription:
-    'Overseerr has been updated! Please click the button below to reload the page.',
-  reloadOverseerr: 'Reload',
-});
-
-const StatusChecker: React.FC = () => {
-  const intl = useIntl();
-  const { data, error } = useSWR<StatusResponse>('/api/v1/status', {
-    refreshInterval: 60 * 1000,
-  });
-
-  if (!data && !error) {
-    return null;
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <Transition
-      enter="opacity-0 transition duration-300"
-      enterFrom="opacity-0"
-      enterTo="opacity-100"
-      leave="opacity-100 transition duration-300"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-      appear
-      show={data.commitTag !== process.env.commitTag}
-    >
-      <Modal
-        iconSvg={<SparklesIcon />}
-        title={intl.formatMessage(messages.newversionavailable)}
-        onOk={() => location.reload()}
-        okText={intl.formatMessage(messages.reloadOverseerr)}
-        backgroundClickable={false}
-      >
-        {intl.formatMessage(messages.newversionDescription)}
-      </Modal>
-    </Transition>
-  );
-};
-
-export default StatusChecker;

src/components/StatusChecker/index.tsx

@@ -0,0 +1,94 @@
+import { RefreshIcon, SparklesIcon } from '@heroicons/react/outline';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import type { StatusResponse } from '../../../server/interfaces/api/settingsInterfaces';
+import useSettings from '../../hooks/useSettings';
+import { Permission, useUser } from '../../hooks/useUser';
+import globalMessages from '../../i18n/globalMessages';
+import Modal from '../Common/Modal';
+import Transition from '../Transition';
+
+const messages = defineMessages({
+  appUpdated: '{applicationTitle} Updated',
+  appUpdatedDescription:
+    'Please click the button below to reload the application.',
+  reloadApp: 'Reload {applicationTitle}',
+  restartRequired: 'Server Restart Required',
+  restartRequiredDescription:
+    'Please restart the server to apply the updated settings.',
+});
+
+const StatusChecker: React.FC = () => {
+  const intl = useIntl();
+  const settings = useSettings();
+  const { hasPermission } = useUser();
+  const { data, error } = useSWR<StatusResponse>('/api/v1/status', {
+    refreshInterval: 60 * 1000,
+  });
+  const [alertDismissed, setAlertDismissed] = useState(false);
+
+  useEffect(() => {
+    if (!data?.restartRequired) {
+      setAlertDismissed(false);
+    }
+  }, [data?.restartRequired]);
+
+  if (!data && !error) {
+    return null;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Transition
+      enter="opacity-0 transition duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="opacity-100 transition duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      appear
+      show={
+        !alertDismissed &&
+        ((hasPermission(Permission.ADMIN) && data.restartRequired) ||
+          data.commitTag !== process.env.commitTag)
+      }
+    >
+      {hasPermission(Permission.ADMIN) && data.restartRequired ? (
+        <Modal
+          iconSvg={<RefreshIcon />}
+          title={intl.formatMessage(messages.restartRequired)}
+          backgroundClickable={false}
+          onOk={() => {
+            setAlertDismissed(true);
+            if (data.commitTag !== process.env.commitTag) {
+              location.reload();
+            }
+          }}
+          okText={intl.formatMessage(globalMessages.close)}
+        >
+          {intl.formatMessage(messages.restartRequiredDescription)}
+        </Modal>
+      ) : (
+        <Modal
+          iconSvg={<SparklesIcon />}
+          title={intl.formatMessage(messages.appUpdated, {
+            applicationTitle: settings.currentSettings.applicationTitle,
+          })}
+          onOk={() => location.reload()}
+          okText={intl.formatMessage(messages.reloadApp, {
+            applicationTitle: settings.currentSettings.applicationTitle,
+          })}
+          backgroundClickable={false}
+        >
+          {intl.formatMessage(messages.appUpdatedDescription)}
+        </Modal>
+      )}
+    </Transition>
+  );
+};
+
+export default StatusChecker;

src/components/UserList/index.tsx

@@ -336,7 +336,7 @@ const UserList: React.FC = () => {
                     type="warning"
                   />
                 )}
-                {currentHasPermission(Permission.MANAGE_SETTINGS) &&
+                {currentHasPermission(Permission.ADMIN) &&
                   !passwordGenerationEnabled && (
                     <Alert
                       title={intl.formatMessage(

src/components/UserProfile/UserSettings/index.tsx

@@ -54,10 +54,7 @@ const UserSettings: React.FC = ({ children }) => {
       regex: /\/settings\/password/,
       hidden:
         (!settings.currentSettings.localLogin &&
-          !hasPermission(
-            Permission.MANAGE_SETTINGS,
-            currentUser?.permissions ?? 0
-          )) ||
+          !hasPermission(Permission.ADMIN, currentUser?.permissions ?? 0)) ||
         (currentUser?.id !== 1 &&
           currentUser?.id !== user?.id &&
           hasPermission(Permission.ADMIN, user?.permissions ?? 0)),

src/i18n/globalMessages.ts

@@ -43,6 +43,7 @@ const globalMessages = defineMessages({
   all: 'All',
   experimental: 'Experimental',
   advanced: 'Advanced',
+  restartRequired: 'Restart Required',
   loading: 'Loading…',
   settings: 'Settings',
   usersettings: 'User Settings',

src/i18n/locale/en.json

@@ -245,8 +245,6 @@
   "components.PermissionEdit.requestMoviesDescription": "Grant permission to submit requests for non-4K movies.",
   "components.PermissionEdit.requestTv": "Request Series",
   "components.PermissionEdit.requestTvDescription": "Grant permission to submit requests for non-4K series.",
-  "components.PermissionEdit.settings": "Manage Settings",
-  "components.PermissionEdit.settingsDescription": "Grant permission to modify global settings. A user must have this permission to grant it to others.",
   "components.PermissionEdit.users": "Manage Users",
   "components.PermissionEdit.usersDescription": "Grant permission to manage users. Users with this permission cannot modify users with or grant the Admin privilege.",
   "components.PermissionEdit.viewissues": "View Issues",
@@ -711,10 +709,11 @@
   "components.Settings.copied": "Copied API key to clipboard.",
   "components.Settings.csrfProtection": "Enable CSRF Protection",
   "components.Settings.csrfProtectionHoverTip": "Do NOT enable this setting unless you understand what you are doing!",
-  "components.Settings.csrfProtectionTip": "Set external API access to read-only (requires HTTPS, and Overseerr must be reloaded for changes to take effect)",
+  "components.Settings.csrfProtectionTip": "Set external API access to read-only (requires HTTPS)",
   "components.Settings.currentlibrary": "Current Library: {name}",
   "components.Settings.default": "Default",
   "components.Settings.default4k": "Default 4K",
+  "components.Settings.deleteServer": "Delete {serverType} Server",
   "components.Settings.deleteserverconfirm": "Are you sure you want to delete this server?",
   "components.Settings.email": "Email",
   "components.Settings.enablessl": "Use SSL",
@@ -789,7 +788,7 @@
   "components.Settings.toastTautulliSettingsFailure": "Something went wrong while saving Tautulli settings.",
   "components.Settings.toastTautulliSettingsSuccess": "Tautulli settings saved successfully!",
   "components.Settings.trustProxy": "Enable Proxy Support",
-  "components.Settings.trustProxyTip": "Allow Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)",
+  "components.Settings.trustProxyTip": "Allow Overseerr to correctly register client IP addresses behind a proxy",
   "components.Settings.urlBase": "URL Base",
   "components.Settings.validationApiKey": "You must provide an API key",
   "components.Settings.validationApplicationTitle": "You must provide an application title",
@@ -818,9 +817,11 @@
   "components.Setup.welcome": "Welcome to Overseerr",
   "components.StatusBadge.status": "{status}",
   "components.StatusBadge.status4k": "4K {status}",
-  "components.StatusChacker.newversionDescription": "Overseerr has been updated! Please click the button below to reload the page.",
-  "components.StatusChacker.newversionavailable": "Application Update",
-  "components.StatusChacker.reloadOverseerr": "Reload",
+  "components.StatusChecker.appUpdated": "{applicationTitle} Updated",
+  "components.StatusChecker.appUpdatedDescription": "Please click the button below to reload the application.",
+  "components.StatusChecker.reloadApp": "Reload {applicationTitle}",
+  "components.StatusChecker.restartRequired": "Server Restart Required",
+  "components.StatusChecker.restartRequiredDescription": "Please restart the server to apply the updated settings.",
   "components.TvDetails.TvCast.fullseriescast": "Full Series Cast",
   "components.TvDetails.TvCrew.fullseriescrew": "Full Series Crew",
   "components.TvDetails.anime": "Anime",
@@ -1020,6 +1021,7 @@
   "i18n.requested": "Requested",
   "i18n.requesting": "Requesting…",
   "i18n.resolved": "Resolved",
+  "i18n.restartRequired": "Restart Required",
   "i18n.resultsperpage": "Display {pageSize} results per page",
   "i18n.retry": "Retry",
   "i18n.retrying": "Retrying…",

src/pages/_app.tsx

@@ -11,7 +11,7 @@ import Layout from '../components/Layout';
 import LoadingBar from '../components/LoadingBar';
 import PWAHeader from '../components/PWAHeader';
 import ServiceWorkerSetup from '../components/ServiceWorkerSetup';
-import StatusChecker from '../components/StatusChacker';
+import StatusChecker from '../components/StatusChecker';
 import Toast from '../components/Toast';
 import ToastContainer from '../components/ToastContainer';
 import { InteractionProvider } from '../context/InteractionContext';

src/pages/settings/about.tsx

@@ -6,7 +6,7 @@ import useRouteGuard from '../../hooks/useRouteGuard';
 import { Permission } from '../../hooks/useUser';
 
 const SettingsAboutPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsAbout />

src/pages/settings/index.tsx

@@ -6,7 +6,7 @@ import useRouteGuard from '../../hooks/useRouteGuard';
 import { Permission } from '../../hooks/useUser';
 
 const SettingsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsMain />

src/pages/settings/jobs.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { NextPage } from 'next';
-import SettingsLayout from '../../components/Settings/SettingsLayout';
+import React from 'react';
 import SettingsJobs from '../../components/Settings/SettingsJobsCache';
-import { Permission } from '../../hooks/useUser';
+import SettingsLayout from '../../components/Settings/SettingsLayout';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const SettingsMainPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsJobs />

src/pages/settings/logs.tsx

@@ -6,7 +6,7 @@ import useRouteGuard from '../../hooks/useRouteGuard';
 import { Permission } from '../../hooks/useUser';
 
 const SettingsLogsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsLogs />

src/pages/settings/main.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import type { NextPage } from 'next';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsMain from '../../components/Settings/SettingsMain';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const SettingsMainPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsMain />

src/pages/settings/notifications/discord.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/email.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/gotify.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/lunasea.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/pushbullet.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/pushover.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/slack.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsSlackPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/telegram.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/webhook.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/webpush.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsWebPushPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/plex.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { NextPage } from 'next';
+import React from 'react';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsPlex from '../../components/Settings/SettingsPlex';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const PlexSettingsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsPlex />

src/pages/settings/services.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { NextPage } from 'next';
+import React from 'react';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsServices from '../../components/Settings/SettingsServices';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const ServicesSettingsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsServices />

src/pages/settings/users.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import type { NextPage } from 'next';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsUsers from '../../components/Settings/SettingsUsers';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const SettingsUsersPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsUsers />