Update users screens
This commit is contained in:
Dane Everitt
parent
d27bda1c74
commit
f3586056f4
15 changed files with 155 additions and 121 deletions
|
|
@ -14,6 +14,7 @@ const FlashMessageRender = ({ byKey, className }: Props) => {
|
|||
));
|
||||
|
||||
return (
|
||||
flashes.length ?
|
||||
<div className={className}>
|
||||
{
|
||||
flashes.map((flash, index) => (
|
||||
|
|
@ -26,6 +27,8 @@ const FlashMessageRender = ({ byKey, className }: Props) => {
|
|||
))
|
||||
}
|
||||
</div>
|
||||
:
|
||||
null
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import React from 'react';
|
||||
import { Field, FieldProps } from 'formik';
|
||||
import Input from '@/components/elements/Input';
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
|
||||
type OmitFields = 'ref' | 'name' | 'value' | 'type' | 'checked' | 'onClick' | 'onChange';
|
||||
|
||||
type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
|
||||
type InputProps = Omit<JSX.IntrinsicElements['input'], OmitFields>;
|
||||
|
||||
const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
|
||||
<Field name={name}>
|
||||
|
|
@ -20,7 +21,7 @@ const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
|
|||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
<Input
|
||||
{...field}
|
||||
{...props}
|
||||
type={'checkbox'}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
|||
import { CSSTransition } from 'react-transition-group';
|
||||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import Fade from '@/components/elements/Fade';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -55,29 +56,25 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
|
|||
|
||||
return () => {
|
||||
document.removeEventListener('click', windowListener);
|
||||
}
|
||||
};
|
||||
}, [ visible ]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderToggle(onClickHandler)}
|
||||
<CSSTransition
|
||||
timeout={250}
|
||||
in={visible}
|
||||
unmountOnExit={true}
|
||||
classNames={'fade'}
|
||||
>
|
||||
<Fade timeout={250} in={visible} unmountOnExit>
|
||||
<div
|
||||
ref={menu}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
setVisible(false);
|
||||
}}
|
||||
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
|
||||
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
|
||||
style={{ minWidth: '12rem' }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</Fade>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,6 +16,25 @@ const light = css<Props>`
|
|||
}
|
||||
`;
|
||||
|
||||
const checkboxStyle = css<Props>`
|
||||
${tw`cursor-pointer appearance-none inline-block align-middle select-none flex-shrink-0 w-4 h-4 text-primary-400 border border-neutral-300 rounded-sm`};
|
||||
color-adjust: exact;
|
||||
background-origin: border-box;
|
||||
transition: all 75ms linear, box-shadow 25ms linear;
|
||||
|
||||
&:checked {
|
||||
${tw`border-transparent bg-no-repeat bg-center`};
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
|
||||
background-color: currentColor;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
${tw`outline-none border-primary-300`};
|
||||
box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
|
||||
}
|
||||
`;
|
||||
|
||||
const inputStyle = css<Props>`
|
||||
// Reset to normal styling.
|
||||
${tw`appearance-none w-full min-w-0`};
|
||||
|
|
@ -43,7 +62,19 @@ const inputStyle = css<Props>`
|
|||
${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
|
||||
`;
|
||||
|
||||
const Input = styled.input<Props>`${inputStyle}`;
|
||||
const Input = styled.input<Props>`
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
${inputStyle};
|
||||
}
|
||||
|
||||
&[type="checkbox"], &[type="radio"] {
|
||||
${checkboxStyle};
|
||||
|
||||
&[type="radio"] {
|
||||
${tw`rounded-full`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
const Textarea = styled.textarea<Props>`${inputStyle}`;
|
||||
|
||||
export { Textarea };
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ const ModalMask = styled.div`
|
|||
|
||||
const ModalContainer = styled.div<{ alignTop?: boolean }>`
|
||||
${tw`relative flex flex-col w-full m-auto`};
|
||||
max-height: calc(100vh - 8rem);
|
||||
max-width: 50%;
|
||||
// @todo max-w-screen-lg perhaps?
|
||||
${props => props.alignTop && 'margin-top: 10%'};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
|
|||
import BackupRow from '@/components/server/backups/BackupRow';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default () => {
|
||||
const { uuid, featureLimits } = useServer();
|
||||
|
|
@ -31,14 +32,14 @@ export default () => {
|
|||
}, []);
|
||||
|
||||
if (backups.length === 0 && loading) {
|
||||
return <Spinner size={'large'} centered={true}/>;
|
||||
return <Spinner size={'large'} centered/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'backups'} className={'mb-4'}/>
|
||||
<FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
|
||||
{!backups.length ?
|
||||
<p className="text-center text-sm text-neutral-400">
|
||||
<p css={tw`text-center text-sm text-neutral-400`}>
|
||||
There are no backups stored for this server.
|
||||
</p>
|
||||
:
|
||||
|
|
@ -46,7 +47,7 @@ export default () => {
|
|||
{backups.map((backup, index) => <BackupRow
|
||||
key={backup.uuid}
|
||||
backup={backup}
|
||||
className={index !== (backups.length - 1) ? 'mb-2' : undefined}
|
||||
css={index > 0 ? tw`mt-2` : undefined}
|
||||
/>)}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -57,12 +58,12 @@ export default () => {
|
|||
}
|
||||
<Can action={'backup.create'}>
|
||||
{(featureLimits.backups > 0 && backups.length > 0) &&
|
||||
<p className="text-center text-xs text-neutral-400 mt-2">
|
||||
<p css={tw`text-center text-xs text-neutral-400 mt-2`}>
|
||||
{backups.length} of {featureLimits.backups} backups have been created for this server.
|
||||
</p>
|
||||
}
|
||||
{featureLimits.backups > 0 && featureLimits.backups !== backups.length &&
|
||||
<div className={'mt-6 flex justify-end'}>
|
||||
<div css={tw`mt-6 flex justify-end`}>
|
||||
<CreateBackupButton/>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import deleteBackup from '@/api/server/backups/deleteBackup';
|
|||
import { ServerContext } from '@/state/server';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import Can from '@/components/elements/Can';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
interface Props {
|
||||
backup: ServerBackup;
|
||||
|
|
@ -61,8 +62,8 @@ export default ({ backup }: Props) => {
|
|||
<>
|
||||
{visible &&
|
||||
<ChecksumModal
|
||||
appear
|
||||
visible={visible}
|
||||
appear={true}
|
||||
onDismissed={() => setVisible(false)}
|
||||
checksum={backup.sha256Hash}
|
||||
/>
|
||||
|
|
@ -84,27 +85,27 @@ export default ({ backup }: Props) => {
|
|||
renderToggle={onClick => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={'text-neutral-200 transition-color duration-150 hover:text-neutral-100 p-2'}
|
||||
css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
<div className={'text-sm'}>
|
||||
<div css={tw`text-sm`}>
|
||||
<Can action={'backup.download'}>
|
||||
<DropdownButtonRow onClick={() => doDownload()}>
|
||||
<FontAwesomeIcon fixedWidth={true} icon={faCloudDownloadAlt} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Download</span>
|
||||
<FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
|
||||
<span css={tw`ml-2`}>Download</span>
|
||||
</DropdownButtonRow>
|
||||
</Can>
|
||||
<DropdownButtonRow onClick={() => setVisible(true)}>
|
||||
<FontAwesomeIcon fixedWidth={true} icon={faLock} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Checksum</span>
|
||||
<FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
|
||||
<span css={tw`ml-2`}>Checksum</span>
|
||||
</DropdownButtonRow>
|
||||
<Can action={'backup.delete'}>
|
||||
<DropdownButtonRow danger={true} onClick={() => setDeleteVisible(true)}>
|
||||
<FontAwesomeIcon fixedWidth={true} icon={faTrashAlt} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Delete</span>
|
||||
<DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
|
||||
<FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
|
||||
<span css={tw`ml-2`}>Delete</span>
|
||||
</DropdownButtonRow>
|
||||
</Can>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import useWebsocketEvent from '@/plugins/useWebsocketEvent';
|
|||
import { ServerContext } from '@/state/server';
|
||||
import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
|
||||
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
|
||||
import tw from 'twin.macro';
|
||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||
|
||||
interface Props {
|
||||
backup: ServerBackup;
|
||||
|
|
@ -34,38 +36,38 @@ export default ({ backup, className }: Props) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className={`grey-row-box flex items-center ${className}`}>
|
||||
<div className={'mr-4'}>
|
||||
<GreyRowBox css={tw`flex items-center`} className={className}>
|
||||
<div css={tw`mr-4`}>
|
||||
{backup.completedAt ?
|
||||
<FontAwesomeIcon icon={faArchive} className={'text-neutral-300'}/>
|
||||
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
|
||||
:
|
||||
<Spinner size={'small'}/>
|
||||
}
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
<p className={'text-sm mb-1'}>
|
||||
<div css={tw`flex-1`}>
|
||||
<p css={tw`text-sm mb-1`}>
|
||||
{backup.name}
|
||||
{backup.completedAt &&
|
||||
<span className={'ml-3 text-neutral-300 text-xs font-thin'}>{bytesToHuman(backup.bytes)}</span>
|
||||
<span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
|
||||
}
|
||||
</p>
|
||||
<p className={'text-xs text-neutral-400 font-mono'}>
|
||||
<p css={tw`text-xs text-neutral-400 font-mono`}>
|
||||
{backup.uuid}
|
||||
</p>
|
||||
</div>
|
||||
<div className={'ml-8 text-center'}>
|
||||
<div css={tw`ml-8 text-center`}>
|
||||
<p
|
||||
title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
|
||||
className={'text-sm'}
|
||||
title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
|
||||
css={tw`text-sm`}
|
||||
>
|
||||
{formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
|
||||
</p>
|
||||
<p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
|
||||
<p css={tw`text-2xs text-neutral-500 uppercase mt-1`}>Created</p>
|
||||
</div>
|
||||
<Can action={'backup.download'}>
|
||||
<div className={'ml-6'} style={{ marginRight: '-0.5rem' }}>
|
||||
<div css={tw`ml-6`} style={{ marginRight: '-0.5rem' }}>
|
||||
{!backup.completedAt ?
|
||||
<div className={'p-2 invisible'}>
|
||||
<div css={tw`p-2 invisible`}>
|
||||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
</div>
|
||||
:
|
||||
|
|
@ -73,6 +75,6 @@ export default ({ backup, className }: Props) => {
|
|||
}
|
||||
</div>
|
||||
</Can>
|
||||
</div>
|
||||
</GreyRowBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import React from 'react';
|
||||
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
const ChecksumModal = ({ checksum, ...props }: RequiredModalProps & { checksum: string }) => (
|
||||
<Modal {...props}>
|
||||
<h3 className={'mb-6'}>Verify file checksum</h3>
|
||||
<p className={'text-sm'}>
|
||||
<h3 css={tw`mb-6`}>Verify file checksum</h3>
|
||||
<p css={tw`text-sm`}>
|
||||
The SHA256 checksum of this file is:
|
||||
</p>
|
||||
<pre className={'mt-2 text-sm p-2 bg-neutral-900 rounded'}>
|
||||
<code className={'block font-mono'}>{checksum}</code>
|
||||
<pre css={tw`mt-2 text-sm p-2 bg-neutral-900 rounded`}>
|
||||
<code css={tw`block font-mono`}>{checksum}</code>
|
||||
</pre>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ import createServerBackup from '@/api/server/backups/createServerBackup';
|
|||
import { httpErrorToHuman } from '@/api/http';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import Button from '@/components/elements/Button';
|
||||
import tw from 'twin.macro';
|
||||
import Input, { Textarea } from '@/components/elements/Input';
|
||||
|
||||
interface Values {
|
||||
name: string;
|
||||
|
|
@ -21,17 +24,17 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
|
|||
|
||||
return (
|
||||
<Modal {...props} showSpinnerOverlay={isSubmitting}>
|
||||
<Form className={'pb-6'}>
|
||||
<FlashMessageRender byKey={'backups:create'} className={'mb-4'}/>
|
||||
<h3 className={'mb-6'}>Create server backup</h3>
|
||||
<div className={'mb-6'}>
|
||||
<Form>
|
||||
<FlashMessageRender byKey={'backups:create'} css={tw`mb-4`}/>
|
||||
<h2 css={tw`text-2xl mb-6`}>Create server backup</h2>
|
||||
<div css={tw`mb-6`}>
|
||||
<Field
|
||||
name={'name'}
|
||||
label={'Backup name'}
|
||||
description={'If provided, the name that should be used to reference this backup.'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mb-6'}>
|
||||
<div css={tw`mb-6`}>
|
||||
<FormikFieldWrapper
|
||||
name={'ignored'}
|
||||
label={'Ignored Files & Directories'}
|
||||
|
|
@ -42,20 +45,13 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
|
|||
prefixing the path with an exclamation point.
|
||||
`}
|
||||
>
|
||||
<FormikField
|
||||
name={'ignored'}
|
||||
component={'textarea'}
|
||||
className={'input-dark h-32'}
|
||||
/>
|
||||
<FormikField as={Textarea} name={'ignored'} css={tw`h-32`}/>
|
||||
</FormikFieldWrapper>
|
||||
</div>
|
||||
<div className={'flex justify-end'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-sm'}
|
||||
>
|
||||
<div css={tw`flex justify-end`}>
|
||||
<Button type={'submit'}>
|
||||
Start backup
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
|
@ -99,18 +95,15 @@ export default () => {
|
|||
})}
|
||||
>
|
||||
<ModalContent
|
||||
appear={true}
|
||||
appear
|
||||
visible={visible}
|
||||
onDismissed={() => setVisible(false)}
|
||||
/>
|
||||
</Formik>
|
||||
}
|
||||
<button
|
||||
className={'btn btn-primary btn-sm'}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<Button onClick={() => setVisible(true)}>
|
||||
Create backup
|
||||
</button>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,20 +2,18 @@ import React, { useState } from 'react';
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
|
||||
import EditSubuserModal from '@/components/server/users/EditSubuserModal';
|
||||
import Button from '@/components/elements/Button';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default () => {
|
||||
const [ visible, setVisible ] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{visible && <EditSubuserModal
|
||||
appear={true}
|
||||
visible={true}
|
||||
onDismissed={() => setVisible(false)}
|
||||
/>}
|
||||
<button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
|
||||
<FontAwesomeIcon icon={faUserPlus} className={'mr-1'}/> New User
|
||||
</button>
|
||||
{visible && <EditSubuserModal appear visible onDismissed={() => setVisible(false)}/>}
|
||||
<Button onClick={() => setVisible(true)}>
|
||||
<FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@ import Can from '@/components/elements/Can';
|
|||
import { usePermissions } from '@/plugins/usePermissions';
|
||||
import { useDeepMemo } from '@/plugins/useDeepMemo';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Label from '@/components/elements/Label';
|
||||
import Input from '@/components/elements/Input';
|
||||
|
||||
type Props = {
|
||||
subuser?: Subuser;
|
||||
|
|
@ -72,17 +75,17 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
}
|
||||
|
||||
return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
|
||||
}, [permissions, loggedInPermissions]);
|
||||
}, [ permissions, loggedInPermissions ]);
|
||||
|
||||
return (
|
||||
<Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
|
||||
<h3 ref={ref}>
|
||||
<h2 css={tw`text-2xl`} ref={ref}>
|
||||
{subuser ?
|
||||
`${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
|
||||
:
|
||||
'Create new subuser'
|
||||
}
|
||||
</h3>
|
||||
</h2>
|
||||
<FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
|
||||
{(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
|
||||
<div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
|
||||
|
|
@ -108,8 +111,8 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
title={
|
||||
<div css={tw`flex items-center`}>
|
||||
<p css={tw`text-sm uppercase flex-1`}>{key}</p>
|
||||
{canEditUser && editablePermissions.indexOf(key) >= 0 &&
|
||||
<input
|
||||
{canEditUser &&
|
||||
<Input
|
||||
type={'checkbox'}
|
||||
onClick={e => {
|
||||
if (e.currentTarget.checked) {
|
||||
|
|
@ -133,7 +136,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
}
|
||||
</div>
|
||||
}
|
||||
className={index !== 0 ? 'mt-4' : undefined}
|
||||
css={index > 0 ? tw`mt-4` : undefined}
|
||||
>
|
||||
<p css={tw`text-sm text-neutral-400 mb-4`}>
|
||||
{permissions[key].description}
|
||||
|
|
@ -157,9 +160,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
/>
|
||||
</div>
|
||||
<div css={tw`flex-1`}>
|
||||
<span css={tw`font-medium`} className={'input-dark-label'}>
|
||||
{pkey}
|
||||
</span>
|
||||
<Label css={tw`font-medium`}>{pkey}</Label>
|
||||
{permissions[key].keys[pkey].length > 0 &&
|
||||
<p css={tw`text-xs text-neutral-400 mt-1`}>
|
||||
{permissions[key].keys[pkey]}
|
||||
|
|
@ -173,9 +174,9 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
</div>
|
||||
<Can action={subuser ? 'user.update' : 'user.create'}>
|
||||
<div css={tw`pb-6 flex justify-end`}>
|
||||
<button className={'btn btn-primary btn-sm'} type={'submit'}>
|
||||
<Button type={'submit'}>
|
||||
{subuser ? 'Save' : 'Invite User'}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</Can>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import deleteSubuser from '@/api/server/users/deleteSubuser';
|
|||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default ({ subuser }: { subuser: Subuser }) => {
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
|
|
@ -38,7 +39,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
|
|||
<ConfirmationModal
|
||||
title={'Delete this subuser?'}
|
||||
buttonText={'Yes, remove subuser'}
|
||||
visible={true}
|
||||
visible
|
||||
showSpinnerOverlay={loading}
|
||||
onConfirmed={() => doDeletion()}
|
||||
onDismissed={() => setShowConfirmation(false)}
|
||||
|
|
@ -50,7 +51,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
|
|||
<button
|
||||
type={'button'}
|
||||
aria-label={'Delete subuser'}
|
||||
className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
|
||||
css={tw`block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150`}
|
||||
onClick={() => setShowConfirmation(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrashAlt}/>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
|
|||
import classNames from 'classnames';
|
||||
import Can from '@/components/elements/Can';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
import tw from 'twin.macro';
|
||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||
|
||||
interface Props {
|
||||
subuser: Subuser;
|
||||
|
|
@ -19,23 +21,23 @@ export default ({ subuser }: Props) => {
|
|||
const [ visible, setVisible ] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={'grey-row-box mb-2'}>
|
||||
<GreyRowBox css={tw`mb-2`}>
|
||||
{visible &&
|
||||
<EditSubuserModal
|
||||
appear={true}
|
||||
visible={true}
|
||||
appear
|
||||
visible
|
||||
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 css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden`}>
|
||||
<img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
|
||||
</div>
|
||||
<div className={'ml-4 flex-1'}>
|
||||
<p className={'text-sm'}>{subuser.email}</p>
|
||||
<div css={tw`ml-4 flex-1`}>
|
||||
<p css={tw`text-sm`}>{subuser.email}</p>
|
||||
</div>
|
||||
<div className={'ml-4'}>
|
||||
<p className={'font-medium text-center'}>
|
||||
<div css={tw`ml-4`}>
|
||||
<p css={tw`font-medium text-center`}>
|
||||
|
||||
<FontAwesomeIcon
|
||||
icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
|
||||
|
|
@ -45,13 +47,13 @@ export default ({ subuser }: Props) => {
|
|||
/>
|
||||
|
||||
</p>
|
||||
<p className={'text-2xs text-neutral-500 uppercase'}>2FA Enabled</p>
|
||||
<p css={tw`text-2xs text-neutral-500 uppercase`}>2FA Enabled</p>
|
||||
</div>
|
||||
<div className={'ml-4'}>
|
||||
<p className={'font-medium text-center'}>
|
||||
<div css={tw`ml-4`}>
|
||||
<p css={tw`font-medium text-center`}>
|
||||
{subuser.permissions.filter(permission => permission !== 'websocket.connect').length}
|
||||
</p>
|
||||
<p className={'text-2xs text-neutral-500 uppercase'}>Permissions</p>
|
||||
<p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
|
||||
</div>
|
||||
<button
|
||||
type={'button'}
|
||||
|
|
@ -66,6 +68,6 @@ export default ({ subuser }: Props) => {
|
|||
<Can action={'user.delete'}>
|
||||
<RemoveSubuserButton subuser={subuser}/>
|
||||
</Can>
|
||||
</div>
|
||||
</GreyRowBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import getServerSubusers from '@/api/server/users/getServerSubusers';
|
|||
import { httpErrorToHuman } from '@/api/http';
|
||||
import Can from '@/components/elements/Can';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default () => {
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
|
@ -43,15 +44,15 @@ export default () => {
|
|||
}, []);
|
||||
|
||||
if (!subusers.length && (loading || !Object.keys(permissions).length)) {
|
||||
return <Spinner size={'large'} centered={true}/>;
|
||||
return <Spinner size={'large'} centered/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'users'} className={'mb-4'}/>
|
||||
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
|
||||
{!subusers.length ?
|
||||
<p className={'text-center text-sm text-neutral-400'}>
|
||||
It looks like you don't have any subusers.
|
||||
<p css={tw`text-center text-sm text-neutral-400`}>
|
||||
It looks like you don't have any subusers.
|
||||
</p>
|
||||
:
|
||||
subusers.map(subuser => (
|
||||
|
|
@ -59,7 +60,7 @@ export default () => {
|
|||
))
|
||||
}
|
||||
<Can action={'user.create'}>
|
||||
<div className={'flex justify-end mt-6'}>
|
||||
<div css={tw`flex justify-end mt-6`}>
|
||||
<AddSubuserButton/>
|
||||
</div>
|
||||
</Can>
|
||||
|
|
|
|||
Loading…
Reference in a new issue