Duplicate save/invite button at top
Adds the Save / Invite User button at the top also
This commit is contained in:
parent
c370e08f65
commit
e0bc9ac50f
1 changed files with 40 additions and 31 deletions
|
@ -41,7 +41,7 @@ const PermissionLabel = styled.label`
|
||||||
${tw`border-neutral-500 bg-neutral-800`};
|
${tw`border-neutral-500 bg-neutral-800`};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
&:not(:first-of-type) {
|
||||||
${tw`mt-4 sm:mt-2`};
|
${tw`mt-4 sm:mt-2`};
|
||||||
}
|
}
|
||||||
|
@ -90,11 +90,11 @@ const PermissionTitledBox = memo(({ isEditable, permission, permissions, classNa
|
||||||
<div css={tw`flex items-center`}>
|
<div css={tw`flex items-center`}>
|
||||||
<p css={tw`text-sm uppercase flex-1`}>{permission}</p>
|
<p css={tw`text-sm uppercase flex-1`}>{permission}</p>
|
||||||
{isEditable &&
|
{isEditable &&
|
||||||
<Input
|
<Input
|
||||||
type={'checkbox'}
|
type={'checkbox'}
|
||||||
checked={permissions.every(p => values.permissions.includes(p))}
|
checked={permissions.every(p => values.permissions.includes(p))}
|
||||||
onChange={onCheckboxClicked}
|
onChange={onCheckboxClicked}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -132,30 +132,39 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
|
<Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
|
||||||
<h2 css={tw`text-2xl`} ref={ref}>
|
<div css={tw`flex justify-between`}>
|
||||||
{subuser ?
|
<div>
|
||||||
`${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
|
<h2 css={tw`text-2xl mr-4`} ref={ref}>
|
||||||
:
|
{subuser ?
|
||||||
'Create new subuser'
|
`${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
|
||||||
}
|
:
|
||||||
</h2>
|
'Create new subuser '
|
||||||
<FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
|
}
|
||||||
{(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
|
</h2>
|
||||||
<div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
|
</div>
|
||||||
<p css={tw`text-sm text-neutral-300`}>
|
<div>
|
||||||
Only permissions which your account is currently assigned may be selected when creating or
|
<Button type={'submit'} css={tw`w-full sm:w-auto`}>
|
||||||
modifying other users.
|
{subuser ? 'Save' : 'Invite User'}
|
||||||
</p>
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<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`}>
|
||||||
|
<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`}>
|
<div css={tw`mt-4`}>
|
||||||
<Field
|
<Field
|
||||||
name={'email'}
|
name={'email'}
|
||||||
label={'User 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>
|
||||||
}
|
}
|
||||||
<div css={tw`my-6`}>
|
<div css={tw`my-6`}>
|
||||||
{Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => {
|
{Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => {
|
||||||
|
@ -190,9 +199,9 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
||||||
<div css={tw`flex-1`}>
|
<div css={tw`flex-1`}>
|
||||||
<Label as={'p'} css={tw`font-medium`}>{pkey}</Label>
|
<Label as={'p'} css={tw`font-medium`}>{pkey}</Label>
|
||||||
{permissions[key].keys[pkey].length > 0 &&
|
{permissions[key].keys[pkey].length > 0 &&
|
||||||
<p css={tw`text-xs text-neutral-400 mt-1`}>
|
<p css={tw`text-xs text-neutral-400 mt-1`}>
|
||||||
{permissions[key].keys[pkey]}
|
{permissions[key].keys[pkey]}
|
||||||
</p>
|
</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</PermissionLabel>
|
</PermissionLabel>
|
||||||
|
@ -258,7 +267,7 @@ export default ({ subuser, ...props }: Props) => {
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Form>
|
<Form>
|
||||||
<EditSubuserModal ref={ref} subuser={subuser} {...props}/>
|
<EditSubuserModal ref={ref} subuser={subuser} {...props} />
|
||||||
</Form>
|
</Form>
|
||||||
</Formik>
|
</Formik>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue