feat: request as another user

package.json

@@ -17,6 +17,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@headlessui/react": "^0.2.0-da179ca",
     "@supercharge/request-ip": "^1.1.2",
     "@svgr/webpack": "^5.5.0",
     "ace-builds": "^1.4.12",

server/routes/request.ts

@@ -9,6 +9,7 @@ import { MediaStatus, MediaRequestStatus, MediaType } from '../constants/media';
 import SeasonRequest from '../entity/SeasonRequest';
 import logger from '../logger';
 import { RequestResultsResponse } from '../interfaces/api/requestInterfaces';
+import { User } from '../entity/User';
 
 const requestRoutes = Router();
 
@@ -94,8 +95,28 @@ requestRoutes.post(
     const tmdb = new TheMovieDb();
     const mediaRepository = getRepository(Media);
     const requestRepository = getRepository(MediaRequest);
+    const userRepository = getRepository(User);
 
     try {
+      let requestUser = req.user;
+
+      if (
+        req.body.userId &&
+        !(
+          req.user?.hasPermission(Permission.MANAGE_USERS) &&
+          req.user?.hasPermission(Permission.MANAGE_REQUESTS)
+        )
+      ) {
+        return next({
+          status: 403,
+          message: 'You do not have permission to modify the request user.',
+        });
+      } else if (req.body.userId) {
+        requestUser = await userRepository.findOneOrFail({
+          where: { id: req.body.userId },
+        });
+      }
+
       const tmdbMedia =
         req.body.mediaType === 'movie'
           ? await tmdb.getMovie({ movieId: req.body.mediaId })
@@ -151,7 +172,7 @@ requestRoutes.post(
         const request = new MediaRequest({
           type: MediaType.MOVIE,
           media,
-          requestedBy: req.user,
+          requestedBy: requestUser,
           // If the user is an admin or has the "auto approve" permission, automatically approve the request
           status:
             req.user?.hasPermission(Permission.AUTO_APPROVE) ||
@@ -212,7 +233,7 @@ requestRoutes.post(
           media: {
             id: media.id,
           } as Media,
-          requestedBy: req.user,
+          requestedBy: requestUser,
           // If the user is an admin or has the "auto approve" permission, automatically approve the request
           status:
             req.user?.hasPermission(Permission.AUTO_APPROVE) ||
@@ -292,6 +313,7 @@ requestRoutes.put<{ requestId: string }>(
   isAuthenticated(Permission.MANAGE_REQUESTS),
   async (req, res, next) => {
     const requestRepository = getRepository(MediaRequest);
+    const userRepository = getRepository(User);
     try {
       const request = await requestRepository.findOne(
         Number(req.params.requestId)
@@ -301,10 +323,30 @@ requestRoutes.put<{ requestId: string }>(
         return next({ status: 404, message: 'Request not found' });
       }
 
+      let requestUser = req.user;
+
+      if (
+        req.body.userId &&
+        !(
+          req.user?.hasPermission(Permission.MANAGE_USERS) &&
+          req.user?.hasPermission(Permission.MANAGE_REQUESTS)
+        )
+      ) {
+        return next({
+          status: 403,
+          message: 'You do not have permission to modify the request user.',
+        });
+      } else if (req.body.userId) {
+        requestUser = await userRepository.findOneOrFail({
+          where: { id: req.body.userId },
+        });
+      }
+
       if (req.body.mediaType === 'movie') {
         request.serverId = req.body.serverId;
         request.profileId = req.body.profileId;
         request.rootFolder = req.body.rootFolder;
+        request.requestedBy = requestUser as User;
 
         requestRepository.save(request);
       } else if (req.body.mediaType === 'tv') {
@@ -312,6 +354,7 @@ requestRoutes.put<{ requestId: string }>(
         request.serverId = req.body.serverId;
         request.profileId = req.body.profileId;
         request.rootFolder = req.body.rootFolder;
+        request.requestedBy = requestUser as User;
 
         const requestedSeasons = req.body.seasons as number[] | undefined;
 

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -8,6 +8,8 @@ import type {
 } from '../../../../server/interfaces/api/serviceInterfaces';
 import { defineMessages, useIntl } from 'react-intl';
 import { formatBytes } from '../../../utils/numberHelpers';
+import { Listbox, Transition } from '@headlessui/react';
+import { Permission, User, useUser } from '../../../hooks/useUser';
 
 const messages = defineMessages({
   advancedoptions: 'Advanced Options',
@@ -18,12 +20,14 @@ const messages = defineMessages({
   default: '(Default)',
   loadingprofiles: 'Loading profiles…',
   loadingfolders: 'Loading folders…',
+  requestas: 'Request As',
 });
 
 export type RequestOverrides = {
   server?: number;
   profile?: number;
   folder?: string;
+  user?: User;
 };
 
 interface AdvancedRequesterProps {
@@ -31,6 +35,7 @@ interface AdvancedRequesterProps {
   is4k: boolean;
   isAnime?: boolean;
   defaultOverrides?: RequestOverrides;
+  requestUser?: User;
   onChange: (overrides: RequestOverrides) => void;
 }
 
@@ -39,9 +44,11 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
   is4k = false,
   isAnime = false,
   defaultOverrides,
+  requestUser,
   onChange,
 }) => {
   const intl = useIntl();
+  const { user, hasPermission } = useUser();
   const { data, error } = useSWR<ServiceCommonServer[]>(
     `/api/v1/service/${type === 'movie' ? 'radarr' : 'sonarr'}`,
     {
@@ -78,6 +85,22 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
     }
   );
 
+  const [selectedUser, setSelectedUser] = useState<User | null>(
+    requestUser ?? null
+  );
+
+  const { data: userData } = useSWR<User[]>(
+    hasPermission([Permission.MANAGE_REQUESTS, Permission.MANAGE_USERS])
+      ? '/api/v1/user'
+      : null
+  );
+
+  useEffect(() => {
+    if (userData && !requestUser) {
+      setSelectedUser(userData.find((u) => u.id === user?.id) ?? null);
+    }
+  }, [userData]);
+
   useEffect(() => {
     let defaultServer = data?.find(
       (server) => server.isDefault && is4k === server.is4k
@@ -167,9 +190,10 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
         folder: selectedFolder !== '' ? selectedFolder : undefined,
         profile: selectedProfile !== -1 ? selectedProfile : undefined,
         server: selectedServer ?? undefined,
+        user: selectedUser ?? undefined,
       });
     }
-  }, [selectedFolder, selectedServer, selectedProfile]);
+  }, [selectedFolder, selectedServer, selectedProfile, selectedUser]);
 
   if (!data && !error) {
     return (
@@ -288,6 +312,130 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
             </select>
           </div>
         </div>
+        {hasPermission(Permission.MANAGE_REQUESTS) &&
+          hasPermission(Permission.MANAGE_USERS) &&
+          selectedUser && (
+            <div className="mt-0 sm:mt-2">
+              <Listbox
+                as="div"
+                value={selectedUser}
+                onChange={(value) => setSelectedUser(value)}
+                className="space-y-1"
+              >
+                {({ open }) => (
+                  <>
+                    <Listbox.Label className="text-label">
+                      {intl.formatMessage(messages.requestas)}
+                    </Listbox.Label>
+                    <div className="relative">
+                      <span className="inline-block w-full rounded-md shadow-sm">
+                        <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-800 border border-gray-700 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+                          <span className="flex items-center">
+                            <img
+                              src={selectedUser.avatar}
+                              alt=""
+                              className="flex-shrink-0 w-6 h-6 rounded-full"
+                            />
+                            <span className="block ml-3">
+                              {selectedUser.displayName}
+                            </span>
+                            <span className="ml-1 text-gray-400 truncate">
+                              ({selectedUser.email})
+                            </span>
+                          </span>
+                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                            <svg
+                              className="w-5 h-5 text-gray-500"
+                              viewBox="0 0 20 20"
+                              fill="none"
+                              stroke="currentColor"
+                            >
+                              <path
+                                d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                                strokeWidth="1.5"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </span>
+                        </Listbox.Button>
+                      </span>
+
+                      <Transition
+                        show={open}
+                        enter="transition ease-in duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="transition ease-in duration-100"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                        className="w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+                      >
+                        <Listbox.Options
+                          static
+                          className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
+                        >
+                          {userData?.map((user) => (
+                            <Listbox.Option key={user.id} value={user}>
+                              {({ selected, active }) => (
+                                <div
+                                  className={`${
+                                    active
+                                      ? 'text-white bg-indigo-600'
+                                      : 'text-gray-300'
+                                  } cursor-default select-none relative py-2 pl-8 pr-4`}
+                                >
+                                  <span
+                                    className={`${
+                                      selected ? 'font-semibold' : 'font-normal'
+                                    } flex items-center`}
+                                  >
+                                    <img
+                                      src={user.avatar}
+                                      alt=""
+                                      className="flex-shrink-0 w-6 h-6 rounded-full"
+                                    />
+                                    <span className="block ml-3">
+                                      {user.displayName}
+                                    </span>
+                                    <span className="ml-1 text-gray-400 truncate">
+                                      ({user.email})
+                                    </span>
+                                  </span>
+                                  {selected && (
+                                    <span
+                                      className={`${
+                                        active
+                                          ? 'text-white'
+                                          : 'text-indigo-600'
+                                      } absolute inset-y-0 left-0 flex items-center pl-1.5`}
+                                    >
+                                      <svg
+                                        className="w-5 h-5"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                      >
+                                        <path
+                                          fillRule="evenodd"
+                                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                          clipRule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                  )}
+                                </div>
+                              )}
+                            </Listbox.Option>
+                          ))}
+                        </Listbox.Options>
+                      </Transition>
+                    </div>
+                  </>
+                )}
+              </Listbox>
+            </div>
+          )}
         {isAnime && (
           <div className="mt-4 italic">
             {intl.formatMessage(messages.animenote)}

src/components/RequestModal/MovieRequestModal.tsx

@@ -87,6 +87,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
           serverId: requestOverrides.server,
           profileId: requestOverrides.profile,
           rootFolder: requestOverrides.folder,
+          userId: requestOverrides.user?.id,
         };
       }
       const response = await axios.post<MediaRequest>('/api/v1/request', {
@@ -169,6 +170,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         serverId: requestOverrides?.server,
         profileId: requestOverrides?.profile,
         rootFolder: requestOverrides?.folder,
+        userId: requestOverrides?.user?.id,
       });
 
       addToast(<span>{intl.formatMessage(messages.requestedited)}</span>, {
@@ -227,11 +229,13 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
             username: activeRequest.requestedBy.displayName,
           }
         )}
-        {hasPermission(Permission.REQUEST_ADVANCED) && (
+        {(hasPermission(Permission.REQUEST_ADVANCED) ||
+          hasPermission(Permission.MANAGE_REQUESTS)) && (
           <div className="mt-4">
             <AdvancedRequester
               type="movie"
               is4k={is4k}
+              requestUser={editRequest?.requestedBy}
               defaultOverrides={
                 editRequest
                   ? {
@@ -279,7 +283,8 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
           </Alert>
         </p>
       )}
-      {hasPermission(Permission.REQUEST_ADVANCED) && (
+      {(hasPermission(Permission.REQUEST_ADVANCED) ||
+        hasPermission(Permission.MANAGE_REQUESTS)) && (
         <AdvancedRequester
           type="movie"
           is4k={is4k}

src/components/RequestModal/TvRequestModal.tsx

@@ -103,6 +103,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           serverId: requestOverrides?.server,
           profileId: requestOverrides?.profile,
           rootFolder: requestOverrides?.folder,
+          userId: requestOverrides?.user?.id,
           seasons: selectedSeasons,
         });
       } else {
@@ -150,6 +151,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           serverId: requestOverrides.server,
           profileId: requestOverrides.profile,
           rootFolder: requestOverrides.folder,
+          userId: requestOverrides?.user?.id,
         };
       }
       const response = await axios.post<MediaRequest>('/api/v1/request', {
@@ -391,7 +393,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                             toggleAllSeasons();
                           }
                         }}
-                        className="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer pt-2 focus:outline-none"
+                        className="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none"
                       >
                         <span
                           aria-hidden="true"
@@ -550,7 +552,8 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           </div>
         </div>
       </div>
-      {hasPermission(Permission.REQUEST_ADVANCED) && (
+      {(hasPermission(Permission.REQUEST_ADVANCED) ||
+        hasPermission(Permission.MANAGE_REQUESTS)) && (
         <div className="mt-4">
           <AdvancedRequester
             type="tv"
@@ -559,6 +562,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
               (keyword) => keyword.id === ANIME_KEYWORD_ID
             )}
             onChange={(overrides) => setRequestOverrides(overrides)}
+            requestUser={editRequest?.requestedBy}
             defaultOverrides={
               editRequest
                 ? {

src/i18n/locale/en.json

@@ -169,6 +169,7 @@
   "components.RequestModal.AdvancedRequester.loadingfolders": "Loading folders…",
   "components.RequestModal.AdvancedRequester.loadingprofiles": "Loading profiles…",
   "components.RequestModal.AdvancedRequester.qualityprofile": "Quality Profile",
+  "components.RequestModal.AdvancedRequester.requestas": "Request As",
   "components.RequestModal.AdvancedRequester.rootfolder": "Root Folder",
   "components.RequestModal.SearchByNameModal.next": "Next",
   "components.RequestModal.SearchByNameModal.nosummary": "No summary for this title was found.",

yarn.lock

@@ -1481,6 +1481,11 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
   integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
 
+"@headlessui/react@^0.2.0-da179ca":
+  version "0.2.0-da179ca"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.2.0-da179ca.tgz#208bfd2cc844196282798376eec7e5e9839fc3f2"
+  integrity sha512-KgQNicrW7Iphc2RJS54vUvb5IVcllopJkffCUT7z9BMHboazV0Hw28GZubZBA05bxZUc1k42Fhpb5wpxe1bDJw==
+
 "@iarna/cli@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@iarna/cli/-/cli-1.2.0.tgz#0f7af5e851afe895104583c4ca07377a8094d641"