misc_pterodactyl-panel/resources/scripts/components/server/users/UserRow.tsx

67 lines
2.9 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { Subuser } from '@/state/server/subusers';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2020-07-05 01:46:09 +00:00
import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
2020-03-27 22:40:24 +00:00
import EditSubuserModal from '@/components/server/users/EditSubuserModal';
2020-03-29 21:19:17 +00:00
import Can from '@/components/elements/Can';
import { useStoreState } from 'easy-peasy';
2020-07-04 23:26:07 +00:00
import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
interface Props {
subuser: Subuser;
}
export default ({ subuser }: Props) => {
const uuid = useStoreState((state) => state.user!.data!.uuid);
const [visible, setVisible] = useState(false);
return (
2020-07-04 23:26:07 +00:00
<GreyRowBox css={tw`mb-2`}>
<EditSubuserModal subuser={subuser} visible={visible} onModalDismissed={() => setVisible(false)} />
<div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden hidden md:block`}>
<img css={tw`w-full h-full`} src={`${subuser.image}?s=400`} />
</div>
2020-10-11 19:34:48 +00:00
<div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm truncate`}>{subuser.email}</p>
</div>
2020-07-04 23:26:07 +00:00
<div css={tw`ml-4`}>
<p css={tw`font-medium text-center`}>
2020-03-27 23:42:27 +00:00
&nbsp;
<FontAwesomeIcon
icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
fixedWidth
css={!subuser.twoFactorEnabled ? tw`text-red-400` : undefined}
2020-03-27 23:42:27 +00:00
/>
&nbsp;
</p>
<p css={tw`text-2xs text-neutral-500 uppercase hidden md:block`}>2FA Enabled</p>
2020-03-27 23:42:27 +00:00
</div>
<div css={tw`ml-4 hidden md:block`}>
2020-07-04 23:26:07 +00:00
<p css={tw`font-medium text-center`}>
{subuser.permissions.filter((permission) => permission !== 'websocket.connect').length}
2020-03-27 23:42:27 +00:00
</p>
2020-07-04 23:26:07 +00:00
<p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
2020-03-27 23:42:27 +00:00
</div>
{subuser.uuid !== uuid && (
2020-11-30 00:35:16 +00:00
<>
<Can action={'user.update'}>
<button
type={'button'}
aria-label={'Edit subuser'}
css={tw`block text-sm p-1 md:p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`}
onClick={() => setVisible(true)}
>
<FontAwesomeIcon icon={faPencilAlt} />
</button>
</Can>
<Can action={'user.delete'}>
<RemoveSubuserButton subuser={subuser} />
</Can>
</>
)}
2020-07-04 23:26:07 +00:00
</GreyRowBox>
);
};