feat: Update auth flow and add third party auth

Signed-off-by: Raul-Cristian Kele <raulkeleblk@gmail.com>

package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui-treasury/styles": "^1.13.1",
     "@mui/icons-material": "^5.2.5",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.6",
@@ -18,7 +17,6 @@
     "lodash": "^4.17.21",
     "luxon": "^2.5.2",
     "markdown-to-jsx": "^7.1.7",
-    "nth-check": "^2.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
@@ -32,7 +30,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.8",
     "prettier": "^2.7.1",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -76,4 +76,10 @@
   .hide-on-mobile {
     display: none;
   }
+}
+
+@media (max-width: 950px) {
+  .hide-on-small {
+    display:none
+  }
 }

src/App.js

@@ -1,22 +1,19 @@
 import React, { useState } from 'react';
-import HomePage from './pages/HomePage.jsx';
-import LoginPage from './pages/LoginPage.jsx';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
-import './App.css';
+import { isAuthenticated } from 'utilities/authUtilities';
 
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { AuthWrapper } from 'utilities/AuthWrapper.jsx';
-import RepoPage from 'pages/RepoPage.jsx';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
+import { AuthWrapper } from 'utilities/AuthWrapper';
+import RepoPage from 'pages/RepoPage';
 import TagPage from 'pages/TagPage';
-import ExplorePage from 'pages/ExplorePage.jsx';
+import ExplorePage from 'pages/ExplorePage';
 
