Add Auth Index page (#323)

front/src/App.tsx

@@ -3,7 +3,8 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
 
 import { RequireAuth } from './modules/auth/components/RequireAuth';
-import { AuthCallback } from './pages/auth/AuthCallback';
+import { Callback } from './pages/auth/Callback';
+import { Index } from './pages/auth/Index';
 import { Login } from './pages/auth/Login';
 import { Companies } from './pages/companies/Companies';
 import { Opportunities } from './pages/opportunities/Opportunities';
@@ -23,6 +24,14 @@ export function App() {
                 <Route path="people" element={<People />} />
                 <Route path="companies" element={<Companies />} />
                 <Route path="opportunities" element={<Opportunities />} />
+                <Route
+                  path="settings/*"
+                  element={
+                    <Routes>
+                      <Route path="profile" element={<SettingsProfile />} />
+                    </Routes>
+                  }
+                />
               </Routes>
             </RequireAuth>
           }
@@ -31,19 +40,12 @@ export function App() {
           path="auth/*"
           element={
             <Routes>
-              <Route path="callback" element={<AuthCallback />} />
+              <Route path="" element={<Index />} />
+              <Route path="callback" element={<Callback />} />
               <Route path="login" element={<Login />} />
             </Routes>
           }
         />
-        <Route
-          path="settings/*"
-          element={
-            <Routes>
-              <Route path="profile" element={<SettingsProfile />} />
-            </Routes>
-          }
-        />
       </Routes>
     </DefaultLayout>
   );

front/src/modules/auth/hooks/useMockData.ts

@@ -0,0 +1,27 @@
+import { graphql, setupWorker } from 'msw';
+
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+export function useMockData() {
+  const worker = setupWorker(...graphqlMocks);
+  worker.start({ quiet: true, onUnhandledRequest: 'bypass' });
+}
+
+const graphqlMocks = [
+  graphql.query('GetCompanies', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        companies: mockedCompaniesData,
+      }),
+    );
+  }),
+
+  graphql.query('GetCurrentUser', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        users: [mockedUsersData[0]],
+      }),
+    );
+  }),
+];

front/src/modules/ui/components/modal/Modal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+import { useTheme } from '@emotion/react';
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const theme = useTheme();
+  return (
+    <ReactModal
+      isOpen
+      style={{
+        overlay: {
+          backgroundColor: theme.modalBackgroundTransparent,
+          zIndex: 2,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        content: { zIndex: 1000, minWidth: 200, inset: 'auto' },
+      }}
+    >
+      {children}
+    </ReactModal>
+  );
+}

front/src/modules/ui/layout/styles/colors/transparent.ts

@@ -5,6 +5,7 @@ export const transparentColorsLight = {
   mediumBackgroundTransparent: 'rgba(0, 0, 0, 0.08)',
   lightBackgroundTransparent: 'rgba(0, 0, 0, 0.04)',
   lighterBackgroundTransparent: 'rgba(0, 0, 0, 0.02)',
+  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 };
 
 export const transparentColorsDark = {
@@ -14,4 +15,5 @@ export const transparentColorsDark = {
   mediumBackgroundTransparent: 'rgba(255, 255, 255, 0.06)',
   lightBackgroundTransparent: 'rgba(255, 255, 255, 0.03)',
   lighterBackgroundTransparent: 'rgba(255, 255, 255, 0.02)',
+  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 };

front/src/pages/auth/Callback.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { getTokensFromLoginToken } from '@/auth/services/AuthService';
 
-export function AuthCallback() {
+export function Callback() {
   const [searchParams] = useSearchParams();
   const [isLoading, setIsLoading] = useState(false);
 

front/src/pages/auth/Index.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useMockData } from '@/auth/hooks/useMockData';
+import { hasAccessToken } from '@/auth/services/AuthService';
+import { Modal } from '@/ui/components/modal/Modal';
+
+import { Companies } from '../companies/Companies';
+
+export function Index() {
+  const navigate = useNavigate();
+  useMockData();
+
+  useEffect(() => {
+    if (hasAccessToken()) {
+      navigate('/');
+    }
+  }, [navigate]);
+
+  return (
+    <>
+      <Companies />
+      <Modal>Welcome to Twenty</Modal>
+    </>
+  );
+}

front/src/pages/auth/__stories__/Index.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
+import { Index } from '../Index';
+
+const meta: Meta<typeof Index> = {
+  title: 'Pages/Auth/Index',
+  component: Index,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof Index>;
+
+export const Default: Story = {
+  render: getRenderWrapperForPage(<Index />, '/auth'),
+  parameters: {
+    msw: graphqlMocks,
+  },
+};