Skip to content

Commit

Permalink
Merge pull request #88 from NCAR/update-root-page
Browse files Browse the repository at this point in the history 
Update Root Page
  • Loading branch information
@LucientZ
LucientZ authored Feb 8, 2025
2 parents d54677c + b73bcdf commit 135d04f
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 179 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/HeaderFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export const Header = () => {
padding: "10px",
}}
>
<Button onClick={toggleDrawer(true)}>
<DensitySmallSharpIcon sx={{ fontSize: 50 }}></DensitySmallSharpIcon>
<Button aria-label="Open Side-Navigation Menu" onClick={toggleDrawer(true)}>
<DensitySmallSharpIcon sx={{ fontSize: "2.3rem" }}></DensitySmallSharpIcon>
</Button>
<Drawer open={openDrawer} onClose={toggleDrawer(false)}>
<NavDropDown />
Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/Modals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1117,7 +1117,6 @@ export const CreateReactionModal: React.FC<CreateReactionModalProps> = ({
const createReactionProductsRef = useRef("");

useEffect(() => {
console.log("hi:", selectedFamily);
const fetchReactions = async () => {
try {
if (selectedFamilyId && selectedMechanismId) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NavDropDown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const NavDropDown = () => {
// Get the logged-in user from the AuthContext
const { user, setUser } = useAuth();

const goHome = () => navigate("/LoggedIn");
const goHome = () => navigate("/");
const goFamily = () => navigate("/FamilyPage");
const goLogOut = () => {
setUser(null);
Expand Down
159 changes: 60 additions & 99 deletions frontend/src/pages/logIn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import { googleLogout, useGoogleLogin } from "@react-oauth/google";
import axios from "axios";
import { useAuth } from "../pages/AuthContext"; // Import the AuthContext
Expand All @@ -11,35 +10,20 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import GoogleIcon from "@mui/icons-material/Google";
import NoAccountsIcon from "@mui/icons-material/NoAccounts";
import { Footer } from "../components/HeaderFooter";
import Holidays from "../components/Holidays"; // Import the Holidays component
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { Footer, Header } from "../components/HeaderFooter";
import { getUserByEmail } from "../API/API_GetMethods";
import { createUser } from "../API/API_CreateMethods";

interface AuthUser {
access_token: string;
}

interface Profile {
name: string;
email: string;
}

const LogIn = () => {
const { setUser } = useAuth(); // Get setUser from AuthContext
const [user, setLocalUser] = useState<AuthUser | null>(null);
const [profile, setProfile] = useState<Profile | null>(null);
const LogIn: React.FC = () => {
const { setUser, user } = useAuth(); // Get setUser from AuthContext
const navigate = useNavigate();
const handleClick = () => navigate("/LoggedIn");

const login = useGoogleLogin({
onSuccess: (codeResponse) => {
setLocalUser(codeResponse); // Set local user
},
onError: (error) => console.log("Login Failed:", error),
});

useEffect(() => {
const setUserInformation = async (user: AuthUser) => {
if (user) {
// Fetch the user profile using the access token
axios
Expand All @@ -54,7 +38,6 @@ const LogIn = () => {
)
.then(async (res) => {
const profileData = res.data;
setProfile(profileData);

if (!profileData.email) {
console.error("Profile data does not contain an email.");
Expand All @@ -66,11 +49,6 @@ const LogIn = () => {
try {
const existingUser = await getUserByEmail(profileData.email);
if (existingUser) {
const updatedUser = {
access_token: user.access_token,
...existingUser,
};
setLocalUser(updatedUser);

const contextUser = {
id: existingUser.id,
Expand All @@ -86,18 +64,14 @@ const LogIn = () => {
role: "unverified",
};
const createdUser = await createUser(newUser);
const updatedUser = {
access_token: user.access_token,
...createdUser,
};
setLocalUser(updatedUser);

const contextUser = {
id: createdUser.id,
username: createdUser.username,
email: createdUser.email,
role: createdUser.role || "unverified",
};

setUser(createdUser);
console.log("Context user ", contextUser);
}
Expand All @@ -111,91 +85,78 @@ const LogIn = () => {
alert("Error fetching profile");
});
}
}, [user, setUser]);
}

const login = useGoogleLogin({
onSuccess: (codeResponse) => {
setUserInformation(codeResponse).then(() => navigate("/LoggedIn"));
},
onError: (error) => console.log("Login Failed:", error),
});

// Log out function to log the user out of Google and set the profile array to null
const logOut = () => {
const continueAsGuest = () => {
googleLogout();
setProfile(null);
setUser(null); // Clear user from AuthContext on logout
navigate("/LoggedIn");
};

return (
<section className="layoutLogIn">
<Holidays /> {/* Include the Holidays component here */}
<div className="M2">
<Box sx={{ width: "100%", maxWidth: 700 }}>
<Typography variant="h2" sx={{ color: "white" }}>
Chemistry Cafe
</Typography>
</Box>
</div>
<div className="M3">
<Box>
<Typography variant="h6" sx={{ color: "#C3D7EE" }}>
A collaborative tool to share, edit, manage, and export chemical
mechanisms across the scientific community and into MusicBox
Interactive. <br />
</Typography>
</Box>
</div>
<div className="M4">
<br />
<br />
<p></p>
{profile ? (
<div className="layout-home">
<header>
<Header />
</header>
<section className="content-home">
<div className="information-home">
<div>
<Box sx={{ bgcolor: "#C3D7EE", borderWidth: "2px" }}>
<h3>User Logged in</h3>
<p>Name: {profile.name}</p>
<p>Email Address: {profile.email}</p>
<br />
<br />
<Box sx={{ width: "100%", maxWidth: 700 }}>
<Typography variant="h2" sx={{ color: "white" }}>
Chemistry Cafe
</Typography>
</Box>
<Box>
<Typography variant="h6" sx={{ color: "#C3D7EE" }}>
A collaborative tool to share, edit, manage, and export chemical
mechanisms across the scientific community and into MusicBox
Interactive.
</Typography>
</Box>
<p></p>
</div>
<div className="sign-in-controls">
{
user &&
<Button
variant="contained"
onClick={() => navigate("/LoggedIn")}
endIcon={<ArrowForwardIcon />}
sx={{ width: "100%", my: "0.5rem" }}
>
Continue as {user.username}
</Button>
}
<Button
variant="contained"
onClick={handleClick}
color="success"
sx={{ width: "50%" }}
onClick={() => login()}
endIcon={<GoogleIcon />}
sx={{ width: "100%", my: "0.5rem" }}
>
PROCEED
{user ? "Switch Account" : "Sign in"}
</Button>
<Button
variant="contained"
onClick={logOut}
color="error"
sx={{ width: "50%" }}
onClick={continueAsGuest}
endIcon={<NoAccountsIcon />}
sx={{ width: "100%", my: "0.5rem" }}
>
Log out
Continue as Guest
</Button>
<p></p>
</div>
) : (
<Button
variant="contained"
onClick={() => login()}
endIcon={<GoogleIcon />}
sx={{ width: "50%" }}
>
Sign in
</Button>
)}
</div>
<div className="M5">
<Button
variant="contained"
onClick={handleClick}
endIcon={<NoAccountsIcon />}
sx={{ width: "50%" }}
>
Continue as Guest
</Button>
</div>
<div className="L9LogIn">
<Footer></Footer>
</div>
</section>
</div>
</section>
<footer>
<Footer />
</footer>
</div>
);
};

Expand Down
96 changes: 20 additions & 76 deletions frontend/src/styles/logIn.css
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,30 @@
.layoutLogIn {
height: 100vh;
.layout-home {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.content-home {
flex: 1;
display: grid;
grid:
"L1 M1 R1" 1fr
"L2 M2 R2" 1fr
"L3 M3 R3" 1fr
"L4 M4 R4" 1fr
"L5 M5 R5" 1fr
"L6 M6 R6" 1fr
"L7 M7 R7" 1fr
"L8 M8 R8" 1fr
"L9LogIn M9 R9" 1fr
/ 1fr 1fr 1fr;
background-color: #c3d7ee;
grid-template-columns: repeat(3, 1fr);
background-color: #1a658f;
background-image: url("/src/assets/NCAR_ZoomBG_Blue.jpg");
background-size: 100%;
background-repeat: no-repeat;
}

.L1 {
grid-area: L1;
}
.M1 {
grid-area: M1;
}
.R1 {
grid-area: R1;
}
.L2 {
grid-area: L2;
}
.M2 {
grid-area: M2;
}
.R2 {
grid-area: R2;
}
.L3 {
grid-area: L3;
}
.M3 {
grid-area: M3;
}
.R3 {
grid-area: R3;
}
.L4 {
grid-area: L4;
}
.M4 {
grid-area: M4;
.information-home {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
margin-top: 15vh;
}
.R4 {
grid-area: R4;
}
.L5 {
grid-area: L5;
}
.M5 {
grid-area: M5;
}
.R5 {
grid-area: R5;
}
.L7 {
grid-area: L7;
}
.M7 {
grid-area: M7;
}
.R7 {
grid-area: R7;
}
.L9LogIn {
grid-area: L9LogIn;
grid-column: span 3;
}
.M9 {
grid-area: M9;
}
.R9 {
grid-area: R9;

.sign-in-controls {
display: flex;
flex-direction: column;
margin-top: 1.5rem;
}

0 comments on commit 135d04f

Please sign in to comment.