local-it/dashboard
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'fix/user-apps-refactor' into 'main'

Browse source 
Fix/user apps refactor

See merge request stackspin/dashboard!7
This commit is contained in:
Valentino 2021-11-24 08:16:46 +00:00
commit 242aac2d32
19 changed files with 281 additions and 499 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/Modal/Modal/Modal.tsx
View file

@ -3,7 +3,14 @@ import { Dialog, Transition } from '@headlessui/react';
import { XIcon } from '@heroicons/react/solid';
import { ModalProps } from './types';
export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, title = '' }) => {
export const Modal: React.FC<ModalProps> = ({
open,
onClose,
onSave,
children,
title = '',
useCancelButton = false,
}) => {
const cancelButtonRef = useRef(null);
return (
@ -36,6 +43,7 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
{!useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
<div>{title}</div>
<button
@ -47,7 +55,10 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
<XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</button>
</div>
)}
<div className="bg-white px-4 p-6">{children}</div>
{onSave && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
@ -57,6 +68,16 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
>
Save Changes
</button>
{useCancelButton && (
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</button>
)}
</div>
)}
</div>

1
src/components/Modal/Modal/types.ts
View file

@ -3,4 +3,5 @@ export type ModalProps = {
onClose: () => void;
title?: string;
onSave?: () => void;
useCancelButton?: boolean;
};

7
src/modules/apps/AppSingle.tsx
View file

@ -3,9 +3,7 @@ import { Link, RouteComponentProps, RouterProps } from '@reach/router';
import { ChevronRightIcon } from '@heroicons/react/solid';
import { XCircleIcon } from '@heroicons/react/outline';
import { Tabs } from 'src/components';
import { GeneralTab } from './GeneralTab';
import { Secrets } from './Secrets';
import { Advanced } from './Advanced';
import { AdvancedTab, GeneralTab } from './components';
type AppSingleProps = RouteComponentProps & RouterProps;
@ -16,8 +14,7 @@ const pages = [
const tabs = [
{ name: 'General', component: <GeneralTab /> },
{ name: 'Secrets & Passwords', component: <Secrets /> },
{ name: 'Advanced Configuration', component: <Advanced /> },
{ name: 'Advanced Configuration', component: <AdvancedTab /> },
];
export const AppSingle: React.FC<AppSingleProps> = () => {

85
src/modules/apps/Apps.tsx
View file

@ -1,4 +1,5 @@
import React, { useState, useCallback } from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useMemo } from 'react';
import { RouteComponentProps, navigate, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
@ -12,11 +13,50 @@ const pages = [{ name: 'Apps', href: '#', current: true }];
export const Apps: React.FC<AppsProps> = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [search, setSearch] = useState('');
const deleteModalOpen = () => setDeleteModal(true);
const deleteModalClose = () => setDeleteModal(false);
const columns: any = React.useMemo(
const handleSearch = useCallback((event: any) => {
setSearch(event.target.value);
}, []);
const data: any[] = useMemo(
() => [
{
id: 1,
name: 'Nextcloud',
status: 'Active for everyone',
assetSrc: './assets/nextcloud.svg',
},
{
id: 2,
name: 'Wekan',
status: 'Active for everyone',
assetSrc: './assets/wekan.svg',
},
{
id: 3,
name: 'Rocketchat',
status: 'Active for everyone',
assetSrc: './assets/rocketchat.svg',
},
{
id: 4,
name: 'Wordpress',
status: 'Active for everyone',
assetSrc: './assets/wordpress.svg',
},
],
[],
);
const filterSearch = useMemo(() => {
return data.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
}, [search]);
const columns: any = useMemo(
() => [
{
Header: 'Name',
@ -70,36 +110,6 @@ export const Apps: React.FC<AppsProps> = () => {
[],
);
const data: any[] = React.useMemo(
() => [
{
id: 1,
name: 'Nextcloud',
status: 'Active for everyone',
assetSrc: './assets/nextcloud.svg',
},
{
id: 2,
name: 'Wekan',
status: 'Active for everyone',
assetSrc: './assets/wekan.svg',
},
{
id: 3,
name: 'Rocketchat',
status: 'Active for everyone',
assetSrc: './assets/rocketchat.svg',
},
{
id: 4,
name: 'Wordpress',
status: 'Active for everyone',
assetSrc: './assets/wordpress.svg',
},
],
[],
);
const selectedRows = useCallback((rows: Record<string, boolean>) => {
setSelectedRowsIds(rows);
}, []);
@ -146,8 +156,8 @@ export const Apps: React.FC<AppsProps> = () => {
</div>
<div className="flex justify-between w-100 my-3 items-center">
<div>
<div className="mr-3 inline-block">
<div className="flex items-center">
{/* <div className="mr-3 inline-block">
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
Location
</label>
@ -162,9 +172,9 @@ export const Apps: React.FC<AppsProps> = () => {
<option>Admins</option>
<option>Members</option>
</select>
</div>
</div> */}
<div className="mb-5 inline-block">
<div className="inline-block">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
Search candidates
</label>
@ -179,6 +189,7 @@ export const Apps: React.FC<AppsProps> = () => {
id="email"
className="focus:ring-primary-dark focus:border-primary-dark block w-full rounded-md pl-10 sm:text-sm border-gray-200"
placeholder="Search Apps"
onChange={handleSearch}
/>
</div>
</div>
@ -201,7 +212,7 @@ export const Apps: React.FC<AppsProps> = () => {
<div className="-my-2 sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow border-b border-gray-200 sm:rounded-lg">
<Table data={data} columns={columns} getSelectedRowIds={selectedRows} selectable />
<Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div>
</div>
</div>

10
src/modules/apps/Advanced.tsx → src/modules/apps/components/AdvancedTab/AdvancedTab.tsx
View file

@ -6,17 +6,21 @@ import { highlight, languages } from 'prismjs';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-yaml';
import 'prismjs/themes/prism.css';
import { initialEditorYaml } from './consts';
import { initialEditorYaml } from '../../consts';
import { Secrets } from './components';
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}
export const Advanced = () => {
export const AdvancedTab = () => {
const [code, setCode] = React.useState(initialEditorYaml);
return (
<>
<div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between mb-5">
<h1 className="text-2xl leading-6 font-medium text-gray-900">Configuration</h1>
</div>
<div className="grid grid-flow-col grid-cols-2 gap-8">
<div>
<div>
@ -153,6 +157,8 @@ search:
Save changes
</button>
</div>
<Secrets />
</>
);
};

0
src/modules/apps/ChangeSecretModal.tsx → src/modules/apps/components/AdvancedTab/components/ChangeSecretModal.tsx
View file

35
src/modules/apps/Secrets.tsx → src/modules/apps/components/AdvancedTab/components/Secrets.tsx
View file

@ -1,11 +1,12 @@
import React, { useState } from 'react';
import { ClipboardIcon, KeyIcon } from '@heroicons/react/outline';
import { ChevronDownIcon, ChevronRightIcon, ClipboardIcon, KeyIcon } from '@heroicons/react/outline';
import { showToast } from 'src/common/util/show-toast';
import { Table } from 'src/components';
import { ChangeSecretModal } from './ChangeSecretModal';
export const Secrets = () => {
const [secretModal, setSecretModal] = useState(false);
const [openDangerZone, setOpenDangerZone] = useState(false);
const secretModalOpen = () => setSecretModal(true);
const secretModalClose = () => setSecretModal(false);
@ -15,6 +16,8 @@ export const Secrets = () => {
setSecretModal(false);
};
const toggleDangerZone = () => setOpenDangerZone((prevState) => !prevState);
const columns: any = React.useMemo(
() => [
{
@ -65,7 +68,7 @@ export const Secrets = () => {
<button
onClick={secretModalOpen}
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
className="inline-flex items-center px-4 py-2 border border-red-400 shadow-sm text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
<KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Change secret
@ -116,17 +119,31 @@ export const Secrets = () => {
return (
<>
<div className="py-4">
<div className="flex flex-col">
<div className="-my-2 sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div
className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between mt-24 mb-5 cursor-pointer"
onClick={toggleDangerZone}
>
<h1 className="text-2xl leading-6 font-medium text-gray-900">Danger zone</h1>
<button
type="button"
className="inline-flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
{openDangerZone ? (
<ChevronDownIcon className="flex-shrink-0 h-5 w-5 text-gray-600" aria-hidden="true" />
) : (
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-600" aria-hidden="true" />
)}
</button>
</div>
{openDangerZone && (
<div className="border-2 border-red-500 rounded-md overflow-hidden">
<div className="border border-gray-200">
<Table data={data} columns={columns} />
</div>
</div>
</div>
</div>
</div>
)}
<ChangeSecretModal open={secretModal} onClose={secretModalClose} onSave={secretsModalSave} />
</>

2
src/modules/apps/components/AdvancedTab/components/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { Secrets } from './Secrets';
export { ChangeSecretModal } from './ChangeSecretModal';

1
src/modules/apps/components/AdvancedTab/index.ts Normal file
View file

@ -0,0 +1 @@
export { AdvancedTab } from './AdvancedTab';

0
src/modules/apps/GeneralTab.tsx → src/modules/apps/components/GeneralTab/GeneralTab.tsx
View file

1
src/modules/apps/components/GeneralTab/index.ts Normal file
View file

@ -0,0 +1 @@
export { GeneralTab } from './GeneralTab';

2
src/modules/apps/components/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { GeneralTab } from './GeneralTab';
export { AdvancedTab } from './AdvancedTab';

36
src/modules/users/Users.tsx
View file

@ -1,7 +1,8 @@
import React, { useState, useCallback, useEffect } from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { RouteComponentProps, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, KeyIcon, TrashIcon } from '@heroicons/react/outline';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { useUsers } from 'src/services/users';
import { Table } from 'src/components';
import { ConfirmationModal } from 'src/components/Modal';
@ -13,8 +14,13 @@ export const Users: React.FC<RouteComponentProps> = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [configureModal, setConfigureModal] = useState(false);
const [search, setSearch] = useState('');
const { loadUsers, users } = useUsers();
const handleSearch = useCallback((event: any) => {
setSearch(event.target.value);
}, []);
// TODO: Check why it needs any
const allUsers: any = users.items;
@ -31,6 +37,10 @@ export const Users: React.FC<RouteComponentProps> = () => {
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, []);
const filterSearch = useMemo(() => {
return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
}, [search, allUsers]);
const deleteModalOpen = () => setDeleteModal(true);
const deleteModalClose = () => setDeleteModal(false);
@ -117,6 +127,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
<h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
<div className="mt-3 sm:mt-0 sm:ml-4">
<button
onClick={configureModalOpen}
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
>
@ -126,9 +137,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
</div>
</div>
<div className="flex justify-between w-100 my-3 items-center">
<div>
<div className="mr-3 inline-block shadow-sm">
<div className="flex justify-between w-100 my-3 items-center mb-5 ">
<div className="flex items-center">
{/* <div className="mr-3 inline-block shadow-sm">
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
Location
</label>
@ -143,9 +154,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
<option>Admins</option>
<option>Members</option>
</select>
</div>
</div> */}
<div className="mb-5 inline-block">
<div className="inline-block">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
Search candidates
</label>
@ -160,6 +171,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
id="email"
className="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-md pl-10 sm:text-sm border-gray-200"
placeholder="Search Users"
onChange={handleSearch}
/>
</div>
</div>
@ -168,14 +180,6 @@ export const Users: React.FC<RouteComponentProps> = () => {
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
<div className="flex items-center">
<button
type="button"
className="mr-3 inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
<KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Edit app access
</button>
<button
onClick={deleteModalOpen}
type="button"
@ -192,7 +196,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
<div className="-my-2 sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow border-b border-gray-200 sm:rounded-lg">
<Table data={allUsers} columns={columns} getSelectedRowIds={selectedRows} selectable />
<Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div>
</div>
</div>

181
src/modules/users/components/UserModal/UserModal.tsx
View file

@ -1,85 +1,122 @@
import React, { Fragment, useRef } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { Tabs } from 'src/components';
import { UserDetailsTab } from './components/UserDetailsTab';
import { AdvancedTab } from './components/AdvancedTab';
import { AppAccessTab } from './components/AppAccess';
type UserModalProps = {
open: boolean;
onClose: () => void;
onSave?: () => void;
};
const tabs = [
{ name: 'User Details', component: <UserDetailsTab /> },
{ name: 'Advanced', component: <AdvancedTab /> },
{ name: 'App Access', component: <AppAccessTab /> },
];
import React from 'react';
import { Modal } from 'src/components';
import { appAccessList } from './consts';
import { UserModalProps } from './types';
export const UserModal = ({ open, onClose, onSave = () => {} }: UserModalProps) => {
const cancelButtonRef = useRef(null);
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
auto-reopen="true"
className="fixed z-10 inset-0 overflow-y-auto"
initialFocus={cancelButtonRef}
onClose={onClose}
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<Modal onClose={onClose} open={open} onSave={onSave} useCancelButton>
<div className="bg-white px-4">
<div className="space-y-4 divide-y divide-gray-200">
<div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
</div>
{/* This element is to trick the browser into centering the modal contents. */}
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Name
</label>
<div className="mt-1">
<input
type="text"
name="name"
id="name"
autoComplete="given-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email
</label>
<div className="mt-1">
<input
type="email"
name="email"
id="email"
autoComplete="family-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Status
</label>
<div className="mt-1">
<select
id="status"
name="status"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Tabs tabs={tabs} />
<option>Active</option>
<option>Inactive</option>
<option>Banned</option>
</select>
</div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onSave}
</div>
<div className="sm:col-span-3">
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Role
</label>
<div className="mt-1">
<select
id="status"
name="status"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
Save Changes
</button>
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
<option>User</option>
<option>Admin</option>
<option>Super Admin</option>
</select>
</div>
</div>
</div>
</div>
<div>
<div className="mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200 ">
{appAccessList.map((app: any) => {
return (
<li className="py-4" key={app.name}>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0 flex-1 flex items-center">
<img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
</div>
<div>
<select
id={app.name}
name={app.name}
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
Cancel
</button>
<option>User</option>
<option>Admin</option>
<option>Super Admin</option>
</select>
</div>
</div>
</Transition.Child>
</li>
);
})}
</ul>
</div>
</Dialog>
</Transition.Root>
</div>
</div>
</div>
</div>
</Modal>
);
};

113
src/modules/users/components/UserModal/components/AdvancedTab.tsx
View file

@ -1,113 +0,0 @@
import React, { useState } from 'react';
import { InformationCircleIcon } from '@heroicons/react/solid';
import { Switch } from '@headlessui/react';
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}
export const AdvancedTab = () => {
const [enabled, setEnabled] = useState(false);
return (
<div>
<div className="rounded-md py-2 mb-6">
<div className="flex">
<div className="flex-shrink-0">
<InformationCircleIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-gray-900">You can give or revoke app access for this user</p>
</div>
</div>
</div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<span className="flex-grow flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
User
</Switch.Label>
<Switch.Description as="span" className="text-sm text-gray-500">
Gives this user access only to assigned apps.
</Switch.Description>
</span>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<span className="flex-grow flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
Admin
</Switch.Label>
<Switch.Description as="span" className="text-sm text-gray-500">
Gives this user access to all apps and permission to change other users roles
</Switch.Description>
</span>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<span className="flex-grow flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
Super Admin
</Switch.Label>
<Switch.Description as="span" className="text-sm text-gray-500">
Will transfer all Super Admin rights to this user
</Switch.Description>
</span>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
</div>
);
};

138
src/modules/users/components/UserModal/components/AppAccess.tsx
View file

@ -1,138 +0,0 @@
import React, { useState } from 'react';
import { Switch } from '@headlessui/react';
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}
export const AppAccessTab = () => {
const [enabled, setEnabled] = useState(false);
return (
<div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<div className="flex-grow flex items-center">
<div className="flex-shrink-0 h-10 w-10 mr-4">
<img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wekan.svg" alt="" />
</div>
<div className="flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
Wekan
</Switch.Label>
</div>
</div>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<div className="flex-grow flex items-center">
<div className="flex-shrink-0 h-10 w-10 mr-4">
<img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wordpress.svg" alt="" />
</div>
<div className="flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
Wordpress
</Switch.Label>
</div>
</div>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<div className="flex-grow flex items-center">
<div className="flex-shrink-0 h-10 w-10 mr-4">
<img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/nextcloud.svg" alt="" />
</div>
<div className="flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
Nextcloud
</Switch.Label>
</div>
</div>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="mb-6">
<Switch.Group as="div" className="flex items-center justify-between">
<div className="flex-grow flex items-center">
<div className="flex-shrink-0 h-10 w-10 mr-4">
<img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/rocketchat.svg" alt="" />
</div>
<div className="flex flex-col">
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
Rocketchat
</Switch.Label>
</div>
</div>
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</Switch.Group>
</div>
</div>
);
};

90
src/modules/users/components/UserModal/components/UserDetailsTab.tsx
View file

@ -1,90 +0,0 @@
import React from 'react';
export const UserDetailsTab = () => {
return (
<div className="space-y-8 divide-y divide-gray-200">
<div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
</div>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Name
</label>
<div className="mt-1">
<input
type="text"
name="name"
id="name"
autoComplete="given-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email
</label>
<div className="mt-1">
<input
type="email"
name="email"
id="email"
autoComplete="family-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700">
Current Password
</label>
<div className="mt-1">
<input
type="password"
name="currentPassword"
id="currentPassword"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
Confirm Password
</label>
<div className="mt-1">
<input
type="password"
name="confirmPassword"
id="confirmPassword"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Status
</label>
<div className="mt-1">
<select
id="status"
name="status"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
<option>Active</option>
<option>Inactive</option>
<option>Banned</option>
</select>
</div>
</div>
</div>
</div>
</div>
);
};

18
src/modules/users/components/UserModal/consts.ts Normal file
View file

@ -0,0 +1,18 @@
export const appAccessList = [
{
image: '/assets/wekan.svg',
name: 'Wekan',
},
{
image: '/assets/wordpress.svg',
name: 'Wordpress',
},
{
image: '/assets/nextcloud.svg',
name: 'NextCloud',
},
{
image: '/assets/rocketchat.svg',
name: 'RocketChat',
},
];

5
src/modules/users/components/UserModal/types.ts Normal file
View file

@ -0,0 +1,5 @@
export type UserModalProps = {
open: boolean;
onClose: () => void;
onSave?: () => void;
};