Initial commit
This commit is contained in:
Luka Radenovic
commit
fa30c04815
117 changed files with 33513 additions and 0 deletions
158
src/modules/apps/Advanced.tsx
Normal file
158
src/modules/apps/Advanced.tsx
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import Editor from 'react-simple-code-editor';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { ChevronDownIcon } from '@heroicons/react/solid';
|
||||
import { highlight, languages } from 'prismjs';
|
||||
import 'prismjs/components/prism-clike';
|
||||
import 'prismjs/components/prism-yaml';
|
||||
import 'prismjs/themes/prism.css';
|
||||
import { initialEditorYaml } from './consts';
|
||||
|
||||
function classNames(...classes: any) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
export const Advanced = () => {
|
||||
const [code, setCode] = React.useState(initialEditorYaml);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-flow-col grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div>
|
||||
<div className="px-4 h-16 sm:px-6 bg-gray-200 flex justify-between items-center rounded-t-lg">
|
||||
<span className="text-gray-600 text-lg leading-6 font-medium">Edit Configuration</span>
|
||||
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500">
|
||||
Versions
|
||||
<ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="z-10 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
|
||||
'block px-4 py-2 text-sm',
|
||||
)}
|
||||
>
|
||||
Save Version
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
|
||||
'block px-4 py-2 text-sm',
|
||||
)}
|
||||
>
|
||||
View Version History
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
|
||||
'block px-4 py-2 text-sm',
|
||||
)}
|
||||
>
|
||||
Restore Current Version
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:p-6 border border-t-0 border-gray-200">
|
||||
<Editor
|
||||
value={code}
|
||||
onValueChange={(value) => setCode(value)}
|
||||
highlight={(value) => highlight(value, languages.js, 'yaml')}
|
||||
preClassName="font-mono whitespace-normal font-light"
|
||||
textareaClassName="font-mono overflow-auto font-light"
|
||||
className="font-mono text-sm font-light"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-gray-100 overflow-hidden rounded-lg">
|
||||
<div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
|
||||
<span className="text-gray-600 text-lg leading-6 font-medium">Current Configuration</span>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:p-6 overflow-x-auto">
|
||||
<pre className="font-mono text-sm font-light">
|
||||
{`luck: except
|
||||
natural: still
|
||||
near: though
|
||||
search:
|
||||
- feature
|
||||
- - 1980732354.689713
|
||||
- hour
|
||||
- butter:
|
||||
ordinary: 995901949.8974948
|
||||
teeth: true
|
||||
whole:
|
||||
- -952367353
|
||||
- - talk: -1773961379
|
||||
temperature: false
|
||||
oxygen: true
|
||||
laugh:
|
||||
flag:
|
||||
in: 2144751662
|
||||
hospital: -1544066384.1973226
|
||||
law: congress
|
||||
great: stomach`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end mt-10">
|
||||
<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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mr-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
Verify
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
97
src/modules/apps/AppSingle.tsx
Normal file
97
src/modules/apps/AppSingle.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import React from 'react';
|
||||
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';
|
||||
|
||||
type AppSingleProps = RouteComponentProps & RouterProps;
|
||||
|
||||
const pages = [
|
||||
{ name: 'Apps', to: '/apps', current: true },
|
||||
{ name: 'Nextcloud', to: '', current: false },
|
||||
];
|
||||
|
||||
const tabs = [
|
||||
{ name: 'General', component: <GeneralTab /> },
|
||||
{ name: 'Secrets & Passwords', component: <Secrets /> },
|
||||
{ name: 'Advanced Configuration', component: <Advanced /> },
|
||||
];
|
||||
|
||||
export const AppSingle: React.FC<AppSingleProps> = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
|
||||
<nav className="flex" aria-label="Breadcrumb">
|
||||
<ol className="flex items-center space-x-4">
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{pages.map((page) => (
|
||||
<li key={page.name}>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Link
|
||||
to={page.to}
|
||||
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
aria-current={page.current ? 'page' : undefined}
|
||||
>
|
||||
{page.name}
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
|
||||
<div className="bg-white overflow-hidden shadow rounded-sm mb-5">
|
||||
<div className="px-4 py-5 sm:p-6 flex justify-between items-center">
|
||||
<div className="mr-4 flex items-center">
|
||||
<img
|
||||
className="h-24 w-24 rounded-md overflow-hidden mr-4"
|
||||
src="./../assets/nextcloud.svg"
|
||||
alt="Nextcloud"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl leading-8 font-bold">Nextcloud</h2>
|
||||
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
type="button"
|
||||
className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
|
||||
>
|
||||
<XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
|
||||
Disable App
|
||||
</button>
|
||||
|
||||
<button
|
||||
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 justify-center"
|
||||
>
|
||||
View Documentation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow rounded-sm">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<Tabs tabs={tabs} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
218
src/modules/apps/Apps.tsx
Normal file
218
src/modules/apps/Apps.tsx
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
import React, { useState, useCallback } from 'react';
|
||||
import { RouteComponentProps, navigate, Link } from '@reach/router';
|
||||
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
|
||||
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
|
||||
import { ConfirmationModal } from 'src/components/Modal';
|
||||
import { Table } from 'src/components';
|
||||
|
||||
type AppsProps = RouteComponentProps;
|
||||
|
||||
const pages = [{ name: 'Apps', href: '#', current: true }];
|
||||
|
||||
export const Apps: React.FC<AppsProps> = () => {
|
||||
const [selectedRowsIds, setSelectedRowsIds] = useState({});
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
|
||||
const deleteModalOpen = () => setDeleteModal(true);
|
||||
const deleteModalClose = () => setDeleteModal(false);
|
||||
|
||||
const columns: any = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: 'Name',
|
||||
accessor: 'name',
|
||||
Cell: (e: any) => {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-10 w-10">
|
||||
<img className="h-10 w-10 rounded-md overflow-hidden" src={e.cell.row.original.assetSrc} alt="" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">{e.cell.row.original.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: 'Status',
|
||||
accessor: 'status',
|
||||
Cell: (e: any) => {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-4 w-4 rounded-full bg-green-600" />
|
||||
<div className="ml-2 text-sm text-green-600">{e.cell.row.original.status}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: ' ',
|
||||
Cell: (e: any) => {
|
||||
return (
|
||||
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => navigate(`/apps/${e.cell.row.original.id}`)}
|
||||
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"
|
||||
>
|
||||
<CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Configure
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
width: 'auto',
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
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);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
|
||||
<nav className="flex mb-8" aria-label="Breadcrumb">
|
||||
<ol className="flex items-center space-x-4">
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{pages.map((page) => (
|
||||
<li key={page.name}>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<a
|
||||
href={page.href}
|
||||
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
aria-current={page.current ? 'page' : undefined}
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
|
||||
<h1 className="text-3xl leading-6 font-bold text-gray-900">Apps</h1>
|
||||
<div className="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Add new app
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between w-100 my-3 items-center">
|
||||
<div>
|
||||
<div className="mr-3 inline-block">
|
||||
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
|
||||
Location
|
||||
</label>
|
||||
<select
|
||||
id="location"
|
||||
name="location"
|
||||
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-200 focus:outline-none focus:ring-primary-dark focus:border-primary-dark sm:text-sm rounded-md"
|
||||
defaultValue="All apps"
|
||||
>
|
||||
<option>All apps</option>
|
||||
<option>Owner</option>
|
||||
<option>Admins</option>
|
||||
<option>Members</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 inline-block">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
|
||||
Search candidates
|
||||
</label>
|
||||
<div className="mt-1 flex rounded-md shadow-sm">
|
||||
<div className="relative flex items-stretch flex-grow focus-within:z-10">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
|
||||
<button
|
||||
onClick={deleteModalOpen}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
||||
>
|
||||
<TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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="shadow border-b border-gray-200 sm:rounded-lg">
|
||||
<Table data={data} columns={columns} getSelectedRowIds={selectedRows} selectable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
open={deleteModal}
|
||||
onClose={deleteModalClose}
|
||||
title="Delete service"
|
||||
body="Are you sure you want to delete this service? All of your data will be permanently removed. This action cannot be undone."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
99
src/modules/apps/ChangeSecretModal.tsx
Normal file
99
src/modules/apps/ChangeSecretModal.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import React, { Fragment, useRef } from 'react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
|
||||
type ChangeSecretModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSave?: () => void;
|
||||
};
|
||||
|
||||
export const ChangeSecretModal = ({ open, onClose, onSave = () => {} }: ChangeSecretModalProps) => {
|
||||
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>
|
||||
|
||||
{/* 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">
|
||||
​
|
||||
</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="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-lg sm:w-full">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
|
||||
Change secret
|
||||
</Dialog.Title>
|
||||
<div className="my-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
<span className="font-bold text-red-500">CAUTION:</span> changing this might cause the app to
|
||||
break.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<label htmlFor="appSecret" className="block text-sm font-medium text-gray-700">
|
||||
App Secret
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
type="text"
|
||||
name="appSecret"
|
||||
id="appSecret"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="Enter New App Secret"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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}
|
||||
>
|
||||
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}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
161
src/modules/apps/GeneralTab.tsx
Normal file
161
src/modules/apps/GeneralTab.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import React, { useState } from 'react';
|
||||
import { RadioGroup } from '@headlessui/react';
|
||||
|
||||
function classNames(...classes: any) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
const settings = [
|
||||
{ name: 'Public access', description: 'This project would be available to anyone who has the link' },
|
||||
{ name: 'Private to Project Members', description: 'Only members of this project would be able to access' },
|
||||
{ name: 'Private to you', description: 'You are the only one able to access this project' },
|
||||
];
|
||||
|
||||
export const GeneralTab = () => {
|
||||
const [selected, setSelected] = useState(settings[0]);
|
||||
|
||||
return (
|
||||
<div className="py-4">
|
||||
<div>
|
||||
<div className="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div className="md:col-span-1">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">Privacy</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Change your app privacy</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 md:mt-0 md:col-span-2">
|
||||
<div className="mt-1">
|
||||
<RadioGroup value={selected} onChange={setSelected}>
|
||||
<RadioGroup.Label className="sr-only">Privacy setting</RadioGroup.Label>
|
||||
<div className="bg-white rounded-md -space-y-px">
|
||||
{settings.map((setting, settingIdx) => (
|
||||
<RadioGroup.Option
|
||||
key={setting.name}
|
||||
value={setting}
|
||||
className={({ checked }) =>
|
||||
classNames(
|
||||
settingIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
|
||||
settingIdx === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
|
||||
checked ? 'bg-primary-50 border-primary-400 z-10' : 'border-gray-200',
|
||||
'relative border p-4 flex cursor-pointer focus:outline-none',
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ active, checked }) => (
|
||||
<>
|
||||
<span
|
||||
className={classNames(
|
||||
checked ? 'bg-primary-600 border-transparent' : 'bg-white border-gray-300',
|
||||
active ? 'ring-2 ring-offset-2 ring-primary-100' : '',
|
||||
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="rounded-full bg-white w-1.5 h-1.5" />
|
||||
</span>
|
||||
<div className="ml-3 flex flex-col">
|
||||
<RadioGroup.Label
|
||||
as="span"
|
||||
className={classNames(
|
||||
checked ? 'text-primary-900' : 'text-gray-900',
|
||||
'block text-sm font-medium',
|
||||
)}
|
||||
>
|
||||
{setting.name}
|
||||
</RadioGroup.Label>
|
||||
<RadioGroup.Description
|
||||
as="span"
|
||||
className={classNames(checked ? 'text-primary-900' : 'text-gray-500', 'block text-sm')}
|
||||
>
|
||||
{setting.description}
|
||||
</RadioGroup.Description>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
))}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<div className="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div className="md:col-span-1">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">Change you notifications settings</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 md:mt-0 md:col-span-2">
|
||||
<fieldset className="space-y-5 -mt-4">
|
||||
<legend className="sr-only">Notifications</legend>
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
id="comments"
|
||||
aria-describedby="comments-description"
|
||||
name="comments"
|
||||
type="checkbox"
|
||||
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label htmlFor="comments" className="font-medium text-gray-700">
|
||||
Comments
|
||||
</label>
|
||||
<p id="comments-description" className="text-gray-500">
|
||||
Get notified when someones posts a comment on a posting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
id="candidates"
|
||||
aria-describedby="candidates-description"
|
||||
name="candidates"
|
||||
type="checkbox"
|
||||
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label htmlFor="candidates" className="font-medium text-gray-700">
|
||||
Candidates
|
||||
</label>
|
||||
<p id="candidates-description" className="text-gray-500">
|
||||
Get notified when a candidate applies for a job.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
id="offers"
|
||||
aria-describedby="offers-description"
|
||||
name="offers"
|
||||
type="checkbox"
|
||||
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label htmlFor="offers" className="font-medium text-gray-700">
|
||||
Offers
|
||||
</label>
|
||||
<p id="offers-description" className="text-gray-500">
|
||||
Get notified when a candidate accepts or rejects an offer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
134
src/modules/apps/Secrets.tsx
Normal file
134
src/modules/apps/Secrets.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import React, { useState } from 'react';
|
||||
import { 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 secretModalOpen = () => setSecretModal(true);
|
||||
const secretModalClose = () => setSecretModal(false);
|
||||
|
||||
const secretsModalSave = () => {
|
||||
showToast('The secret has been saved successfully.');
|
||||
setSecretModal(false);
|
||||
};
|
||||
|
||||
const columns: any = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: 'Name',
|
||||
accessor: 'name',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
Header: 'Secret',
|
||||
accessor: 'secret',
|
||||
Cell: (e: any) => {
|
||||
const [reveal, setReveal] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{!reveal ? (
|
||||
<>
|
||||
<div className="w-48 bg-gray-200 h-4 rounded-full mr-4" />
|
||||
<button
|
||||
onClick={() => setReveal(true)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded text-gray-700 hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
Reveal secret
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div>{e.cell.row.original.secret}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
Header: ' ',
|
||||
Cell: () => {
|
||||
return (
|
||||
<div className="flex items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => showToast('The secret has been copied to your clipboard.')}
|
||||
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 mr-3"
|
||||
>
|
||||
<ClipboardIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Copy Secret
|
||||
</button>
|
||||
|
||||
<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"
|
||||
>
|
||||
<KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Change secret
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const data: any[] = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 1,
|
||||
name: 'nextcloud_mariadb_password',
|
||||
secret: 'xEtC2dvUsBVzoTA19fOyDF4IwpPSWW62I92F59s69EO9vp56',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'nextcloud_mariadb_root_password',
|
||||
secret: `OB.IHD:HPY{x<)>@+B'p(LUU@k-Wv=w(!@)?7Zq%@nE7GY]!`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'nextcloud_password (admin login)',
|
||||
secret: `#B&>4A;O#XEF]_dE*zxF26>8fF:akgGL8gi#yALK{ZY[P$eE`,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'onlyoffice_jwt_secret',
|
||||
secret: `U),xxEbt*g~t[4:Jl6RU8Tih#3ExinoV|K?.gL/R%?;gzK)R`,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'onlyoffice_postgresql_password',
|
||||
secret: `U),xxEbt*g~t[4:Jl6RU8Tih#3ExinoV|K?.gL/R%?;gzK)R`,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'onlyoffice_rabbitmq_password',
|
||||
secret: `r7sFEUL&U(a;3yR;CaC7P,bPwUEKZOT=IyjJq%AWniY!ncP[`,
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
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="border border-gray-200">
|
||||
<Table data={data} columns={columns} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ChangeSecretModal open={secretModal} onClose={secretModalClose} onSave={secretsModalSave} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
23
src/modules/apps/consts.ts
Normal file
23
src/modules/apps/consts.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export const initialEditorYaml = () => {
|
||||
return `luck: except
|
||||
natural: still
|
||||
near: though
|
||||
search:
|
||||
- feature
|
||||
- - 1980732354.689713
|
||||
- hour
|
||||
- butter:
|
||||
ordinary: 995901949.8974948
|
||||
teeth: true
|
||||
whole:
|
||||
- -952367353
|
||||
- - talk: -1773961379
|
||||
temperature: false
|
||||
oxygen: true
|
||||
laugh:
|
||||
flag:
|
||||
in: 2144751662
|
||||
hospital: -1544066384.1973226
|
||||
law: congress
|
||||
great: stomach`;
|
||||
};
|
||||
2
src/modules/apps/index.ts
Normal file
2
src/modules/apps/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { Apps } from './Apps';
|
||||
export { AppSingle } from './AppSingle';
|
||||
85
src/modules/dashboard/Dashboard.tsx
Normal file
85
src/modules/dashboard/Dashboard.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import React from 'react';
|
||||
import { Link, navigate, RouteComponentProps } from '@reach/router';
|
||||
import clsx from 'clsx';
|
||||
import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts';
|
||||
|
||||
export const Dashboard: React.FC<RouteComponentProps> = () => {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
|
||||
<nav className="flex mb-8" aria-label="Breadcrumb">
|
||||
<ol className="flex items-center space-x-4">
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<a href="#" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div className="pb-5 sm:flex sm:items-center sm:justify-between">
|
||||
<h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 my-10">
|
||||
{DASHBOARD_APPS.map((app) => {
|
||||
return (
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100" key={app.name}>
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div className="mr-4 flex items-center">
|
||||
<img className="h-16 w-16 rounded-md overflow-hidden mr-4" src={app.assetSrc} alt="Nextcloud" />
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl leading-8 font-bold">{app.name}</h2>
|
||||
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-4 sm:px-6 flex justify-end">
|
||||
<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 justify-center"
|
||||
>
|
||||
View Documentation
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate(`/apps/${app.id}`)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
Configure
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
|
||||
<div className="pb-4 border-b border-gray-200 sm:flex sm:items-center">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">Quick access</h3>
|
||||
</div>
|
||||
|
||||
<dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{DASHBOARD_QUICK_ACCESS.map((item) => (
|
||||
<Link
|
||||
to={item.to}
|
||||
key={item.name}
|
||||
className={clsx('bg-white rounded-lg overflow-hidden sm:p-2 flex items-center group', {
|
||||
'opacity-40 cursor-default': !item.active,
|
||||
})}
|
||||
>
|
||||
<div className="w-16 h-16 flex items-center justify-center bg-primary-100 group-hover:bg-primary-200 transition-colors rounded-lg mr-4">
|
||||
<item.icon className="h-6 w-6 text-primary-900" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<dt className="truncate text-sm leading-5 font-medium">{item.name}</dt>
|
||||
<dd className="mt-1 text-gray-500 text-sm leading-5 font-normal">{item.description}</dd>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
100
src/modules/dashboard/consts.ts
Normal file
100
src/modules/dashboard/consts.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import {
|
||||
ChartBarIcon,
|
||||
CloudIcon,
|
||||
UsersIcon,
|
||||
CogIcon,
|
||||
SwitchHorizontalIcon,
|
||||
ClockIcon,
|
||||
ShieldCheckIcon,
|
||||
InformationCircleIcon,
|
||||
} from '@heroicons/react/outline';
|
||||
|
||||
export const DASHBOARD_APPS = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nextcloud',
|
||||
assetSrc: '/assets/nextcloud.svg',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Wekan',
|
||||
assetSrc: '/assets/wekan.svg',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Rocketchat',
|
||||
assetSrc: '/assets/rocketchat.svg',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Wordpress',
|
||||
assetSrc: '/assets/wordpress.svg',
|
||||
},
|
||||
];
|
||||
|
||||
export const DASHBOARD_QUICK_ACCESS = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Users →',
|
||||
to: '/users',
|
||||
description: 'Manage users and their permissions',
|
||||
icon: UsersIcon,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Apps →',
|
||||
to: '/apps',
|
||||
description: 'Stay on top of your deadlines, or don’t — it’s up to you',
|
||||
icon: CloudIcon,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Monitoring →',
|
||||
to: '/dashboard',
|
||||
description: 'Monitor your system with Grafana',
|
||||
icon: ChartBarIcon,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Data Migration →',
|
||||
to: '/dashboard',
|
||||
description: 'Import your data from other platforms and services',
|
||||
icon: SwitchHorizontalIcon,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Account Settings →',
|
||||
to: '/dashboard',
|
||||
description: 'Manage your organisation’s profile and preferences',
|
||||
icon: CogIcon,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Backup & Restore →',
|
||||
to: '/dashboard',
|
||||
description: 'Backup or restore your data',
|
||||
icon: ClockIcon,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Security →',
|
||||
to: '/dashboard',
|
||||
description: 'Configure security settings, view alerts and analytics',
|
||||
icon: ShieldCheckIcon,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Support →',
|
||||
to: '/dashboard',
|
||||
description: 'Access documentation and forum',
|
||||
icon: InformationCircleIcon,
|
||||
active: false,
|
||||
},
|
||||
];
|
||||
1
src/modules/dashboard/index.ts
Normal file
1
src/modules/dashboard/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Dashboard } from './Dashboard';
|
||||
4
src/modules/index.ts
Normal file
4
src/modules/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export { Login } from './login';
|
||||
export { Dashboard } from './dashboard';
|
||||
export { Apps, AppSingle } from './apps';
|
||||
export { Users } from './users';
|
||||
134
src/modules/login/Login.tsx
Normal file
134
src/modules/login/Login.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { navigate, RouteComponentProps } from '@reach/router';
|
||||
import * as yup from 'yup';
|
||||
import clsx from 'clsx';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { LockClosedIcon } from '@heroicons/react/solid';
|
||||
|
||||
import { useAuth } from 'src/services/auth';
|
||||
import { isValid } from 'src/services/api';
|
||||
import { VALIDATION_MESSAGES } from 'src/common/const';
|
||||
import { showToast, ToastType } from 'src/common/util/show-toast';
|
||||
|
||||
const validationSchema = yup.object({
|
||||
email: yup.string().required(VALIDATION_MESSAGES.required('Email')),
|
||||
password: yup.string().required(VALIDATION_MESSAGES.required('Password')),
|
||||
});
|
||||
|
||||
type LoginProps = RouteComponentProps;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export function Login(_: LoginProps) {
|
||||
const { auth, logIn } = useAuth();
|
||||
const { handleSubmit, formState, control } = useForm<{
|
||||
email: string;
|
||||
password: string;
|
||||
remember: boolean;
|
||||
}>({
|
||||
resolver: yupResolver(validationSchema),
|
||||
mode: 'all',
|
||||
defaultValues: { email: process.env.REACT_APP_USERNAME, password: process.env.REACT_APP_PASSWORD },
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
const res = await logIn(values.email, values.password);
|
||||
|
||||
// @ts-ignore
|
||||
if (res.ok) {
|
||||
navigate('/dashboard');
|
||||
showToast('Logged in!');
|
||||
} else {
|
||||
showToast('Username or password incorrect', ToastType.Error);
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isValid(auth)) {
|
||||
navigate('/dashboard');
|
||||
}
|
||||
}, [auth]);
|
||||
|
||||
if (isValid(auth)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div className="flex justify-center">
|
||||
<img className="hidden lg:block" src="assets/logo.svg" alt="Stackspin" />
|
||||
<h2 className="mt-6 text-center text-xl font-bold text-gray-900 sr-only">Sign in</h2>
|
||||
</div>
|
||||
<form className="mt-8 space-y-6" action="#" onSubmit={onSubmit} noValidate>
|
||||
<input type="hidden" name="remember" defaultValue="true" />
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
defaultValue=""
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<>
|
||||
<label htmlFor="email-address" className="sr-only">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
{...field}
|
||||
id="email-address"
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-dark focus:border-primary-dark focus:z-10 sm:text-sm"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
defaultValue=""
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<>
|
||||
<label htmlFor="password" className="sr-only">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
{...field}
|
||||
id="password"
|
||||
type="password"
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-dark focus:border-primary-dark focus:z-10 sm:text-sm"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className={clsx(
|
||||
'group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-dark hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
|
||||
{
|
||||
'is-loading': formState.isSubmitting,
|
||||
},
|
||||
)}
|
||||
disabled={formState.isSubmitting || !formState.isValid}
|
||||
>
|
||||
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
|
||||
<LockClosedIcon className="h-5 w-5 text-white group-hover:text-primary-light" aria-hidden="true" />
|
||||
</span>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/modules/login/index.ts
Normal file
1
src/modules/login/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Login } from './Login';
|
||||
211
src/modules/users/Users.tsx
Normal file
211
src/modules/users/Users.tsx
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
import React, { useState, useCallback, useEffect } 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 { useUsers } from 'src/services/users';
|
||||
import { Table } from 'src/components';
|
||||
import { ConfirmationModal } from 'src/components/Modal';
|
||||
import { UserModal } from './components/UserModal';
|
||||
|
||||
const pages = [{ name: 'Users', href: '#', current: true }];
|
||||
|
||||
export const Users: React.FC<RouteComponentProps> = () => {
|
||||
const [selectedRowsIds, setSelectedRowsIds] = useState({});
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
const [configureModal, setConfigureModal] = useState(false);
|
||||
const { loadUsers, users } = useUsers();
|
||||
|
||||
// TODO: Check why it needs any
|
||||
const allUsers: any = users.items;
|
||||
|
||||
useEffect(() => {
|
||||
const asyncFc = async () => {
|
||||
try {
|
||||
await loadUsers();
|
||||
} catch {
|
||||
// continue
|
||||
}
|
||||
};
|
||||
|
||||
asyncFc();
|
||||
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
||||
}, []);
|
||||
|
||||
const deleteModalOpen = () => setDeleteModal(true);
|
||||
const deleteModalClose = () => setDeleteModal(false);
|
||||
|
||||
const configureModalOpen = () => setConfigureModal(true);
|
||||
const configureModalClose = () => setConfigureModal(false);
|
||||
|
||||
const columns: any = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: 'Name',
|
||||
accessor: 'name',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: 'Email',
|
||||
accessor: 'email',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: 'Status',
|
||||
accessor: 'status',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: 'Last Sign-In',
|
||||
accessor: 'last_login',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: ' ',
|
||||
Cell: () => {
|
||||
return (
|
||||
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={configureModalOpen}
|
||||
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"
|
||||
>
|
||||
<CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Configure
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
width: 'auto',
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const selectedRows = useCallback((rows: Record<string, boolean>) => {
|
||||
setSelectedRowsIds(rows);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
|
||||
<nav className="flex mb-8" aria-label="Breadcrumb">
|
||||
<ol className="flex items-center space-x-4">
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{pages.map((page) => (
|
||||
<li key={page.name}>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<a
|
||||
href={page.href}
|
||||
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
aria-current={page.current ? 'page' : undefined}
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
|
||||
<h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
|
||||
<div className="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Add new user
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between w-100 my-3 items-center">
|
||||
<div>
|
||||
<div className="mr-3 inline-block shadow-sm">
|
||||
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
|
||||
Location
|
||||
</label>
|
||||
<select
|
||||
id="location"
|
||||
name="location"
|
||||
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-200 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
|
||||
defaultValue="All users"
|
||||
>
|
||||
<option>All users</option>
|
||||
<option>Owner</option>
|
||||
<option>Admins</option>
|
||||
<option>Members</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 inline-block">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
|
||||
Search candidates
|
||||
</label>
|
||||
<div className="mt-1 flex rounded-md shadow-sm">
|
||||
<div className="relative flex items-stretch flex-grow focus-within:z-10">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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"
|
||||
className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
||||
>
|
||||
<TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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="shadow border-b border-gray-200 sm:rounded-lg">
|
||||
<Table data={allUsers} columns={columns} getSelectedRowIds={selectedRows} selectable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
open={deleteModal}
|
||||
onClose={deleteModalClose}
|
||||
title="Delete user"
|
||||
body="Are you sure you want to delete this user? All of your data will be permanently removed. This action cannot be undone."
|
||||
/>
|
||||
|
||||
<UserModal open={configureModal} onClose={configureModalClose} onSave={configureModalClose} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
85
src/modules/users/components/UserModal/UserModal.tsx
Normal file
85
src/modules/users/components/UserModal/UserModal.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
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 /> },
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
{/* 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">
|
||||
​
|
||||
</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="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} />
|
||||
</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}
|
||||
>
|
||||
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}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
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
Normal file
138
src/modules/users/components/UserModal/components/AppAccess.tsx
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
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>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
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>
|
||||
);
|
||||
};
|
||||
1
src/modules/users/components/UserModal/index.ts
Normal file
1
src/modules/users/components/UserModal/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { UserModal } from './UserModal';
|
||||
1
src/modules/users/components/index.ts
Normal file
1
src/modules/users/components/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { UserModal } from './UserModal';
|
||||
1
src/modules/users/index.ts
Normal file
1
src/modules/users/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Users } from './Users';
|
||||
Reference in a new issue