feat(ui): display "Owner" role instead of "Admin" for user ID 1 (#1050)

* feat(ui): display "Owner" role instead of "Admin" for user ID 1

Also add role to user settings page, and fix the missing "Account Type" string and use the same
verbiage on the user list page

* feat(lang): generate translation keys

* fix: utilize hasPermission returned by useUser instead of importing from server/lib/permissions

src/components/UserList/index.tsx

@@ -32,13 +32,14 @@ const messages = defineMessages({
     '{userCount, plural, =0 {No new users} one {# new user} other {# new users}} imported from Plex.',
   user: 'User',
   totalrequests: 'Total Requests',
-  usertype: 'User Type',
+  accounttype: 'Account Type',
   role: 'Role',
   created: 'Created',
   lastupdated: 'Last Updated',
   edit: 'Edit',
   bulkedit: 'Bulk Edit',
   delete: 'Delete',
+  owner: 'Owner',
   admin: 'Admin',
   plexuser: 'Plex User',
   deleteuser: 'Delete User',
@@ -472,7 +473,7 @@ const UserList: React.FC = () => {
             </Table.TH>
             <Table.TH>{intl.formatMessage(messages.user)}</Table.TH>
             <Table.TH>{intl.formatMessage(messages.totalrequests)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.usertype)}</Table.TH>
+            <Table.TH>{intl.formatMessage(messages.accounttype)}</Table.TH>
             <Table.TH>{intl.formatMessage(messages.role)}</Table.TH>
             <Table.TH>{intl.formatMessage(messages.created)}</Table.TH>
             <Table.TH>{intl.formatMessage(messages.lastupdated)}</Table.TH>
@@ -543,7 +544,9 @@ const UserList: React.FC = () => {
                 )}
               </Table.TD>
               <Table.TD>
-                {hasPermission(Permission.ADMIN, user.permissions)
+                {user.id === 1
+                  ? intl.formatMessage(messages.owner)
+                  : hasPermission(Permission.ADMIN, user.permissions)
                   ? intl.formatMessage(messages.admin)
                   : intl.formatMessage(messages.user)}
               </Table.TD>

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

@@ -7,7 +7,7 @@ import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import { Language } from '../../../../../server/lib/settings';
 import useSettings from '../../../../hooks/useSettings';
-import { UserType, useUser } from '../../../../hooks/useUser';
+import { UserType, useUser, Permission } from '../../../../hooks/useUser';
 import Error from '../../../../pages/_error';
 import Badge from '../../../Common/Badge';
 import Button from '../../../Common/Button';
@@ -19,8 +19,13 @@ const messages = defineMessages({
   displayName: 'Display Name',
   save: 'Save Changes',
   saving: 'Saving…',
+  accounttype: 'Account Type',
   plexuser: 'Plex User',
   localuser: 'Local User',
+  role: 'Role',
+  owner: 'Owner',
+  admin: 'Admin',
+  user: 'User',
   toastSettingsSuccess: 'Settings successfully saved!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
   region: 'Discover Region',
@@ -37,7 +42,9 @@ const UserGeneralSettings: React.FC = () => {
   const intl = useIntl();
   const { addToast } = useToasts();
   const router = useRouter();
-  const { user, mutate } = useUser({ id: Number(router.query.userId) });
+  const { user, hasPermission, mutate } = useUser({
+    id: Number(router.query.userId),
+  });
   const { currentSettings } = useSettings();
   const { data, error, revalidate } = useSWR<{
     username?: string;
@@ -107,7 +114,9 @@ const UserGeneralSettings: React.FC = () => {
           return (
             <Form className="section">
               <div className="form-row">
-                <div className="text-label">Account Type</div>
+                <div className="text-label">
+                  {intl.formatMessage(messages.accounttype)}
+                </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 ? (
@@ -122,6 +131,20 @@ const UserGeneralSettings: React.FC = () => {
                   </div>
                 </div>
               </div>
+              <div className="form-row">
+                <div className="text-label">
+                  {intl.formatMessage(messages.role)}
+                </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?.id === 1
+                      ? intl.formatMessage(messages.owner)
+                      : hasPermission(Permission.ADMIN)
+                      ? intl.formatMessage(messages.admin)
+                      : intl.formatMessage(messages.user)}
+                  </div>
+                </div>
+              </div>
               <div className="form-row">
                 <label htmlFor="displayName" className="text-label">
                   {intl.formatMessage(messages.displayName)}

src/i18n/locale/en.json

@@ -628,6 +628,7 @@
   "components.TvDetails.userrating": "User Rating",
   "components.TvDetails.viewfullcrew": "View Full Crew",
   "components.TvDetails.watchtrailer": "Watch Trailer",
+  "components.UserList.accounttype": "Account Type",
   "components.UserList.admin": "Admin",
   "components.UserList.autogeneratepassword": "Automatically generate password",
   "components.UserList.bulkedit": "Bulk Edit",
@@ -648,6 +649,7 @@
   "components.UserList.lastupdated": "Last Updated",
   "components.UserList.localuser": "Local User",
   "components.UserList.next": "Next",
+  "components.UserList.owner": "Owner",
   "components.UserList.password": "Password",
   "components.UserList.passwordinfo": "Password Information",
   "components.UserList.passwordinfodescription": "Email notifications need to be configured and enabled in order to automatically generate passwords.",
@@ -673,11 +675,12 @@
   "components.UserList.userlist": "User List",
   "components.UserList.users": "Users",
   "components.UserList.userssaved": "Users saved!",
-  "components.UserList.usertype": "User Type",
   "components.UserList.validationEmail": "You must provide a valid email address",
   "components.UserList.validationpasswordminchars": "Password is too short; should be a minimum of 8 characters",
   "components.UserProfile.ProfileHeader.profile": "View Profile",
   "components.UserProfile.ProfileHeader.settings": "Edit Settings",
+  "components.UserProfile.UserSettings.UserGeneralSettings.accounttype": "Account Type",
+  "components.UserProfile.UserSettings.UserGeneralSettings.admin": "Admin",
   "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",
   "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
   "components.UserProfile.UserSettings.UserGeneralSettings.languageServerDefault": "Default ({language})",
@@ -685,13 +688,16 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.originalLanguageDefault": "All Languages",
   "components.UserProfile.UserSettings.UserGeneralSettings.originallanguage": "Discover Language",
   "components.UserProfile.UserSettings.UserGeneralSettings.originallanguageTip": "Filter content by original language (only applies to the \"Popular\" and \"Upcoming\" categories)",
+  "components.UserProfile.UserSettings.UserGeneralSettings.owner": "Owner",
   "components.UserProfile.UserSettings.UserGeneralSettings.plexuser": "Plex User",
   "components.UserProfile.UserSettings.UserGeneralSettings.region": "Discover Region",
   "components.UserProfile.UserSettings.UserGeneralSettings.regionTip": "Filter content by region (only applies to the \"Popular\" and \"Upcoming\" categories)",
+  "components.UserProfile.UserSettings.UserGeneralSettings.role": "Role",
   "components.UserProfile.UserSettings.UserGeneralSettings.save": "Save Changes",
   "components.UserProfile.UserSettings.UserGeneralSettings.saving": "Saving…",
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailure": "Something went wrong while saving settings.",
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings successfully saved!",
+  "components.UserProfile.UserSettings.UserGeneralSettings.user": "User",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordId": "Discord ID",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordIdTip": "The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your Discord user account",
   "components.UserProfile.UserSettings.UserNotificationSettings.enableNotifications": "Enable Notifications",