Skip to content

Commit ae8f2b3

Browse files
ozzydogandevozzydogandev
authored
Merge pull request #39 from Code-the-Dream-School/login-auth-other-device
Login auth on others devices [md,lg]
2 parents fae37f9 + 8f3acfa commit ae8f2b3

File tree

2 files changed

+402
-264
lines changed

2 files changed

+402
-264
lines changed

‎src/components/LoginAuth.jsx

+122-69
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { Box, HStack, VStack, Image, Button } from "@chakra-ui/react";
22
import React, { useState } from "react";
3+
import { useNavigate } from "react-router-dom";
34
import {
45
DialogBody,
6+
DialogHeader,
7+
DialogTitle,
58
DialogContent,
69
DialogRoot,
710
DialogFooter,
@@ -19,6 +22,17 @@ const CardWithForm = ({ isAuthentificated }) => {
1922
const [formType, setFormType] = useState("login");
2023
const closeDialogRef = useRef(null); // Ref to programmatically trigger DialogCloseTrigger
2124

25+
const storedAuth = JSON.parse(localStorage.getItem("auth"));
26+
const navigate = useNavigate();
27+
/*const [isSignedIn, setIsSignedIn] = useState(() => {
28+
return JSON.parse(localStorage.getItem("auth")) || false;
29+
});*/
30+
31+
const handleLogout = () => {
32+
localStorage.removeItem("auth"); // Clear auth data the logout api will be call here
33+
navigate("/"); // Redirect to Home
34+
};
35+
2236
const handleClose = () => {
2337
if (closeDialogRef.current) {
2438
closeDialogRef.current.click(); // Programmatically trigger close button
@@ -44,77 +58,116 @@ const CardWithForm = ({ isAuthentificated }) => {
4458
}
4559
};
4660
return (
47-
48-
<DialogRoot placement="center" id={"authDialog"}>
49-
<DialogTrigger>
50-
<a href="#" style={{ cursor: "pointer" }}>
51-
<img
52-
className="usericon"
53-
src="../images/user_icon.svg"
54-
alt="User Icon"
55-
/>
56-
</a>
57-
</DialogTrigger>
58-
<DialogTrigger>
59-
<button style={{ display: "none" }} id="menu-signin-trigger">
60-
Open Sign In
61-
</button>
62-
</DialogTrigger>
63-
<DialogContent
64-
maxWidth="1100px"
65-
pt="16px"
66-
className="dialog-container"
67-
backdropFilter="blur(10px)"
68-
>
69-
<DialogBody Width="auto">
70-
<HStack spacing={8} align="stretch" wrap="wrap">
71-
{/* Left section with image */}
72-
<Box
73-
width="54%" // Fixed width for the image container
74-
height="auto" // Let height be controlled by right-hand content
75-
borderRadius="12px"
76-
overflow="hidden"
77-
flexShrink={0} // Prevent shrinking of the container
78-
marginRight="16px"
79-
display={["none", "none", "flex"]}
61+
<>
62+
{storedAuth ? (
63+
<div>
64+
<DialogRoot role="alertdialog" placement="top">
65+
<DialogTrigger asChild>
66+
<a href="#" style={{ cursor: "pointer" }}>
67+
<img
68+
className="usericon"
69+
src="../images/user_icon.svg"
70+
alt="User Icon"
71+
/>
72+
</a>
73+
</DialogTrigger>
74+
<DialogContent
75+
className="dialog-container"
76+
backdropFilter="blur(10px)"
8077
>
81-
<Box
82-
width="100%"
83-
height="100%"
84-
display="block"
85-
position="relative"
86-
>
87-
<Image
88-
src="../images/register.png"
89-
alt="Code The Dream Logo"
90-
objectFit="cover"
91-
position="absolute"
92-
top={0}
93-
left={0}
94-
width="100%"
95-
height="100%"
78+
<DialogHeader>
79+
<DialogTitle>Confirm Logout</DialogTitle>
80+
</DialogHeader>
81+
<DialogBody>
82+
<p>
83+
Are you sure you want to log out? Your session will be ended,
84+
and you’ll need to sign in again to access your account.
85+
</p>
86+
</DialogBody>
87+
<DialogFooter>
88+
<DialogActionTrigger asChild>
89+
<Button bg="whiteAlpha.500">Cancel</Button>
90+
</DialogActionTrigger>
91+
<Button bg="red.700" onClick={handleLogout}>
92+
Log Out
93+
</Button>
94+
</DialogFooter>
95+
</DialogContent>
96+
</DialogRoot>
97+
</div>
98+
) : (
99+
<DialogRoot placement="center" id={"authDialog"}>
100+
<DialogTrigger>
101+
<a href="#" style={{ cursor: "pointer" }}>
102+
<img
103+
className="usericon"
104+
src="../images/user_icon.svg"
105+
alt="User Icon"
106+
/>
107+
</a>
108+
</DialogTrigger>
109+
<DialogTrigger>
110+
<button style={{ display: "none" }} id="menu-signin-trigger">
111+
Open Sign In
112+
</button>
113+
</DialogTrigger>
114+
<DialogContent
115+
maxWidth="1100px"
116+
pt="16px"
117+
className="dialog-container"
118+
backdropFilter="blur(10px)"
119+
>
120+
<DialogBody Width="auto">
121+
<HStack spacing={8} align="stretch" wrap="wrap">
122+
{/* Left section with image */}
123+
<Box
124+
width="54%" // Fixed width for the image container
125+
height="auto" // Let height be controlled by right-hand content
126+
borderRadius="12px"
127+
overflow="hidden"
128+
flexShrink={0} // Prevent shrinking of the container
129+
marginRight="16px"
130+
display={["none", "none", "flex"]}
131+
>
132+
<Box
133+
width="100%"
134+
height="100%"
135+
display="block"
136+
position="relative"
137+
>
138+
<Image
139+
src="../images/register.png"
140+
alt="Code The Dream Logo"
141+
objectFit="cover"
142+
position="absolute"
143+
top={0}
144+
left={0}
145+
width="100%"
146+
height="100%"
147+
/>
148+
</Box>
149+
</Box>
150+
{/* Right section with form */}
151+
<VStack spacing={4} align="start" flex="1">
152+
{renderFormContent()}
153+
</VStack>
154+
</HStack>
155+
</DialogBody>
156+
<DialogFooter>
157+
<DialogActionTrigger>
158+
<Button
159+
as="div"
160+
ref={closeDialogRef}
161+
variant="outline"
162+
display={"none"}
96163
/>
97-
</Box>
98-
</Box>
99-
{/* Right section with form */}
100-
<VStack spacing={4} align="start" flex="1">
101-
{renderFormContent()}
102-
</VStack>
103-
</HStack>
104-
</DialogBody>
105-
<DialogFooter>
106-
<DialogActionTrigger>
107-
<Button
108-
as="div"
109-
ref={closeDialogRef}
110-
variant="outline"
111-
display={"none"}
112-
/>
113-
<DialogCloseTrigger size="md" bg="wheat" m="2" />
114-
</DialogActionTrigger>
115-
</DialogFooter>
116-
</DialogContent>
117-
</DialogRoot>
164+
<DialogCloseTrigger size="md" bg="wheat" m="2" />
165+
</DialogActionTrigger>
166+
</DialogFooter>
167+
</DialogContent>
168+
</DialogRoot>
169+
)}
170+
</>
118171
);
119172
};
120173

0 commit comments

Comments
 (0)