Cp final fix auth (#341)

* fix(auth): Fix auth state
spellshift · Oct 29, 2023 · 4b403b4 · 4b403b4
1 parent 85710e6
commit 4b403b4
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 67 deletions.
diff --git a/tavern/internal/www/build/asset-manifest.json b/tavern/internal/www/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.ab681a40.css",
-    "main.js": "/static/js/main.e23b68d3.js",
+    "main.js": "/static/js/main.9767f405.js",
     "react-syntax-highlighter/refractor-core-import.js": "/static/js/react-syntax-highlighter/refractor-core-import.d0cd1e85.chunk.js",
     "react-syntax-highlighter_languages_refractor_abap.js": "/static/js/react-syntax-highlighter_languages_refractor_abap.a2bf84e3.chunk.js",
     "react-syntax-highlighter_languages_refractor_actionscript.js": "/static/js/react-syntax-highlighter_languages_refractor_actionscript.fff5a604.chunk.js",
@@ -158,7 +158,7 @@
     "static/media/eldrich.png": "/static/media/eldrich.a80c74e8249d2461e174.png",
     "index.html": "/index.html",
     "main.ab681a40.css.map": "/static/css/main.ab681a40.css.map",
-    "main.e23b68d3.js.map": "/static/js/main.e23b68d3.js.map",
+    "main.9767f405.js.map": "/static/js/main.9767f405.js.map",
     "refractor-core-import.d0cd1e85.chunk.js.map": "/static/js/react-syntax-highlighter/refractor-core-import.d0cd1e85.chunk.js.map",
     "react-syntax-highlighter_languages_refractor_abap.a2bf84e3.chunk.js.map": "/static/js/react-syntax-highlighter_languages_refractor_abap.a2bf84e3.chunk.js.map",
     "react-syntax-highlighter_languages_refractor_actionscript.fff5a604.chunk.js.map": "/static/js/react-syntax-highlighter_languages_refractor_actionscript.fff5a604.chunk.js.map",
@@ -315,6 +315,6 @@
   },
   "entrypoints": [
     "static/css/main.ab681a40.css",
-    "static/js/main.e23b68d3.js"
+    "static/js/main.9767f405.js"
   ]
 }
