feat: user edit functionality (managing permissions)

pull/179/head
sct 4 years ago
parent ff8b9d8e7e
commit 185ac2648f

@ -35,6 +35,7 @@ components:
readOnly: true
requests:
type: array
readOnly: true
items:
$ref: '#/components/schemas/MediaRequest'
required:

@ -1,6 +1,7 @@
import { Router } from 'express';
import { getRepository } from 'typeorm';
import { User } from '../entity/User';
import { hasPermission, Permission } from '../lib/permissions';
const router = Router();
@ -50,6 +51,36 @@ router.put<{ id: string }>('/:id', async (req, res, next) => {
where: { id: Number(req.params.id) },
});
// Only let the owner user modify themselves
if (user.id === 1 && req.user?.id !== 1) {
return next({
status: 403,
message: 'You do not have permission to modify this user',
});
}
// Only let the owner grant admin privileges
if (
hasPermission(Permission.ADMIN, req.body.permissions) &&
req.user?.id !== 1
) {
return next({
status: 403,
message: 'You do not have permission to grant this level of access',
});
}
// Only let users with the manage settings permission, grant the same permission
if (
hasPermission(Permission.MANAGE_SETTINGS, req.body.permissions) &&
!hasPermission(Permission.MANAGE_SETTINGS, req.user?.permissions ?? 0)
) {
return next({
status: 403,
message: 'You do not have permission to grant this level of access',
});
}
Object.assign(user, req.body);
await userRepository.save(user);

