Duplicate save/invite button at top

Adds the Save / Invite User button at the top also
This commit is contained in:
Charles Morgan 2020-10-18 04:31:54 -04:00
parent c370e08f65
commit e0bc9ac50f
No known key found for this signature in database
GPG key ID: D71946CD723249BD

View file

@ -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>
); );