-function App() {
-  const isToken = () => {
-    const localStorageToken = localStorage.getItem('token');
-    return localStorageToken ? true : false;
-  };
+import './App.css';
 
-  const [isLoggedIn, setIsLoggedIn] = useState(isToken());
+function App() {
+  const [isLoggedIn, setIsLoggedIn] = useState(isAuthenticated());
 
   return (
     <div className="App" data-testid="app-container">

src/App.test.js

@@ -1,8 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import App from './App';
+import MockThemeProvider from './__mocks__/MockThemeProvider';
 
 it('renders the app component', () => {
-  render(<App />);
+  render(
+    <MockThemeProvider>
+      <App />
+    </MockThemeProvider>
+  );
   expect(screen.getByTestId('app-container')).toBeInTheDocument();
 });

src/__mocks__/MockThemeProvider.jsx

@@ -3,8 +3,8 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const theme = createTheme();
 
-function MockThemeProvier({ children }) {
+function MockThemeProvider({ children }) {
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 }
 
-export default MockThemeProvier;
+export default MockThemeProvider;

src/__tests__/Explore/Explore.test.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { createSearchParams, MemoryRouter } from 'react-router-dom';
 import filterConstants from 'utilities/filterConstants.js';
 import { sortByCriteria } from 'utilities/sortCriteria.js';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 // router mock
 const mockedUsedNavigate = jest.fn();
@@ -18,11 +18,11 @@ jest.mock('react-router-dom', () => ({
 const StateExploreWrapper = (props) => {
   const queryString = props.search || '';
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <MemoryRouter initialEntries={[`/explore?${queryString.toString()}`]}>
         <Explore />
       </MemoryRouter>
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };
 const mockImageList = {
@@ -236,6 +236,10 @@ beforeEach(() => {
     disconnect: () => null
   });
   window.IntersectionObserver = mockIntersectionObserver;
+  Object.defineProperty(window.document, 'cookie', {
+    writable: true,
+    value: 'user=test'
+  });
 });
 
 afterEach(() => {

src/__tests__/Explore/FilterCard.test.js

@@ -2,19 +2,19 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import FilterCard from 'components/Shared/FilterCard';
 import React, { useState } from 'react';
 import filterConstants from 'utilities/filterConstants';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 const StateFilterCardWrapper = () => {
   const [filters, setFilters] = useState([]);
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <FilterCard
         title="Operating System"
         filters={filterConstants.osFilters}
         updateFilters={setFilters}
         filterValue={filters}
       />
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };
 

src/__tests__/HomePage/Home.test.js

@@ -4,7 +4,7 @@ import Home from 'components/Home/Home';
 import React from 'react';
 import { createSearchParams } from 'react-router-dom';
 import { sortByCriteria } from 'utilities/sortCriteria';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
@@ -15,9 +15,9 @@ jest.mock('react-router-dom', () => ({
 
 const HomeWrapper = () => {
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <Home />
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };
 

src/__tests__/LoginPage/LoginPage.test.js

@@ -2,19 +2,22 @@ import { render, screen } from '@testing-library/react';
 import LoginPage from 'pages/LoginPage';
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 it('renders the signin presentation component and signin components if auth enabled', () => {
   render(
-    <BrowserRouter>
-      <Routes>
-        <Route
-          path="*"
-          element={
-            <LoginPage isAuthEnabled={true} setIsAuthEnabled={() => {}} isLoggedIn={false} setIsLoggedIn={() => {}} />
-          }
-        />
-      </Routes>
-    </BrowserRouter>
+    <MockThemeProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="*"
+            element={
+              <LoginPage isAuthEnabled={true} setIsAuthEnabled={() => {}} isLoggedIn={false} setIsLoggedIn={() => {}} />
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    </MockThemeProvider>
   );
   expect(screen.getByTestId('login-container')).toBeInTheDocument();
   expect(screen.getByTestId('presentation-container')).toBeInTheDocument();

src/__tests__/LoginPage/SignIn.test.js

@@ -4,6 +4,12 @@ import SignIn from 'components/Login/SignIn';
 import { api } from '../../api';
 import userEvent from '@testing-library/user-event';
 
+const mockMgmtResponse = {
+  distSpecVersion: '1.1.0-dev',
+  binaryType: '-apikey-lint-metrics-mgmt-scrub-search-sync-ui-userprefs',
+  http: { auth: { htpasswd: {} } }
+};
+
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -35,7 +41,10 @@ describe('Signin component automatic navigation', () => {
 describe('Sign in form', () => {
   beforeEach(() => {
     // mock auth check request
-    jest.spyOn(api, 'get').mockRejectedValue({ status: 401, data: {} });
+    jest.spyOn(api, 'get').mockResolvedValue({
+      status: 401,
+      data: mockMgmtResponse
+    });
   });
 
   it('should change username and password values on user input', async () => {
@@ -77,7 +86,7 @@ describe('Sign in form', () => {
   it('should should display login error if login not successful', async () => {
     render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => {}} isLoggedIn={false} setIsLoggedIn={() => {}} />);
     const submitButton = await screen.findByText('Continue');
-    jest.spyOn(api, 'get').mockRejectedValue();
+    jest.spyOn(api, 'get').mockRejectedValue({ status: 401, data: {} });
     fireEvent.click(submitButton);
     const errorDisplay = await screen.findByText(/Authentication Failed/i);
     await waitFor(() => {

src/__tests__/RepoPage/Repo.test.js

@@ -3,14 +3,14 @@ import RepoDetails from 'components/Repo/RepoDetails';
 import React from 'react';
 import { api } from 'api';
 import { createSearchParams } from 'react-router-dom';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 import userEvent from '@testing-library/user-event';
 
 const RepoDetailsThemeWrapper = () => {
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <RepoDetails />
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };
 
@@ -234,6 +234,13 @@ const mockRepoDetailsHigh = {
   }
 };
 
+beforeEach(() => {
+  Object.defineProperty(window.document, 'cookie', {
+    writable: true,
+    value: 'user=test'
+  });
+});
+
 afterEach(() => {
   // restore the spy created with spyOn
   jest.restoreAllMocks();

src/__tests__/RepoPage/RepoPage.test.js

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import RepoPage from 'pages/RepoPage';
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -27,18 +27,13 @@ afterEach(() => {
 
 it('renders the repository page component', () => {
   render(
-    <BrowserRouter>
-      <Routes>
-        <Route
-          path="*"
-          element={
-            <MockThemeProvier>
-              <RepoPage />
-            </MockThemeProvier>
-          }
-        />
-      </Routes>
-    </BrowserRouter>
+    <MockThemeProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="*" element={<RepoPage />} />
+        </Routes>
+      </BrowserRouter>
+    </MockThemeProvider>
   );
   expect(screen.getByTestId('repo-container')).toBeInTheDocument();
 });

src/__tests__/RepoPage/Tags.test.js

@@ -2,13 +2,13 @@ import { fireEvent, waitFor, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Tags from 'components/Repo/Tabs/Tags';
 import React from 'react';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 const TagsThemeWrapper = () => {
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <Tags tags={mockedTagsData} />
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };
 

src/__tests__/Shared/RepoCard.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import RepoCard from 'components/Shared/RepoCard';
 import { createSearchParams } from 'react-router-dom';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 // usenavigate mock
 const mockedUsedNavigate = jest.fn();
@@ -28,7 +28,7 @@ const mockImage = {
 const RepoCardWrapper = (props) => {
   const { image } = props;
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <RepoCard
         name={image.name}
         version={image.latestVersion}
@@ -38,7 +38,7 @@ const RepoCardWrapper = (props) => {
         lastUpdated={image.lastUpdated}
         platforms={image.platforms}
       />
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };
 

src/__tests__/TagPage/DependsOn.test.js

@@ -3,7 +3,7 @@ import { api } from 'api';
 import DependsOn from 'components/Tag/Tabs/DependsOn';
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import MockThemeProvier from '__mocks__/MockThemeProvider';
+import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 const mockDependenciesList = {
   data: {
@@ -53,13 +53,13 @@ const mockDependenciesList = {
 
 const RouterDependsWrapper = () => {
   return (
-    <MockThemeProvier>
+    <MockThemeProvider>
       <BrowserRouter>
         <Routes>
           <Route path="*" element={<DependsOn name="alpine:latest" />} />
         </Routes>
       </BrowserRouter>
-    </MockThemeProvier>
+    </MockThemeProvider>
   );
 };