mirror of
https://github.com/fallenbagel/jellyseerr.git
synced 2026-01-01 04:08:45 -05:00
feat: add linked accounts page (#883)
* feat(linked-accounts): create page and display linked media server accounts * feat(dropdown): add new shared Dropdown component Adds a shared component for plain dropdown menus, based on the headlessui Menu component. Updates the `ButtonWithDropdown` component to use the same inner components, ensuring that the only difference between the two components is the trigger button, and both use the same components for the actual dropdown menu. * refactor(modal): add support for configuring button props * feat(linked-accounts): add support for linking/unlinking jellyfin accounts * feat(linked-accounts): support linking/unlinking plex accounts * fix(linked-accounts): probibit unlinking accounts in certain cases Prevents the primary administrator from unlinking their media server account (which would break sync). Additionally, prevents users without a configured local email and password from unlinking their accounts, which would render them unable to log in. * feat(linked-accounts): support linking/unlinking emby accounts * style(dropdown): improve style class application * fix(server): improve error handling and API spec * style(usersettings): improve syntax & performance of user password checks * style(linkedaccounts): use applicationName in page description * fix(linkedaccounts): resolve typo * refactor(app): remove RequestError class
This commit is contained in:
Michael Thomas
@@ -0,0 +1,188 @@
|
||||
import Alert from '@app/components/Common/Alert';
|
||||
import Modal from '@app/components/Common/Modal';
|
||||
import useSettings from '@app/hooks/useSettings';
|
||||
import { useUser } from '@app/hooks/useUser';
|
||||
import defineMessages from '@app/utils/defineMessages';
|
||||
import { Transition } from '@headlessui/react';
|
||||
import { MediaServerType } from '@server/constants/server';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { useState } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
const messages = defineMessages(
|
||||
'components.UserProfile.UserSettings.LinkJellyfinModal',
|
||||
{
|
||||
title: 'Link {mediaServerName} Account',
|
||||
description:
|
||||
'Enter your {mediaServerName} credentials to link your account with {applicationName}.',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
usernameRequired: 'You must provide a username',
|
||||
passwordRequired: 'You must provide a password',
|
||||
saving: 'Adding…',
|
||||
save: 'Link',
|
||||
errorUnauthorized:
|
||||
'Unable to connect to {mediaServerName} using your credentials',
|
||||
errorExists: 'This account is already linked to a {applicationName} user',
|
||||
errorUnknown: 'An unknown error occurred',
|
||||
}
|
||||
);
|
||||
|
||||
interface LinkJellyfinModalProps {
|
||||
show: boolean;
|
||||
onClose: () => void;
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
const LinkJellyfinModal: React.FC<LinkJellyfinModalProps> = ({
|
||||
show,
|
||||
onClose,
|
||||
onSave,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const settings = useSettings();
|
||||
const { user } = useUser();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const JellyfinLoginSchema = Yup.object().shape({
|
||||
username: Yup.string().required(
|
||||
intl.formatMessage(messages.usernameRequired)
|
||||
),
|
||||
password: Yup.string().required(
|
||||
intl.formatMessage(messages.passwordRequired)
|
||||
),
|
||||
});
|
||||
|
||||
const applicationName = settings.currentSettings.applicationTitle;
|
||||
const mediaServerName =
|
||||
settings.currentSettings.mediaServerType === MediaServerType.EMBY
|
||||
? 'Emby'
|
||||
: 'Jellyfin';
|
||||
|
||||
return (
|
||||
<Transition
|
||||
appear
|
||||
show={show}
|
||||
enter="transition ease-in-out duration-300 transform opacity-0"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacuty-100"
|
||||
leave="transition ease-in-out duration-300 transform opacity-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Formik
|
||||
initialValues={{
|
||||
username: '',
|
||||
password: '',
|
||||
}}
|
||||
validationSchema={JellyfinLoginSchema}
|
||||
onSubmit={async ({ username, password }) => {
|
||||
try {
|
||||
setError(null);
|
||||
const res = await fetch(
|
||||
`/api/v1/user/${user?.id}/settings/linked-accounts/jellyfin`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
password,
|
||||
}),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
if (res.status === 401) {
|
||||
setError(
|
||||
intl.formatMessage(messages.errorUnauthorized, {
|
||||
mediaServerName,
|
||||
})
|
||||
);
|
||||
} else if (res.status === 422) {
|
||||
setError(
|
||||
intl.formatMessage(messages.errorExists, { applicationName })
|
||||
);
|
||||
} else {
|
||||
setError(intl.formatMessage(messages.errorUnknown));
|
||||
}
|
||||
} else {
|
||||
onSave();
|
||||
}
|
||||
} catch (e) {
|
||||
setError(intl.formatMessage(messages.errorUnknown));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ errors, touched, handleSubmit, isSubmitting, isValid }) => {
|
||||
return (
|
||||
<Modal
|
||||
onCancel={() => {
|
||||
setError(null);
|
||||
onClose();
|
||||
}}
|
||||
okButtonType="primary"
|
||||
okButtonProps={{ type: 'submit', form: 'link-jellyfin-account' }}
|
||||
okText={
|
||||
isSubmitting
|
||||
? intl.formatMessage(messages.saving)
|
||||
: intl.formatMessage(messages.save)
|
||||
}
|
||||
okDisabled={isSubmitting || !isValid}
|
||||
onOk={() => handleSubmit()}
|
||||
title={intl.formatMessage(messages.title, { mediaServerName })}
|
||||
dialogClass="sm:max-w-lg"
|
||||
>
|
||||
<Form id="link-jellyfin-account">
|
||||
{intl.formatMessage(messages.description, {
|
||||
mediaServerName,
|
||||
applicationName,
|
||||
})}
|
||||
{error && (
|
||||
<div className="mt-2">
|
||||
<Alert type="error">{error}</Alert>
|
||||
</div>
|
||||
)}
|
||||
<label htmlFor="username" className="text-label">
|
||||
{intl.formatMessage(messages.username)}
|
||||
</label>
|
||||
<div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<Field
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
placeholder={intl.formatMessage(messages.username)}
|
||||
/>
|
||||
</div>
|
||||
{errors.username && touched.username && (
|
||||
<div className="error">{errors.username}</div>
|
||||
)}
|
||||
</div>
|
||||
<label htmlFor="password" className="text-label">
|
||||
{intl.formatMessage(messages.password)}
|
||||
</label>
|
||||
<div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<Field
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage(messages.password)}
|
||||
/>
|
||||
</div>
|
||||
{errors.password && touched.password && (
|
||||
<div className="error">{errors.password}</div>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</Transition>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinkJellyfinModal;
|
||||
@@ -0,0 +1,276 @@
|
||||
import EmbyLogo from '@app/assets/services/emby-icon-only.svg';
|
||||
import JellyfinLogo from '@app/assets/services/jellyfin-icon.svg';
|
||||
import PlexLogo from '@app/assets/services/plex.svg';
|
||||
import Alert from '@app/components/Common/Alert';
|
||||
import ConfirmButton from '@app/components/Common/ConfirmButton';
|
||||
import Dropdown from '@app/components/Common/Dropdown';
|
||||
import PageTitle from '@app/components/Common/PageTitle';
|
||||
import useSettings from '@app/hooks/useSettings';
|
||||
import { Permission, UserType, useUser } from '@app/hooks/useUser';
|
||||
import globalMessages from '@app/i18n/globalMessages';
|
||||
import defineMessages from '@app/utils/defineMessages';
|
||||
import PlexOAuth from '@app/utils/plex';
|
||||
import { TrashIcon } from '@heroicons/react/24/solid';
|
||||
import { MediaServerType } from '@server/constants/server';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import useSWR from 'swr';
|
||||
import LinkJellyfinModal from './LinkJellyfinModal';
|
||||
|
||||
const messages = defineMessages(
|
||||
'components.UserProfile.UserSettings.UserLinkedAccountsSettings',
|
||||
{
|
||||
linkedAccounts: 'Linked Accounts',
|
||||
linkedAccountsHint:
|
||||
'These external accounts are linked to your {applicationName} account.',
|
||||
noLinkedAccounts:
|
||||
'You do not have any external accounts linked to your account.',
|
||||
noPermissionDescription:
|
||||
"You do not have permission to modify this user's linked accounts.",
|
||||
plexErrorUnauthorized: 'Unable to connect to Plex using your credentials',
|
||||
plexErrorExists: 'This account is already linked to a Plex user',
|
||||
errorUnknown: 'An unknown error occurred',
|
||||
deleteFailed: 'Unable to delete linked account.',
|
||||
}
|
||||
);
|
||||
|
||||
const plexOAuth = new PlexOAuth();
|
||||
|
||||
enum LinkedAccountType {
|
||||
Plex = 'Plex',
|
||||
Jellyfin = 'Jellyfin',
|
||||
Emby = 'Emby',
|
||||
}
|
||||
|
||||
type LinkedAccount = {
|
||||
type: LinkedAccountType;
|
||||
username: string;
|
||||
};
|
||||
|
||||
const UserLinkedAccountsSettings = () => {
|
||||
const intl = useIntl();
|
||||
const settings = useSettings();
|
||||
const router = useRouter();
|
||||
const { user: currentUser } = useUser();
|
||||
const {
|
||||
user,
|
||||
hasPermission,
|
||||
revalidate: revalidateUser,
|
||||
} = useUser({ id: Number(router.query.userId) });
|
||||
const { data: passwordInfo } = useSWR<{ hasPassword: boolean }>(
|
||||
user ? `/api/v1/user/${user?.id}/settings/password` : null
|
||||
);
|
||||
const [showJellyfinModal, setShowJellyfinModal] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const applicationName = settings.currentSettings.applicationTitle;
|
||||
|
||||
const accounts: LinkedAccount[] = useMemo(() => {
|
||||
const accounts: LinkedAccount[] = [];
|
||||
if (!user) return accounts;
|
||||
if (user.userType === UserType.PLEX && user.plexUsername)
|
||||
accounts.push({
|
||||
type: LinkedAccountType.Plex,
|
||||
username: user.plexUsername,
|
||||
});
|
||||
if (user.userType === UserType.EMBY && user.jellyfinUsername)
|
||||
accounts.push({
|
||||
type: LinkedAccountType.Emby,
|
||||
username: user.jellyfinUsername,
|
||||
});
|
||||
if (user.userType === UserType.JELLYFIN && user.jellyfinUsername)
|
||||
accounts.push({
|
||||
type: LinkedAccountType.Jellyfin,
|
||||
username: user.jellyfinUsername,
|
||||
});
|
||||
return accounts;
|
||||
}, [user]);
|
||||
|
||||
const linkPlexAccount = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
const authToken = await plexOAuth.login();
|
||||
const res = await fetch(
|
||||
`/api/v1/user/${user?.id}/settings/linked-accounts/plex`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ authToken }),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
if (res.status === 401) {
|
||||
setError(intl.formatMessage(messages.plexErrorUnauthorized));
|
||||
} else if (res.status === 422) {
|
||||
setError(intl.formatMessage(messages.plexErrorExists));
|
||||
} else {
|
||||
setError(intl.formatMessage(messages.errorUnknown));
|
||||
}
|
||||
} else {
|
||||
await revalidateUser();
|
||||
}
|
||||
} catch (e) {
|
||||
setError(intl.formatMessage(messages.errorUnknown));
|
||||
}
|
||||
};
|
||||
|
||||
const linkable = [
|
||||
{
|
||||
name: 'Plex',
|
||||
action: () => {
|
||||
plexOAuth.preparePopup();
|
||||
setTimeout(() => linkPlexAccount(), 1500);
|
||||
},
|
||||
hide:
|
||||
settings.currentSettings.mediaServerType !== MediaServerType.PLEX ||
|
||||
accounts.some((a) => a.type === LinkedAccountType.Plex),
|
||||
},
|
||||
{
|
||||
name: 'Jellyfin',
|
||||
action: () => setShowJellyfinModal(true),
|
||||
hide:
|
||||
settings.currentSettings.mediaServerType !== MediaServerType.JELLYFIN ||
|
||||
accounts.some((a) => a.type === LinkedAccountType.Jellyfin),
|
||||
},
|
||||
{
|
||||
name: 'Emby',
|
||||
action: () => setShowJellyfinModal(true),
|
||||
hide:
|
||||
settings.currentSettings.mediaServerType !== MediaServerType.EMBY ||
|
||||
accounts.some((a) => a.type === LinkedAccountType.Emby),
|
||||
},
|
||||
].filter((l) => !l.hide);
|
||||
|
||||
const deleteRequest = async (account: string) => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/v1/user/${user?.id}/settings/linked-accounts/${account}`,
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
if (!res.ok) throw new Error();
|
||||
} catch {
|
||||
setError(intl.formatMessage(messages.deleteFailed));
|
||||
}
|
||||
|
||||
await revalidateUser();
|
||||
};
|
||||
|
||||
if (
|
||||
currentUser?.id !== user?.id &&
|
||||
hasPermission(Permission.ADMIN) &&
|
||||
currentUser?.id !== 1
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.linkedAccounts)}
|
||||
</h3>
|
||||
</div>
|
||||
<Alert
|
||||
title={intl.formatMessage(messages.noPermissionDescription)}
|
||||
type="error"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const enableMediaServerUnlink = user?.id !== 1 && passwordInfo?.hasPassword;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
title={[
|
||||
intl.formatMessage(messages.linkedAccounts),
|
||||
intl.formatMessage(globalMessages.usersettings),
|
||||
user?.displayName,
|
||||
]}
|
||||
/>
|
||||
<div className="mb-6 flex items-end justify-between">
|
||||
<div>
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.linkedAccounts)}
|
||||
</h3>
|
||||
<h6 className="description">
|
||||
{intl.formatMessage(messages.linkedAccountsHint, {
|
||||
applicationName,
|
||||
})}
|
||||
</h6>
|
||||
</div>
|
||||
{currentUser?.id === user?.id && !!linkable.length && (
|
||||
<div>
|
||||
<Dropdown text="Link Account" buttonType="ghost">
|
||||
{linkable.map(({ name, action }) => (
|
||||
<Dropdown.Item key={name} onClick={action}>
|
||||
{name}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{error && <Alert title={error} type="error" />}
|
||||
{accounts.length ? (
|
||||
<ul className="space-y-4">
|
||||
{accounts.map((acct, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6"
|
||||
>
|
||||
<div className="w-12">
|
||||
{acct.type === LinkedAccountType.Plex ? (
|
||||
<div className="flex aspect-square h-full items-center justify-center rounded-full bg-neutral-800">
|
||||
<PlexLogo className="w-9" />
|
||||
</div>
|
||||
) : acct.type === LinkedAccountType.Emby ? (
|
||||
<EmbyLogo />
|
||||
) : (
|
||||
<JellyfinLogo />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="truncate text-sm font-bold text-gray-300">
|
||||
{acct.type}
|
||||
</div>
|
||||
<div className="text-xl font-semibold text-white">
|
||||
{acct.username}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow" />
|
||||
{enableMediaServerUnlink && (
|
||||
<ConfirmButton
|
||||
onClick={() => {
|
||||
deleteRequest(
|
||||
acct.type === LinkedAccountType.Plex ? 'plex' : 'jellyfin'
|
||||
);
|
||||
}}
|
||||
confirmText={intl.formatMessage(globalMessages.areyousure)}
|
||||
>
|
||||
<TrashIcon />
|
||||
<span>{intl.formatMessage(globalMessages.delete)}</span>
|
||||
</ConfirmButton>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="mt-4 text-center md:py-12">
|
||||
<h3 className="text-lg font-semibold text-gray-400">
|
||||
{intl.formatMessage(messages.noLinkedAccounts)}
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LinkJellyfinModal
|
||||
show={showJellyfinModal}
|
||||
onClose={() => setShowJellyfinModal(false)}
|
||||
onSave={() => {
|
||||
setShowJellyfinModal(false);
|
||||
revalidateUser();
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserLinkedAccountsSettings;
|
||||
@@ -18,6 +18,7 @@ import useSWR from 'swr';
|
||||
const messages = defineMessages('components.UserProfile.UserSettings', {
|
||||
menuGeneralSettings: 'General',
|
||||
menuChangePass: 'Password',
|
||||
menuLinkedAccounts: 'Linked Accounts',
|
||||
menuNotifications: 'Notifications',
|
||||
menuPermissions: 'Permissions',
|
||||
unauthorizedDescription:
|
||||
@@ -63,6 +64,11 @@ const UserSettings = ({ children }: UserSettingsProps) => {
|
||||
currentUser?.id !== user?.id &&
|
||||
hasPermission(Permission.ADMIN, user?.permissions ?? 0)),
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.menuLinkedAccounts),
|
||||
route: '/settings/linked-accounts',
|
||||
regex: /\/settings\/linked-accounts/,
|
||||
},
|
||||
{
|
||||
text: intl.formatMessage(messages.menuNotifications),
|
||||
route: data?.emailEnabled
|
||||
|
||||
Reference in New Issue
Block a user