local-it/dashboard
Archived
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
Download patch file Download diff file Expand all files Collapse all files

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 { Router, RouteComponentProps } from '@reach/router';
import { Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
import { isValid } from 'src/services/api';
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 { LoginCallback } from './modules/login/LoginCallback';
type AppProps = RouteComponentProps;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function App(_: AppProps) {
const { auth } = 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]);
function App() {
const { authToken } = useAuth();
return (
<>
@ -46,24 +26,22 @@ function App(_: AppProps) {
</Helmet>
<div className="app bg-gray-50 min-h-screen flex flex-col">
{!isValid(auth) ? (
<Router>
<Login default path="/login" />
<LoginCallback path="/login-callback" />
</Router>
{!authToken ? (
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/login-callback" element={<LoginCallback />} />
<Route path="*" element={<Navigate to="/login" />} />
</Routes>
) : (
<Layout>
<Router>
<Dashboard default path="/dashboard" />
<Users path="/users" />
<Apps path="/apps" />
<AppSingle path="/apps/:id" />
</Router>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/users" element={<Users />} />
<Route path="*" element={<Navigate to="/dashboard" />} />
</Routes>
</Layout>
)}
{/* {isValid(auth) ? <Redirect from="/" to="/dashboard" noThrow /> : <Redirect from="/" to="/" noThrow />} */}
{/* Place to load notifications */}
<div
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 { Disclosure, Menu, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { Link, RouteComponentProps } from '@reach/router';
import { useAuth } from 'src/services/auth';
import Gravatar from 'react-gravatar';
import { Link, useLocation } from 'react-router-dom';
import clsx from 'clsx';
const navigation = [
{ name: 'Dashboard', to: '/dashboard' },
{ name: 'Apps', to: '/apps' },
{ name: 'Users', to: '/users' },
];
@ -14,15 +15,18 @@ function classNames(...classes: any[]) {
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 { logOut } = useAuth();
const { pathname } = useLocation();
return (
<Disclosure as="nav" className="bg-white shadow">
<Disclosure as="nav" className="bg-white shadow relative z-10">
{({ open }) => (
<>
<div className="relative">
<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="absolute inset-y-0 left-0 flex items-center sm:hidden">
@ -47,16 +51,13 @@ const Header: React.FC<HeaderProps> = () => {
<Link
key={item.name}
to={item.to}
getProps={({ isCurrent }) => {
// the object returned here is passed to the
// anchor element's props
return {
className: isCurrent
? '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,
};
}}
className={clsx(
'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
{
'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':
pathname.includes(item.to),
},
)}
>
{item.name}
</Link>
@ -69,11 +70,9 @@ const Header: React.FC<HeaderProps> = () => {
<div>
<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>
<img
className="h-8 w-8 rounded-full"
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"
alt=""
/>
<span className="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500 overflow-hidden">
<Gravatar email="" size={32} rating="pg" protocol="https://" />
</span>
</Menu.Button>
</div>
<Transition
@ -90,7 +89,23 @@ const Header: React.FC<HeaderProps> = () => {
{({ active }) => (
<a
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
</a>
@ -109,23 +124,23 @@ const Header: React.FC<HeaderProps> = () => {
<Link
key={item.name}
to={item.to}
getProps={({ isCurrent }) => {
// the object returned here is passed to the
// anchor element's props
return {
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'
: '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,
};
}}
// getProps={({ isCurrent }) => {
// // the object returned here is passed to the
// // anchor element's props
// return {
// 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'
// : '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,
// };
// }}
>
{item.name}
</Link>
))}
</div>
</Disclosure.Panel>
</>
</div>
)}
</Disclosure>
);

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

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

1
src/components/index.ts
View file

@ -1,5 +1,6 @@
export { Layout } from './Layout';
export { Header } from './Header';
export { Table } from './Table';
export { Banner } from './Banner';
export { Tabs } from './Tabs';
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 axios from 'axios';
import { Provider } from 'react-redux';
import { Router } from '@reach/router';
import { BrowserRouter } from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react';
import { isValid } from './services/api';
@ -43,9 +43,9 @@ ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<App path="*" />
</Router>
<BrowserRouter>
<App />
</BrowserRouter>
</PersistGate>
</Provider>
</React.StrictMode>,

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

@ -1,12 +1,10 @@
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 { Tabs, Banner } from 'src/components';
import { Link } from 'react-router-dom';
import { AdvancedTab, GeneralTab } from './components';
type AppSingleProps = RouteComponentProps & RouterProps;
const pages = [
{ name: 'Apps', to: '/apps', current: true },
{ name: 'Nextcloud', to: '', current: false },
@ -17,7 +15,7 @@ const tabs = [
{ name: 'Advanced Configuration', component: <AdvancedTab /> },
];
export const AppSingle: React.FC<AppSingleProps> = () => {
export const AppSingle: React.FC = () => {
return (
<>
<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>
</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="px-4 py-5 sm:p-6 flex justify-between 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 */
import React, { useState, useCallback, useMemo } from 'react';
import { RouteComponentProps, navigate, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { ConfirmationModal } from 'src/components/Modal';
import { Table } from 'src/components';
type AppsProps = RouteComponentProps;
import { Table, Banner } from 'src/components';
import { Link } from 'react-router-dom';
const pages = [{ name: 'Apps', href: '#', current: true }];
export const Apps: React.FC<AppsProps> = () => {
export const Apps: React.FC = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [search, setSearch] = useState('');
@ -90,11 +88,11 @@ export const Apps: React.FC<AppsProps> = () => {
},
{
Header: ' ',
Cell: (e: any) => {
Cell: () => {
return (
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => navigate(`/apps/${e.cell.row.original.id}`)}
onClick={() => {}}
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"
>
@ -115,115 +113,110 @@ export const Apps: React.FC<AppsProps> = () => {
}, []);
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="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">
<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>
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
<span>Dashboard</span>
</Link>
</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>
{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>
<div className="flex justify-between w-100 my-3 items-center">
<div className="flex items-center">
{/* <div className="mr-3 inline-block">
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
Location
</label>
<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="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
<Banner
title="Your app instances management will be here soon, in the meantime, feel free to explore."
titleSm="Comming soon!"
/>
</div>
<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 className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
<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
disabled
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 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>
<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>
</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={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
</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>
)}
<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>
<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)',
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 { Link, RouteComponentProps } from '@reach/router';
import clsx from 'clsx';
import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts';
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 (
<div className="max-w-7xl mx-auto py-4 px-3 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 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 className="relative">
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
<div className="mt-6 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">
{DASHBOARD_APPS.map((app) => (
<DashboardCard app={app} key={app.name} />
))}
</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 className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
{DASHBOARD_APPS(rootDomain!).map((app) => (
<DashboardCard app={app} key={app.name} rootDomain={rootDomain} />
))}
</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 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">Utilities</h3>
</div>
<dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2">
{DASHBOARD_QUICK_ACCESS(rootDomain!).map((item) => (
<a
href={item.to}
key={item.name}
target="_blank"
rel="noreferrer"
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>
</a>
))}
</dl>
</div>
</div>
</div>
);

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

@ -1,13 +1,12 @@
import React, { useState, useEffect } from 'react';
import { navigate } from '@reach/router';
import { Modal } from 'src/components';
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 [content, setContent] = useState('');
const onReadMoreClick = () => setReadMoreVisible(true);
const onReadMoreCloseClick = () => setReadMoreVisible(false);
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="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" />
<img
className="h-16 w-16 rounded-md overflow-hidden mr-4 flex-shrink-0"
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>
<h2 className="text-xl leading-8 font-bold">{app.name}</h2>
</div>
</div>
</div>
<div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
<button
type="button"
onClick={onReadMoreClick}
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"
<Link
to={`${app.urlShorthand}.${rootDomain}`}
target="_blank"
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
</button>
Launch App
</Link>
</div>
</div>

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

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

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

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

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

@ -1,12 +1,8 @@
import React, { useEffect } from 'react';
import { navigate, RouteComponentProps } from '@reach/router';
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
export function LoginCallback(_: LoginCallbackProps) {
export function LoginCallback() {
const currentURL = window.location.href;
const indexOfQuestionMark = currentURL.indexOf('?');
const params = currentURL.slice(indexOfQuestionMark);
@ -15,16 +11,10 @@ export function LoginCallback(_: LoginCallbackProps) {
useEffect(() => {
if (params.length > 2) {
const res = logIn(params);
// @ts-ignore
if (res.ok) {
showToast('Logged in');
} else {
showToast('Something went wrong', ToastType.Error);
navigate('/login');
}
logIn(params);
}
}, [logIn, params]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [params]);
return (
<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 */
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { RouteComponentProps, Link } from '@reach/router';
import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
import { CogIcon, TrashIcon } from '@heroicons/react/outline';
import { useUsers } from 'src/services/users';
import { Table } from 'src/components';
@ -9,9 +8,7 @@ import { ConfirmationModal } from 'src/components/Modal';
import { debounce } from 'lodash';
import { UserModal } from './components/UserModal';
const pages = [{ name: 'Users', href: '#', current: true }];
export const Users: React.FC<RouteComponentProps> = () => {
export const Users: React.FC = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [configureModal, setConfigureModal] = useState(false);
@ -92,103 +89,79 @@ export const Users: 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">
<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">
<div className="relative">
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
<div className="pb-5 mt-6 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={deleteModalOpen}
onClick={() => configureModalOpen(null)}
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" />
Delete
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Add new user
</button>
</div>
)}
</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 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
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>
<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>
<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>
);
};

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

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { TrashIcon } from '@heroicons/react/outline';
import { useForm } from 'react-hook-form';
import { Modal } from 'src/components';
import { Modal, Banner } from 'src/components';
import { Input } from 'src/components/Form';
import { useUsers } from 'src/services/users';
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>
<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 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} />
</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']} /> */}
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Status
@ -125,7 +129,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
</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">
Role
</label>
@ -144,7 +148,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
</div>
</div>
<div>
<div className="opacity-40 cursor-default pointer-events-none select-none">
<div className="mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>

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

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

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

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

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

@ -1,4 +1,4 @@
export { signIn, signOut, AuthActionTypes } from './actions';
export { default as reducer } from './reducers';
export { getAuth, getIsAuthLoading } from './selectors';
export { getAuth, getIsAuthLoading, getAuthToken } from './selectors';
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 { AuthActionTypes } from './actions';
@ -16,8 +16,8 @@ const auth = createApiReducer(
const signOut = createApiReducer(
['', AuthActionTypes.SIGN_OUT, ''],
() => INITIAL_API_STATE,
() => INITIAL_API_STATE,
() => initialState,
() => initialState,
);
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 getAuthToken = (state: State) => state.auth.token;
export const getIsAuthLoading = (state: State) => isLoading(getAuth(state));
export const getToken = (state: State) => state.auth.token;