feat: api key regeneration

overseerr-api.yml

@@ -1028,6 +1028,19 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/MainSettings'
+  /settings/main/regenerate:
+    get:
+      summary: Returns main settings with newly generated API Key
+      description: Retreives all main settings in JSON format with new API Key
+      tags:
+        - settings
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MainSettings'
   /settings/plex:
     get:
       summary: Returns plex settings

server/lib/settings.ts

@@ -213,7 +213,7 @@ class Settings {
   }
 
   private generateApiKey(): string {
-    return Buffer.from(`${Date.now()}${this.clientId}`).toString('base64');
+    return Buffer.from(`${Date.now()}${uuidv4()})`).toString('base64');
   }
 
   /**

server/routes/settings.ts

@@ -23,16 +23,27 @@ import { getAppVersion } from '../utils/appVersion';
 
 const settingsRoutes = Router();
 
-settingsRoutes.get('/main', (req, res) => {
+const filteredMainSettings = (
+  user: User,
+  main: MainSettings
+): Partial<MainSettings> => {
+  if (!user?.hasPermission(Permission.ADMIN)) {
+    return {
+      applicationUrl: main.applicationUrl,
+    };
+  }
+
+  return main;
+};
+
+settingsRoutes.get('/main', (req, res, next) => {
   const settings = getSettings();
 
-  if (!req.user?.hasPermission(Permission.ADMIN)) {
+  if (!req.user) {
-    return res.status(200).json({
+    return next({ status: 500, message: 'User missing from request' });
-      applicationUrl: settings.main.applicationUrl,
-    } as Partial<MainSettings>);
   }
 
-  res.status(200).json(settings.main);
+  res.status(200).json(filteredMainSettings(req.user, settings.main));
 });
 
 settingsRoutes.post('/main', (req, res) => {
@@ -44,6 +55,18 @@ settingsRoutes.post('/main', (req, res) => {
   return res.status(200).json(settings.main);
 });
 
+settingsRoutes.get('/main/regenerate', (req, res, next) => {
+  const settings = getSettings();
+
+  const main = settings.regenerateApiKey();
+
+  if (!req.user) {
+    return next({ status: 500, message: 'User missing from request' });
+  }
+
+  return res.status(200).json(filteredMainSettings(req.user, main));
+});
+
 settingsRoutes.get('/plex', (_req, res) => {
   const settings = getSettings();
 

src/components/Settings/CopyButton.tsx

@@ -25,7 +25,10 @@ const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
 
   return (
     <button
-      onClick={setCopied}
+      onClick={(e) => {
+        e.preventDefault();
+        setCopied();
+      }}
       className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
     >
       <svg

src/components/Settings/SettingsMain.tsx

@@ -8,6 +8,7 @@ import axios from 'axios';
 import Button from '../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import { useUser, Permission } from '../../hooks/useUser';
+import { useToasts } from 'react-toast-notifications';
 
 const messages = defineMessages({
   generalsettings: 'General Settings',
@@ -17,15 +18,37 @@ const messages = defineMessages({
   saving: 'Saving...',
   apikey: 'API Key',
   applicationurl: 'Application URL',
+  toastApiKeySuccess: 'New API Key generated!',
+  toastApiKeyFailure: 'Something went wrong generating a new API Key.',
+  toastSettingsSuccess: 'Settings saved.',
+  toastSettingsFailure: 'Something went wrong saving settings.',
 });
 
 const SettingsMain: React.FC = () => {
+  const { addToast } = useToasts();
   const { hasPermission } = useUser();
   const intl = useIntl();
   const { data, error, revalidate } = useSWR<MainSettings>(
     '/api/v1/settings/main'
   );
 
+  const regenerate = async () => {
+    try {
+      await axios.get('/api/v1/settings/main/regenerate');
+
+      revalidate();
+      addToast(intl.formatMessage(messages.toastApiKeySuccess), {
+        autoDismiss: true,
+        appearance: 'success',
+      });
+    } catch (e) {
+      addToast(intl.formatMessage(messages.toastApiKeyFailure), {
+        autoDismiss: true,
+        appearance: 'error',
+      });
+    }
+  };
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -50,8 +73,16 @@ const SettingsMain: React.FC = () => {
               await axios.post('/api/v1/settings/main', {
                 applicationUrl: values.applicationUrl,
               });
+
+              addToast(intl.formatMessage(messages.toastSettingsSuccess), {
+                autoDismiss: true,
+                appearance: 'success',
+              });
             } catch (e) {
-              // TODO show error
+              addToast(intl.formatMessage(messages.toastSettingsFailure), {
+                autoDismiss: true,
+                appearance: 'error',
+              });
             } finally {
               revalidate();
             }
@@ -77,8 +108,17 @@ const SettingsMain: React.FC = () => {
                           value={data?.apiKey}
                           readOnly
                         />
-                        <CopyButton textToCopy={data?.apiKey ?? ''} />
+                        <CopyButton
-                        <button className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                          textToCopy={data?.apiKey ?? ''}
+                          key={data?.apiKey}
+                        />
+                        <button
+                          onClick={(e) => {
+                            e.preventDefault();
+                            regenerate();
+                          }}
+                          className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+                        >
                           <svg
                             className="w-5 h-5"
                             fill="currentColor"

src/i18n/locale/en.json

@@ -242,6 +242,10 @@
   "components.Settings.startscan": "Start Scan",
   "components.Settings.sync": "Sync Plex Libraries",
   "components.Settings.syncing": "Syncing…",
+  "components.Settings.toastApiKeyFailure": "Something went wrong generating a new API Key.",
+  "components.Settings.toastApiKeySuccess": "New API Key generated!",
+  "components.Settings.toastSettingsFailure": "Something went wrong saving settings.",
+  "components.Settings.toastSettingsSuccess": "Settings saved.",
   "components.Settings.validationHostnameRequired": "You must provide a hostname/IP",
   "components.Settings.validationPortRequired": "You must provide a port",
   "components.Setup.configureplex": "Configure Plex",