mirror of
https://github.com/sct/overseerr.git
synced 2025-12-29 00:56:55 +01:00
feat(users): add editable usernames (#715)
This commit is contained in:
Jakob Ankarhem
@@ -82,7 +82,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
|
||||
/>
|
||||
</svg>
|
||||
<span className="w-40 truncate md:w-auto">
|
||||
{request.requestedBy.username}
|
||||
{request.requestedBy.displayName}
|
||||
</span>
|
||||
</div>
|
||||
{request.modifiedBy && (
|
||||
@@ -101,7 +101,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
|
||||
/>
|
||||
</svg>
|
||||
<span className="w-40 truncate md:w-auto">
|
||||
{request.modifiedBy?.username}
|
||||
{request.modifiedBy?.displayName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -108,7 +108,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
|
||||
</h2>
|
||||
<div className="text-xs truncate sm:text-sm">
|
||||
{intl.formatMessage(messages.requestedby, {
|
||||
username: requestData.requestedBy.username,
|
||||
username: requestData.requestedBy.displayName,
|
||||
})}
|
||||
</div>
|
||||
{requestData.media.status && (
|
||||
|
||||
@@ -165,7 +165,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
{intl.formatMessage(messages.requestedby, {
|
||||
username: requestData.requestedBy.username,
|
||||
username: requestData.requestedBy.displayName,
|
||||
})}
|
||||
</div>
|
||||
{requestData.seasons.length > 0 && (
|
||||
@@ -206,7 +206,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
|
||||
<div className="flex flex-col">
|
||||
{requestData.modifiedBy ? (
|
||||
<span className="text-sm text-gray-300">
|
||||
{requestData.modifiedBy.username} (
|
||||
{requestData.modifiedBy.displayName}
|
||||
(
|
||||
<FormattedRelativeTime
|
||||
value={Math.floor(
|
||||
(new Date(requestData.updatedAt).getTime() - Date.now()) /
|
||||
|
||||
@@ -224,7 +224,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
|
||||
{intl.formatMessage(
|
||||
is4k ? messages.request4kfrom : messages.requestfrom,
|
||||
{
|
||||
username: activeRequest.requestedBy.username,
|
||||
username: activeRequest.requestedBy.displayName,
|
||||
}
|
||||
)}
|
||||
{hasPermission(Permission.REQUEST_ADVANCED) && (
|
||||
|
||||
@@ -8,10 +8,14 @@ import axios from 'axios';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import Header from '../Common/Header';
|
||||
import PermissionEdit from '../PermissionEdit';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import { UserType } from '../../../server/constants/user';
|
||||
|
||||
export const messages = defineMessages({
|
||||
edituser: 'Edit User',
|
||||
username: 'Username',
|
||||
plexUsername: 'Plex Username',
|
||||
username: 'Display Name',
|
||||
avatar: 'Avatar',
|
||||
email: 'Email',
|
||||
permissions: 'Permissions',
|
||||
@@ -25,7 +29,6 @@ const UserEdit: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
const { addToast } = useToasts();
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const { user: currentUser } = useUser();
|
||||
const { user, error, revalidate } = useUser({
|
||||
id: Number(router.query.userId),
|
||||
@@ -40,155 +43,184 @@ const UserEdit: React.FC = () => {
|
||||
// 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,
|
||||
});
|
||||
|
||||
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 />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header>
|
||||
<FormattedMessage {...messages.edituser} />
|
||||
</Header>
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col space-y-6 text-white lg:flex-row lg:space-y-0 lg:space-x-6">
|
||||
<div className="flex-grow space-y-6">
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-sm font-medium leading-5 text-gray-400"
|
||||
>
|
||||
<FormattedMessage {...messages.username} />
|
||||
</label>
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
className="flex-grow block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
||||
value={user?.username}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium leading-5 text-gray-400"
|
||||
>
|
||||
<FormattedMessage {...messages.email} />
|
||||
</label>
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<input
|
||||
id="email"
|
||||
type="text"
|
||||
className="flex-grow block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
||||
value={user?.email}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const UserEditSchema = Yup.object().shape({
|
||||
username: Yup.string(),
|
||||
});
|
||||
|
||||
<div className="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
|
||||
<p
|
||||
className="block text-sm font-medium leading-5 text-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 w-12 h-12 overflow-hidden rounded-full"
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
plexUsername: user?.plexUsername,
|
||||
username: user?.username,
|
||||
email: user?.email,
|
||||
}}
|
||||
validationSchema={UserEditSchema}
|
||||
onSubmit={async (values) => {
|
||||
try {
|
||||
await axios.put(`/api/v1/user/${user?.id}`, {
|
||||
permissions: currentPermission,
|
||||
email: user?.email,
|
||||
username: values.username,
|
||||
});
|
||||
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();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit }) => (
|
||||
<Form>
|
||||
<Header>
|
||||
<FormattedMessage {...messages.edituser} />
|
||||
</Header>
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col space-y-6 text-white lg:flex-row lg:space-y-0 lg:space-x-6">
|
||||
<div className="flex-grow space-y-6">
|
||||
{user?.userType === UserType.PLEX && (
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="plexUsername"
|
||||
className="block text-sm font-medium leading-5 text-gray-400"
|
||||
>
|
||||
{intl.formatMessage(messages.plexUsername)}
|
||||
</label>
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<Field
|
||||
id="plexUsername"
|
||||
name="plexUsername"
|
||||
type="text"
|
||||
className="flex-grow block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-sm font-medium leading-5 text-gray-400"
|
||||
>
|
||||
{intl.formatMessage(messages.username)}
|
||||
</label>
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<Field
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
className="flex-grow block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium leading-5 text-gray-400"
|
||||
>
|
||||
<FormattedMessage {...messages.email} />
|
||||
</label>
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
type="text"
|
||||
className="flex-grow block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
|
||||
<p
|
||||
className="block text-sm font-medium leading-5 text-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 w-12 h-12 overflow-hidden rounded-full"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
className="w-full h-full rounded-full"
|
||||
src={user?.avatar}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative hidden overflow-hidden transition duration-150 ease-in-out rounded-full lg:block">
|
||||
<img
|
||||
className="w-full h-full rounded-full"
|
||||
className="relative w-40 h-40 rounded-full"
|
||||
src={user?.avatar}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative hidden overflow-hidden transition duration-150 ease-in-out rounded-full lg:block">
|
||||
<img
|
||||
className="relative w-40 h-40 rounded-full"
|
||||
src={user?.avatar}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-white">
|
||||
<div className="sm:border-t sm:border-gray-200">
|
||||
<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 font-medium leading-6 sm:text-sm sm:leading-5"
|
||||
id="label-permissions"
|
||||
>
|
||||
<FormattedMessage {...messages.permissions} />
|
||||
<div className="text-white">
|
||||
<div className="sm:border-t sm:border-gray-200">
|
||||
<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 font-medium leading-6 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">
|
||||
<PermissionEdit
|
||||
user={currentUser}
|
||||
currentPermission={currentPermission}
|
||||
onUpdate={(newPermission) =>
|
||||
setCurrentPermission(newPermission)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 sm:mt-0 sm:col-span-2">
|
||||
<div className="max-w-lg">
|
||||
<PermissionEdit
|
||||
user={currentUser}
|
||||
currentPermission={currentPermission}
|
||||
onUpdate={(newPermission) =>
|
||||
setCurrentPermission(newPermission)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-5 mt-8 border-t border-gray-700">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
onClick={() => handleSubmit}
|
||||
>
|
||||
{isSubmitting
|
||||
? intl.formatMessage(messages.saving)
|
||||
: intl.formatMessage(messages.save)}
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-5 mt-8 border-t border-gray-700">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 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>
|
||||
</>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -452,7 +452,7 @@ const UserList: React.FC = () => {
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium leading-5">
|
||||
{user.username}
|
||||
{user.displayName}
|
||||
</div>
|
||||
<div className="text-sm leading-5 text-gray-300">
|
||||
{user.email}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { User, useUser } from '../hooks/useUser';
|
||||
import { useUser, User } from '../hooks/useUser';
|
||||
import { useRouter } from 'next/dist/client/router';
|
||||
|
||||
interface UserContextProps {
|
||||
|
||||
@@ -2,17 +2,19 @@ import useSwr from 'swr';
|
||||
import { hasPermission, Permission } from '../../server/lib/permissions';
|
||||
import { UserType } from '../../server/constants/user';
|
||||
|
||||
export { Permission, UserType };
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
plexUsername?: string;
|
||||
username?: string;
|
||||
displayName: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
permissions: number;
|
||||
userType: number;
|
||||
}
|
||||
|
||||
export { Permission, UserType };
|
||||
|
||||
interface UserHookResponse {
|
||||
user?: User;
|
||||
loading: boolean;
|
||||
|
||||
@@ -508,7 +508,7 @@
|
||||
"components.UserEdit.save": "Save",
|
||||
"components.UserEdit.saving": "Saving…",
|
||||
"components.UserEdit.userfail": "Something went wrong saving the user.",
|
||||
"components.UserEdit.username": "Username",
|
||||
"components.UserEdit.username": "Display Name",
|
||||
"components.UserEdit.usersaved": "User saved",
|
||||
"components.UserList.admin": "Admin",
|
||||
"components.UserList.autogeneratepassword": "Automatically generate password",
|
||||
|
||||
Reference in New Issue
Block a user