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

Notified unauthorize user to auth #40

Merged
merged 3 commits into from
Jan 19, 2025
Merged

Notified unauthorize user to auth #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5abdae
pull latest update
Hermann27 Jan 19, 2025
8f3acfa
sign in and out on md and lg device implemented
Hermann27 Jan 19, 2025
fc06c2c
This feature allows only an authenticated user to share a project. I…
Hermann27 Jan 19, 2025
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
187 changes: 118 additions & 69 deletions src/components/LoginAuth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { Box, HStack, VStack, Image, Button } from "@chakra-ui/react";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
DialogBody,
DialogHeader,
DialogTitle,
DialogContent,
DialogRoot,
DialogFooter,
Expand All @@ -19,6 +22,13 @@ const CardWithForm = ({ isAuthentificated }) => {
const [formType, setFormType] = useState("login");
const closeDialogRef = useRef(null); // Ref to programmatically trigger DialogCloseTrigger

const storedAuth = JSON.parse(localStorage.getItem("auth"));
const navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("auth"); // Clear auth data the logout api will be call here
navigate("/"); // Redirect to Home
};

const handleClose = () => {
if (closeDialogRef.current) {
closeDialogRef.current.click(); // Programmatically trigger close button
Expand All @@ -44,77 +54,116 @@ const CardWithForm = ({ isAuthentificated }) => {
}
};
return (

<DialogRoot placement="center" id={"authDialog"}>
<DialogTrigger>
<a href="#" style={{ cursor: "pointer" }}>
<img
className="usericon"
src="../images/user_icon.svg"
alt="User Icon"
/>
</a>
</DialogTrigger>
<DialogTrigger>
<button style={{ display: "none" }} id="menu-signin-trigger">
Open Sign In
</button>
</DialogTrigger>
<DialogContent
maxWidth="1100px"
pt="16px"
className="dialog-container"
backdropFilter="blur(10px)"
>
<DialogBody Width="auto">
<HStack spacing={8} align="stretch" wrap="wrap">
{/* Left section with image */}
<Box
width="54%" // Fixed width for the image container
height="auto" // Let height be controlled by right-hand content
borderRadius="12px"
overflow="hidden"
flexShrink={0} // Prevent shrinking of the container
marginRight="16px"
display={["none", "none", "flex"]}
<>
{storedAuth ? (
<div>
<DialogRoot role="alertdialog" placement="top">
<DialogTrigger asChild>
<a href="#" style={{ cursor: "pointer" }}>
<img
className="usericon"
src="../images/user_icon.svg"
alt="User Icon"
/>
</a>
</DialogTrigger>
<DialogContent
className="dialog-container"
backdropFilter="blur(10px)"
>
<Box
width="100%"
height="100%"
display="block"
position="relative"
>
<Image
src="../images/register.png"
alt="Code The Dream Logo"
objectFit="cover"
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
<DialogHeader>
<DialogTitle>Confirm Logout</DialogTitle>
</DialogHeader>
<DialogBody>
<p>
Are you sure you want to log out? Your session will be ended,
and you’ll need to sign in again to access your account.
</p>
</DialogBody>
<DialogFooter>
<DialogActionTrigger asChild>
<Button bg="whiteAlpha.500">Cancel</Button>
</DialogActionTrigger>
<Button bg="red.700" onClick={handleLogout}>
Log Out
</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
</div>
) : (
<DialogRoot placement="center" id={"authDialog"}>
<DialogTrigger>
<a href="#" style={{ cursor: "pointer" }}>
<img
className="usericon"
src="../images/user_icon.svg"
alt="User Icon"
/>
</a>
</DialogTrigger>
<DialogTrigger>
<button style={{ display: "none" }} id="menu-signin-trigger">
Open Sign In
</button>
</DialogTrigger>
<DialogContent
maxWidth="1100px"
pt="16px"
className="dialog-container"
backdropFilter="blur(10px)"
>
<DialogBody Width="auto">
<HStack spacing={8} align="stretch" wrap="wrap">
{/* Left section with image */}
<Box
width="54%" // Fixed width for the image container
height="auto" // Let height be controlled by right-hand content
borderRadius="12px"
overflow="hidden"
flexShrink={0} // Prevent shrinking of the container
marginRight="16px"
display={["none", "none", "flex"]}
>
<Box
width="100%"
height="100%"
display="block"
position="relative"
>
<Image
src="../images/register.png"
alt="Code The Dream Logo"
objectFit="cover"
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
/>
</Box>
</Box>
{/* Right section with form */}
<VStack spacing={4} align="start" flex="1">
{renderFormContent()}
</VStack>
</HStack>
</DialogBody>
<DialogFooter>
<DialogActionTrigger>
<Button
as="div"
ref={closeDialogRef}
variant="outline"
display={"none"}
/>
</Box>
</Box>
{/* Right section with form */}
<VStack spacing={4} align="start" flex="1">
{renderFormContent()}
</VStack>
</HStack>
</DialogBody>
<DialogFooter>
<DialogActionTrigger>
<Button
as="div"
ref={closeDialogRef}
variant="outline"
display={"none"}
/>
<DialogCloseTrigger size="md" bg="wheat" m="2" />
</DialogActionTrigger>
</DialogFooter>
</DialogContent>
</DialogRoot>
<DialogCloseTrigger size="md" bg="wheat" m="2" />
</DialogActionTrigger>
</DialogFooter>
</DialogContent>
</DialogRoot>
)}
</>
);
};