diff --git a/tavern/internal/www/build/index.html b/tavern/internal/www/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Tavern - Red Team Engagement Platform</title><script defer="defer" src="/static/js/main.e23b68d3.js"></script><link href="/static/css/main.ab681a40.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Tavern - Red Team Engagement Platform</title><script defer="defer" src="/static/js/main.9767f405.js"></script><link href="/static/css/main.ab681a40.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/...rnal/www/build/static/js/main.e23b68d3.js → ...rnal/www/build/static/js/main.9767f405.js b/...rnal/www/build/static/js/main.e23b68d3.js → ...rnal/www/build/static/js/main.9767f405.js
diff --git a/...ld/static/js/main.e23b68d3.js.LICENSE.txt → ...ld/static/js/main.9767f405.js.LICENSE.txt b/...ld/static/js/main.e23b68d3.js.LICENSE.txt → ...ld/static/js/main.9767f405.js.LICENSE.txt
diff --git a/tavern/internal/www/build/static/js/main.9767f405.js.map b/tavern/internal/www/build/static/js/main.9767f405.js.map
diff --git a/tavern/internal/www/build/static/js/main.e23b68d3.js.map b/tavern/internal/www/build/static/js/main.e23b68d3.js.map
diff --git a/tavern/internal/www/src/App.tsx b/tavern/internal/www/src/App.tsx
@@ -20,7 +20,7 @@ import { AuthorizationContextProvider } from "./context/AuthorizationContext";
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <QuestList />,
+    element: <CreateQuest/>,
   },
   {
     path: "/quests",

diff --git a/tavern/internal/www/src/components/access-gate/AccessGate.tsx b/tavern/internal/www/src/components/access-gate/AccessGate.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from "react";
+import { AuthorizationContext } from "../../context/AuthorizationContext";
+import { EmptyState, EmptyStateType } from "../tavern-base-ui/EmptyState";
+
+type Props = {
+    children: any;
+}
+export const AccessGate = (props: Props) => {
+     const {children} = props;
+     const {data, isLoading, error} = useContext(AuthorizationContext);
+
+    if(isLoading){
+        return (
+            <div className="flex flex-row w-sceen h-screen justify-center items-center">
+                <EmptyState label="Loading authroization state" type={EmptyStateType.loading}/>
+            </div>
+        );
+    }
+
+    if(error){
+        return (
+            <div className="flex flex-row w-sceen h-screen justify-center items-center">
+                <EmptyState label="Error fetching authroization state" type={EmptyStateType.error} details="Please contact your admin to diagnose the issue."/>
+            </div>
+        );
+    }
+
+    if(data?.me?.isActivated){
+        return children;
+    }
+
+    return (
+        <div className="flex flex-row w-sceen h-screen justify-center items-center">
+            <EmptyState label="Account not approved" details={`Gain approval by providing your id (${data?.me?.id}) to an admin.`} type={EmptyStateType.noData}/>
+        </div>
+    );
+ }
diff --git a/tavern/internal/www/src/components/access-gate/index.tsx b/tavern/internal/www/src/components/access-gate/index.tsx
@@ -0,0 +1 @@
+export {AccessGate} from "./AccessGate";
diff --git a/tavern/internal/www/src/components/page-wrapper/PageWrapper.tsx b/tavern/internal/www/src/components/page-wrapper/PageWrapper.tsx
@@ -4,24 +4,23 @@ import {
   Bars3Icon,
   DocumentDuplicateIcon,
   XMarkIcon,
-  BugAntIcon,
   ClipboardDocumentCheckIcon,
-  PresentationChartLineIcon,
-  TrophyIcon,
   CommandLineIcon,
   BookOpenIcon
 } from '@heroicons/react/24/outline'
 
 import logo from '../../assets/eldrich.png';
 import { PageNavItem } from '../../utils/enums';
+import { Link } from 'react-router-dom';
+import { AccessGate } from '../access-gate';
 
 const navigation = [
-  { name: PageNavItem.createQuest, href:'/createQuest', icon:CommandLineIcon },
-  { name: PageNavItem.results, href: '/output-results', icon: ClipboardDocumentCheckIcon,},
-  { name: PageNavItem.quests, href: '/quests', icon: BookOpenIcon},
+  { name: PageNavItem.createQuest, href:'/createQuest', icon:CommandLineIcon, internal: true },
+  { name: PageNavItem.results, href: '/output-results', icon: ClipboardDocumentCheckIcon, internal: true},
+  { name: PageNavItem.quests, href: '/quests', icon: BookOpenIcon, internal: true},
   // { name: 'Beacons', href: '/beacons', icon: BugAntIcon, current: false },
   // { name: 'Realm status', href: '#', icon: PresentationChartLineIcon, current: false },
-  { name: PageNavItem.documentation, href: 'https://docs.realm.pub/', icon: DocumentDuplicateIcon, target: "__blank" },
+  { name: PageNavItem.documentation, href: 'https://docs.realm.pub/', icon: DocumentDuplicateIcon, target: "__blank", internal: false },
 ]
 const teams = [
   { id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false },
@@ -42,6 +41,7 @@ export const PageWrapper = (props: Props) => {
   const [sidebarOpen, setSidebarOpen] = useState(false)
 
   return (
+    <AccessGate>
       <div>
         <Transition.Root show={sidebarOpen} as={Fragment}>
           <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
@@ -99,19 +99,34 @@ export const PageWrapper = (props: Props) => {
                           <ul role="list" className="-mx-2 space-y-1">
                             {navigation.map((item) => (
                               <li key={item.name}>
-                                <a
-                                  href={item.href}
-                                  target={item?.target ? '__blank': undefined}
-                                  className={classNames(
-                                    item.name === currNavItem
-                                      ? 'bg-gray-800 text-white'
-                                      : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
-                                  )}
-                                >
-                                  <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
-                                  {item.name}
-                                </a>
+                                {item.internal ? (
+                                  <Link 
+                                    to={item.href}
+                                    className={classNames(
+                                      item.name === currNavItem
+                                        ? 'bg-gray-800 text-white'
+                                        : 'text-gray-400 hover:text-white hover:bg-gray-800',
+                                      'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                    )}
+                                  >
+                                    <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
+                                    {item.name}
+                                  </Link>
+                                ): (
+                                  <a
+                                    href={item.href}
+                                    target={item?.target ? '__blank': undefined}
+                                    className={classNames(
+                                      item.name === currNavItem
+                                        ? 'bg-gray-800 text-white'
+                                        : 'text-gray-400 hover:text-white hover:bg-gray-800',
+                                      'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                    )}
+                                  >
+                                    <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
+                                    {item.name}
+                                  </a>
+                                )}
                               </li>
                             ))}
                           </ul>
@@ -145,7 +160,21 @@ export const PageWrapper = (props: Props) => {
                   <ul role="list" className="-mx-2 space-y-1">
                     {navigation.map((item) => (
                       <li key={item.name}>
-                        <a
+                        {item.internal ? (
+                          <Link 
+                          to={item.href}
+                          className={classNames(
+                            item.name === currNavItem
+                              ? 'bg-gray-800 text-white'
+                              : 'text-gray-400 hover:text-white hover:bg-gray-800',
+                            'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                          )}
+                        >
+                          <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
+                          {item.name}
+                        </Link>
+                        ): (
+                          <a
                           href={item.href}
                           target={item?.target ? '__blank': undefined}
                           className={classNames(
@@ -158,6 +187,7 @@ export const PageWrapper = (props: Props) => {
                           <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
                           {item.name}
                         </a>
+                        )}
                       </li>
                     ))}
                   </ul>
@@ -180,5 +210,6 @@ export const PageWrapper = (props: Props) => {
           <div className="px-4 sm:px-6 lg:px-8">{children}</div>
         </main>
       </div>
+    </AccessGate>
   )
 }
diff --git a/tavern/internal/www/src/context/AuthorizationContext.tsx b/tavern/internal/www/src/context/AuthorizationContext.tsx
@@ -1,6 +1,5 @@
 import React, { createContext } from "react";
-import { ApolloError, gql, useQuery } from "@apollo/client";
-import { EmptyState, EmptyStateType } from "../components/tavern-base-ui/EmptyState";
+import { gql, useQuery } from "@apollo/client";
 
 export type UserType = {
     id: string;
@@ -15,7 +14,7 @@ export type AuthorizationContextType = {
 export type AuthorizationContextQueryType = {
     data: undefined | AuthorizationContextType;
     isLoading: boolean;
-    error: ApolloError | undefined;
+    error: any;
 }
 
 const defaultValue = {data: undefined, isLoading: false, error: undefined} as AuthorizationContextQueryType;
@@ -37,43 +36,10 @@ export const AuthorizationContextProvider = ({children}: {children: React.ReactN
     `;
 
     const { loading: isLoading, error: error, data: data } = useQuery(GET_USER_INFO);
-
-    function renderBasedOnState(
-        data: undefined | AuthorizationContextType,
-        isLoading: boolean,
-        error: ApolloError | undefined
-    ) : React.ReactNode {
-
-        if(isLoading){
-            return (
-                <div className="flex flex-row w-sceen h-screen justify-center items-center">
-                    <EmptyState label="Loading authroization state" type={EmptyStateType.loading}/>
-                </div>
-            );
-        }
-
-        if(error){
-            return (
-                <div className="flex flex-row w-sceen h-screen justify-center items-center">
-                    <EmptyState label="Error fetching authroization state" type={EmptyStateType.error} details="Please contact your admin to diagnose the issue."/>
-                </div>
-            );
-        }
-
-        if(data?.me?.isActivated){
-            return children;
-        }
-
-        return (
-            <div className="flex flex-row w-sceen h-screen justify-center items-center">
-                <EmptyState label="Account not approved" details={`Gain approval by providing your id (${data?.me?.id}) to an admin.`} type={EmptyStateType.noData}/>
-            </div>
-        );
-    }
 
     return (
       <AuthorizationContext.Provider value={{ data, isLoading, error }}>
-        {renderBasedOnState(data,isLoading, error)}
+        {children}
       </AuthorizationContext.Provider>
     );
 };