feat: Implement api key management (#403)

Signed-off-by: Raul-Cristian Kele <[email protected]>

package.json

@@ -9,14 +9,15 @@
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.6",
     "@mui/styles": "^5.8.6",
+    "@mui/x-date-pickers": "^6.18.4",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
     "downshift": "^6.1.12",
     "export-from-json": "^1.7.3",
     "lodash": "^4.17.21",
-    "luxon": "^2.5.2",
+    "luxon": "^3.4.4",
     "markdown-to-jsx": "^7.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.js

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
-import { isAuthenticated } from 'utilities/authUtilities';
+import { isAuthenticated, isApiKeyEnabled } from 'utilities/authUtilities';
+import { AuthWrapper } from 'utilities/AuthWrapper';
 
 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';
+import UserManagementPage from 'pages/UserManagementPage';
 
 import './App.css';
 
@@ -25,6 +26,7 @@ function App() {
             <Route path="/explore" element={<ExplorePage />} />
             <Route path="/image/:name" element={<RepoPage />} />
             <Route path="/image/:reponame/tag/:tag" element={<TagPage />} />
+            {isApiKeyEnabled() && <Route path="/user/apikey" element={<UserManagementPage />} />}
             <Route path="*" element={<Navigate to="/home" />} />
           </Route>
           <Route element={<AuthWrapper isLoggedIn={!isLoggedIn} redirect="/" />}>

src/api.js

@@ -67,11 +67,14 @@ const api = {
     return axios.put(urli, payload, config);
   },
 
-  delete(urli, abortSignal, cfg) {
+  delete(urli, params, abortSignal, cfg) {
     let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
     if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
       config = { ...config, signal: abortSignal };
     }
+    if (!isEmpty(params)) {
+      config = { ...config, params };
+    }
     return axios.delete(urli, config);
   }
 };
@@ -81,6 +84,7 @@ const endpoints = {
   authConfig: `/v2/_zot/ext/mgmt`,
   openidAuth: `/zot/auth/login`,
   logout: `/zot/auth/logout`,
+  apiKeys: '/zot/auth/apikey',
   deleteImage: (name, tag) => `/v2/${name}/manifests/${tag}`,
   repoList: ({ pageNumber = 1, pageSize = 15 } = {}) =>
     `/v2/_zot/ext/search?query={RepoListWithNewestImage(requestedPage: {limit:${pageSize} offset:${

src/components/Header/UserAccountMenu.jsx

@@ -2,11 +2,17 @@ import React, { useState } from 'react';
 
 import { Menu, MenuItem, IconButton, Avatar, Divider } from '@mui/material';
 
-import { getLoggedInUser, logoutUser } from '../../utilities/authUtilities';
+import { getLoggedInUser, logoutUser, isApiKeyEnabled } from '../../utilities/authUtilities';
+import { useNavigate } from 'react-router-dom';
 
 function UserAccountMenu() {
   const [anchorEl, setAnchorEl] = useState(null);
   const openMenu = Boolean(anchorEl);
+  const navigate = useNavigate();
+
+  const apiKeyManagement = () => {
+    navigate('/user/apikey');
+  };
 
   const handleUserClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -37,6 +43,8 @@ function UserAccountMenu() {
       >
         <MenuItem onClick={handleUserClose}>{getLoggedInUser()}</MenuItem>
         <Divider />
+        {isApiKeyEnabled() && <MenuItem onClick={apiKeyManagement}>API Keys</MenuItem>}
+        <Divider />
         <MenuItem onClick={logoutUser}>Log out</MenuItem>
       </Menu>
     </>