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

Feat/hide unused features

Browse source
This commit is contained in:
Valentino 2022-02-09 09:03:44 +00:00
parent 8d5d0a666e
commit 41b86d4a6d
28 changed files with 3357 additions and 20314 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16443
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

7
package.json
View file

@ -7,7 +7,6 @@
"@headlessui/react": "^1.3.0", "@headlessui/react": "^1.3.0",
"@heroicons/react": "^1.0.3", "@heroicons/react": "^1.0.3",
"@hookform/resolvers": "^2.6.1", "@hookform/resolvers": "^2.6.1",
"@reach/router": "^1.3.4",
"@tailwindcss/forms": "^0.3.3", "@tailwindcss/forms": "^0.3.3",
"@tailwindcss/typography": "^0.4.1", "@tailwindcss/typography": "^0.4.1",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
@ -23,11 +22,14 @@
"prismjs": "^1.24.1", "prismjs": "^1.24.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-gravatar": "^2.6.3",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-hook-form": "^7.22.0", "react-hook-form": "^7.22.0",
"react-hot-toast": "^2.0.0", "react-hot-toast": "^2.0.0",
"react-markdown": "^7.0.1", "react-markdown": "^7.0.1",
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-router-dom": "6.2.1",
"react-router": "6.2.1",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-simple-code-editor": "^0.11.0", "react-simple-code-editor": "^0.11.0",
"react-table": "^7.7.0", "react-table": "^7.7.0",
@ -69,9 +71,10 @@
"devDependencies": { "devDependencies": {
"@types/lodash": "^4.14.171", "@types/lodash": "^4.14.171",
"@types/prismjs": "^1.16.6", "@types/prismjs": "^1.16.6",
"@types/reach__router": "^1.3.9",
"@types/react": "^17.0.18", "@types/react": "^17.0.18",
"@types/react-gravatar": "^2.6.10",
"@types/react-helmet": "^6.1.2", "@types/react-helmet": "^6.1.2",
"@types/react-router-dom": "^5.3.3",
"@types/react-table": "^7.7.2", "@types/react-table": "^7.7.2",
"autoprefixer": "^9", "autoprefixer": "^9",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",

5
public/assets/rocketchat.svg
View file

@ -1,5 +0,0 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="160" height="160" fill="#F5455C"/>
<path d="M63.2762 45.8537C65.9188 47.3247 68.3617 49.1288 70.5451 51.2216C74.0286 50.5972 77.5608 50.285 81.0998 50.2888C91.8454 50.2888 102.023 53.1108 109.764 58.224C113.516 60.6466 116.718 63.8284 119.165 67.5644C121.666 71.3356 123 75.7604 123 80.2855C123 84.8107 121.666 89.2354 119.165 93.0066C116.697 96.7535 113.47 99.9397 109.691 102.359C101.95 107.476 91.7729 110.282 81.0273 110.282C77.5058 110.291 73.9905 109.987 70.5227 109.374C68.346 111.474 65.902 113.279 63.2538 114.741C59.2822 116.811 54.8747 117.907 50.3959 117.936C45.9171 117.966 41.4956 116.928 37.4971 114.91C37.4971 114.91 48.4004 105.69 46.5837 97.6219C44.2564 95.3619 42.3972 92.6654 41.1124 89.6865C39.8277 86.7076 39.1426 83.5048 39.0963 80.261C39.2156 73.7542 41.9078 67.5597 46.5837 63.0333C48.3524 54.9531 37.4971 45.7332 37.4971 45.7332C41.4946 43.704 45.9182 42.6566 50.4012 42.6775C54.8842 42.6985 59.2977 43.7872 63.2762 45.8537V45.8537ZM54.8537 94.2295C56.2113 98.575 55.4117 103.461 52.4549 108.889C52.3217 109.155 52.1884 109.422 52.0434 109.677C54.7169 109.442 57.3216 108.702 59.7196 107.496C61.6934 106.384 63.5201 105.029 65.1568 103.462L68.1004 100.615C72.369 101.749 76.7685 102.315 81.1851 102.299C99.9992 102.299 115.252 92.5098 115.252 80.2972C115.252 68.0847 99.9992 58.2283 81.1851 58.2283C62.371 58.2283 47.1264 68.1465 47.1264 80.261C47.1264 85.5671 50.005 90.4383 54.8559 94.2273L54.8537 94.2295Z" fill="white"/>
<path d="M64.8632 85.5074C63.8532 85.525 62.8609 85.2416 62.0125 84.6932C61.1641 84.1449 60.4982 83.3565 60.0994 82.4284C59.7006 81.5004 59.587 80.4746 59.7732 79.4818C59.9593 78.4889 60.4368 77.574 61.1447 76.8534C61.8526 76.1328 62.7589 75.6392 63.7483 75.4355C64.7377 75.2317 65.7653 75.327 66.7003 75.7093C67.6353 76.0915 68.4354 76.7434 68.9987 77.5819C69.562 78.4204 69.863 79.4076 69.8634 80.4177C69.8635 81.7526 69.3391 83.0342 68.4032 83.9861C67.4673 84.938 66.1947 85.484 64.86 85.5063L64.8632 85.5074ZM80.9885 85.5074C79.9786 85.5243 78.9865 85.2404 78.1386 84.6917C77.2907 84.1429 76.6252 83.3543 76.2269 82.4262C75.8286 81.498 75.7155 80.4723 75.902 79.4797C76.0886 78.4871 76.5662 77.5724 77.2743 76.8522C77.9823 76.1319 78.8887 75.6386 79.878 75.4352C80.8673 75.2317 81.8947 75.3272 82.8296 75.7095C83.7644 76.0919 84.5643 76.7438 85.1274 77.5822C85.6906 78.4206 85.9915 79.4077 85.9918 80.4177C85.992 81.7526 85.4676 83.0342 84.5317 83.9861C83.5957 84.938 82.3232 85.484 80.9885 85.5063V85.5074ZM97.1009 85.5074C95.9321 85.5158 94.7965 85.1186 93.8876 84.3835C92.9788 83.6485 92.3529 82.621 92.1166 81.4762C91.8804 80.3315 92.0484 79.1402 92.592 78.1054C93.1356 77.0706 94.0212 76.2563 95.0979 75.8013C96.1746 75.3462 97.3758 75.2786 98.4968 75.6099C99.6177 75.9412 100.589 76.6509 101.245 77.6181C101.902 78.5854 102.203 79.7503 102.096 80.9143C101.99 82.0784 101.483 83.1696 100.663 84.002C99.7197 84.9527 98.44 85.4935 97.1009 85.5074V85.5074Z" fill="white"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3 KiB

10
public/assets/zulip.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="160" height="160" fill="url(#paint0_linear_601_18)"/>
<path d="M117 51.8124C117 55.7919 115.21 59.3278 112.481 61.4728L85.9949 85.087C85.503 85.5079 84.8635 84.8292 85.2184 84.2627L94.9338 64.8437C95.2061 64.3 94.853 63.6318 94.2943 63.6318H56.6114C50.7751 63.6318 46 58.314 46 51.8159C46 45.316 50.7751 40 56.6114 40H106.389C112.225 39.9965 117 45.3143 117 51.8124ZM56.6114 119H106.389C112.225 119 117 113.682 117 107.184C117 100.684 112.225 95.3682 106.389 95.3682H68.7057C68.147 95.3682 67.7939 94.7 68.0662 94.1563L77.7816 74.7373C78.1365 74.1708 77.497 73.4921 77.0051 73.913L50.5186 97.5237C47.7902 99.667 46 103.205 46 107.184C46 113.682 50.7751 119 56.6114 119Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_601_18" x1="9.5" y1="9.97447e-08" x2="143" y2="160" gradientUnits="userSpaceOnUse">
<stop stop-color="#4BB4CC"/>
<stop offset="1" stop-color="#25B097"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

4
public/markdown/rocket.md → public/markdown/zulip.md
View file

@ -1,6 +1,6 @@
# Rocketchat # Zulip
![Rocketchat](/assets/rocketchat.svg 'Rocketchat') ![Zulip](/assets/zulip.svg 'Zulip')
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel felis rutrum, congue orci non, dictum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel felis rutrum, congue orci non, dictum
augue. In hac habitasse platea dictumst. Donec enim neque, vehicula vel consequat non, facilisis sed mauris. augue. In hac habitasse platea dictumst. Donec enim neque, vehicula vel consequat non, facilisis sed mauris.

54
src/App.tsx
View file

@ -1,36 +1,16 @@
import React, { useEffect, useState } from 'react'; import React from 'react';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { Router, RouteComponentProps } from '@reach/router'; import { Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
import { isValid } from 'src/services/api';
import { useAuth } from 'src/services/auth'; import { useAuth } from 'src/services/auth';
import { Apps, Dashboard, Users, Login, AppSingle } from './modules'; import { Dashboard, Users, Login } from './modules';
import { Layout } from './components'; import { Layout } from './components';
import { LoginCallback } from './modules/login/LoginCallback'; import { LoginCallback } from './modules/login/LoginCallback';
type AppProps = RouteComponentProps;
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
function App(_: AppProps) { function App() {
const { auth } = useAuth(); const { authToken } = useAuth();
// const isLoginPage = useMatch('/login');
const [initialized, setInitialized] = useState(false);
const [initializedToken, setInitializedToken] = useState<string | null>(null);
// useEffect(() => {
// if (!isValid(auth) && !isLoginPage) {
// navigate('/login');
// }
// }, [auth, isLoginPage]);
useEffect(() => {
if (isValid(auth) && (!initialized || initializedToken !== auth.token)) {
setInitialized(true);
setInitializedToken(auth.token);
}
}, [auth, initialized, initializedToken]);
return ( return (
<> <>
@ -46,24 +26,22 @@ function App(_: AppProps) {
</Helmet> </Helmet>
<div className="app bg-gray-50 min-h-screen flex flex-col"> <div className="app bg-gray-50 min-h-screen flex flex-col">
{!isValid(auth) ? ( {!authToken ? (
<Router> <Routes>
<Login default path="/login" /> <Route path="/login" element={<Login />} />
<LoginCallback path="/login-callback" /> <Route path="/login-callback" element={<LoginCallback />} />
</Router> <Route path="*" element={<Navigate to="/login" />} />
</Routes>
) : ( ) : (
<Layout> <Layout>
<Router> <Routes>
<Dashboard default path="/dashboard" /> <Route path="/dashboard" element={<Dashboard />} />
<Users path="/users" /> <Route path="/users" element={<Users />} />
<Apps path="/apps" /> <Route path="*" element={<Navigate to="/dashboard" />} />
<AppSingle path="/apps/:id" /> </Routes>
</Router>
</Layout> </Layout>
)} )}
{/* {isValid(auth) ? <Redirect from="/" to="/dashboard" noThrow /> : <Redirect from="/" to="/" noThrow />} */}
{/* Place to load notifications */} {/* Place to load notifications */}
<div <div
aria-live="assertive" aria-live="assertive"

29
src/components/Banner/Banner.tsx Normal file
View file

@ -0,0 +1,29 @@
import React from 'react';
import { SpeakerphoneIcon } from '@heroicons/react/outline';
type BannerProps = {
title: string;
titleSm: string;
};
const Banner: React.FC<BannerProps> = ({ title, titleSm }) => {
return (
<div className="bg-primary-600 rounded-md">
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-3">
<div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-lg bg-primary-800">
<SpeakerphoneIcon className="h-6 w-6 text-white" aria-hidden="true" />
</span>
<p className="ml-3 font-small text-white truncate">
<span className="md:hidden">{titleSm}</span>
<span className="hidden md:inline">{title}</span>
</p>
</div>
</div>
</div>
</div>
);
};
export default Banner;

1
src/components/Banner/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as Banner } from './Banner';

79
src/components/Header/Header.tsx
View file

@ -1,12 +1,13 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Disclosure, Menu, Transition } from '@headlessui/react'; import { Disclosure, Menu, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline'; import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { Link, RouteComponentProps } from '@reach/router';
import { useAuth } from 'src/services/auth'; import { useAuth } from 'src/services/auth';
import Gravatar from 'react-gravatar';
import { Link, useLocation } from 'react-router-dom';
import clsx from 'clsx';
const navigation = [ const navigation = [
{ name: 'Dashboard', to: '/dashboard' }, { name: 'Dashboard', to: '/dashboard' },
{ name: 'Apps', to: '/apps' },
{ name: 'Users', to: '/users' }, { name: 'Users', to: '/users' },
]; ];
@ -14,15 +15,18 @@ function classNames(...classes: any[]) {
return classes.filter(Boolean).join(' '); return classes.filter(Boolean).join(' ');
} }
type HeaderProps = RouteComponentProps; // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface HeaderProps {}
const Header: React.FC<HeaderProps> = () => { const Header: React.FC<HeaderProps> = () => {
const { logOut } = useAuth(); const { logOut } = useAuth();
const { pathname } = useLocation();
return ( return (
<Disclosure as="nav" className="bg-white shadow"> <Disclosure as="nav" className="bg-white shadow relative z-10">
{({ open }) => ( {({ open }) => (
<> <div className="relative">
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div className="relative flex justify-between h-16"> <div className="relative flex justify-between h-16">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden"> <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
@ -47,16 +51,13 @@ const Header: React.FC<HeaderProps> = () => {
<Link <Link
key={item.name} key={item.name}
to={item.to} to={item.to}
getProps={({ isCurrent }) => { className={clsx(
// the object returned here is passed to the 'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
// anchor element's props {
return { 'border-primary-500 text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium':
className: isCurrent pathname.includes(item.to),
? 'border-primary-400 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium' },
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium', )}
'aria-current': isCurrent ? 'page' : undefined,
};
}}
> >
{item.name} {item.name}
</Link> </Link>
@ -69,11 +70,9 @@ const Header: React.FC<HeaderProps> = () => {
<div> <div>
<Menu.Button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> <Menu.Button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
<img <span className="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500 overflow-hidden">
className="h-8 w-8 rounded-full" <Gravatar email="" size={32} rating="pg" protocol="https://" />
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" </span>
alt=""
/>
</Menu.Button> </Menu.Button>
</div> </div>
<Transition <Transition
@ -90,7 +89,23 @@ const Header: React.FC<HeaderProps> = () => {
{({ active }) => ( {({ active }) => (
<a <a
onClick={() => logOut()} onClick={() => logOut()}
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')} className={classNames(
active ? 'bg-gray-100 cursor-pointer' : '',
'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
)}
>
Configure profile
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
onClick={() => logOut()}
className={classNames(
active ? 'bg-gray-100 cursor-pointer' : '',
'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
)}
> >
Sign out Sign out
</a> </a>
@ -109,23 +124,23 @@ const Header: React.FC<HeaderProps> = () => {
<Link <Link
key={item.name} key={item.name}
to={item.to} to={item.to}
getProps={({ isCurrent }) => { // getProps={({ isCurrent }) => {
// the object returned here is passed to the // // the object returned here is passed to the
// anchor element's props // // anchor element's props
return { // return {
className: isCurrent // className: isCurrent
? 'bg-primary-50 border-primary-400 text-primary-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium' // ? 'bg-primary-50 border-primary-400 text-primary-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium'
: 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium', // : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
'aria-current': isCurrent ? 'page' : undefined, // 'aria-current': isCurrent ? 'page' : undefined,
}; // };
}} // }}
> >
{item.name} {item.name}
</Link> </Link>
))} ))}
</div> </div>
</Disclosure.Panel> </Disclosure.Panel>
</> </div>
)} )}
</Disclosure> </Disclosure>
); );

5
src/components/Layout/Layout.tsx
View file

@ -1,10 +1,7 @@
import React from 'react'; import React from 'react';
import { RouteComponentProps } from '@reach/router';
import { Header } from '../Header'; import { Header } from '../Header';
type DashboardProps = RouteComponentProps; const Layout: React.FC = ({ children }) => {
const Layout: React.FC<DashboardProps> = ({ children }) => {
return ( return (
<> <>
<Header /> <Header />

1
src/components/index.ts
View file

@ -1,5 +1,6 @@
export { Layout } from './Layout'; export { Layout } from './Layout';
export { Header } from './Header'; export { Header } from './Header';
export { Table } from './Table'; export { Table } from './Table';
export { Banner } from './Banner';
export { Tabs } from './Tabs'; export { Tabs } from './Tabs';
export { Modal, ConfirmationModal } from './Modal'; export { Modal, ConfirmationModal } from './Modal';

8
src/index.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import axios from 'axios'; import axios from 'axios';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { Router } from '@reach/router'; import { BrowserRouter } from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react'; import { PersistGate } from 'redux-persist/integration/react';
import { isValid } from './services/api'; import { isValid } from './services/api';
@ -43,9 +43,9 @@ ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<Provider store={store}> <Provider store={store}>
<PersistGate loading={null} persistor={persistor}> <PersistGate loading={null} persistor={persistor}>
<Router> <BrowserRouter>
<App path="*" /> <App />
</Router> </BrowserRouter>
</PersistGate> </PersistGate>
</Provider> </Provider>
</React.StrictMode>, </React.StrictMode>,

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

@ -1,12 +1,10 @@
import React from 'react'; import React from 'react';
import { Link, RouteComponentProps, RouterProps } from '@reach/router';
import { ChevronRightIcon } from '@heroicons/react/solid'; import { ChevronRightIcon } from '@heroicons/react/solid';
import { XCircleIcon } from '@heroicons/react/outline'; import { XCircleIcon } from '@heroicons/react/outline';
import { Tabs } from 'src/components'; import { Tabs, Banner } from 'src/components';
import { Link } from 'react-router-dom';
import { AdvancedTab, GeneralTab } from './components'; import { AdvancedTab, GeneralTab } from './components';
type AppSingleProps = RouteComponentProps & RouterProps;
const pages = [ const pages = [
{ name: 'Apps', to: '/apps', current: true }, { name: 'Apps', to: '/apps', current: true },
{ name: 'Nextcloud', to: '', current: false }, { name: 'Nextcloud', to: '', current: false },
@ -17,7 +15,7 @@ const tabs = [
{ name: 'Advanced Configuration', component: <AdvancedTab /> }, { name: 'Advanced Configuration', component: <AdvancedTab /> },
]; ];
export const AppSingle: React.FC<AppSingleProps> = () => { export const AppSingle: React.FC = () => {
return ( return (
<> <>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow"> <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
@ -48,7 +46,11 @@ export const AppSingle: React.FC<AppSingleProps> = () => {
</nav> </nav>
</div> </div>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
<Banner title="Managing single app instances coming soon." titleSm="Comming soon!" />
</div>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden opacity-40 cursor-default pointer-events-none select-none">
<div className="bg-white overflow-hidden shadow rounded-sm mb-5"> <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="px-4 py-5 sm:p-6 flex justify-between items-center">
<div className="mr-4 flex items-center"> <div className="mr-4 flex items-center">

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

@ -1,16 +1,14 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useMemo } from 'react'; import React, { useState, useCallback, useMemo } from 'react';
import { RouteComponentProps, navigate, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid'; import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline'; import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { ConfirmationModal } from 'src/components/Modal'; import { ConfirmationModal } from 'src/components/Modal';
import { Table } from 'src/components'; import { Table, Banner } from 'src/components';
import { Link } from 'react-router-dom';
type AppsProps = RouteComponentProps;
const pages = [{ name: 'Apps', href: '#', current: true }]; const pages = [{ name: 'Apps', href: '#', current: true }];
export const Apps: React.FC<AppsProps> = () => { export const Apps: React.FC = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({}); const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false);
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@ -90,11 +88,11 @@ export const Apps: React.FC<AppsProps> = () => {
}, },
{ {
Header: ' ', Header: ' ',
Cell: (e: any) => { Cell: () => {
return ( return (
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity"> <div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button <button
onClick={() => navigate(`/apps/${e.cell.row.original.id}`)} onClick={() => {}}
type="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" 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"
> >
@ -115,115 +113,110 @@ export const Apps: React.FC<AppsProps> = () => {
}, []); }, []);
return ( 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"> <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
<ol className="flex items-center space-x-4"> <nav className="flex" aria-label="Breadcrumb">
<li> <ol className="flex items-center space-x-4">
<div className="flex items-center"> <li>
<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"> <div className="flex items-center">
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" /> <Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
<a <span>Dashboard</span>
href={page.href} </Link>
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
aria-current={page.current ? 'page' : undefined}
>
{page.name}
</a>
</div> </div>
</li> </li>
))} {pages.map((page) => (
</ol> <li key={page.name}>
</nav> <div className="flex items-center">
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
<div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between"> <a
<h1 className="text-3xl leading-6 font-bold text-gray-900">Apps</h1> href={page.href}
<div className="mt-3 sm:mt-0 sm:ml-4"> className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
<button aria-current={page.current ? 'page' : undefined}
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" {page.name}
> </a>
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" /> </div>
Add new app </li>
</button> ))}
</div> </ol>
</nav>
</div> </div>
<div className="flex justify-between w-100 my-3 items-center"> <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="flex items-center"> <Banner
{/* <div className="mr-3 inline-block"> title="Your app instances management will be here soon, in the meantime, feel free to explore."
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only"> titleSm="Comming soon!"
Location />
</label> </div>
<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="inline-block"> <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only"> <div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
Search candidates <h1 className="text-3xl leading-6 font-bold text-gray-900">Apps</h1>
</label> <div className="mt-3 sm:mt-0 sm:ml-4">
<div className="mt-1 flex rounded-md shadow-sm"> <button
<div className="relative flex items-stretch flex-grow focus-within:z-10"> disabled
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> type="button"
<SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" /> 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 className="flex items-center">
<div className="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"
onChange={handleSearch}
/>
</div> </div>
<input </div>
type="text" </div>
name="email" </div>
id="email"
className="focus:ring-primary-dark focus:border-primary-dark block w-full rounded-md pl-10 sm:text-sm border-gray-200" {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
placeholder="Search Apps" <button
onChange={handleSearch} 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={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && ( <ConfirmationModal
<button open={deleteModal}
onClick={deleteModalOpen} onClose={deleteModalClose}
type="button" title="Delete service"
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" body="Are you sure you want to delete this service? All of your data will be permanently removed. This action cannot be undone."
> />
<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={filterSearch} 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>
); );
}; };

15
src/modules/apps/components/AdvancedTab/components/Secrets.tsx
View file

@ -98,21 +98,6 @@ export const Secrets = () => {
name: 'nextcloud_password (admin login)', name: 'nextcloud_password (admin login)',
secret: `#B&>4A;O#XEF]_dE*zxF26>8fF:akgGL8gi#yALK{ZY[P$eE`, 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[`,
},
], ],
[], [],
); );

86
src/modules/dashboard/Dashboard.tsx
View file

@ -1,58 +1,54 @@
import React from 'react'; import React from 'react';
import { Link, RouteComponentProps } from '@reach/router';
import clsx from 'clsx'; import clsx from 'clsx';
import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts'; import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts';
import { DashboardCard } from './components'; import { DashboardCard } from './components';
export const Dashboard: React.FC<RouteComponentProps> = () => { export const Dashboard: React.FC = () => {
const host = window.location.hostname;
const rootDomain = host.split('.').shift();
return ( return (
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow"> <div className="relative">
<nav className="flex mb-8" aria-label="Breadcrumb"> <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
<ol className="flex items-center space-x-4"> <div className="mt-6 pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
<li> <h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
<div className="flex items-center"> </div>
<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 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
<h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-3 my-10"> <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
{DASHBOARD_APPS.map((app) => ( <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
<DashboardCard app={app} key={app.name} /> {DASHBOARD_APPS(rootDomain!).map((app) => (
))} <DashboardCard app={app} key={app.name} rootDomain={rootDomain} />
</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> </div>
<dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2"> <div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
{DASHBOARD_QUICK_ACCESS.map((item) => ( <div className="pb-4 border-b border-gray-200 sm:flex sm:items-center">
<Link <h3 className="text-lg leading-6 font-medium text-gray-900">Utilities</h3>
to={item.to} </div>
key={item.name}
className={clsx('bg-white rounded-lg overflow-hidden sm:p-2 flex items-center group', { <dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2">
'opacity-40 cursor-default': !item.active, {DASHBOARD_QUICK_ACCESS(rootDomain!).map((item) => (
})} <a
> href={item.to}
<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"> key={item.name}
<item.icon className="h-6 w-6 text-primary-900" aria-hidden="true" /> target="_blank"
</div> rel="noreferrer"
<div> className={clsx('bg-white rounded-lg overflow-hidden sm:p-2 flex items-center group', {
<dt className="truncate text-sm leading-5 font-medium">{item.name}</dt> 'opacity-40 cursor-default': !item.active,
<dd className="mt-1 text-gray-500 text-sm leading-5 font-normal">{item.description}</dd> })}
</div> >
</Link> <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" />
</dl> </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>
</a>
))}
</dl>
</div>
</div> </div>
</div> </div>
); );

31
src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
View file

@ -1,13 +1,12 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { navigate } from '@reach/router';
import { Modal } from 'src/components'; import { Modal } from 'src/components';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { Link } from 'react-router-dom';
export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => { export const DashboardCard: React.FC<any> = ({ app, rootDomain }: { app: any; rootDomain: string }) => {
const [readMoreVisible, setReadMoreVisible] = useState(false); const [readMoreVisible, setReadMoreVisible] = useState(false);
const [content, setContent] = useState(''); const [content, setContent] = useState('');
const onReadMoreClick = () => setReadMoreVisible(true);
const onReadMoreCloseClick = () => setReadMoreVisible(false); const onReadMoreCloseClick = () => setReadMoreVisible(false);
useEffect(() => { useEffect(() => {
@ -24,29 +23,25 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
<div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0" key={app.name}> <div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0" key={app.name}>
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<div className="mr-4 flex items-center"> <div className="mr-4 flex items-center">
<img className="h-16 w-16 rounded-md overflow-hidden mr-4" src={app.assetSrc} alt="Nextcloud" /> <img
className="h-16 w-16 rounded-md overflow-hidden mr-4 flex-shrink-0"
src={app.assetSrc}
alt="Nextcloud"
/>
<div> <div>
<h2 className="text-2xl leading-8 font-bold">{app.name}</h2> <h2 className="text-xl 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>
</div> </div>
<div className="px-2.5 py-2.5 sm:px-4 flex justify-end"> <div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
<button <Link
type="button" to={`${app.urlShorthand}.${rootDomain}`}
onClick={onReadMoreClick} target="_blank"
className="mr-3 inline-flex items-center px-2.5 py-1.5 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"
>
Read more
</button>
<button
onClick={() => navigate(`/apps/${app.id}`)}
type="button"
className="inline-flex items-center px-2.5 py-1.5 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" className="inline-flex items-center px-2.5 py-1.5 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 Launch App
</button> </Link>
</div> </div>
</div> </div>

85
src/modules/dashboard/consts.ts
View file

@ -1,104 +1,51 @@
import { import { ChartBarIcon, InformationCircleIcon } from '@heroicons/react/outline';
ChartBarIcon,
CloudIcon,
UsersIcon,
CogIcon,
SwitchHorizontalIcon,
ClockIcon,
ShieldCheckIcon,
InformationCircleIcon,
} from '@heroicons/react/outline';
export const DASHBOARD_APPS = [ export const DASHBOARD_APPS = (rootDomain: string) => [
{ {
id: 1, id: 1,
name: 'Nextcloud', name: 'Nextcloud',
assetSrc: '/assets/nextcloud.svg', assetSrc: '/assets/nextcloud.svg',
markdownSrc: '/markdown/nextcloud.md', markdownSrc: '/markdown/nextcloud.md',
url: `files.${rootDomain}`,
}, },
{ {
id: 2, id: 2,
name: 'Wekan', name: 'Wekan',
assetSrc: '/assets/wekan.svg', assetSrc: '/assets/wekan.svg',
markdownSrc: '/markdown/wekan.md', markdownSrc: '/markdown/wekan.md',
url: `wekan.${rootDomain}`,
}, },
{ {
id: 3, id: 3,
name: 'Rocketchat', name: 'Zulip',
assetSrc: '/assets/rocketchat.svg', assetSrc: '/assets/zulip.svg',
markdownSrc: '/markdown/rocket.md', markdownSrc: '/markdown/zulip.md',
url: `zulip.${rootDomain}`,
}, },
{ {
id: 4, id: 4,
name: 'Wordpress', name: 'Wordpress',
assetSrc: '/assets/wordpress.svg', assetSrc: '/assets/wordpress.svg',
markdownSrc: '/markdown/wordpress.md', markdownSrc: '/markdown/wordpress.md',
url: `www.${rootDomain}`,
}, },
]; ];
export const DASHBOARD_QUICK_ACCESS = [ export const DASHBOARD_QUICK_ACCESS = (rootDomain: string) => [
{ {
id: 1, id: 1,
name: 'Users →', name: 'Monitoring →',
to: '/users', to: `grafana.${rootDomain}`,
description: 'Manage users and their permissions', description: 'Monitor your system with Grafana',
icon: UsersIcon, icon: ChartBarIcon,
active: true, active: true,
}, },
{ {
id: 2, 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 →', name: 'Support →',
to: '/dashboard', to: 'https://docs.stackspin.net',
description: 'Access documentation and forum', description: 'Access documentation and forum',
icon: InformationCircleIcon, icon: InformationCircleIcon,
active: false, active: true,
}, },
]; ];

5
src/modules/login/Login.tsx
View file

@ -1,15 +1,12 @@
import React from 'react'; import React from 'react';
import { RouteComponentProps } from '@reach/router';
import clsx from 'clsx'; import clsx from 'clsx';
import { LockClosedIcon } from '@heroicons/react/solid'; import { LockClosedIcon } from '@heroicons/react/solid';
import { performApiCall } from 'src/services/api'; import { performApiCall } from 'src/services/api';
import { showToast, ToastType } from 'src/common/util/show-toast'; import { showToast, ToastType } from 'src/common/util/show-toast';
type LoginProps = RouteComponentProps;
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
export function Login(_: LoginProps) { export function Login() {
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
const { data } = await performApiCall({ const { data } = await performApiCall({

18
src/modules/login/LoginCallback.tsx
View file

@ -1,12 +1,8 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { navigate, RouteComponentProps } from '@reach/router';
import { useAuth } from 'src/services/auth'; import { useAuth } from 'src/services/auth';
import { showToast, ToastType } from 'src/common/util/show-toast';
type LoginCallbackProps = RouteComponentProps;
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
export function LoginCallback(_: LoginCallbackProps) { export function LoginCallback() {
const currentURL = window.location.href; const currentURL = window.location.href;
const indexOfQuestionMark = currentURL.indexOf('?'); const indexOfQuestionMark = currentURL.indexOf('?');
const params = currentURL.slice(indexOfQuestionMark); const params = currentURL.slice(indexOfQuestionMark);
@ -15,16 +11,10 @@ export function LoginCallback(_: LoginCallbackProps) {
useEffect(() => { useEffect(() => {
if (params.length > 2) { if (params.length > 2) {
const res = logIn(params); logIn(params);
// @ts-ignore
if (res.ok) {
showToast('Logged in');
} else {
showToast('Something went wrong', ToastType.Error);
navigate('/login');
}
} }
}, [logIn, params]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [params]);
return ( 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="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">

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

@ -1,7 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useCallback, useEffect, useMemo } from 'react'; import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { RouteComponentProps, Link } from '@reach/router'; import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline'; import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { useUsers } from 'src/services/users'; import { useUsers } from 'src/services/users';
import { Table } from 'src/components'; import { Table } from 'src/components';
@ -9,9 +8,7 @@ import { ConfirmationModal } from 'src/components/Modal';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { UserModal } from './components/UserModal'; import { UserModal } from './components/UserModal';
const pages = [{ name: 'Users', href: '#', current: true }]; export const Users: React.FC = () => {
export const Users: React.FC<RouteComponentProps> = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({}); const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false);
const [configureModal, setConfigureModal] = useState(false); const [configureModal, setConfigureModal] = useState(false);
@ -92,103 +89,79 @@ export const Users: React.FC<RouteComponentProps> = () => {
}, []); }, []);
return ( return (
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow"> <div className="relative">
<nav className="flex mb-8" aria-label="Breadcrumb"> <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
<ol className="flex items-center space-x-4"> <div className="pb-5 mt-6 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
<li> <h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
<div className="flex items-center"> <div className="mt-3 sm:mt-0 sm:ml-4">
<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
onClick={() => configureModalOpen(null)}
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 mb-5 ">
<div className="flex items-center">
<div className="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"
onChange={debouncedSearch}
/>
</div>
</div>
</div>
</div>
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
<div className="flex items-center">
<button <button
onClick={deleteModalOpen} onClick={() => configureModalOpen(null)}
type="button" 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" 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"
> >
<TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" /> <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Delete Add new user
</button> </button>
</div> </div>
)} </div>
</div>
<div className="flex flex-col"> <div className="flex justify-between w-100 my-3 items-center mb-5 ">
<div className="-my-2 sm:-mx-6 lg:-mx-8"> <div className="flex items-center">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="inline-block">
<div className="shadow border-b border-gray-200 sm:rounded-lg"> <label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
<Table data={filterSearch as any} columns={columns} getSelectedRowIds={selectedRows} selectable /> 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"
onChange={debouncedSearch}
/>
</div>
</div>
</div>
</div>
{selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
<div className="flex items-center">
<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={filterSearch as any} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div>
</div> </div>
</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} userId={userId} />
</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} userId={userId} />
</div> </div>
); );
}; };

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

@ -1,7 +1,7 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { TrashIcon } from '@heroicons/react/outline'; import { TrashIcon } from '@heroicons/react/outline';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { Modal } from 'src/components'; import { Modal, Banner } from 'src/components';
import { Input } from 'src/components/Form'; import { Input } from 'src/components/Form';
import { useUsers } from 'src/services/users'; import { useUsers } from 'src/services/users';
import { CurrentUserState } from 'src/services/users/redux'; import { CurrentUserState } from 'src/services/users/redux';
@ -95,7 +95,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
<div className="space-y-4 divide-y divide-gray-200"> <div className="space-y-4 divide-y divide-gray-200">
<div> <div>
<div> <div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3> <h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
</div> </div>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
@ -107,7 +107,11 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
<Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} /> <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
</div> </div>
<div className="sm:col-span-3"> <div className="sm:col-span-6">
<Banner title="Editing user status, roles and app access coming soon." titleSm="Comming soon!" />
</div>
<div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
{/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */} {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
<label htmlFor="status" className="block text-sm font-medium text-gray-700"> <label htmlFor="status" className="block text-sm font-medium text-gray-700">
Status Status
@ -125,7 +129,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
</div> </div>
</div> </div>
<div className="sm:col-span-3"> <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
<label htmlFor="status" className="block text-sm font-medium text-gray-700"> <label htmlFor="status" className="block text-sm font-medium text-gray-700">
Role Role
</label> </label>
@ -144,7 +148,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
</div> </div>
</div> </div>
<div> <div className="opacity-40 cursor-default pointer-events-none select-none">
<div className="mt-4"> <div className="mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3> <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div> </div>

4
src/modules/users/components/UserModal/consts.ts
View file

@ -12,7 +12,7 @@ export const appAccessList = [
name: 'NextCloud', name: 'NextCloud',
}, },
{ {
image: '/assets/rocketchat.svg', image: '/assets/zulip.svg',
name: 'RocketChat', name: 'Zulip',
}, },
]; ];

6
src/services/auth/hooks/use-auth.ts
View file

@ -1,10 +1,10 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { getAuth, signIn, signOut } from '../redux'; import { getAuthToken, signIn, signOut } from '../redux';
export function useAuth() { export function useAuth() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const auth = useSelector(getAuth); const authToken = useSelector(getAuthToken);
const logIn = useCallback( const logIn = useCallback(
(params) => { (params) => {
@ -18,7 +18,7 @@ export function useAuth() {
}, [dispatch]); }, [dispatch]);
return { return {
auth, authToken,
logIn, logIn,
logOut, logOut,
}; };

2
src/services/auth/redux/index.ts
View file

@ -1,4 +1,4 @@
export { signIn, signOut, AuthActionTypes } from './actions'; export { signIn, signOut, AuthActionTypes } from './actions';
export { default as reducer } from './reducers'; export { default as reducer } from './reducers';
export { getAuth, getIsAuthLoading } from './selectors'; export { getAuth, getIsAuthLoading, getAuthToken } from './selectors';
export * from './types'; export * from './types';

6
src/services/auth/redux/reducers.ts
View file

@ -1,4 +1,4 @@
import { createApiReducer, chainReducers, INITIAL_API_STATUS, INITIAL_API_STATE } from 'src/services/api'; import { createApiReducer, chainReducers, INITIAL_API_STATUS } from 'src/services/api';
import { AuthState } from './types'; import { AuthState } from './types';
import { AuthActionTypes } from './actions'; import { AuthActionTypes } from './actions';
@ -16,8 +16,8 @@ const auth = createApiReducer(
const signOut = createApiReducer( const signOut = createApiReducer(
['', AuthActionTypes.SIGN_OUT, ''], ['', AuthActionTypes.SIGN_OUT, ''],
() => INITIAL_API_STATE, () => initialState,
() => INITIAL_API_STATE, () => initialState,
); );
export default chainReducers(initialState, auth, signOut); export default chainReducers(initialState, auth, signOut);

2
src/services/auth/redux/selectors.ts
View file

@ -4,6 +4,8 @@ import { isLoading } from 'src/services/api';
export const getAuth = (state: State) => state.auth; export const getAuth = (state: State) => state.auth;
export const getAuthToken = (state: State) => state.auth.token;
export const getIsAuthLoading = (state: State) => isLoading(getAuth(state)); export const getIsAuthLoading = (state: State) => isLoading(getAuth(state));
export const getToken = (state: State) => state.auth.token; export const getToken = (state: State) => state.auth.token;

6379
yarn.lock
View file

File diff suppressed because it is too large Load diff