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
This commit is contained in:
TheCatLady
2021-03-02 05:06:52 -05:00
committed by GitHub
parent ddfc5e6aa8
commit 1b55d2dfbc
3 changed files with 39 additions and 7 deletions

View File

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