mirror of
https://github.com/sct/overseerr.git
synced 2025-12-30 01:32:38 +01:00
feat: user profile/settings pages (#958)
This commit is contained in:
sct
120
src/components/UserProfile/ProfileHeader/index.tsx
Normal file
120
src/components/UserProfile/ProfileHeader/index.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Permission, User, useUser } from '../../../hooks/useUser';
|
||||
import Button from '../../Common/Button';
|
||||
|
||||
const messages = defineMessages({
|
||||
settings: 'Edit Settings',
|
||||
profile: 'View Profile',
|
||||
});
|
||||
|
||||
interface ProfileHeaderProps {
|
||||
user: User;
|
||||
isSettingsPage?: boolean;
|
||||
}
|
||||
|
||||
const ProfileHeader: React.FC<ProfileHeaderProps> = ({
|
||||
user,
|
||||
isSettingsPage,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const { user: loggedInUser, hasPermission } = useUser();
|
||||
|
||||
return (
|
||||
<div className="relative z-40 mt-6 mb-12 md:flex md:items-end md:justify-between md:space-x-5">
|
||||
<div className="flex items-end space-x-5 justify-items-end">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="relative">
|
||||
<img
|
||||
className="w-24 h-24 bg-gray-600 rounded-full"
|
||||
src={user.avatar}
|
||||
alt=""
|
||||
/>
|
||||
<span
|
||||
className="absolute inset-0 rounded-full shadow-inner"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-1.5">
|
||||
<h1 className="flex flex-col mb-1 sm:items-center sm:flex-row">
|
||||
<Link
|
||||
href={
|
||||
user.id === loggedInUser?.id ? '/profile' : `/users/${user.id}`
|
||||
}
|
||||
>
|
||||
<a className="text-lg font-bold text-transparent sm:text-2xl bg-clip-text bg-gradient-to-br from-indigo-400 to-purple-400 hover:to-purple-200">
|
||||
{user.displayName}
|
||||
</a>
|
||||
</Link>
|
||||
{user.email && (
|
||||
<span className="text-sm text-gray-400 sm:text-lg sm:ml-2">
|
||||
({user.email})
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-gray-400">
|
||||
Joined {intl.formatDate(user.createdAt)} |{' '}
|
||||
{intl.formatNumber(user.requestCount)} Requests
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col-reverse mt-6 space-y-4 space-y-reverse justify-stretch sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
|
||||
{(loggedInUser?.id === user.id ||
|
||||
hasPermission(Permission.MANAGE_USERS)) &&
|
||||
!isSettingsPage ? (
|
||||
<Link
|
||||
href={
|
||||
loggedInUser?.id === user.id
|
||||
? `/profile/settings`
|
||||
: `/users/${user.id}/settings`
|
||||
}
|
||||
passHref
|
||||
>
|
||||
<Button as="a">
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{intl.formatMessage(messages.settings)}
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href={
|
||||
loggedInUser?.id === user.id ? `/profile` : `/users/${user.id}`
|
||||
}
|
||||
passHref
|
||||
>
|
||||
<Button as="a">
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{intl.formatMessage(messages.profile)}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileHeader;
|
||||
@@ -0,0 +1,135 @@
|
||||
import axios from 'axios';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import useSWR from 'swr';
|
||||
import { UserType, useUser } from '../../../../hooks/useUser';
|
||||
import Error from '../../../../pages/_error';
|
||||
import Badge from '../../../Common/Badge';
|
||||
import Button from '../../../Common/Button';
|
||||
import LoadingSpinner from '../../../Common/LoadingSpinner';
|
||||
|
||||
const messages = defineMessages({
|
||||
generalsettings: 'General Settings',
|
||||
displayName: 'Display Name',
|
||||
save: 'Save Changes',
|
||||
saving: 'Saving…',
|
||||
plexuser: 'Plex User',
|
||||
localuser: 'Local User',
|
||||
toastSettingsSuccess: 'Settings successfully saved!',
|
||||
toastSettingsFailure: 'Something went wrong while saving settings.',
|
||||
});
|
||||
|
||||
const UserGeneralSettings: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { addToast } = useToasts();
|
||||
const router = useRouter();
|
||||
const { user, mutate } = useUser({ id: Number(router.query.userId) });
|
||||
const { data, error, revalidate } = useSWR<{ username?: string }>(
|
||||
user ? `/api/v1/user/${user?.id}/settings/main` : null
|
||||
);
|
||||
|
||||
if (!data && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.generalsettings)}
|
||||
</h3>
|
||||
</div>
|
||||
<Formik
|
||||
initialValues={{
|
||||
displayName: data?.username,
|
||||
}}
|
||||
enableReinitialize
|
||||
onSubmit={async (values) => {
|
||||
try {
|
||||
await axios.post(`/api/v1/user/${user?.id}/settings/main`, {
|
||||
username: values.displayName,
|
||||
});
|
||||
|
||||
addToast(intl.formatMessage(messages.toastSettingsSuccess), {
|
||||
autoDismiss: true,
|
||||
appearance: 'success',
|
||||
});
|
||||
} catch (e) {
|
||||
addToast(intl.formatMessage(messages.toastSettingsFailure), {
|
||||
autoDismiss: true,
|
||||
appearance: 'error',
|
||||
});
|
||||
} finally {
|
||||
revalidate();
|
||||
mutate();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ errors, touched, isSubmitting }) => {
|
||||
return (
|
||||
<Form className="section">
|
||||
<div className="form-row">
|
||||
<div className="text-label">Account Type</div>
|
||||
<div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
|
||||
<div className="flex items-center max-w-lg">
|
||||
{user?.userType === UserType.PLEX ? (
|
||||
<Badge badgeType="warning">
|
||||
{intl.formatMessage(messages.plexuser)}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge badgeType="default">
|
||||
{intl.formatMessage(messages.localuser)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="displayName" className="text-label">
|
||||
{intl.formatMessage(messages.displayName)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<Field
|
||||
id="displayName"
|
||||
name="displayName"
|
||||
type="text"
|
||||
placeholder={user?.displayName}
|
||||
/>
|
||||
</div>
|
||||
{errors.displayName && touched.displayName && (
|
||||
<div className="error">{errors.displayName}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? intl.formatMessage(messages.saving)
|
||||
: intl.formatMessage(messages.save)}
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserGeneralSettings;
|
||||
@@ -0,0 +1,134 @@
|
||||
import axios from 'axios';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import useSWR from 'swr';
|
||||
import { useUser } from '../../../../hooks/useUser';
|
||||
import Error from '../../../../pages/_error';
|
||||
import Button from '../../../Common/Button';
|
||||
import LoadingSpinner from '../../../Common/LoadingSpinner';
|
||||
import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
|
||||
|
||||
const messages = defineMessages({
|
||||
notificationsettings: 'Notification Settings',
|
||||
enableNotifications: 'Enable Notifications',
|
||||
discordId: 'Discord ID',
|
||||
save: 'Save Changes',
|
||||
saving: 'Saving…',
|
||||
plexuser: 'Plex User',
|
||||
localuser: 'Local User',
|
||||
toastSettingsSuccess: 'Settings successfully saved!',
|
||||
toastSettingsFailure: 'Something went wrong while saving settings.',
|
||||
});
|
||||
|
||||
const UserNotificationSettings: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { addToast } = useToasts();
|
||||
const router = useRouter();
|
||||
const { user, mutate } = useUser({ id: Number(router.query.userId) });
|
||||
const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
|
||||
user ? `/api/v1/user/${user?.id}/settings/notifications` : null
|
||||
);
|
||||
|
||||
if (!data && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.notificationsettings)}
|
||||
</h3>
|
||||
</div>
|
||||
<Formik
|
||||
initialValues={{
|
||||
enableNotifications: data?.enableNotifications,
|
||||
discordId: data?.discordId,
|
||||
}}
|
||||
enableReinitialize
|
||||
onSubmit={async (values) => {
|
||||
try {
|
||||
await axios.post(
|
||||
`/api/v1/user/${user?.id}/settings/notifications`,
|
||||
{
|
||||
enableNotifications: values.enableNotifications,
|
||||
discordId: values.discordId,
|
||||
}
|
||||
);
|
||||
|
||||
addToast(intl.formatMessage(messages.toastSettingsSuccess), {
|
||||
autoDismiss: true,
|
||||
appearance: 'success',
|
||||
});
|
||||
} catch (e) {
|
||||
addToast(intl.formatMessage(messages.toastSettingsFailure), {
|
||||
autoDismiss: true,
|
||||
appearance: 'error',
|
||||
});
|
||||
} finally {
|
||||
revalidate();
|
||||
mutate();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ errors, touched, isSubmitting }) => {
|
||||
return (
|
||||
<Form className="section">
|
||||
<div className="form-row">
|
||||
<label htmlFor="enableNotifications" className="checkbox-label">
|
||||
<span className="mr-2">
|
||||
{intl.formatMessage(messages.enableNotifications)}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<Field
|
||||
type="checkbox"
|
||||
id="enableNotifications"
|
||||
name="enableNotifications"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="discordId" className="text-label">
|
||||
{intl.formatMessage(messages.discordId)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<Field id="discordId" name="discordId" type="text" />
|
||||
</div>
|
||||
{errors.discordId && touched.discordId && (
|
||||
<div className="error">{errors.discordId}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? intl.formatMessage(messages.saving)
|
||||
: intl.formatMessage(messages.save)}
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserNotificationSettings;
|
||||
@@ -0,0 +1,192 @@
|
||||
import axios from 'axios';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import useSWR from 'swr';
|
||||
import { useUser } from '../../../../hooks/useUser';
|
||||
import Error from '../../../../pages/_error';
|
||||
import Alert from '../../../Common/Alert';
|
||||
import Button from '../../../Common/Button';
|
||||
import LoadingSpinner from '../../../Common/LoadingSpinner';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
const messages = defineMessages({
|
||||
password: 'Password',
|
||||
currentpassword: 'Current Password',
|
||||
newpassword: 'New Password',
|
||||
confirmpassword: 'Confirm Password',
|
||||
save: 'Save Changes',
|
||||
saving: 'Saving…',
|
||||
toastSettingsSuccess: 'Password changed!',
|
||||
toastSettingsFailure:
|
||||
'Something went wrong while changing the password. Is your current password correct?',
|
||||
validationCurrentPassword: 'You must provide your current password',
|
||||
validationNewPassword: 'You must provide a new password',
|
||||
validationNewPasswordLength:
|
||||
'Password is too short; should be a minimum of 8 characters',
|
||||
validationConfirmPassword: 'You must confirm your new password',
|
||||
validationConfirmPasswordSame: 'Password must match',
|
||||
nopasswordset: 'No Password Set',
|
||||
nopasswordsetDescription:
|
||||
'This user account currently does not have an Overseerr-specific password. Configure a password below to allow this account to sign-in as a "local user."',
|
||||
});
|
||||
|
||||
const UserPasswordChange: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { addToast } = useToasts();
|
||||
const router = useRouter();
|
||||
const { user: currentUser } = useUser();
|
||||
const { user } = useUser({ id: Number(router.query.userId) });
|
||||
const { data, error, revalidate } = useSWR<{ hasPassword: boolean }>(
|
||||
user ? `/api/v1/user/${user?.id}/settings/password` : null
|
||||
);
|
||||
|
||||
const PasswordChangeSchema = Yup.object().shape({
|
||||
currentPassword: Yup.lazy(() =>
|
||||
data?.hasPassword
|
||||
? Yup.string().required(
|
||||
intl.formatMessage(messages.validationCurrentPassword)
|
||||
)
|
||||
: Yup.mixed().optional()
|
||||
),
|
||||
newPassword: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationNewPassword))
|
||||
.min(8, intl.formatMessage(messages.validationNewPasswordLength)),
|
||||
confirmPassword: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationConfirmPassword))
|
||||
.oneOf(
|
||||
[Yup.ref('newPassword'), null],
|
||||
intl.formatMessage(messages.validationConfirmPasswordSame)
|
||||
),
|
||||
});
|
||||
|
||||
if (!data && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<h3 className="heading">{intl.formatMessage(messages.password)}</h3>
|
||||
</div>
|
||||
<Formik
|
||||
initialValues={{
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
}}
|
||||
validationSchema={PasswordChangeSchema}
|
||||
enableReinitialize
|
||||
onSubmit={async (values, { resetForm }) => {
|
||||
try {
|
||||
await axios.post(`/api/v1/user/${user?.id}/settings/password`, {
|
||||
currentPassword: values.currentPassword,
|
||||
newPassword: values.newPassword,
|
||||
confirmPassword: values.confirmPassword,
|
||||
});
|
||||
|
||||
addToast(intl.formatMessage(messages.toastSettingsSuccess), {
|
||||
autoDismiss: true,
|
||||
appearance: 'success',
|
||||
});
|
||||
} catch (e) {
|
||||
addToast(intl.formatMessage(messages.toastSettingsFailure), {
|
||||
autoDismiss: true,
|
||||
appearance: 'error',
|
||||
});
|
||||
} finally {
|
||||
revalidate();
|
||||
resetForm();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ errors, touched, isSubmitting }) => {
|
||||
return (
|
||||
<Form className="section">
|
||||
{!data.hasPassword && (
|
||||
<Alert
|
||||
type="warning"
|
||||
title={intl.formatMessage(messages.nopasswordset)}
|
||||
>
|
||||
{intl.formatMessage(messages.nopasswordsetDescription)}
|
||||
</Alert>
|
||||
)}
|
||||
{data.hasPassword && user?.id === currentUser?.id && (
|
||||
<div className="pb-6 form-row">
|
||||
<label htmlFor="currentPassword" className="text-label">
|
||||
{intl.formatMessage(messages.currentpassword)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<Field
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
{errors.currentPassword && touched.currentPassword && (
|
||||
<div className="error">{errors.currentPassword}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-row">
|
||||
<label htmlFor="newPassword" className="text-label">
|
||||
{intl.formatMessage(messages.newpassword)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<Field id="newPassword" name="newPassword" type="text" />
|
||||
</div>
|
||||
{errors.newPassword && touched.newPassword && (
|
||||
<div className="error">{errors.newPassword}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="confirmPassword" className="text-label">
|
||||
{intl.formatMessage(messages.confirmpassword)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<Field
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
{errors.confirmPassword && touched.confirmPassword && (
|
||||
<div className="error">{errors.confirmPassword}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? intl.formatMessage(messages.saving)
|
||||
: intl.formatMessage(messages.save)}
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPasswordChange;
|
||||
@@ -0,0 +1,122 @@
|
||||
import axios from 'axios';
|
||||
import { Form, Formik } from 'formik';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import useSWR from 'swr';
|
||||
import { useUser } from '../../../../hooks/useUser';
|
||||
import Error from '../../../../pages/_error';
|
||||
import Button from '../../../Common/Button';
|
||||
import LoadingSpinner from '../../../Common/LoadingSpinner';
|
||||
import PermissionEdit from '../../../PermissionEdit';
|
||||
|
||||
const messages = defineMessages({
|
||||
displayName: 'Display Name',
|
||||
save: 'Save Changes',
|
||||
saving: 'Saving…',
|
||||
plexuser: 'Plex User',
|
||||
localuser: 'Local User',
|
||||
toastSettingsSuccess: 'Settings successfully saved!',
|
||||
toastSettingsFailure: 'Something went wrong while saving settings.',
|
||||
permissions: 'Permissions',
|
||||
});
|
||||
|
||||
const UserPermissions: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { addToast } = useToasts();
|
||||
const router = useRouter();
|
||||
const { user: currentUser } = useUser();
|
||||
const { user, mutate } = useUser({ id: Number(router.query.userId) });
|
||||
const { data, error, revalidate } = useSWR<{ permissions?: number }>(
|
||||
user ? `/api/v1/user/${user?.id}/settings/permissions` : null
|
||||
);
|
||||
|
||||
if (!data && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<h3 className="heading">{intl.formatMessage(messages.permissions)}</h3>
|
||||
</div>
|
||||
<Formik
|
||||
initialValues={{
|
||||
currentPermissions: data?.permissions,
|
||||
}}
|
||||
enableReinitialize
|
||||
onSubmit={async (values) => {
|
||||
try {
|
||||
await axios.post(`/api/v1/user/${user?.id}/settings/permissions`, {
|
||||
permissions: values.currentPermissions ?? 0,
|
||||
});
|
||||
|
||||
addToast(intl.formatMessage(messages.toastSettingsSuccess), {
|
||||
autoDismiss: true,
|
||||
appearance: 'success',
|
||||
});
|
||||
} catch (e) {
|
||||
addToast(intl.formatMessage(messages.toastSettingsFailure), {
|
||||
autoDismiss: true,
|
||||
appearance: 'error',
|
||||
});
|
||||
} finally {
|
||||
revalidate();
|
||||
mutate();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, setFieldValue, values }) => {
|
||||
return (
|
||||
<Form className="section">
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.permissions)}
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<PermissionEdit
|
||||
user={currentUser}
|
||||
currentPermission={values.currentPermissions ?? 0}
|
||||
onUpdate={(newPermission) =>
|
||||
setFieldValue('currentPermissions', newPermission)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
<Button
|
||||
buttonType="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? intl.formatMessage(messages.saving)
|
||||
: intl.formatMessage(messages.save)}
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPermissions;
|
||||
172
src/components/UserProfile/UserSettings/index.tsx
Normal file
172
src/components/UserProfile/UserSettings/index.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Permission, useUser } from '../../../hooks/useUser';
|
||||
import Error from '../../../pages/_error';
|
||||
import LoadingSpinner from '../../Common/LoadingSpinner';
|
||||
import PageTitle from '../../Common/PageTitle';
|
||||
import ProfileHeader from '../ProfileHeader';
|
||||
|
||||
const messages = defineMessages({
|
||||
settings: 'User Settings',
|
||||
menuGeneralSettings: 'General Settings',
|
||||
menuChangePass: 'Password',
|
||||
menuNotifications: 'Notifications',
|
||||
menuPermissions: 'Permissions',
|
||||
});
|
||||
|
||||
interface SettingsRoute {
|
||||
text: string;
|
||||
route: string;
|
||||
regex: RegExp;
|
||||
requiredPermission?: Permission | Permission[];
|
||||
permissionType?: { type: 'and' | 'or' };
|
||||
}
|
||||
|
||||
const UserSettings: React.FC = ({ children }) => {
|
||||
const router = useRouter();
|
||||
const { hasPermission } = useUser();
|
||||
const { user, error } = useUser({ id: Number(router.query.userId) });
|
||||
const intl = useIntl();
|
||||
|
||||
if (!user && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
const settingsRoutes: SettingsRoute[] = [
|
||||
{
|
||||
text: intl.formatMessage(messages.menuGeneralSettings),
|
||||
route: '/settings/main',
|
||||
regex: /\/settings(\/main)?$/,
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.menuChangePass),
|
||||
route: '/settings/password',
|
||||
regex: /\/settings\/password/,
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.menuNotifications),
|
||||
route: '/settings/notifications',
|
||||
regex: /\/settings\/notifications/,
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.menuPermissions),
|
||||
route: '/settings/permissions',
|
||||
regex: /\/settings\/permissions/,
|
||||
requiredPermission: Permission.MANAGE_USERS,
|
||||
},
|
||||
];
|
||||
|
||||
const activeLinkColor =
|
||||
'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
|
||||
|
||||
const inactiveLinkColor =
|
||||
'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
|
||||
|
||||
const SettingsLink: React.FC<{
|
||||
route: string;
|
||||
regex: RegExp;
|
||||
isMobile?: boolean;
|
||||
}> = ({ children, route, regex, isMobile = false }) => {
|
||||
const finalRoute = router.asPath.includes('/profile')
|
||||
? `/profile${route}`
|
||||
: `/users/${user.id}${route}`;
|
||||
if (isMobile) {
|
||||
return <option value={finalRoute}>{children}</option>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={finalRoute}>
|
||||
<a
|
||||
className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
|
||||
router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
|
||||
}`}
|
||||
aria-current="page"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const currentRoute = settingsRoutes.find(
|
||||
(route) => !!router.pathname.match(route.regex)
|
||||
)?.route;
|
||||
|
||||
const finalRoute = router.asPath.includes('/profile')
|
||||
? `/profile${currentRoute}`
|
||||
: `/users/${user.id}${currentRoute}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={intl.formatMessage(messages.settings)} />
|
||||
<ProfileHeader user={user} isSettingsPage />
|
||||
<div className="mt-6">
|
||||
<div className="sm:hidden">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
router.push(e.target.value);
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
router.push(e.target.value);
|
||||
}}
|
||||
defaultValue={finalRoute}
|
||||
aria-label="Selected tab"
|
||||
>
|
||||
{settingsRoutes
|
||||
.filter((route) =>
|
||||
route.requiredPermission
|
||||
? hasPermission(
|
||||
route.requiredPermission,
|
||||
route.permissionType
|
||||
)
|
||||
: true
|
||||
)
|
||||
.map((route, index) => (
|
||||
<SettingsLink
|
||||
route={route.route}
|
||||
regex={route.regex}
|
||||
isMobile
|
||||
key={`mobile-settings-link-${index}`}
|
||||
>
|
||||
{route.text}
|
||||
</SettingsLink>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<div className="border-b border-gray-600">
|
||||
<nav className="flex -mb-px">
|
||||
{settingsRoutes
|
||||
.filter((route) =>
|
||||
route.requiredPermission
|
||||
? hasPermission(
|
||||
route.requiredPermission,
|
||||
route.permissionType
|
||||
)
|
||||
: true
|
||||
)
|
||||
.map((route, index) => (
|
||||
<SettingsLink
|
||||
route={route.route}
|
||||
regex={route.regex}
|
||||
key={`standard-settings-link-${index}`}
|
||||
>
|
||||
{route.text}
|
||||
</SettingsLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 text-white">{children}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserSettings;
|
||||
105
src/components/UserProfile/index.tsx
Normal file
105
src/components/UserProfile/index.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { useUser } from '../../hooks/useUser';
|
||||
import Error from '../../pages/_error';
|
||||
import LoadingSpinner from '../Common/LoadingSpinner';
|
||||
import { UserRequestsResponse } from '../../../server/interfaces/api/userInterfaces';
|
||||
import Slider from '../Slider';
|
||||
import RequestCard from '../RequestCard';
|
||||
import { MovieDetails } from '../../../server/models/Movie';
|
||||
import { TvDetails } from '../../../server/models/Tv';
|
||||
import ImageFader from '../Common/ImageFader';
|
||||
import PageTitle from '../Common/PageTitle';
|
||||
import ProfileHeader from './ProfileHeader';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
const messages = defineMessages({
|
||||
recentrequests: 'Recent Requests',
|
||||
});
|
||||
|
||||
type MediaTitle = MovieDetails | TvDetails;
|
||||
|
||||
const UserProfile: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const router = useRouter();
|
||||
const { user, error } = useUser({
|
||||
id: Number(router.query.userId),
|
||||
});
|
||||
const [availableTitles, setAvailableTitles] = useState<
|
||||
Record<number, MediaTitle>
|
||||
>({});
|
||||
|
||||
const { data: requests, error: requestError } = useSWR<UserRequestsResponse>(
|
||||
user ? `/api/v1/user/${user?.id}/requests?take=10&skip=0` : null
|
||||
);
|
||||
|
||||
const updateAvailableTitles = useCallback(
|
||||
(requestId: number, mediaTitle: MediaTitle) => {
|
||||
setAvailableTitles((titles) => ({
|
||||
...titles,
|
||||
[requestId]: mediaTitle,
|
||||
}));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setAvailableTitles({});
|
||||
}, [user?.id]);
|
||||
|
||||
if (!user && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Error statusCode={404} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={user.displayName} />
|
||||
{Object.keys(availableTitles).length > 0 && (
|
||||
<div className="absolute left-0 right-0 z-0 -top-16 h-96">
|
||||
<ImageFader
|
||||
key={user.id}
|
||||
isDarker
|
||||
backgroundImages={Object.values(availableTitles)
|
||||
.filter((media) => media.backdropPath)
|
||||
.map(
|
||||
(media) =>
|
||||
`//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${media.backdropPath}`
|
||||
)
|
||||
.slice(0, 6)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<ProfileHeader user={user} />
|
||||
<div className="relative z-40 mt-6 mb-4 md:flex md:items-center md:justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
|
||||
<span>{intl.formatMessage(messages.recentrequests)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative z-40">
|
||||
<Slider
|
||||
sliderKey="requests"
|
||||
isLoading={!requests && !requestError}
|
||||
isEmpty={!!requests && !requestError && requests.results.length === 0}
|
||||
items={(requests?.results ?? []).map((request) => (
|
||||
<RequestCard
|
||||
key={`request-slider-item-${request.id}`}
|
||||
request={request}
|
||||
onTitleData={updateAvailableTitles}
|
||||
/>
|
||||
))}
|
||||
placeholder={<RequestCard.Placeholder />}
|
||||
emptyMessage={'No Requests'}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile;
|
||||
Reference in New Issue
Block a user