lincd-cli 0.2.41 → 0.2.42

package/defaults/app-with-backend/.run/start.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="start" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/defaults/app-with-backend/package.json

@@ -59,6 +59,7 @@
     "@babel/register": "^7.22.5",
     "chalk": "4.1.2",
     "lincd": "^0.5.22",
+    "lincd-auth": "^0.1.19",
     "lincd-jsonld": "^0.1.21",
     "lincd-server": "^0.1.39",
     "lincd-server-utils": "^0.1.7",

package/defaults/app-with-backend/src/layout/Header.tsx

@@ -9,8 +9,13 @@ export function Header() {
     <header className={style.header}>
       <h1>${name}</h1>
       <nav className={style.menu}>
-        {Object.keys(ROUTES).map(key => {
-          return <Link key={key} to={ROUTES[key].path}>{ROUTES[key].label || key}</Link>
+        {Object.keys(ROUTES).map((key) => {
+          if (ROUTES[key].excludeFromMenu) return null;
+          return (
+            <Link key={key} to={ROUTES[key].path}>
+              {ROUTES[key].label || key}
+            </Link>
+          );
         })}
       </nav>
     </header>

package/defaults/app-with-backend/src/pages/PageNotFound.tsx

@@ -0,0 +1,11 @@
+import {DefaultLayout} from '../layout/DefaultLayout';
+
+export default function PageNotFound() {
+  return (
+    <DefaultLayout>
+      <div>
+        <h2>Page not found</h2>
+      </div>
+    </DefaultLayout>
+  );
+}

package/defaults/app-with-backend/src/pages/Signin.tsx

@@ -0,0 +1,12 @@
+import {DefaultLayout} from '../layout/DefaultLayout';
+
+export default function Signin() {
+  return (
+    <DefaultLayout>
+      <div>
+        <h2>Sign In</h2>
+        See lincd.org for different ways to sign in.
+      </div>
+    </DefaultLayout>
+  );
+}

package/defaults/app-with-backend/src/routes.tsx

@@ -1,21 +1,36 @@
 import React, {lazy, Suspense} from 'react';
 import {Route, Routes} from 'react-router-dom';
 import {Spinner} from './components/Spinner';
+import {RequireAuth} from 'lincd-auth/lib/components/RequireAuth';
+import PageNotFound from './pages/PageNotFound';
 
 //In React 18 you can use 'lazy' to import pages only when you need them.
 //This will cause webpack to create multiple bundles, and the right bundles are automatically loaded
-
-export const ROUTES = {
+interface RouteObj {
+  path: string;
+  component?: React.LazyExoticComponent<() => JSX.Element>;
+  render?: () => JSX.Element;
+  requireAuth?: boolean;
+  excludeFromMenu?: boolean;
+  label?: string;
+}
+export const ROUTES: {[key: string]: RouteObj} = {
   index: {
     path: '/',
     component: lazy(() => import('./pages/Home' /* webpackPrefetch: true */)),
-    requireAuth: true,
-    label:"Home",
+    label: 'Home',
   },
   page1: {
     path: '/page1',
     component: lazy(() => import('./pages/Page1' /* webpackPrefetch: true */)),
-    label:"Page 1",
+    label: 'Protected page',
+    requireAuth: true,
+  },
+  signin: {
+    path: '/signin',
+    component: lazy(() => import('./pages/Signin' /* webpackPrefetch: true */)),
+    label: 'Sign In',
+    excludeFromMenu: true,
   },
 };
 
@@ -25,18 +40,33 @@ export default function AppRoutes() {
       {Object.keys(ROUTES).map((routeName) => {
         const route = ROUTES[routeName];
         const Component = route.component;
+
+        //if a route is marked as requireAuth, wrap it in the RequireAuth component and pass the signinRoute
+        const AuthGuard = route.requireAuth ? RequireAuth : React.Fragment;
+        const authProps = route.requireAuth
+          ? {signinRoute: ROUTES.signin.path}
+          : {};
+
+        // define a render function that determines what to render based on the component and route.render
+        const renderRoute = () =>
+          // if a Component is defined, render it using JSX syntax (<Component />)
+          // if not, check if a route.render function is defined and call that render function if available.
+          // if neither Component nor route.render is defined, return null
+          Component ? <Component /> : route.render ? route.render() : null;
+
         return (
           <Route
             key={route.path}
             path={route.path}
             element={
-              <Suspense fallback={<Spinner />}>
-                <Component />
-              </Suspense>
+              <AuthGuard {...authProps}>
+                <Suspense fallback={<Spinner />}>{renderRoute()}</Suspense>
+              </AuthGuard>
             }
           />
         );
       })}
+      <Route path="*" element={<PageNotFound />} />
     </Routes>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lincd-cli",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "description": "Command line tools for the lincd.js library",
   "main": "lib/index.js",
   "scripts": {