renaming stuff, admin area

backend/helpers/authentik_api.py

@@ -24,7 +24,7 @@ class AuthentikApi: # TODO: check if can be replaced with apispec generated api?
             res = requests.get(f"{AUTHENTIK_BASEURL}{url}", headers={
                                "Authorization": f"Bearer {AuthentikApi.__token()}"})
             AuthentikApi.__handleError(res)
-            if (res.json()["pagination"]):
+            if ("pagination" in res.json()):
                 return AuthentikApi.__paginate(res)
             return res.json()
         except AuthentikError as err:

public/assets/zammad.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="126px" height="108px" viewBox="0 0 42 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="logo" sketch:type="MSArtboardGroup">
+            <g sketch:type="MSLayerGroup" transform="translate(1.000000, 0.000000)" id="Shape">
+                <path d="M27.3375,12.6 L36.72,9.72 L31.1625,13.2525 L27.3375,12.6 Z" fill="#CA2317" sketch:type="MSShapeGroup"></path>
+                <path d="M33.0525,19.62 L31.1625,13.2525 L36.72,9.72 L35.055,15.435 L33.0525,19.62 Z" fill="#E84F83" sketch:type="MSShapeGroup"></path>
+                <path d="M39.465,7.9875 L38.43,9.72 L35.055,15.435 L36.72,9.72 L39.465,7.9875 Z" fill="#CA2317" sketch:type="MSShapeGroup"></path>
+                <path d="M39.8025,9.1125 L37.1925,11.79 L38.43,9.72 L39.8025,9.1125 Z" fill="#E54011" sketch:type="MSShapeGroup"></path>
+                <path d="M27.9,10.8225 L35.5725,10.0575 L30.24,11.7 L27.9,10.8225 Z" fill="#E54011" sketch:type="MSShapeGroup"></path>
+                <path d="M28.1925,15.165 L31.1625,13.2525 L33.0525,19.62 L32.0625,21.645 L28.1925,15.165 Z" fill="#CA2317" sketch:type="MSShapeGroup"></path>
+                <path d="M23.76,22.725 L22.3425,5.4 L32.0625,21.645 L23.76,22.725 Z" fill="#B7DFF2" sketch:type="MSShapeGroup"></path>
+                <path d="M19.7325,27.1575 L23.76,22.725 L32.0625,21.645 L19.7325,27.1575 Z" fill="#E54011" sketch:type="MSShapeGroup"></path>
+                <path d="M0.1575,35.865 L19.7325,27.1575 L23.76,22.725 L17.37,22.0725 L0.1575,35.865 Z" fill="#FFCE33" sketch:type="MSShapeGroup"></path>
+                <path d="M0.9,28.755 L10.9575,27.225 L14.085,24.705 L12.555,24.03 L0.9,28.755 Z" fill="#D6B12D" sketch:type="MSShapeGroup"></path>
+                <path d="M4.5225,20.5425 L14.085,24.705 L17.37,22.0725 L4.5225,20.5425 Z" fill="#FFDE85" sketch:type="MSShapeGroup"></path>
+                <path d="M21.6225,11.6775 L20.4075,11.88 L17.37,22.0725 L20.655,20.0025 L21.6225,11.6775 Z" fill="#009EC6" sketch:type="MSShapeGroup"></path>
+                <path d="M23.4,18.2475 L20.655,20.0025 L22.3425,5.4 L23.4,18.2475 Z" fill="#5EAFCE" sketch:type="MSShapeGroup"></path>
+                <path d="M13.0275,13.05 L21.6225,11.6775 L22.005,8.28 L13.0275,13.05 Z" fill="#045972" sketch:type="MSShapeGroup"></path>
+                <path d="M12.105,5.085 L19.575,9.585 L22.005,8.28 L22.0725,7.8075 L12.105,5.085 Z" fill="#5A8591" sketch:type="MSShapeGroup"></path>
+                <path d="M13.5675,0.18 L20.3625,7.335 L22.0725,7.8075 L22.3425,5.4 L13.5675,0.18 Z" fill="#009EC6" sketch:type="MSShapeGroup"></path>
+                <path d="M17.37,22.0725 L23.4,18.2475 L23.76,22.725 L17.37,22.0725 Z" fill="#F39804" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

public/markdown/authentik.md

@@ -0,0 +1 @@
+Verwalte User und Gruppen

public/markdown/zammad.md

@@ -0,0 +1 @@
+Ticketsystem

src/App.tsx

@@ -13,7 +13,6 @@ import { Login } from './modules/login';
 import { Users } from './modules/users/Users';
 import { AppSingle } from './modules/apps/AppSingle';
 import { Apps } from './modules/apps/Apps';
