From ffa8318e2ef7752e8ad516f1d84a83ee1584d22f Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sun, 18 Jun 2023 00:18:13 +0200 Subject: [PATCH] Add Auth Index page (#323) --- front/package.json | 2 ++ front/src/App.tsx | 22 +++++++------- front/src/modules/auth/hooks/useMockData.ts | 27 +++++++++++++++++ .../src/modules/ui/components/modal/Modal.tsx | 24 +++++++++++++++ .../ui/layout/styles/colors/transparent.ts | 2 ++ .../auth/{AuthCallback.tsx => Callback.tsx} | 2 +- front/src/pages/auth/Index.tsx | 26 +++++++++++++++++ .../pages/auth/__stories__/Index.stories.tsx | 22 ++++++++++++++ front/yarn.lock | 29 ++++++++++++++++++- 9 files changed, 144 insertions(+), 12 deletions(-) create mode 100644 front/src/modules/auth/hooks/useMockData.ts create mode 100644 front/src/modules/ui/components/modal/Modal.tsx rename front/src/pages/auth/{AuthCallback.tsx => Callback.tsx} (95%) create mode 100644 front/src/pages/auth/Index.tsx create mode 100644 front/src/pages/auth/__stories__/Index.stories.tsx diff --git a/front/package.json b/front/package.json index ac86f5fa8..d09ecfa22 100644 --- a/front/package.json +++ b/front/package.json @@ -14,6 +14,7 @@ "@types/node": "^16.18.4", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", + "@types/react-modal": "^3.16.0", "apollo-link-rest": "^0.9.0", "cmdk": "^0.2.0", "date-fns": "^2.30.0", @@ -25,6 +26,7 @@ "react-datepicker": "^4.11.0", "react-dom": "^18.2.0", "react-hotkeys-hook": "^4.4.0", + "react-modal": "^3.16.1", "react-router-dom": "^6.4.4", "react-textarea-autosize": "^8.4.1", "react-tooltip": "^5.13.1", diff --git a/front/src/App.tsx b/front/src/App.tsx index e291acad3..62fb0dff4 100644 --- a/front/src/App.tsx +++ b/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() { } /> } /> } /> + + } /> + + } + /> } @@ -31,19 +40,12 @@ export function App() { path="auth/*" element={ - } /> + } /> + } /> } /> } /> - - } /> - - } - /> ); diff --git a/front/src/modules/auth/hooks/useMockData.ts b/front/src/modules/auth/hooks/useMockData.ts new file mode 100644 index 000000000..e5fed599d --- /dev/null +++ b/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]], + }), + ); + }), +]; diff --git a/front/src/modules/ui/components/modal/Modal.tsx b/front/src/modules/ui/components/modal/Modal.tsx new file mode 100644 index 000000000..f51e44526 --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/front/src/modules/ui/layout/styles/colors/transparent.ts b/front/src/modules/ui/layout/styles/colors/transparent.ts index 44d79060c..405bfc5da 100644 --- a/front/src/modules/ui/layout/styles/colors/transparent.ts +++ b/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)', }; diff --git a/front/src/pages/auth/AuthCallback.tsx b/front/src/pages/auth/Callback.tsx similarity index 95% rename from front/src/pages/auth/AuthCallback.tsx rename to front/src/pages/auth/Callback.tsx index 42c06eb7e..f2de3af74 100644 --- a/front/src/pages/auth/AuthCallback.tsx +++ b/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); diff --git a/front/src/pages/auth/Index.tsx b/front/src/pages/auth/Index.tsx new file mode 100644 index 000000000..c0be93629 --- /dev/null +++ b/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 ( + <> + + Welcome to Twenty + + ); +} diff --git a/front/src/pages/auth/__stories__/Index.stories.tsx b/front/src/pages/auth/__stories__/Index.stories.tsx new file mode 100644 index 000000000..7d0919f7b --- /dev/null +++ b/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 = { + title: 'Pages/Auth/Index', + component: Index, +}; + +export default meta; + +export type Story = StoryObj; + +export const Default: Story = { + render: getRenderWrapperForPage(, '/auth'), + parameters: { + msw: graphqlMocks, + }, +}; diff --git a/front/yarn.lock b/front/yarn.lock index f59a8e229..f24d86e17 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -4761,6 +4761,13 @@ dependencies: "@types/react" "*" +"@types/react-modal@^3.16.0": + version "3.16.0" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.0.tgz#b8d6be10de894139a2ea9f4a2505b1b5d02023df" + integrity sha512-iphdqXAyUfByLbxJn5j6d+yh93dbMgshqGP0IuBeaKbZXx0aO+OXsvEkt6QctRdxjeM9/bR+Gp3h9F9djVWTQQ== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@>=16", "@types/react@^18.0.25": version "18.2.12" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97" @@ -8861,6 +8868,11 @@ execa@^5.0.0, execa@^5.1.1: signal-exit "^3.0.3" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw== + exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -14056,6 +14068,21 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.16.1: + version "3.16.1" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b" + integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-onclickoutside@^6.12.2: version "6.13.0" resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc" @@ -16410,7 +16437,7 @@ walker@^1.0.7, walker@^1.0.8: dependencies: makeerror "1.0.12" -warning@^4.0.2: +warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==