Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upload branch for auth #73

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+737 −54
Open

upload branch for auth #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68161d2
upload branch for auth
Kevinxygu Dec 11, 2024
d2ad07b
updated w prettier
Kevinxygu Dec 11, 2024
7a43f5d
removed unused variables
Kevinxygu Dec 11, 2024
4abb64c
ran prettier again sadge
Kevinxygu Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
589 changes: 572 additions & 17 deletions app/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"express": "^4.20.0",
"express": "^4.21.2",
"express-openid-connect": "^2.17.1",
"moment-timezone": "^0.5.45",
"pg": "^8.12.0"
},
Expand Down
2 changes: 2 additions & 0 deletions client/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
DOMAIN=
CLIENTID=
30 changes: 30 additions & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
"test": "jest"
},
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
"dotenv": "^16.4.7",
"next": "^14.2.13",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand Down
Binary file added client/src/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added client/src/app/.DS_Store
View file
Open in desktop
Binary file not shown.
5 changes: 4 additions & 1 deletion client/src/app/auth/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { ChangeEvent, FormEvent, useState } from "react";
import Button from "../components/button";
import TextField from "../components/text-field";
import { useAuth0 } from "@auth0/auth0-react";

const Login: React.FC = () => {
const { loginWithRedirect } = useAuth0();
interface LoginFormState {
username: string;
password: string;
Expand All @@ -20,10 +22,11 @@ const Login: React.FC = () => {
});
}