@ -11,7 +11,7 @@ const SearchInput: React.FC = () => {
const { searchValue, setSearchValue, setIsOpen } = useSearchInput();
return (
<div className="flex-1 flex">
<form className="w-full flex md:ml-0" action="#" method="GET">
<div className="w-full flex md:ml-0">
<label htmlFor="search_field" className="sr-only">
Search
</label>
@ -36,7 +36,7 @@ const SearchInput: React.FC = () => {
onBlur={() => setIsOpen(false)}
/>
</div>
</form>
</div>
</div>
);
};

@ -6,7 +6,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
import { useUser, Permission } from '../../../hooks/useUser';
const messages = defineMessages({
dashboard: 'Dashboard',
dashboard: 'Discover',
requests: 'Requests',
users: 'Users',
settings: 'Settings',

@ -0,0 +1,327 @@
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import LoadingSpinner from '../Common/LoadingSpinner';
import { Permission, useUser } from '../../hooks/useUser';
import { hasPermission } from '../../../server/lib/permissions';
import Button from '../Common/Button';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import axios from 'axios';
import { useToasts } from 'react-toast-notifications';
const messages = defineMessages({
edituser: 'Edit User',
username: 'Username',
avatar: 'Avatar',
email: 'Email',
permissions: 'Permissions',
admin: 'Admin',
adminDescription:
'Full administrator access. Bypasses all permission checks.',
users: 'Manage Users',
usersDescription:
'Grants permission to manage Overseerr users. Users with this permission cannot modify users with Administrator privilege, or grant it.',
settings: 'Manage Settings',
settingsDescription:
'Grants permission to modify all Overseerr settings. User must have this permission to be able to grant it to others.',
managerequests: 'Manage Requests',
managerequestsDescription:
'Grants permission to manage Overseerr requests. This includes approving and denying requests.',
request: 'Request',
requestDescription:
'Grants permission to make requests for movies or tv shows.',
vote: 'Vote',
voteDescription:
'Grants permission to vote on requests (voting not yet implemented)',
autoapprove: 'Auto Approve',
autoapproveDescription:
'Grants auto approval for any requests made by this user.',
save: 'Save',
saving: 'Saving...',
usersaved: 'User succesfully saved',
userfail: 'Something went wrong saving the user.',
});
interface PermissionOption {
id: string;
name: string;
description: string;
permission: Permission;
}
const UserEdit: React.FC = () => {
const router = useRouter();
const intl = useIntl();
const { addToast } = useToasts();
const [isUpdating, setIsUpdating] = useState(false);
const { user: currentUser, hasPermission: currentHasPermission } = useUser();
const { user, error, revalidate } = useUser({
id: Number(router.query.userId),
});
const [currentPermission, setCurrentPermission] = useState(0);
useEffect(() => {
if (currentPermission !== user?.permissions ?? 0) {
setCurrentPermission(user?.permissions ?? 0);
}
// We know what we are doing here.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user]);
const updateUser = async () => {
try {
setIsUpdating(true);
await axios.put(`/api/v1/user/${user?.id}`, {
permissions: currentPermission,
email: user?.email,
avatar: user?.avatar,
});
addToast(intl.formatMessage(messages.usersaved), {
appearance: 'success',
autoDismiss: true,
});
} catch (e) {
addToast(intl.formatMessage(messages.userfail), {
appearance: 'error',
autoDismiss: true,
});
throw new Error(`Something went wrong saving the user: ${e.message}`);
} finally {
revalidate();
setIsUpdating(false);
}
};
if (!user && !error) {
return <LoadingSpinner />;
}
const permissionList: PermissionOption[] = [
{
id: 'admin',
name: intl.formatMessage(messages.admin),
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),
description: intl.formatMessage(messages.usersDescription),
permission: Permission.MANAGE_USERS,
},
{
id: 'managerequest',
name: intl.formatMessage(messages.managerequests),
description: intl.formatMessage(messages.managerequestsDescription),
permission: Permission.MANAGE_REQUESTS,
},
{
id: 'request',
name: intl.formatMessage(messages.request),
description: intl.formatMessage(messages.requestDescription),
permission: Permission.REQUEST,
},
{
id: 'vote',
name: intl.formatMessage(messages.vote),
description: intl.formatMessage(messages.voteDescription),
permission: Permission.VOTE,
},
{
id: 'autoapprove',
name: intl.formatMessage(messages.autoapprove),
description: intl.formatMessage(messages.autoapproveDescription),
permission: Permission.AUTO_APPROVE,
},
];
return (
<div className="py-6 px-4 space-y-6 sm:p-6 lg:pb-8">
<div className="md:flex md:items-center md:justify-between mt-8 mb-6">
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-3xl sm:leading-9 sm:truncate">
<FormattedMessage {...messages.edituser} />
</h2>
</div>
</div>
<div className="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6 text-white">
<div className="flex-grow space-y-6">
<div className="space-y-1">
<label
htmlFor="username"
className="block text-sm font-medium leading-5 text-cool-gray-400"
>
<FormattedMessage {...messages.username} />
</label>
<div className="rounded-md shadow-sm flex">
<input
id="username"
className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
value={user?.username}
readOnly
/>
</div>
</div>
<div className="space-y-1">
<label
htmlFor="email"
className="block text-sm font-medium leading-5 text-cool-gray-400"
>
<FormattedMessage {...messages.email} />
</label>
<div className="rounded-md shadow-sm flex">
<input
id="email"
className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
value={user?.email}
readOnly
/>
</div>
</div>
</div>
<div className="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
<p
className="block text-sm leading-5 font-medium text-cool-gray-400"
aria-hidden="true"
>
<FormattedMessage {...messages.avatar} />
</p>
<div className="lg:hidden">
<div className="flex items-center">
<div
className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12"
aria-hidden="true"
>
<img
className="rounded-full h-full w-full"
src={user?.avatar}
alt=""
/>
</div>
</div>
</div>
<div className="hidden relative rounded-full overflow-hidden lg:block transition duration-150 ease-in-out">
<img
className="relative rounded-full w-40 h-40"
src={user?.avatar}
alt=""
/>
</div>
</div>
</div>
<div className="text-white">
<div className="sm:border-t sm:border-gray-200 sm:pt-5">
<div role="group" aria-labelledby="label-permissions">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
<div>
<div
className="text-base leading-6 font-medium sm:text-sm sm:leading-5"
id="label-permissions"
>
<FormattedMessage {...messages.permissions} />
</div>
</div>
<div className="mt-4 sm:mt-0 sm:col-span-2">
<div className="max-w-lg">
{permissionList.map((permissionOption) => (
<div
className={`relative flex items-start first:mt-0 mt-4 ${
(permissionOption.permission !== Permission.ADMIN &&
hasPermission(Permission.ADMIN, currentPermission)) ||
(currentUser?.id !== 1 &&
permissionOption.permission === Permission.ADMIN) ||
(!currentHasPermission(Permission.MANAGE_SETTINGS) &&
permissionOption.permission ===
Permission.MANAGE_SETTINGS)
? 'opacity-50'
: ''
}`}
key={`permission-option-${permissionOption.id}`}
>
<div className="flex items-center h-5">
<input
id={permissionOption.id}
name="permissions"
type="checkbox"
className="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
disabled={
(permissionOption.permission !== Permission.ADMIN &&
hasPermission(
Permission.ADMIN,
currentPermission
)) ||
(currentUser?.id !== 1 &&
permissionOption.permission ===
Permission.ADMIN) ||
(!currentHasPermission(
Permission.MANAGE_SETTINGS
) &&
permissionOption.permission ===
Permission.MANAGE_SETTINGS)
}
onClick={() => {
setCurrentPermission((current) =>
hasPermission(
permissionOption.permission,
currentPermission
)
? current - permissionOption.permission
: current + permissionOption.permission
);
}}
checked={hasPermission(
permissionOption.permission,
currentPermission
)}
/>
</div>
<div className="ml-3 text-sm leading-5">
<label
htmlFor={permissionOption.id}
className="font-medium"
>
{permissionOption.name}
</label>
<p className="text-gray-500">
{permissionOption.description}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
<div className="mt-8 border-t border-cool-gray-700 pt-5">
<div className="flex justify-end">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"
disabled={isUpdating}
onClick={() => updateUser()}
>
{isUpdating
? intl.formatMessage(messages.saving)
: intl.formatMessage(messages.save)}
</Button>
</span>
</div>
</div>
</div>
</div>
);
};
export default UserEdit;

@ -100,7 +100,10 @@ const UserList: React.FC = () => {
buttonType="warning"
className="mr-2"
onClick={() =>
router.push('/users/[userId]', `/users/${user.id}`)
router.push(
'/users/[userId]/edit',
`/users/${user.id}/edit`
)
}
>
Edit

@ -1,96 +0,0 @@
import React from 'react';
import { useRouter } from 'next/router';
import useSWR from 'swr';
import LoadingSpinner from '../Common/LoadingSpinner';
import type { User } from '../../../server/entity/User';
const UserProfile: React.FC = () => {
const router = useRouter();
const { data, error } = useSWR<User>(`/api/v1/user/${router.query.userId}`);
if (!data && !error) {
return <LoadingSpinner />;
}
return (
<div className="py-6 px-4 space-y-6 sm:p-6 lg:pb-8">
<div className="md:flex md:items-center md:justify-between mt-8 mb-6">
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-3xl sm:leading-9 sm:truncate">
User Profile
</h2>
</div>
</div>
<div className="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6 text-white">
<div className="flex-grow space-y-6">
<div className="space-y-1">
<label
htmlFor="username"
className="block text-sm font-medium leading-5 text-cool-gray-400"
>
Username
</label>
<div className="rounded-md shadow-sm flex">
<input
id="username"
className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
value={data?.username}
readOnly
/>
</div>
</div>
<div className="space-y-1">
<label
htmlFor="email"
className="block text-sm font-medium leading-5 text-cool-gray-400"
>
Email
</label>
<div className="rounded-md shadow-sm flex">
<input
id="email"
className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
value={data?.email}
readOnly
/>
</div>
</div>
</div>
<div className="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
<p
className="block text-sm leading-5 font-medium text-cool-gray-400"
aria-hidden="true"
>
Avatar
</p>
<div className="lg:hidden">
<div className="flex items-center">
<div
className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12"
aria-hidden="true"
>
<img
className="rounded-full h-full w-full"
src={data?.avatar}
alt=""
/>
</div>
</div>
</div>
<div className="hidden relative rounded-full overflow-hidden lg:block transition duration-150 ease-in-out">
<img
className="relative rounded-full w-40 h-40"
src={data?.avatar}
alt=""
/>
</div>
</div>
</div>
</div>
);
};
export default UserProfile;

@ -0,0 +1,16 @@
import { Permission, useUser } from './useUser';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
const useRouteGuard = (permission: Permission | Permission[]): void => {
const router = useRouter();
const { user, hasPermission } = useUser();
useEffect(() => {
if (user && !hasPermission(permission)) {
router.push('/');
}
}, [user, permission, router, hasPermission]);
};
export default useRouteGuard;

@ -1,24 +1,16 @@
import useSwr from 'swr';
import { useRef } from 'react';
import { hasPermission } from '../../server/lib/permissions';
import { hasPermission, Permission } from '../../server/lib/permissions';
export interface User {
id: number;
username: string;
email: string;
avatar: string;
permissions: number;
}
export enum Permission {
NONE = 0,
ADMIN = 2,
MANAGE_SETTINGS = 4,
MANAGE_USERS = 8,
MANAGE_REQUESTS = 16,
REQUEST = 32,
VOTE = 64,
AUTO_APPROVE = 128,
}
export { Permission };
interface UserHookResponse {
user?: User;

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

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

@ -2,8 +2,11 @@ import React from 'react';
import { 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';
const SettingsMainPage: NextPage = () => {
useRouteGuard(Permission.MANAGE_USERS);
return (
<SettingsLayout>
<SettingsMain />

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

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

@ -1,9 +0,0 @@
import React from 'react';
import { NextPage } from 'next';
import UserProfile from '../../components/UserProfile';
const UserProfilePage: NextPage = () => {
return <UserProfile />;
};
export default UserProfilePage;

@ -0,0 +1,12 @@
import React from 'react';
import { NextPage } from 'next';
import UserEdit from '../../../components/UserEdit';
import useRouteGuard from '../../../hooks/useRouteGuard';
import { Permission } from '../../../hooks/useUser';
const UserProfilePage: NextPage = () => {
useRouteGuard(Permission.MANAGE_USERS);
return <UserEdit />;
};
export default UserProfilePage;

@ -1,8 +1,11 @@
import React from 'react';
import type { NextPage } from 'next';
import UserList from '../../components/UserList';
import useRouteGuard from '../../hooks/useRouteGuard';
import { Permission } from '../../hooks/useUser';
const UsersPage: NextPage = () => {
useRouteGuard(Permission.MANAGE_USERS);
return <UserList />;
};

Loading…
Cancel
Save