Merge remote-tracking branch 'remotes/origin/QQQ-27-build-support-for-auth-0-throughout-qqq' into feature/sprint-7-integration

src/qqq/auth0/code-snippet.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface CodeSnippetProps
+{
+   code: string;
+   title?: string;
+}
+
+// eslint-disable-next-line react/function-component-definition
+function CodeSnippet({title, code}: CodeSnippetProps): JSX.Element
+{
+   return (
+      <div className="code-snippet">
+         <span className="code-snippet__title">{title}</span>
+         <div className="code-snippet__container">
+            <div className="code-snippet__wrapper">
+               <pre className="code-snippet__body">{code}</pre>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+CodeSnippet.defaultProps = {
+   title: undefined,
+};
+
+export default CodeSnippet;

src/qqq/auth0/loader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+function Loader() : JSX.Element
+{
+   const loadingImg = "https://cdn.auth0.com/blog/hello-auth0/loader.svg";
+
+   return (
+      <div className="loader">
+         <img style={{height: "25px"}} src={loadingImg} alt="Loading..." />
+      </div>
+   );
+}
+
+export default Loader;

src/qqq/auth0/profile.tsx

@@ -0,0 +1,31 @@
+import {useAuth0} from "@auth0/auth0-react";
+import React from "react";
+import CodeSnippet from "./code-snippet";
+
+export function Profile()
+{
+   const {user} = useAuth0();
+
+   if (!user)
+   {
+      console.log("no user");
+      return null;
+   }
+
+   return (
+      <div className="content-layout">
+         <div className="content__body">
+            <div className="profile-grid">
+               <div className="profile__details">
+                  <CodeSnippet
+                     title="Decoded ID Token"
+                     code={JSON.stringify(user, null, 2)}
+                  />
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+export default Profile;

src/qqq/auth0/protected-route.tsx

@@ -0,0 +1,16 @@
+import {withAuthenticationRequired} from "@auth0/auth0-react";
+import React from "react";
+import Loader from "./loader";
+
+// @ts-ignore
+function ProtectedRoute({component}) : JSX.Element
+{
+   const Component = withAuthenticationRequired(component, {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      onRedirecting: () => <Loader />,
+   });
+
+   return <Component />;
+}
+
+export default ProtectedRoute;

src/qqq/components/BaseLayout/index.tsx

@@ -59,7 +59,7 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
 
    return (
       <DashboardLayout>
-         <DashboardNavbar absolute={!stickyNavbar} isMini />
+         <Navbar />
          <MDBox mt={stickyNavbar ? 3 : 10}>{children}</MDBox>
          <Footer />
       </DashboardLayout>

src/qqq/pages/entity-list/index.tsx

@@ -14,6 +14,8 @@
 import React, {useEffect, useReducer, useState} from "react";
 import {useParams, useSearchParams} from "react-router-dom";
 
+import {useAuth0} from "@auth0/auth0-react";
+
 // @mui material components
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
@@ -57,6 +59,7 @@ import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFil
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import QClient from "qqq/utils/QClient";
+import Navbar from "qqq/components/Navbar";
 import Footer from "../../components/Footer";
 import QProcessUtils from "../../utils/QProcessUtils";
 
@@ -461,7 +464,7 @@ function EntityList({table}: Props): JSX.Element
 
    return (
       <DashboardLayout>
-         <DashboardNavbar />
+         <Navbar />
          <MDBox my={3}>
             {alertContent ? (
                <MDBox mb={3}>