Apply new eslint rules; default to prettier for styling
This commit is contained in:
DaneEveritt
parent
f22cce8881
commit
dc84af9937
218 changed files with 3876 additions and 3564 deletions
|
|
@ -29,22 +29,25 @@ interface Values {
|
|||
|
||||
const EditSubuserModal = ({ subuser }: Props) => {
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const appendSubuser = ServerContext.useStoreActions((actions) => actions.subusers.appendSubuser);
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
|
||||
(actions: Actions<ApplicationStore>) => actions.flashes
|
||||
);
|
||||
const { dismiss, setPropOverrides } = useContext(ModalContext);
|
||||
|
||||
const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
|
||||
const permissions = useStoreState(state => state.permissions.data);
|
||||
const isRootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
|
||||
const permissions = useStoreState((state) => state.permissions.data);
|
||||
// The currently logged in user's permissions. We're going to filter out any permissions
|
||||
// that they should not need.
|
||||
const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);
|
||||
const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
|
||||
const loggedInPermissions = ServerContext.useStoreState((state) => state.server.permissions);
|
||||
const [canEditUser] = usePermissions(subuser ? ['user.update'] : ['user.create']);
|
||||
|
||||
// The permissions that can be modified by this user.
|
||||
const editablePermissions = useDeepCompareMemo(() => {
|
||||
const cleaned = Object.keys(permissions)
|
||||
.map(key => Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`));
|
||||
const cleaned = Object.keys(permissions).map((key) =>
|
||||
Object.keys(permissions[key].keys).map((pkey) => `${key}.${pkey}`)
|
||||
);
|
||||
|
||||
const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));
|
||||
|
||||
|
|
@ -52,19 +55,19 @@ const EditSubuserModal = ({ subuser }: Props) => {
|
|||
return list;
|
||||
}
|
||||
|
||||
return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
|
||||
}, [ isRootAdmin, permissions, loggedInPermissions ]);
|
||||
return list.filter((key) => loggedInPermissions.indexOf(key) >= 0);
|
||||
}, [isRootAdmin, permissions, loggedInPermissions]);
|
||||
|
||||
const submit = (values: Values) => {
|
||||
setPropOverrides({ showSpinnerOverlay: true });
|
||||
clearFlashes('user:edit');
|
||||
|
||||
createOrUpdateSubuser(uuid, values, subuser)
|
||||
.then(subuser => {
|
||||
.then((subuser) => {
|
||||
appendSubuser(subuser);
|
||||
dismiss();
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setPropOverrides(null);
|
||||
clearAndAddHttpError({ key: 'user:edit', error });
|
||||
|
|
@ -75,17 +78,22 @@ const EditSubuserModal = ({ subuser }: Props) => {
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => () => {
|
||||
clearFlashes('user:edit');
|
||||
}, []);
|
||||
useEffect(
|
||||
() => () => {
|
||||
clearFlashes('user:edit');
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
email: subuser?.email || '',
|
||||
permissions: subuser?.permissions || [],
|
||||
} as Values}
|
||||
initialValues={
|
||||
{
|
||||
email: subuser?.email || '',
|
||||
permissions: subuser?.permissions || [],
|
||||
} as Values
|
||||
}
|
||||
validationSchema={object().shape({
|
||||
email: string()
|
||||
.max(191, 'Email addresses must not exceed 191 characters.')
|
||||
|
|
@ -97,7 +105,9 @@ const EditSubuserModal = ({ subuser }: Props) => {
|
|||
<Form>
|
||||
<div css={tw`flex justify-between`}>
|
||||
<h2 css={tw`text-2xl`} ref={ref}>
|
||||
{subuser ? `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}` : 'Create new subuser'}
|
||||
{subuser
|
||||
? `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
|
||||
: 'Create new subuser'}
|
||||
</h2>
|
||||
<div>
|
||||
<Button type={'submit'} css={tw`w-full sm:w-auto`}>
|
||||
|
|
@ -106,44 +116,46 @@ const EditSubuserModal = ({ subuser }: Props) => {
|
|||
</div>
|
||||
</div>
|
||||
<FlashMessageRender byKey={'user:edit'} css={tw`mt-4`} />
|
||||
{(!isRootAdmin && loggedInPermissions[0] !== '*') &&
|
||||
{!isRootAdmin && loggedInPermissions[0] !== '*' && (
|
||||
<div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
|
||||
<p css={tw`text-sm text-neutral-300`}>
|
||||
Only permissions which your account is currently assigned may be selected when creating or
|
||||
modifying other users.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{!subuser &&
|
||||
)}
|
||||
{!subuser && (
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
name={'email'}
|
||||
label={'User Email'}
|
||||
description={'Enter the email address of the user you wish to invite as a subuser for this server.'}
|
||||
description={
|
||||
'Enter the email address of the user you wish to invite as a subuser for this server.'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
<div css={tw`my-6`}>
|
||||
{Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => (
|
||||
<PermissionTitleBox
|
||||
key={`permission_${key}`}
|
||||
title={key}
|
||||
isEditable={canEditUser}
|
||||
permissions={Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`)}
|
||||
css={index > 0 ? tw`mt-4` : undefined}
|
||||
>
|
||||
<p css={tw`text-sm text-neutral-400 mb-4`}>
|
||||
{permissions[key].description}
|
||||
</p>
|
||||
{Object.keys(permissions[key].keys).map(pkey => (
|
||||
<PermissionRow
|
||||
key={`permission_${key}.${pkey}`}
|
||||
permission={`${key}.${pkey}`}
|
||||
disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
|
||||
/>
|
||||
))}
|
||||
</PermissionTitleBox>
|
||||
))}
|
||||
{Object.keys(permissions)
|
||||
.filter((key) => key !== 'websocket')
|
||||
.map((key, index) => (
|
||||
<PermissionTitleBox
|
||||
key={`permission_${key}`}
|
||||
title={key}
|
||||
isEditable={canEditUser}
|
||||
permissions={Object.keys(permissions[key].keys).map((pkey) => `${key}.${pkey}`)}
|
||||
css={index > 0 ? tw`mt-4` : undefined}
|
||||
>
|
||||
<p css={tw`text-sm text-neutral-400 mb-4`}>{permissions[key].description}</p>
|
||||
{Object.keys(permissions[key].keys).map((pkey) => (
|
||||
<PermissionRow
|
||||
key={`permission_${key}.${pkey}`}
|
||||
permission={`${key}.${pkey}`}
|
||||
disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
|
||||
/>
|
||||
))}
|
||||
</PermissionTitleBox>
|
||||
))}
|
||||
</div>
|
||||
<Can action={subuser ? 'user.update' : 'user.create'}>
|
||||
<div css={tw`pb-6 flex justify-end`}>
|
||||
|
|
|
|||
Reference in a new issue