function handleLogin(e: FormEvent<Element>): void {
async function handleLogin(e: FormEvent<Element>): Promise<void> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we turn this into a functional component just to match the rest of the repo 😄 ?

e.preventDefault();
console.log("handleLogin not implemented");
//call the User Authenitcation API
await loginWithRedirect();
}
return (
<div>
Expand Down
44 changes: 44 additions & 0 deletions client/src/app/components/authStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
"use client";
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

// Component to render small window for auth status
const AuthStatus: React.FC = () => {
const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

return (
<div className="absolute left-0 top-0 m-4 rounded bg-[#20222C] p-2 text-white shadow">
{isAuthenticated ? (
<div
className="flex flex-col items-start p-2 text-left"
style={{ padding: "10px 35px 10px 15px" }}
>
<span>Logged in</span>
<button
onClick={() =>
logout({ logoutParams: { returnTo: window.location.origin } })
}
className="mt-1 text-sm text-red-300 underline transition duration-300 ease-in-out hover:text-red-100"
>
Log out
</button>
</div>
) : (
<div
className="flex flex-col items-start p-2"
style={{ padding: "10px 15px" }}
>
<span className="text-white">Not logged in</span>
<button
onClick={() => loginWithRedirect()}
className="mt-1 text-sm text-green-400 underline transition duration-300 ease-in-out hover:text-green-200"
>
Log in
</button>
</div>
)}
</div>
);
};

export default AuthStatus;
29 changes: 29 additions & 0 deletions client/src/app/contexts/AuthContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
"use client";

import React from "react";
import { Auth0Provider } from "@auth0/auth0-react";
import dotenv from "dotenv";

dotenv.config();

// Props for AuthContext
interface AuthContextProps {
children: React.ReactNode;
}

// AuthContext to wrap the application around
const AuthContext: React.FC<AuthContextProps> = ({ children }) => {
return (
<Auth0Provider
domain={process.env.NEXT_PUBLIC_DOMAIN || ""}
clientId={process.env.NEXT_PUBLIC_CLIENTID || ""}
Comment on lines +18 to +19
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these variables come from your .env file or are they just nextjs environment variables that we can just use? If its the former, why is it different from .env.example?

I'm mostly curious cause when I'm working on CI/CD right now so its important I know all the env variables that we use.

authorizationParams={{
redirect_uri: window.location.origin,
}}
>
{children}
</Auth0Provider>
);
};

export default AuthContext;
5 changes: 4 additions & 1 deletion client/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import AuthContext from "./contexts/AuthContext";

export default function RootLayout({
children,
Expand All @@ -7,7 +8,9 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body>
<AuthContext>{children}</AuthContext>
</body>
</html>
);
}
82 changes: 48 additions & 34 deletions client/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@ import Button from "./components/button";
import { useState } from "react";
import { PC } from "../interfaces/pc";
import Activity from "./lounge/activity";
import AuthStatus from "./components/authStatus";
import { useAuth0 } from "@auth0/auth0-react";

export default function Page() {
const [isAddingNewGamer, setIsAddingNewGamer] = React.useState(true);
const [selectedPC, setSelectedPC] = useState<PC | null>(null);
const [isOccupied, setIsOccupied] = useState<boolean>(false);

// Auth contexts
const { isAuthenticated } = useAuth0();

const handleToggleForm = () => {
setIsAddingNewGamer(!isAddingNewGamer);
};
Expand All @@ -29,45 +34,54 @@ export default function Page() {

return (
<div className="min-h-screen bg-[#0D0D0E] p-1">
<div className="grid h-full grid-cols-9 gap-1">
{/* left buffer */}
<div className="col-span-1"></div>
{/* Live Lounge Map - Left Section */}
<div className="relative col-span-3 flex flex-col gap-1">
<div className="col-span-3 h-full rounded-md bg-[#20222C] p-4">
<h1 className="p-4 text-2xl font-bold text-white">Lounge Map</h1>
<Map onPCClick={handlePCClick} />
</div>
{selectedPC ? (
<PCInfo pc={selectedPC} isOccupied={isOccupied} />
) : (
<AuthStatus />
{isAuthenticated ? (
<div className="grid h-full grid-cols-9 gap-1">
Copy link
Contributor

@joshhwuu joshhwuu Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Getting to the point where this file is a bit bloated... we should consider factoring out the lounge home page as a component and the not logged in page as its own page (in case we ever decide to add more features to that page) and move them to separate files. This probably should've been done earlier but I think the more minimal page.tsx is the better

I'll create a follow-up issue for this

{/* left buffer */}
<div className="col-span-1"></div>
{/* Live Lounge Map - Left Section */}
<div className="relative col-span-3 flex flex-col gap-1">
<div className="col-span-3 h-full rounded-md bg-[#20222C] p-4">
<PlaceholderImage />
<h1 className="p-4 text-2xl font-bold text-white">Lounge Map</h1>
<Map onPCClick={handlePCClick} />
</div>
)}
</div>
{/* Right Column - Check In, Student Info, and Records */}
<div className="relative col-span-4 flex flex-col gap-1">
<div className="absolute right-0 top-0 m-4">
<Button
onClick={handleToggleForm}
label={isAddingNewGamer ? "Add New" : "Check In"}
className="flex items-center text-green-400 hover:text-green-300"
/>
</div>
<div className="max-h-[300px] flex-grow rounded-md bg-[#20222C] p-4">
{isAddingNewGamer ? <CheckIn /> : <AddUser />}
</div>
<div className="rounded-md bg-[#20222C] p-4">
<StudentInfo />
{selectedPC ? (
<PCInfo pc={selectedPC} isOccupied={isOccupied} />
) : (
<div className="col-span-3 h-full rounded-md bg-[#20222C] p-4">
<PlaceholderImage />
</div>
)}
</div>
<div className="h-full rounded-md bg-[#20222C] p-4">
<Activity />
{/* Right Column - Check In, Student Info, and Records */}
<div className="relative col-span-4 flex flex-col gap-1">
<div className="absolute right-0 top-0 m-4">
<Button
onClick={handleToggleForm}
label={isAddingNewGamer ? "Add New" : "Check In"}
className="flex items-center text-green-400 hover:text-green-300"
/>
</div>
<div className="max-h-[300px] flex-grow rounded-md bg-[#20222C] p-4">
{isAddingNewGamer ? <CheckIn /> : <AddUser />}
</div>
<div className="rounded-md bg-[#20222C] p-4">
<StudentInfo />
</div>
<div className="h-full rounded-md bg-[#20222C] p-4">
<Activity />
</div>
</div>
{/* right */}
<div className="col-span-1"></div>
</div>
) : (
<div className="flex h-screen items-center justify-center">
<p className="text-center text-lg text-white">
You not logged in boi!
</p>
</div>
{/* right */}
<div className="col-span-1"></div>
</div>
)}
</div>
);
}
Loading