Expand Down
1 change: 1 addition & 0 deletions src/components/ui/toaster.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
export const toaster = createToaster({
placement: "bottom-end",
pauseOnPageIdle: true,
overlap: true,
});

export const Toaster = () => {
Expand Down
81 changes: 58 additions & 23 deletions src/views/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,71 @@ import { Field } from "../components/ui/field";
import { Button } from "../components/ui/button";
import "../styles/Homepage.css";
import { useNavigate } from "react-router-dom";

import { Toaster, toaster } from "../components/ui/toaster";
const HomePage = () => {
const storedAuth = JSON.parse(localStorage.getItem("auth"));
const navigate = useNavigate();

const handleAuthentificationCheck = () => {
console.log("token: ", storedAuth);
if (!storedAuth) {
toaster.create({
title: "Sign In Required!",
description: "You must be signed in to proceed with this request.",
type: "warning",
duration: 4000,
action: {
label: "x",
},
});
return;
} else {
navigate("/share-project");
}
};

return (
<div className="sections-container">
<div className = 'section1'>

<div className="content-area">
<div className="content-area-responsive">
<div className="title-responsive">
<div className="build-title">
<div className="section1">
<div className="content-area">
<div className="content-area-responsive">
<div className="title-responsive">
<div className="build-title">
<img className="cycle" src="./images/cycle.png"></img>
<h1>Build.<br /> Share.<br /> Review.<br /> Repeat.</h1>
</div>
<p className="top-text">Showcase your work and connect with peers who can help you reach the next level.</p>
</div>
<div className="button-area">
<button
className = "share-button"
onClick={() => navigate('/share-project')}>
SHARE A PROJECT</button>
<button className = "explore-button"
onClick={() => navigate('/explore-project')}>
EXPLORE PROJECTS</button>
</div>
</div>
<h1>
Build.
<br /> Share.
<br /> Review.
<br /> Repeat.
</h1>
</div>
<p className="top-text">
Showcase your work and connect with peers who can help you reach
the next level.
</p>
</div>
<div className="button-area">
<button
className="share-button"
onClick={() => handleAuthentificationCheck()}
>
SHARE A PROJECT
</button>
<button
className="explore-button"
onClick={() => navigate("/explore-project")}
>
EXPLORE PROJECTS
</button>
</div>
<img className="section-image" src="./images/sectionimg-1.png"></img>
</div>
</div>
<p className="top-text-2">Showcase your work and connect with peers who can help you reach the next level.</p>
<img className="section-image" src="./images/sectionimg-1.png"></img>
</div>
<p className="top-text-2">
Showcase your work and connect with peers who can help you reach the
next level.
</p>
<div className="home-data-rectangle">
<p>PROJECTS SHARED: 1,024+</p>
<p>REVIEWS GIVEN: 5,678+ </p>
Expand Down Expand Up @@ -80,6 +114,7 @@ const HomePage = () => {
<Button className="register-button" size="md">
Register NOW!
</Button>
<Toaster />
</div>
</div>
<img className="ctd-logo" src="./images/ctd-logo.png"></img>
Expand Down
Loading
Loading