@genesislcap/blank-app-seed 3.30.0-prerelease.2 → 3.30.0-prerelease.21

package/client-tmp/react/src/App.tsx

@@ -1,31 +1,75 @@
+import { useEffect, useState } from 'react';
+import { unstable_HistoryRouter as HistoryRouter, Routes, Route, useLocation } from 'react-router-dom';
 import {
-  unstable_HistoryRouter as HistoryRouter,
-  Routes,
-  Route,
-  useLocation,
-} from 'react-router-dom';
-import { useEffect } from 'react';
-import { history, setApiHost{{#if FDC3.channels.length}}, listenToChannel{{/if}} } from './utils';
+  history,
+  setApiHost,
+  getLayoutNameByRoute,
+  {{#if FDC3.channels.length~}}
+  listenToChannel,
+  onFDC3Ready,
+  {{/if}}
+} from './utils';
+import { customEventFactory, registerStylesTarget } from '@/pbc/utils';
 import LayoutWrapper from './layouts/LayoutWrapper';
-import { AUTH_PATH, NOT_PERMITTED_PATH, routeLayouts } from './config';
-import AuthGuard from './guards/AuthGuard';
-import PermissionsGuard from './guards/PermissionsGuard';
+import LayoutName from '@/types/LayoutName';
+import { AUTH_PATH, routeLayouts } from './config';
 import { AuthProvider } from './store/AuthContext';
-// Pages Components
+import { RoutesProvider, useRoutesContext } from './store/RoutesContext';
 import AuthPage from './pages/AuthPage/AuthPage';
-import NotPermittedPage from './pages/NotPermittedPage/NotPermittedPage';
-{{#each routes}}
-import {{pascalCase this.name}} from './pages/{{kebabCase this.name}}/{{pascalCase this.name}}';
-{{/each}}
-
-// Genesis Components
-import './share/genesis-components';
+import { registerComponents as genesisRegisterComponents } from './share/genesis-components';
+import { configureFoundationLogin } from './share/foundation-login';
+import ProtectedGuard from './guards/ProtectedGuard';
+import { storeService } from '@/services/store.service';
 
-const LayoutWithLocation = () => {
+const DynamicLayout = () => {
   const location = useLocation();
-  const layout = routeLayouts[location.pathname] || 'default';
-  {{#if FDC3.channels.length}}
+  const [layoutName, setLayoutName] = useState<LayoutName>(routeLayouts[location.pathname]  || 'default');
+  const handleRouteChange = (location: any) => {
+    setLayoutName(getLayoutNameByRoute(location.pathname));
+  };
+  const route = useRoutesContext().find((r) => r.path === location.pathname);
+  let pageComponent;
+  let content;
+
   useEffect(() => {
+    handleRouteChange(location);
+    const unlisten = history.listen(handleRouteChange);
+
+    return () => {
+      unlisten();
+    }
+  }, [location]);
+
+  if (route) {
+    pageComponent = route.element;
+  } else {
+    pageComponent = <AuthPage />;
+  }
+
+  if (location.pathname === `/${AUTH_PATH}` || location.pathname === '/') {
+    content = pageComponent;
+  } else {
+    content = <ProtectedGuard>{pageComponent}</ProtectedGuard>
+  }
+
+  return <LayoutWrapper layout={layoutName}>{content}</LayoutWrapper>
+
+};
+
+interface AppProps {
+  rootElement: HTMLElement;
+}
+
+const App: React.FC<AppProps> = ({ rootElement }) => {
+  const [isStoreConnected, setIsStoreConnected] = useState(false);
+  const dispatchCustomEvent = (type: string, detail?: any) => {
+    rootElement.dispatchEvent(customEventFactory(type, detail));
+  };
+  const handleStoreConnected = (event: CustomEvent) => {
+    storeService.onConnected(event);
+  };
+  {{#if FDC3.channels.length~}}
+  const FDC3ReadyHandler = () => {
     {{#each FDC3.channels}}
     listenToChannel('{{this.name}}', '{{this.type}}', (result) => {
       console.log('Received FDC3 channel message on: {{this.name}} channel, type: {{this.type}}', result);
@@ -33,61 +77,44 @@ const LayoutWithLocation = () => {
       // E.g. open a modal or route to specific page: Route.path.push(`[Route name]`);
     });
     {{/each}}
-    
-    return () => {
-      console.log('Component is being unmounted');
-    };
-  }, []);
+  };
   {{/if}}
 
-  let pageComponent;
-  let permissionCode = '{{this.permissions.viewRight}}';
-
-  switch (location.pathname) {
-    case `/${AUTH_PATH}`:
-      pageComponent = <AuthPage />;
-      break;
-    case `/${NOT_PERMITTED_PATH}`:
-      pageComponent = <NotPermittedPage />;
-      break;
-  {{#each routes}}
-    case '/{{kebabCase this.name}}':
-      pageComponent = <{{pascalCase this.name}} />;
-      permissionCode = '{{this.permissions.viewRight}}';
-      break;
-  {{/each}}
-    default:
-      pageComponent = <AuthPage />;
-  }
+  setApiHost();
+  genesisRegisterComponents();
+  configureFoundationLogin({ router: history });
 
-  if (
-    location.pathname === '/auth' ||
-    location.pathname === '/'
-  ) {
-    return <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>;
-  } else {
-    return (
-      <AuthGuard>
-        <PermissionsGuard permissionCode={permissionCode}>
-          <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
-        </PermissionsGuard>
-      </AuthGuard>
-    );
-  }
-};
+  useEffect(() => {
+    registerStylesTarget(document.body, 'main');
+    {{#if FDC3.channels.length~}}
+    onFDC3Ready(FDC3ReadyHandler);
+    {{/if}}
+    if (!isStoreConnected) {
+      rootElement.addEventListener('store-connected', handleStoreConnected);
+      dispatchCustomEvent('store-connected', rootElement);
+      dispatchCustomEvent('store-ready', true);
+      setIsStoreConnected(true);
+    }
 
-const App: React.FC = () => {
-  setApiHost();
+    return () => {
+      if (isStoreConnected) {
+        rootElement.removeEventListener('store-connected', handleStoreConnected);
+        dispatchCustomEvent('store-disconnected');
+      }
+    };
+  }, [isStoreConnected]);
 
   return (
     <AuthProvider>
-      <HistoryRouter history={history}>
-        <Routes>
-          <Route path="*" element={<LayoutWithLocation />} />
-        </Routes>
-      </HistoryRouter>
+      <RoutesProvider>
+        <HistoryRouter history={history as any}>
+          <Routes>
+            <Route path="*" element={<DynamicLayout />} />
+          </Routes>
+        </HistoryRouter>
+      </RoutesProvider>
     </AuthProvider>
   );
 };
 
-export default App;
+export default App;

package/client-tmp/react/src/components/{ErrorMessage.test.js → ErrorMessage/ErrorMessage.test.tsx}

@@ -1,35 +1,33 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import ErrorMessage from './ErrorMessage';
+import { default as ErrorMessage, ErrorMessageProps } from './ErrorMessage';
 
 describe('ErrorMessage Component', () => {
-  const message = 'Test Error Message';
+  const message: string = 'Test Error Message';
 
   test('renders the message as a div by default', () => {
     render(<ErrorMessage message={message} />);
-    const displayedMessage = screen.getByText(message);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('DIV');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders the message as an h1 element when elementType is "h1"', () => {
     render(<ErrorMessage message={message} elementType="h1" />);
-    const displayedMessage = screen.getByRole('heading', { level: 1 });
+    const displayedMessage: HTMLElement = screen.getByRole('heading', { level: 1 });
     expect(displayedMessage.tagName).toBe('H1');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders the message as a p element when elementType is "p"', () => {
     render(<ErrorMessage message={message} elementType="p" />);
-    const displayedMessage = screen.getByText(message);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('P');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('applies the correct styles to the error message wrapper', () => {
     render(<ErrorMessage message={message} />);
-    const wrapper = screen.getByText(message).closest('section');
+    const wrapper: HTMLElement | null = screen.getByText(message).closest('section');
     expect(wrapper).toHaveStyle(`
       display: flex;
       flex-direction: column;
@@ -42,8 +40,8 @@ describe('ErrorMessage Component', () => {
 
   test('applies the correct styles to the error message itself', () => {
     render(<ErrorMessage message={message} />);
-    const displayedMessage = screen.getByText(message);
-    const messageWrapper = displayedMessage.parentElement;
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    const messageWrapper: HTMLElement | null = displayedMessage.parentElement;
     
     expect(messageWrapper).toBeInTheDocument();
     expect(messageWrapper).toHaveStyle(`
@@ -64,17 +62,34 @@ describe('ErrorMessage Component', () => {
   });
 
   test('renders nothing if the message is an empty string', () => {
-    const { container } = render(<ErrorMessage message="" />);
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message="" />);
     expect(container.firstChild).toBeNull();
   });
 
   test('renders the correct element type for various elementType props', () => {
-    const elementTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
-    elementTypes.forEach((elementType) => {
-      const { container } = render(<ErrorMessage message={message} elementType={elementType} />);
-      const displayedMessage = container.querySelector(elementType);
+    const elementTypes: ErrorMessageProps['elementType'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
+    elementTypes.forEach((elementType: ErrorMessageProps['elementType']) => {
+      const { container }: { container: HTMLElement } = render(<ErrorMessage message={message} elementType={elementType} />);
+      const displayedMessage: HTMLElement | null = container.querySelector(elementType as string);
       expect(displayedMessage).toBeInTheDocument();
-      expect(displayedMessage.tagName).toBe(elementType.toUpperCase());
+      expect(displayedMessage?.tagName).toBe((elementType as string).toUpperCase());
     });
   });
+
+  test('renders the message as a div element when elementType is unknown', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    expect(displayedMessage.tagName).toBe('DIV');
+    expect(displayedMessage).toBeInTheDocument();
+  });
+
+  test('renders nothing if the message is null', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders nothing if the message is undefined', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
 });

package/client-tmp/react/src/components/ErrorMessage/{ErrorMessage.jsx → ErrorMessage.tsx}

@@ -3,7 +3,7 @@ import React from 'react';
 const styles = {
   errorMessageWrapper: {
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'column' as const,
     justifyContent: 'center',
     alignItems: 'center',
     height: '100%',
@@ -14,11 +14,11 @@ const styles = {
     backgroundColor: 'var(--neutral-layer-4)',
     borderColor: 'var(--error-color)',
     borderRadius: '7px',
-    borderStyle: 'solid',
+    borderStyle: 'solid' as const,
     borderWidth: '4px',
     padding: '5px',
     margin: '15px',
-    textAlign: 'center',
+    textAlign: 'center' as const,
     width: 'fit-content',
     alignSelf: 'center',
     height: 'auto',
@@ -26,7 +26,12 @@ const styles = {
   },
 };
 
-const ErrorMessage = ({ elementType = 'div', message = '' }) => {
+export interface ErrorMessageProps {
+  elementType?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  message?: string;
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ elementType = 'div', message = '' }) => {
   const ElementType = elementType;
 
   return message && message !== '' && (

package/client-tmp/react/src/config.ts

@@ -1,32 +1,18 @@
 import { RouteLayouts } from './types/RouteLayouts';
+import { environment } from '@environment';
 
 export const routeLayouts: RouteLayouts = {
-  '/auth-mock': 'blank',
   '/auth': 'blank',
   '/': 'blank',
 };
 
-import type { MainMenu } from './types/menu';
-
 export const AUTH_PATH = 'auth';
 export const NOT_PERMITTED_PATH = 'not-permitted';
 
 export const API_DATA = {
-  URL: import.meta.env.VITE_API_HOST,
+  URL: environment.API_HOST,
   AUTH: {
     username: '', // provide login to a user in given environment
     password: '', // provide password to a user in given environment
   },
 };
-
-export const mainMenu: MainMenu = [
-  {{#each routes}}
-  {
-    index: {{@index}},
-    path: '{{kebabCase this.name}}',
-    title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
-    icon: '{{this.icon}}',
-    variant: 'solid'
-  }{{#unless @last}},{{/unless}}
-  {{/each}}
-];

package/client-tmp/react/src/custom-elements.d.ts

@@ -1,11 +1,23 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    // Wildcard for all webcomponents:
-    [elemName: string]: unknown;
-  }
-}
+import React, { useState, DOMAttributes }  from 'react';
 
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+type CustomElement<T = React.HTMLAttributes<HTMLElement>> = Partial<T & DOMAttributes<T> & { [key: string]: any }>;
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      'rapid-design-system-provider': CustomElement;
+      'entity-management': CustomElement;
+      'foundation-form': CustomElement;
+      'rapid-grid-pro': CustomElement;
+      'grid-pro-genesis-datasource': CustomElement;
+      'grid-pro-column': CustomElement;
+      'rapid-g2plot-chart': CustomElement;
+      'chart-datasource': CustomElement;
+      'client-app-login': CustomElement;
+      'rapid-layout': CustomElement;
+      'rapid-layout-region': CustomElement;
+      'rapid-layout-item': CustomElement;
+      'foundation-header': CustomElement;
+    }
+  }
 }

package/client-tmp/react/src/environments/environment.prod.ts

@@ -0,0 +1,8 @@
+export const environment = {
+  production: true,
+  PORT: 4200,
+  ENABLE_SSO: {{enableSSO}},
+  HOST: 'localhost',
+  PROTOCOL: 'http',
+  BUILDER: 'webpack',
+};

package/client-tmp/react/src/environments/environment.ts

@@ -0,0 +1,9 @@
+export const environment = {
+  production: false,
+  API_HOST: '{{apiHost}}',
+  PORT: 4200,
+  ENABLE_SSO: {{enableSSO}},
+  HOST: 'localhost',
+  PROTOCOL: 'http',
+  BUILDER: 'webpack'
+};

package/client-tmp/react/src/guards/ProtectedGuard.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect, ReactNode } from 'react';
+import { RouteObject } from 'react-router';
+import isConnectedHelper from '@/helpers/isConnectedHelper';
+import isAuthenticatedHelper from '@/helpers/isAuthenticatedHelper';
+import hasPermissionHelper from '@/helpers/hasPermissionHelper';
+import { useRoutesContext } from '@/store/RoutesContext';
+import { NOT_PERMITTED_PATH, AUTH_PATH } from '@/config';
+
+enum PermissionState {
+  ALLOWED = 'allowed',
+  DENIED = 'denied',
+  UNKNOWN = 'unknown',
+}
+
+const redirectUrlByPermissionState: { [key in Partial<PermissionState>]?: string } = {
+  [PermissionState.DENIED]: NOT_PERMITTED_PATH,
+  [PermissionState.UNKNOWN]: AUTH_PATH,
+};
+
+type ExtendedRouteObject = RouteObject & {
+  data?: {
+    permissionCode?: string;
+  };
+  path: string;
+}
+
+const ProtectedGuard: React.FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
+  const routes = useRoutesContext() as ExtendedRouteObject[];
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+  const isAuthenticated: boolean | null = null;
+  const route = routes.find(({ path }) => path === location.pathname);
+  const hasPermission = route?.data?.permissionCode ? hasPermissionHelper(route.data?.permissionCode) : true;
+
+  useEffect(() => {
+    isConnectedHelper().then((connectedState: boolean): void => {
+      setIsConnected(connectedState);
+    });
+  }, []);
+  
+  useEffect((): void  => {
+    if (isConnected === null) {
+      return;
+    }
+
+    const isAuthenticated = isAuthenticatedHelper();
+
+
+    let permissionState;
+
+    if (!isConnected || !isAuthenticated) {
+      permissionState = PermissionState.UNKNOWN;
+    } else if (hasPermission === false) {
+      permissionState = PermissionState.DENIED;
+    } 
+    
+    if (permissionState) {
+      window.location.href = `/${redirectUrlByPermissionState[permissionState]}`;
+    }
+  }, [routes, isConnected, isAuthenticated, hasPermission]);
+
+  return children;
+};
+
+export default ProtectedGuard;

package/client-tmp/react/src/helpers/hasPermissionHelper.tsx

@@ -0,0 +1,10 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const hasPermissionHelper = (permissionCode: string | undefined): boolean => {
+  const user = getUser();
+
+  return !!(permissionCode && !user.hasPermission(permissionCode))
+
+};
+
+export default hasPermissionHelper;

package/client-tmp/react/src/helpers/isAuthenticatedHelper.tsx

@@ -0,0 +1,14 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const isAuthenticatedHelper = (): boolean => {
+  const user = getUser();
+
+  if (!user.isAuthenticated) {
+    user.trackPath();
+    return false;
+  }
+
+  return true;
+};
+
+export default isAuthenticatedHelper;

package/client-tmp/react/src/helpers/isConnectedHelper.tsx

@@ -0,0 +1,16 @@
+import { getConnect } from '@genesislcap/foundation-comms';
+
+const isConnectedHelper = (): Promise<boolean> => {
+  const connect = getConnect();
+  const hostUrl = sessionStorage.getItem('hostUrl');
+
+  if (connect.isConnected) {
+    return new Promise((resolve) => resolve(true));
+  }
+  if (!hostUrl) {
+    return new Promise((resolve) => resolve(false));
+  }
+  return connect.connect(hostUrl);
+};
+
+export default isConnectedHelper;

package/client-tmp/react/src/layouts/blank/BlankLayout.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { configureDesignSystem } from '@genesislcap/foundation-ui';
 import styles from './BlankLayout.module.css';
-import * as designTokens from '../../styles/design-tokens.json';
+import * as designTokens from '@/styles/design-tokens.json';
 
 interface BlankLayoutProps {
   children: ReactNode;

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -1,24 +1,36 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import { RouteObject } from 'react-router';
+import { configureDesignSystem, getNavItems } from '@genesislcap/foundation-ui';
 import { useNavigate } from 'react-router-dom';
 import {
   baseLayerLuminance,
   StandardLuminance,
 } from '@microsoft/fast-components';
 import styles from './DefaultLayout.module.css';
-import { mainMenu } from '../../config';
-import * as designTokens from '../../styles/design-tokens.json';
+import PBCElementsRenderer from '@/pbc/elementsRenderer';
+import * as designTokens from '@/styles/design-tokens.json';
+import { useRoutesContext } from '@/store/RoutesContext';
 
 interface DefaultLayoutProps {
   children: ReactNode;
 }
 
+type ExtendedRouteObject = RouteObject & {
+  data?: {
+    navItems?: any;
+  };
+  path: string;
+}
+
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
   const navigate = useNavigate();
-
   const designSystemProviderRef = useRef<HTMLElement>(null);
   const foundationHeaderRef = useRef<HTMLElement>(null);
-  const allRoutes = mainMenu;
+  const routes = useRoutesContext() as ExtendedRouteObject[];
+  const navItems = getNavItems(routes.flatMap((route) => ({
+    path: route.path || '',
+    navItems: route.data?.navItems,
+  })));
 
   const onLuminanceToggle = (): void => {
     if (designSystemProviderRef.current) {
@@ -57,22 +69,21 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
 
   return (
     <rapid-design-system-provider ref={designSystemProviderRef} class={className}>
+      <PBCElementsRenderer target={['layout-start']} />
       <foundation-header
         ref={foundationHeaderRef}
         show-luminance-toggle-button
         show-misc-toggle-button
-        navigateTo={(path) => navigate(path)}
+        routeNavItems={navItems}
+        navigateTo={(path: string) => navigate(path)}
       >
-        <section className={styles['routes-wrapper']} slot="routes">
-          {allRoutes.map((route, index) => (
-            <rapid-button key={index} onClick={() => navigate(route.path)}>
-              <rapid-icon name={route.icon}></rapid-icon>
-              {route.title}
-            </rapid-button>
-          ))}
-        </section>
       </foundation-header>
-      <section className={styles['content']}>{children}</section>
+      <section className={styles['content']}>
+        <PBCElementsRenderer target={['content-start']} />
+        {children}
+        <PBCElementsRenderer target={['content', 'content-end']} />
+      </section>
+      <PBCElementsRenderer target={['layout', 'layout-end']} />
     </rapid-design-system-provider>
   );
 };

package/client-tmp/react/src/main.tsx

@@ -1,10 +1,26 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+
+import { registerPBCs } from '@/pbc/utils';
+import { createLogger } from '@genesislcap/foundation-logger';
+
 import './styles/styles.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+const logger = createLogger('main');
+
+function bootstrapApp() {
+  const rootEelement = document.getElementById('root');
+  if (rootEelement) {
+    ReactDOM.createRoot(rootEelement!).render(
+      <React.StrictMode>
+        <App rootElement={rootEelement} />
+      </React.StrictMode>,
+    )
+  }
+}
+
+registerPBCs()
+.then(hasAssets => logger.debug(hasAssets ? 'PBCs registered' : 'No PBCs detected'))
+.catch((err) => logger.error(err))
+.finally(bootstrapApp)

package/client-tmp/react/src/pages/AuthPage/AuthPage.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import AuthPage from './AuthPage';
+
+test('renders AuthPage component', () => {
+  const { container } = render(<AuthPage />);
+  const authPageElement: Element | null = container.querySelector('.auth-page');
+  expect(authPageElement).toBeInTheDocument();
+  const clientAppLoginElement: Element | null = container.querySelector('client-app-login');
+  expect(clientAppLoginElement).toBeInTheDocument();
+});

package/client-tmp/react/src/pages/AuthPage/{AuthPage.jsx → AuthPage.tsx}

@@ -1,6 +1,7 @@
+import React from 'react';
 import './AuthPage.css';
 
-const AuthPage = () => {
+const AuthPage: React.FC = () => {
   return (
     <section className="auth-page">
       <client-app-login></client-app-login>
@@ -8,4 +9,4 @@ const AuthPage = () => {
   );
 };
 
-export default AuthPage;
+export default AuthPage;