diff --git a/cypress/e2e/repo.cy.js b/cypress/e2e/repo.cy.js index 32c7d1cab..d61454ae9 100644 --- a/cypress/e2e/repo.cy.js +++ b/cypress/e2e/repo.cy.js @@ -1,5 +1,7 @@ describe('Repo', () => { beforeEach(() => { + cy.login('admin', 'admin'); + cy.visit('/admin/repo'); // prevent failures on 404 request and uncaught promises diff --git a/cypress/support/commands.js b/cypress/support/commands.js index aa3b052c2..dbb84ddec 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -32,6 +32,6 @@ Cypress.Commands.add('login', (username, password) => { 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.url().should('contain', '/admin/repo'); }); }); diff --git a/src/index.jsx b/src/index.jsx index 4aca4983b..316d7dda2 100644 --- a/src/index.jsx +++ b/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 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( - - - } /> - } /> - } /> - - , + + + + } /> + } /> + } /> + } /> + } /> + + + , document.getElementById('root'), ); diff --git a/src/routes.jsx b/src/routes.jsx index 526b452aa..ed12a7241 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -16,6 +16,8 @@ */ +import React from 'react'; +import PrivateRoute from './ui/components/PrivateRoute/PrivateRoute'; import Person from '@material-ui/icons/Person'; import OpenPushRequests from './ui/views/OpenPushRequests/OpenPushRequests'; import PushDetails from './ui/views/PushDetails/PushDetails'; @@ -33,15 +35,23 @@ const dashboardRoutes = [ path: '/repo', name: 'Repositories', icon: RepoIcon, - component: RepoList, + component: (props) => , layout: '/admin', visible: true, }, + { + path: '/repo/:id', + name: 'Repo Details', + icon: Person, + component: (props) => , + layout: '/admin', + visible: false, + }, { path: '/push', name: 'Dashboard', icon: Dashboard, - component: OpenPushRequests, + component: (props) => , layout: '/admin', visible: true, }, @@ -49,7 +59,7 @@ const dashboardRoutes = [ path: '/push/:id', name: 'Open Push Requests', icon: Person, - component: PushDetails, + component: (props) => , layout: '/admin', visible: false, }, @@ -57,34 +67,26 @@ const dashboardRoutes = [ path: '/profile', name: 'My Account', icon: AccountCircle, - component: User, + component: (props) => , layout: '/admin', visible: true, }, { - path: '/user/:id', - name: 'User', - icon: Person, - component: User, + path: '/user', + name: 'Users', + icon: Group, + component: (props) => , layout: '/admin', - visible: false, + visible: true, }, { - path: '/repo/:id', - name: 'Repo Details', + path: '/user/:id', + name: 'User', icon: Person, - component: RepoDetails, + component: (props) => , layout: '/admin', visible: false, }, - { - path: '/user', - name: 'Users', - icon: Group, - component: UserList, - layout: '/admin', - visible: true, - }, ]; export default dashboardRoutes; diff --git a/src/service/routes/auth.js b/src/service/routes/auth.js index 92cd82e39..0d9deb054 100644 --- a/src/service/routes/auth.js +++ b/src/service/routes/auth.js @@ -135,7 +135,7 @@ router.post('/gitAccount', async (req, res) => { } }); -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; diff --git a/src/ui/auth/AuthProvider.tsx b/src/ui/auth/AuthProvider.tsx new file mode 100644 index 000000000..1da89df51 --- /dev/null +++ b/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; +// 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 ( + + {children} + + ); +}; + +export const useAuth = () => { + const context = useContext(AuthContext); + if (!context) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +}; diff --git a/src/ui/components/PrivateRoute/PrivateRoute.tsx b/src/ui/components/PrivateRoute/PrivateRoute.tsx new file mode 100644 index 000000000..4e7a2f4bf --- /dev/null +++ b/src/ui/components/PrivateRoute/PrivateRoute.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Navigate } from 'react-router-dom'; +import { useAuth } from '../../auth/AuthProvider'; + +const PrivateRoute = ({ component: Component, adminOnly = false }) => { + const { user, isLoading } = useAuth(); + console.debug('PrivateRoute', { user, isLoading, adminOnly }); + + if (isLoading) { + console.debug('Auth is loading, waiting'); + return
Loading...
; // TODO: Add loading spinner + } + + if (!user) { + console.debug('User not logged in, redirecting to login page'); + return ; + } + + if (adminOnly && !user.admin) { + console.debug('User is not an admin, redirecting to not authorized page'); + return ; + } + + return ; +}; + +export default PrivateRoute; diff --git a/src/ui/services/auth.js b/src/ui/services/auth.js new file mode 100644 index 000000000..e1155e9f5 --- /dev/null +++ b/src/ui/services/auth.js @@ -0,0 +1,22 @@ +const baseUrl = import.meta.env.VITE_API_URI + ? `${import.meta.env.VITE_API_URI}` + : `${location.origin}`; + +/** + * Gets the current user's information + * @return {Promise} The user's information + */ +export const getUserInfo = async () => { + try { + const response = await fetch(`${baseUrl}/api/auth/me`, { + credentials: 'include', // Sends cookies + }); + + if (!response.ok) throw new Error(`Failed to fetch user info: ${response.statusText}`); + + return await response.json(); + } catch (error) { + console.error('Error fetching user info:', error); + return null; + } +}; diff --git a/src/ui/services/user.js b/src/ui/services/user.js index 04a2fdccb..cab1dc3ea 100644 --- a/src/ui/services/user.js +++ b/src/ui/services/user.js @@ -77,7 +77,7 @@ const updateUser = async (data) => { }; const getUserLoggedIn = async (setIsLoading, setIsAdmin, setIsError, setAuth) => { - const url = new URL(`${baseUrl}/api/auth/userLoggedIn`); + const url = new URL(`${baseUrl}/api/auth/me`); await axios(url.toString(), { withCredentials: true }) .then((response) => { diff --git a/src/ui/views/Extras/NotAuthorized.jsx b/src/ui/views/Extras/NotAuthorized.jsx new file mode 100644 index 000000000..f08c478b1 --- /dev/null +++ b/src/ui/views/Extras/NotAuthorized.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import Card from '../../components/Card/Card'; +import CardBody from '../../components/Card/CardBody'; +import GridContainer from '../../components/Grid/GridContainer'; +import GridItem from '../../components/Grid/GridItem'; +import { Button } from '@material-ui/core'; +import LockIcon from '@material-ui/icons/Lock'; + +const NotAuthorized = () => { + const navigate = useNavigate(); + + return ( + + + + + +

403 - Not Authorized

+

+ You do not have permission to access this page. Contact your administrator for more + information, or try logging in with a different account. +

+ +
+
+
+
+ ); +}; + +export default NotAuthorized; diff --git a/src/ui/views/Extras/NotFound.jsx b/src/ui/views/Extras/NotFound.jsx new file mode 100644 index 000000000..d548200de --- /dev/null +++ b/src/ui/views/Extras/NotFound.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import Card from '../../components/Card/Card'; +import CardBody from '../../components/Card/CardBody'; +import GridContainer from '../../components/Grid/GridContainer'; +import GridItem from '../../components/Grid/GridItem'; +import { Button } from '@material-ui/core'; +import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; + +const NotFound = () => { + const navigate = useNavigate(); + + return ( + + + + + +

404 - Page Not Found

+

The page you are looking for does not exist. It may have been moved or deleted.

+ +
+
+
+
+ ); +}; + +export default NotFound; diff --git a/src/ui/views/Login/Login.jsx b/src/ui/views/Login/Login.jsx index 719714ec2..db4aec717 100644 --- a/src/ui/views/Login/Login.jsx +++ b/src/ui/views/Login/Login.jsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; // @material-ui/core components import FormControl from '@material-ui/core/FormControl'; import InputLabel from '@material-ui/core/InputLabel'; @@ -12,10 +13,10 @@ import CardHeader from '../../components/Card/CardHeader'; import CardBody from '../../components/Card/CardBody'; import CardFooter from '../../components/Card/CardFooter'; import axios from 'axios'; -import { Navigate } from 'react-router-dom'; import logo from '../../assets/img/git-proxy.png'; import { Badge, CircularProgress, Snackbar } from '@material-ui/core'; import { getCookie } from '../../utils'; +import { useAuth } from '../../auth/AuthProvider'; const loginUrl = `${import.meta.env.VITE_API_URI}/api/auth/login`; @@ -23,10 +24,12 @@ export default function UserProfile() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [message, setMessage] = useState(''); - const [success, setSuccess] = useState(false); - const [gitAccountError, setGitAccountError] = useState(false); + const [, setGitAccountError] = useState(false); const [isLoading, setIsLoading] = useState(false); + const navigate = useNavigate(); + const { refreshUser } = useAuth(); + function validateForm() { return ( username.length > 0 && username.length < 100 && password.length > 0 && password.length < 200 @@ -57,8 +60,8 @@ export default function UserProfile() { .then(function () { window.sessionStorage.setItem('git.proxy.login', 'success'); setMessage('Success!'); - setSuccess(true); setIsLoading(false); + refreshUser().then(() => navigate('/admin/repo')); }) .catch(function (error) { if (error.response.status === 307) { @@ -75,13 +78,6 @@ export default function UserProfile() { event.preventDefault(); } - if (gitAccountError) { - return ; - } - if (success) { - return ; - } - return (
{ }); it('should now be able to access the user login metadata', async function () { - const res = await chai.request(app).get('/api/auth/userLoggedIn').set('Cookie', `${cookie}`); + const res = await chai.request(app).get('/api/auth/me').set('Cookie', `${cookie}`); res.should.have.status(200); });