Update users screens

2020-07-04 16:26:07 -07:00 · 2020-07-04 16:26:07 -07:00 · f3586056f4
commit f3586056f4
parent d27bda1c74
15 changed files with 155 additions and 121 deletions
--- a/resources/scripts/components/server/users/AddSubuserButton.tsx
+++ b/resources/scripts/components/server/users/AddSubuserButton.tsx
@ -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>
        </>
    );
 };
--- a/resources/scripts/components/server/users/EditSubuserModal.tsx
+++ b/resources/scripts/components/server/users/EditSubuserModal.tsx
@ -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>
--- a/resources/scripts/components/server/users/RemoveSubuserButton.tsx
+++ b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
@ -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}/>
--- a/resources/scripts/components/server/users/UserRow.tsx
+++ b/resources/scripts/components/server/users/UserRow.tsx
@ -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`}>
                    &nbsp;
                    <FontAwesomeIcon
                        icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
@ -45,13 +47,13 @@ export default ({ subuser }: Props) => {
                    />
                    &nbsp;
                </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>
    );
 };
--- a/resources/scripts/components/server/users/UsersContainer.tsx
+++ b/resources/scripts/components/server/users/UsersContainer.tsx
@ -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&apos;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>