feat(linked-accounts): create page and display linked media server accounts

src/assets/services/jellyfin-icon.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- ***** BEGIN LICENSE BLOCK *****
+  - Part of the Jellyfin project (https://jellyfin.media)
+  - 
+  - All copyright belongs to the Jellyfin contributors; a full list can
+  - be found in the file CONTRIBUTORS.md
+  - 
+  - This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
+  - To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
+- ***** END LICENSE BLOCK ***** -->
+<svg version="1.1" id="icon-transparent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+	<defs>
+		<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14" y2="436.09">
+			<stop offset="0" style="stop-color:#AA5CC3"/>
+			<stop offset="1" style="stop-color:#00A4DC"/>
+		</linearGradient>
+	</defs>
+	<title>icon-transparent</title>
+	<g id="icon-transparent">
+		<path id="inner-shape" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z" fill="url(#linear-gradient)"/>
+		<path id="outer-shape" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z
+		M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z" fill="url(#linear-gradient)"/>
+	</g>
+</svg>

src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx

@@ -0,0 +1,95 @@
+import JellyfinLogo from '@app/assets/services/jellyfin-icon.svg';
+import PlexLogo from '@app/assets/services/plex.svg';
+import PageTitle from '@app/components/Common/PageTitle';
+import { useUser } from '@app/hooks/useUser';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { useIntl } from 'react-intl';
+
+const messages = defineMessages(
+  'components.UserProfile.UserSettings.UserLinkedAccountsSettings',
+  {
+    linkedAccounts: 'Linked Accounts',
+    linkedAccountsHint:
+      'These external accounts are linked to your Jellyseerr account.',
+    noLinkedAccounts:
+      'You do not have any external accounts linked to your account.',
+  }
+);
+
+const enum LinkedAccountType {
+  Plex,
+  Jellyfin,
+}
+
+type LinkedAccount = {
+  type: LinkedAccountType;
+  username: string;
+};
+
+const UserLinkedAccountsSettings = () => {
+  const intl = useIntl();
+  const { user } = useUser();
+
+  const accounts: LinkedAccount[] = [
+    ...(user?.plexUsername
+      ? [{ type: LinkedAccountType.Plex, username: user?.plexUsername }]
+      : []),
+    ...(user?.jellyfinUsername
+      ? [{ type: LinkedAccountType.Jellyfin, username: user?.jellyfinUsername }]
+      : []),
+  ];
+
+  return (
+    <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.linkedAccounts),
+          intl.formatMessage(globalMessages.usersettings),
+          user?.displayName,
+        ]}
+      />
+      <div className="mb-6">
+        <h3 className="heading">
+          {intl.formatMessage(messages.linkedAccounts)}
+        </h3>
+        <h6 className="description">
+          {intl.formatMessage(messages.linkedAccountsHint)}
+        </h6>
+      </div>
+      {accounts.length ? (
+        <ul className="space-y-4">
+          {accounts.map((acct) => (
+            <li 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>
+                ) : (
+                  <JellyfinLogo />
+                )}
+              </div>
+              <div>
+                <div className="truncate text-sm font-bold text-gray-300">
+                  {acct.type == LinkedAccountType.Plex ? 'Plex' : 'Jellyfin'}
+                </div>
+                <div className="text-xl font-semibold text-white">
+                  {acct.username}
+                </div>
+              </div>
+            </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>
+      )}
+    </>
+  );
+};
+
+export default UserLinkedAccountsSettings;

src/components/UserProfile/UserSettings/index.tsx

@@ -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

src/i18n/locale/en.json

@@ -1301,6 +1301,9 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.validationDiscordId": "You must provide a valid Discord user ID",
   "components.UserProfile.UserSettings.UserGeneralSettings.validationemailformat": "Valid email required",
   "components.UserProfile.UserSettings.UserGeneralSettings.validationemailrequired": "Email required",
+  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.linkedAccounts": "Linked Accounts",
+  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.linkedAccountsHint": "These external accounts are linked to your Jellyseerr account.",
+  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.noLinkedAccounts": "You do not have any external accounts linked to your account.",
   "components.UserProfile.UserSettings.UserNotificationSettings.deviceDefault": "Device Default",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordId": "User ID",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordIdTip": "The <FindDiscordIdLink>multi-digit ID number</FindDiscordIdLink> associated with your user account",
@@ -1363,6 +1366,7 @@
   "components.UserProfile.UserSettings.UserPermissions.unauthorizedDescription": "You cannot modify your own permissions.",
   "components.UserProfile.UserSettings.menuChangePass": "Password",
   "components.UserProfile.UserSettings.menuGeneralSettings": "General",
+  "components.UserProfile.UserSettings.menuLinkedAccounts": "Linked Accounts",
   "components.UserProfile.UserSettings.menuNotifications": "Notifications",
   "components.UserProfile.UserSettings.menuPermissions": "Permissions",
   "components.UserProfile.UserSettings.unauthorizedDescription": "You do not have permission to modify this user's settings.",

src/pages/profile/settings/linked-accounts.tsx

@@ -0,0 +1,13 @@
+import UserSettings from '@app/components/UserProfile/UserSettings';
+import UserLinkedAccountsSettings from '@app/components/UserProfile/UserSettings/UserLinkedAccountsSettings';
+import type { NextPage } from 'next';
+
+const UserSettingsLinkedAccountsPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserLinkedAccountsSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsLinkedAccountsPage;