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

72 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';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
2020-03-27 22:40:24 +00:00
import EditSubuserModal from '@/components/server/users/EditSubuserModal';
2020-03-27 23:42:27 +00:00
import { faUnlockAlt } from '@fortawesome/free-solid-svg-icons/faUnlockAlt';
import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
import classNames from 'classnames';
2020-03-29 21:19:17 +00:00
import Can from '@/components/elements/Can';
import { useStoreState } from 'easy-peasy';
interface Props {
subuser: Subuser;
}
export default ({ subuser }: Props) => {
const uuid = useStoreState(state => state.user!.data!.uuid);
2020-03-27 22:40:24 +00:00
const [ visible, setVisible ] = useState(false);
return (
<div className={'grey-row-box mb-2'}>
2020-03-27 22:40:24 +00:00
{visible &&
<EditSubuserModal
appear={true}
visible={true}
subuser={subuser}
onDismissed={() => setVisible(false)}
/>
}
<div className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800 overflow-hidden'}>
<img className={'f-full h-full'} src={`${subuser.image}?s=400`}/>
</div>
<div className={'ml-4 flex-1'}>
<p className={'text-sm'}>{subuser.email}</p>
</div>
2020-03-27 23:42:27 +00:00
<div className={'ml-4'}>
<p className={'font-medium text-center'}>
&nbsp;
<FontAwesomeIcon
icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
className={classNames('fa-fw', {
'text-red-400': !subuser.twoFactorEnabled,
})}
/>
&nbsp;
</p>
<p className={'text-2xs text-neutral-500 uppercase'}>2FA Enabled</p>
</div>
<div className={'ml-4'}>
<p className={'font-medium text-center'}>
{subuser.permissions.filter(permission => permission !== 'websocket.connect').length}
2020-03-27 23:42:27 +00:00
</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Permissions</p>
</div>
<button
type={'button'}
aria-label={'Edit subuser'}
className={classNames('block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4', {
hidden: subuser.uuid === uuid,
})}
2020-03-27 22:40:24 +00:00
onClick={() => setVisible(true)}
>
<FontAwesomeIcon icon={faPencilAlt}/>
</button>
2020-03-29 21:19:17 +00:00
<Can action={'user.delete'}>
<RemoveSubuserButton subuser={subuser}/>
</Can>
</div>
);
};