fix: decouple UI layout from admin routes

config.schema.json

@@ -88,6 +88,19 @@
         "cert": { "type": "string" }
       },
       "required": ["enabled", "key", "cert"]
+    },
+    "uiRouteAuth": {
+      "description": "UI routes that require authentication (logged in or admin)",
+      "type": "object",
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "rules": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/routeAuthRule"
+          }
+        }
+      }
     }
   },
   "definitions": {
@@ -119,6 +132,14 @@
         "options": { "type": "object" }
       },
       "required": ["type", "enabled"]
+    },
+    "routeAuthRule": {
+      "type": "object",
+      "properties": {
+        "pattern": { "type": "string" },
+        "adminOnly": { "type": "boolean" },
+        "loginRequired": { "type": "boolean" }
+      }
     }
   },
   "additionalProperties": false

cypress/e2e/autoApproved.cy.js

@@ -2,6 +2,8 @@ import moment from 'moment';
 
 describe('Auto-Approved Push Test', () => {
   beforeEach(() => {
+    cy.login('admin', 'admin');
+
     cy.intercept('GET', '/api/v1/push/123', {
       statusCode: 200,
       body: {
@@ -45,7 +47,7 @@ describe('Auto-Approved Push Test', () => {
   });
 
   it('should display auto-approved message and verify tooltip contains the expected timestamp', () => {
-    cy.visit('/admin/push/123');
+    cy.visit('/dashboard/push/123');
 
     cy.wait('@getPush');
 

cypress/e2e/login.cy.js

@@ -19,6 +19,18 @@ describe('Login page', () => {
     cy.get('[data-test="login"]').should('exist');
   });
 
+  it('should redirect to repo list on valid login', () => {
+    cy.intercept('GET', '**/api/auth/me').as('getUser');
+
+    cy.get('[data-test="username"]').type('admin');
+    cy.get('[data-test="password"]').type('admin');
+    cy.get('[data-test="login"]').click();
+
+    cy.wait('@getUser');
+
+    cy.url().should('include', '/dashboard/repo');
+  })
+
   describe('OIDC login button', () => {
     it('should exist', () => {
       cy.get('[data-test="oidc-login"]').should('exist');

cypress/e2e/repo.cy.js

@@ -1,6 +1,8 @@
 describe('Repo', () => {
   beforeEach(() => {
-    cy.visit('/admin/repo');
+    cy.login('admin', 'admin');
+
+    cy.visit('/dashboard/repo');
 
     // prevent failures on 404 request and uncaught promises
     cy.on('uncaught:exception', () => false);
@@ -18,7 +20,7 @@ describe('Repo', () => {
 
       cy
         // find the entry for finos/test-repo
-        .get('a[href="/admin/repo/test-repo"]')
+        .get('a[href="/dashboard/repo/test-repo"]')
         // take it's parent row
         .closest('tr')
         // find the nearby span containing Code we can click to open the tooltip

cypress/support/commands.js

@@ -29,9 +29,13 @@
 Cypress.Commands.add('login', (username, password) => {
   cy.session([username, password], () => {
     cy.visit('/login');
+    cy.intercept('GET', '**/api/auth/me').as('getUser');
+
     cy.get('[data-test=username]').type(username);
     cy.get('[data-test=password]').type(password);
     cy.get('[data-test=login]').click();
-    cy.url().should('contain', '/admin/profile');
+
+    cy.wait('@getUser');
+    cy.url().should('include', '/dashboard/repo');
   });
 });

proxy.config.json

@@ -102,5 +102,20 @@
     "enabled": true,
     "key": "certs/key.pem",
     "cert": "certs/cert.pem"
+  },
+  "uiRouteAuth": {
+    "enabled": false,
+    "rules": [
+      {
+        "pattern": "/dashboard/*",
+        "adminOnly": false,
+        "loginRequired": true
+      },
+      {
+        "pattern": "/admin/*",
+        "adminOnly": true,
+        "loginRequired": true
+      }
+    ]
   }
 }

src/config/index.ts

@@ -34,6 +34,7 @@
 let _tlsEnabled = defaultSettings.tls.enabled;
 let _tlsKeyPemPath = defaultSettings.tls.key;
 let _tlsCertPemPath = defaultSettings.tls.cert;
+let _uiRouteAuth: Record<string, unknown> = defaultSettings.uiRouteAuth;
 
 // Get configured proxy URL
 export const getProxyUrl = () => {
@@ -217,3 +218,10 @@
   }
   return _domains;
 };
+
+export const getUIRouteAuth = () => {
+  if (_userSettings && _userSettings.uiRouteAuth) {
+    _uiRouteAuth = _userSettings.uiRouteAuth;
+  }
+  return _uiRouteAuth;
+};

src/index.jsx

@@ -2,21 +2,28 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { AuthProvider } from './ui/auth/AuthProvider';
 
 // core components
-import Admin from './ui/layouts/Admin';
+import Dashboard from './ui/layouts/Dashboard';
 import Login from './ui/views/Login/Login';
 import './ui/assets/css/material-dashboard-react.css';
+import NotAuthorized from './ui/views/Extras/NotAuthorized';
+import NotFound from './ui/views/Extras/NotFound';
 
 const hist = createBrowserHistory();
 
 ReactDOM.render(
-  <Router history={hist}>
-    <Routes>
-      <Route exact path='/admin/*' element={<Admin />} />
-      <Route exact path='/login' element={<Login />} />
-      <Route exact path='/' element={<Navigate from='/' to='/admin/repo' />} />
-    </Routes>
-  </Router>,
+  <AuthProvider>
+    <Router history={hist}>
+      <Routes>
+        <Route exact path='/dashboard/*' element={<Dashboard />} />
+        <Route exact path='/login' element={<Login />} />
+        <Route exact path='/not-authorized' element={<NotAuthorized />} />
+        <Route exact path='/' element={<Navigate from='/' to='/dashboard/repo' />} />
+        <Route path='*' element={<NotFound />} />
+      </Routes>
+    </Router>
+  </AuthProvider>,
   document.getElementById('root'),
 );

src/proxy/processors/push-action/blockForAuth.ts

@@ -9,7 +9,7 @@ const exec = async (req: any, action: Action) => {
     '\n\n\n' +
     `\x1B[32mGitProxy has received your push ✅\x1B[0m\n\n` +
     '🔗 Shareable Link\n\n' +
-    `\x1B[34m${url}/admin/push/${action.id}\x1B[0m` +
+    `\x1B[34m${url}/dashboard/push/${action.id}\x1B[0m` +
     '\n\n\n';
   step.setAsyncBlock(message);
 

src/routes.jsx

@@ -16,6 +16,8 @@
 
 */
 
+import React from 'react';
+import RouteGuard from './ui/components/RouteGuard/RouteGuard';
 import Person from '@material-ui/icons/Person';
 import OpenPushRequests from './ui/views/OpenPushRequests/OpenPushRequests';
 import PushDetails from './ui/views/PushDetails/PushDetails';
@@ -33,58 +35,86 @@ const dashboardRoutes = [
     path: '/repo',
     name: 'Repositories',
     icon: RepoIcon,
-    component: RepoList,
-    layout: '/admin',
+    component: (props) => 
+      <RouteGuard
+        component={RepoList}
+        fullRoutePath={`/dashboard/repo`}
+      />,
+    layout: '/dashboard',
     visible: true,
   },
+  {
+    path: '/repo/:id',
+    name: 'Repo Details',
+    icon: Person,
+    component: (props) => 
+      <RouteGuard
+        component={RepoDetails}
+        fullRoutePath={`/dashboard/repo/:id`}
+      />,
+    layout: '/dashboard',
+    visible: false,
+  },
   {
     path: '/push',
     name: 'Dashboard',
     icon: Dashboard,
-    component: OpenPushRequests,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={OpenPushRequests}
+        fullRoutePath={`/dashboard/push`}
+      />,
+    layout: '/dashboard',
     visible: true,
   },
   {
     path: '/push/:id',
     name: 'Open Push Requests',
     icon: Person,
-    component: PushDetails,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={PushDetails}
+        fullRoutePath={`/dashboard/push/:id`}
+      />,
+    layout: '/dashboard',
     visible: false,
   },
   {
     path: '/profile',
     name: 'My Account',
     icon: AccountCircle,
-    component: User,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={User}
+        fullRoutePath={`/dashboard/profile`}
+      />,
+    layout: '/dashboard',
     visible: true,
   },
   {
-    path: '/user/:id',
-    name: 'User',
-    icon: Person,
-    component: User,
-    layout: '/admin',
-    visible: false,
+    path: '/admin/user',
+    name: 'Users',
+    icon: Group,
+    component: (props) =>
+      <RouteGuard
+        component={UserList}
+        fullRoutePath={`/dashboard/admin/user`}
+      />,
+    layout: '/dashboard',
+    visible: true,
   },
   {
-    path: '/repo/:id',
-    name: 'Repo Details',
+    path: '/admin/user/:id',
+    name: 'User',
     icon: Person,
-    component: RepoDetails,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={User}
+        fullRoutePath={`/dashboard/admin/user/:id`}
+      />,
+    layout: '/dashboard',
     visible: false,
   },
-  {
-    path: '/user',
-    name: 'Users',
-    icon: Group,
-    component: UserList,
-    layout: '/admin',
-    visible: true,
-  },
 ];
 
 export default dashboardRoutes;

src/service/routes/auth.js

@@ -60,7 +60,7 @@
         return res.status(401).end();
       }
       console.log('Logged in successfully. User:', user);
-      return res.redirect(`${uiHost}:${uiPort}/admin/profile`);
+      return res.redirect(`${uiHost}:${uiPort}/dashboard/profile`);
     });
   })(req, res, next);
 });
@@ -135,7 +135,7 @@
   }
 });
 
-router.get('/userLoggedIn', async (req, res) => {
+router.get('/me', async (req, res) => {
   if (req.user) {
     const user = JSON.parse(JSON.stringify(req.user));
     if (user && user.password) delete user.password;

src/service/routes/config.js

@@ -15,4 +15,8 @@
   res.send(config.getContactEmail());
 });
 
+router.get('/uiRouteAuth', function ({ res }) {
+  res.send(config.getUIRouteAuth());
+});
+
 module.exports = router;

src/ui/auth/AuthProvider.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { getUserInfo } from '../services/auth';
+
+// Interface for when we convert to TypeScript
+// interface AuthContextType {
+//   user: any;
+//   setUser: (user: any) => void;
+//   refreshUser: () => Promise<void>;
+//   isLoading: boolean;
+// }
+
+const AuthContext = createContext(undefined);
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refreshUser = async () => {
+    console.log('Refreshing user');
+    try {
+      const data = await getUserInfo();
+      setUser(data);
+      console.log('User refreshed:', data);
+    } catch (error) {
+      console.error('Error refreshing user:', error);
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    refreshUser();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, setUser, refreshUser, isLoading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};