feat: request as another user

2025-09-17 17:24:35 +02:00 · 2021-02-04 01:38:32 +09:00
parent c0769d4f8f
commit 59150f955f
7 changed files with 214 additions and 7 deletions
--- a/package.json
+++ b/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",
--- a/server/routes/request.ts
+++ b/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;

--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/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)}
--- a/src/components/RequestModal/MovieRequestModal.tsx
+++ b/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}
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/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
                ? {
--- a/src/i18n/locale/en.json
+++ b/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.",
--- a/yarn.lock
+++ b/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"