-import { DashboardLIT } from './modules/dashboard/DashboardLIT';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function App() {
@@ -53,7 +52,7 @@ function App() {
         ) : (
           <Layout>
             <Routes>
-              <Route path="/dashboard" element={<DashboardLIT />} />
+              <Route path="/dashboard" element={<Dashboard />} />
               {apps.map((app) => (
                 <Route key={app.name} path={app.slug} element={<AppIframe app={app} />} />
               ))}

src/components/Header/HeaderLIT.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import { useApps } from 'src/services/apps';
 
 const navigation = [
-  { name: 'Users', to: '/users', requiresAdmin: true },
+  { name: '', to: '/users', requiresAdmin: true },
   // { name: 'Apps', to: '/apps', requiresAdmin: true },
 ];
 
@@ -79,7 +79,7 @@ const HeaderLIT: React.FC<HeaderProps> = () => {
                         {app.name}
                       </Link>
                     ))}
-                    {navigationItems.map((item) => (
+                    {/* {navigationItems.map((item) => (
                       <Link
                         key={item.name}
                         to={item.to}
@@ -93,7 +93,7 @@ const HeaderLIT: React.FC<HeaderProps> = () => {
                       >
                         {item.name}
                       </Link>
-                    ))}
+                    ))} */}
                   </div>
                 </div>
                 <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">

src/components/Header/index.ts

@@ -1,2 +1 @@
-export { default as Header } from './Header';
+export { default as Header } from './HeaderLIT';
-export { default as HeaderLIT } from './HeaderLIT';

src/components/Layout/Layout.tsx

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

src/components/index.ts

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

src/modules/dashboard/DashboardLIT.tsx

@@ -1,9 +1,13 @@
 import React, { useEffect } from 'react';
-import { useApps } from 'src/services/apps';
+import { AppStatusEnum, useApps } from 'src/services/apps';
-import { DashboardCardLIT } from './components/DashboardCard/DashboardCardLIT';
+import { useAuth } from 'src/services/auth';
+import { DashboardUtility } from './components';
+import { DashboardCard } from './components/DashboardCard/DashboardCardLIT';
+import { UTILITY_APPS } from './consts';
 
-export const DashboardLIT: React.FC = () => {
+export const Dashboard: React.FC = () => {
   const { apps, loadApps, appTableLoading } = useApps();
+  const { isAdmin } = useAuth();
 
   // Tell React to load the apps
   useEffect(() => {
@@ -21,9 +25,27 @@ export const DashboardLIT: React.FC = () => {
       </div>
       <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">
-          {!appTableLoading && apps.map((app) => <DashboardCardLIT app={app} key={app.name} />)}
+          {!appTableLoading &&
+            apps
+              .filter((app) => UTILITY_APPS.indexOf(app.slug) === -1)
+              .map((app) => <DashboardCard app={app} key={app.name} />)}
         </div>
       </div>
+      {isAdmin && (
+        <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">Administration</h3>
+          </div>
+
+          <dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {apps
+              .filter((app) => UTILITY_APPS.indexOf(app.slug) !== -1 && app.url !== null)
+              .map((app) => (
+                <DashboardUtility item={app} key={app.name} />
+              ))}
+          </dl>
+        </div>
+      )}
     </div>
   );
 };

src/modules/dashboard/components/DashboardCard/DashboardCardLIT.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-export const DashboardCardLIT: React.FC<any> = ({ app }: { app: any }) => {
+export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
   return (
     <>
       <Link

src/modules/dashboard/components/DashboardCard/index.ts

@@ -1 +1 @@
-export { DashboardCard } from './DashboardCard';
+export { DashboardCard } from './DashboardCardLIT';

src/modules/dashboard/components/DashboardUtility/DashboardUtilityLIT.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router-dom';
+
+export const DashboardUtility: React.FC<any> = ({ item }: { item: any }) => {
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    fetch(item.markdownSrc)
+      .then((res) => res.text())
+      .then((md) => {
+        return setContent(md);
+      })
+      .catch(() => {});
+  }, [item.markdownSrc]);
+
+  return (
+    <Link
+      to={`/${item.slug}`}
+      key={item.name}
+      rel="noreferrer"
+      className="bg-white rounded-lg overflow-hidden sm:p-2 flex items-center group"
+    >
+      <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 && <item.icon className="h-6 w-6 text-primary-900" aria-hidden="true" />}
+        {item.assetSrc && <img className="h-6 w-6" src={item.assetSrc} alt={item.name} />}
+      </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">
+          <ReactMarkdown>{content}</ReactMarkdown>
+        </dd>
+      </div>
+    </Link>
+  );
+};

src/modules/dashboard/components/DashboardUtility/index.ts

@@ -1 +1 @@
-export { DashboardUtility } from './DashboardUtility';
+export { DashboardUtility } from './DashboardUtilityLIT';

src/modules/dashboard/consts.ts

@@ -10,7 +10,7 @@ export const DASHBOARD_QUICK_ACCESS = [
 ];
 
 /** Apps that should not be shown on the dashboard */
-export const HIDDEN_APPS = ['dashboard', 'velero'];
+export const HIDDEN_APPS = ['dashboard'];
 
 /** Apps that should be shown under "Utilities" */
-export const UTILITY_APPS = ['monitoring'];
+export const UTILITY_APPS = ['authentik', 'zammad'];

src/modules/dashboard/index.ts

@@ -1 +1 @@
-export { Dashboard } from './Dashboard';
+export { Dashboard } from './DashboardLIT';