Skip to content

Commit e7ba753

Browse files
ConnerWithAnEConnerWithAnE
authored
Front page working, upload page demo changed to upload selection to be a page (#9)
* Info displays to a demo display page * fix double manu lol * added FrontPage with basics. Modified layout of main App.tsx to change visibility of the bar depending on location * Simple implementation of FrontPage * added useEffect to wait until page it loaded to redirect * Fixed more colours and scrollbar * Modified naming scheme * removed redundant imports
1 parent 6332975 commit e7ba753

File tree

13 files changed

+345
-125
lines changed

13 files changed

+345
-125
lines changed

‎server/pdfData/papers/.gitkeep‎

Whitespace-only changes.

‎server/src/routes/admin-router.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,8 @@ async function parsePapers(
153153
): Promise<GPTResponse[]> {
154154
const fileList: string[] = files.map((file: Express.Multer.File) => file.path);
155155
console.log(fileList);
156-
//gptController.runGPTAnalysis(fileList);
157-
const temp: GPTResponse[] = [];
158-
return temp;
156+
const gptResults = await gptController.runGPTAnalysis(fileList);
157+
return gptResults;
159158
}
160159

161160
async function getFullPaperRows(

‎web/src/App.tsx‎

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,62 @@
1-
import { useState as _useState } from "react";
2-
import { Route, Routes, BrowserRouter } from "react-router-dom";
3-
import "./App.css";
4-
import CASCallback from "./auth/CASCallback";
5-
import ProtectedRoute from "./auth/ProtectedRoute";
6-
import UploadPage from "./pages/UploadPage";
7-
import ModifyPage from "./pages/ModifyPage";
8-
import Nav from "./components/nav-bar/nav-bar";
9-
import EditEntry from "./pages/edit-entry";
1+
import { useState as _useState } from 'react';
2+
import { Route, Routes, BrowserRouter, useLocation } from 'react-router-dom';
3+
import './App.css';
4+
import CASCallback from './auth/CASCallback';
5+
import ProtectedRoute from './auth/ProtectedRoute';
6+
import UploadPage from './pages/UploadPage';
7+
import ModifyPage from './pages/ModifyPage';
8+
import Nav from './components/nav-bar/nav-bar';
9+
import EditEntry from './pages/edit-entry';
10+
import FrontPage from './pages/FrontPage';
11+
import UploadSelectionPage from './pages/UploadSelectionPage';
1012

1113
function App() {
12-
//const [count, setCount] = useState(0);
13-
return (
14-
<BrowserRouter>
15-
<div className="flex flex-col h-screen">
16-
<Nav />
17-
<div className="flex-grow overflow-auto">
18-
<Routes>
19-
{/* Unprotected routes */}
20-
<Route path="/cas-callback" element={<CASCallback />} />
14+
return (
15+
<BrowserRouter>
16+
<Main />
17+
</BrowserRouter>
18+
);
19+
}
20+
21+
function Main() {
22+
const location = useLocation();
23+
24+
// Check if the current path is `/` (FrontPage)
25+
const showNav = location.pathname !== '/';
2126

22-
<Route
23-
path="/"
24-
element={
25-
// <ProtectedRoute>
26-
// <ModifyPage />
27-
// </ProtectedRoute>
28-
<ModifyPage />
29-
}
30-
>
31-
<Route
32-
path="edit-entry"
33-
element={<EditEntry paperData={[]} />}
34-
/>
35-
</Route>
36-
{/* Protected Routes */}
37-
<Route
38-
path="/upload"
39-
element={
40-
//<ProtectedRoute>
41-
<UploadPage />
42-
//</ProtectedRoute>
43-
}
44-
></Route>
45-
<Route
46-
path="/modify"
47-
element={
48-
// <ProtectedRoute>
49-
<ModifyPage />
50-
// </ProtectedRoute>
51-
}
52-
>
53-
<Route
54-
path="edit-entry"
55-
element={<EditEntry paperData={[]} />}
56-
/>
57-
</Route>
58-
</Routes>
59-
</div>
60-
</div>
61-
</BrowserRouter>
62-
);
27+
return (
28+
<div className="flex flex-col h-screen bg-white">
29+
{showNav && <Nav />}
30+
<div className="flex-grow overflow-auto bg-white">
31+
<Routes>
32+
{/* Unprotected routes */}
33+
<Route path="/" element={<FrontPage />} />
34+
<Route path="/cas-callback" element={<CASCallback />} />
35+
<Route path="edit-entry" element={<EditEntry paperData={[]} />} />
36+
37+
{/* Protected Routes */}
38+
<Route
39+
path="/upload"
40+
element={
41+
// <ProtectedRoute>
42+
<UploadPage />
43+
// </ProtectedRoute>
44+
}
45+
/>
46+
<Route path="/upload-selection" element={<UploadSelectionPage />} />
47+
<Route
48+
path="/modify"
49+
element={
50+
// <ProtectedRoute>
51+
<ModifyPage />
52+
// </ProtectedRoute>
53+
}
54+
/>
55+
</Routes>
56+
</div>
57+
</div>
58+
);
6359
}
6460

61+
6562
export default App;

‎web/src/auth/CASCallback.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,43 @@ import React, { useEffect } from 'react';
33
const BACKEND_URL = 'https://starr-lab-server.usask.ca'; // Replace with your backend URL
44

55
const CASCallback: React.FC = () => {
6-
useEffect(() => {
7-
// Extract CAS ticket from URL
8-
const urlParams = new URLSearchParams(window.location.search);
9-
const ticket = urlParams.get('ticket');
6+
useEffect(() => {
7+
// Extract CAS ticket from URL
8+
const urlParams = new URLSearchParams(window.location.search);
9+
const ticket = urlParams.get('ticket');
1010

11-
if (ticket) {
12-
// Call backend to validate ticket
13-
fetch(`${BACKEND_URL}/api/adminRequest/auth/cas-validate?ticket=${ticket}&service=${encodeURIComponent(window.location.origin + '/cas-callback')}`)
14-
.then((response) => {
15-
console.log(response);
16-
return response.json()})
17-
.then((data) => {
18-
if (data.token) {
19-
// Store JWT in localStorage
20-
localStorage.setItem('jwt', data.token);
21-
// Store nsid in localStorage
22-
localStorage.setItem('nsid', data.nsid);
23-
// Redirect to a protected page or home
24-
window.location.href = '/';
25-
} else {
26-
console.error('CAS validation failed:', data.error);
27-
}
28-
})
29-
.catch((error) => {
30-
console.error('Error during CAS validation:', error);
31-
});
32-
} else {
33-
console.error('No ticket found in URL');
34-
}
35-
}, []);
11+
if (ticket) {
12+
// Call backend to validate ticket
13+
fetch(
14+
`${BACKEND_URL}/api/adminRequest/auth/cas-validate?ticket=${ticket}&service=${encodeURIComponent(
15+
window.location.origin + '/cas-callback'
16+
)}`
17+
)
18+
.then((response) => {
19+
console.log(response);
20+
return response.json();
21+
})
22+
.then((data) => {
23+
if (data.token) {
24+
// Store JWT in localStorage
25+
localStorage.setItem('jwt', data.token);
26+
// Store nsid in localStorage
27+
localStorage.setItem('nsid', data.nsid);
28+
// Redirect to a protected page or home
29+
window.location.href = '/';
30+
} else {
31+
console.error('CAS validation failed:', data.error);
32+
}
33+
})
34+
.catch((error) => {
35+
console.error('Error during CAS validation:', error);
36+
});
37+
} else {
38+
console.error('No ticket found in URL');
39+
}
40+
}, []);
3641

37-
return (
38-
<div>
39-
Authenticating with CAS...
40-
</div>)
42+
return <div>Authenticating with CAS...</div>;
4143
};
4244

4345
export default CASCallback;

‎web/src/components/nav-bar/nav-bar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { useEffect, useState } from "react";
2020
<NavbarBrand>
2121
<p className="font-bold text-inherit text-slate-900">STARR Lab Rad-Effects Database</p>
2222
</NavbarBrand>
23-
<NavbarContent justify="end">
23+
<NavbarContent justify="end" className="text-[#343434]">
2424
{ nsid ? (<span>Logged in as: { nsid }</span>) : (<span>Currently not logged in</span>)}
2525
<NavbarItem>
2626
<Button className="bg-usask-green" variant="flat">

‎web/src/components/paper-gallery.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function PaperGallery({ papers }: PaperGalleryProps) {
2828

2929
return (
3030
<div
31-
className="overflow-y-scroll"
31+
className="overflow-y-scroll "
3232
style={{
3333
height: paperAreaHeight - 30,
3434

‎web/src/components/upload-page-sliver.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function UploadPageSliver({
2121
>
2222
{/* File name*/}
2323
<div className="col-span-5 flex items-center">
24-
<div className="text-md">{file.name}</div>
24+
<div className="text-md text-[#343434]">{file.name}</div>
2525
</div>
2626

2727
{/* X to remove file alongside hover tooltip */}
@@ -30,7 +30,7 @@ export default function UploadPageSliver({
3030
onClick={cancel}
3131
className="bg-transparent p-0 border-none flex items-center justify-center group"
3232
>
33-
<HiOutlineX className="text-black" size={30} />
33+
<HiOutlineX className="text-[#343434]" size={30} />
3434

3535

3636
<span className="absolute left-0 -translate-x-50 bg-[#444444] text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">

‎web/src/index.css‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,35 @@ a {
2222
color: #646cff;
2323
text-decoration: inherit;
2424
}
25-
a:hover {
26-
color: #535bf2;
25+
26+
/* width */
27+
/* width */
28+
::-webkit-scrollbar {
29+
width: 14px;
30+
}
31+
32+
/* Track */
33+
::-webkit-scrollbar-track {
34+
background: #f1f1f1;
35+
}
36+
37+
/* Handle */
38+
::-webkit-scrollbar-thumb {
39+
border: 4px solid rgba(0, 0, 0, 0);
40+
background-clip: padding-box;
41+
border-radius: 9999px;
42+
background-color: #AAAAAA;
2743
}
2844

45+
/* Handle on hover */
46+
::-webkit-scrollbar-thumb:hover {
47+
border: 4px solid rgba(0, 0, 0, 0);
48+
background-clip: padding-box;
49+
border-radius: 9999px;
50+
background: #777;
51+
}
52+
53+
2954
/* body {
3055
margin: 0;
3156
display: flex;
@@ -50,9 +75,7 @@ button {
5075
cursor: pointer;
5176
transition: border-color 0.25s;
5277
}
53-
button:hover {
54-
border-color: #646cff;
55-
}
78+
5679
button:focus,
5780
button:focus-visible {
5881
outline: 4px auto -webkit-focus-ring-color;

‎web/src/pages/FrontPage.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useNavigate } from 'react-router-dom';
2+
import '../App.css';
3+
import { Button } from '@nextui-org/react';
4+
import { useEffect } from 'react';
5+
6+
function redirectToCAS() {
7+
const CAS_SERVER = 'https://cas.usask.ca/cas';
8+
const FRONTEND_URL = 'https://starr-lab-server.usask.ca';
9+
const serviceURL = `${FRONTEND_URL}/cas-callback`;
10+
11+
window.location.href = `${CAS_SERVER}/login?service=${encodeURIComponent(
12+
serviceURL
13+
)}`;
14+
}
15+
16+
export default function FrontPage() {
17+
const navigate = useNavigate();
18+
const token = localStorage.getItem('jwt');
19+
20+
useEffect(() => {
21+
if (token) {
22+
navigate('/modify');
23+
}
24+
}, [token, navigate]);
25+
26+
const loginClicked = () => {
27+
redirectToCAS();
28+
};
29+
30+
return token ? (
31+
<div className="text-2xl p-[30%] text-[#343434] bg-white">Redirecting</div>
32+
) : (
33+
<div className="flex items-center justify-center bg-white p-[10%]">
34+
<div className="p-8 border border-[#D9D9D9] bg-[#D9D9D9] rounded-lg shadow-lg text-center">
35+
<h1 className="text-2xl font-semibold mb-4 text-[#343434] text-wrap">
36+
STARR Lab <br />
37+
Rad-Effects Database
38+
</h1>
39+
<h1 className="mb-4 py-10 pt-14 text-[#343434] text-2xl">Login</h1>
40+
<Button
41+
className="bg-usask-green text-white text-2xl px-12 py-6 rounded-lg "
42+
onClick={loginClicked}
43+
>
44+
Usask Login
45+
</Button>
46+
47+
<p className="pt-[40%] text-sm text-gray-500">
48+
Unable to login? Contact the system administrator
49+
</p>
50+
</div>
51+
</div>
52+
);
53+
}

‎web/src/pages/ModifyPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,15 @@ export default function ModifyPage() {
5151
};
5252

5353
return (
54-
<div className="flex flex-col items-center h-full">
54+
<div className="flex flex-col items-center bg h-full">
5555
<div className="bg-[#F4F4F4] w-[70%]">
5656
<div>
57-
<div className="py-[4%] text-4xl">Modify Paper Data</div>
57+
<div className="py-[4%] text-[#343434] text-4xl">Modify Paper Data</div>
5858
<SearchBar className="pb-4" onSearch={handleSearch} />
5959
<div className="w-full h-8 bg-[#D4D4D4] drop-shadow-md"></div>
6060
</div>
6161
<div className="">
62-
<div className="overflow-y-scroll max-h-screen">
62+
<div className="max-h-screen">
6363
<PaperGallery papers={papers} />
6464
</div>
6565
</div>

0 commit comments

Comments
 (0)