Skip to content

Commit ae47129

Browse files
OmkarPhOmkarPh
committed
Integrated login & auth into existing dashboard
Signed-off-by: Omkar Phansopkar <[email protected]>
1 parent 29fbab9 commit ae47129

File tree

9 files changed

+656
-346
lines changed

9 files changed

+656
-346
lines changed

‎package-lock.json‎

Lines changed: 23 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"react-dom": "18.2.0",
2929
"react-otp-input": "^3.0.0",
3030
"react-spinners": "^0.13.8",
31+
"react-toastify": "^9.1.2",
3132
"tailwind-datepicker-react": "^1.2.3"
3233
},
3334
"devDependencies": {

‎src/components/navbar.jsx‎

Lines changed: 209 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,223 @@
1-
import { AppContext } from "@/context/appContext"
2-
import { useRouter } from "next/router"
3-
import { useContext, useEffect, useState } from "react"
1+
import { AppContext } from "@/context/appContext";
2+
import { useRouter } from "next/router";
3+
import { useContext, useEffect, useState } from "react";
4+
import { useAuth } from "../context/AuthContext";
5+
import { ROUTES } from "../constants/routes";
46

57
const Navbar = () => {
6-
const appContext = useContext(AppContext)
7-
const router = useRouter()
8+
const router = useRouter();
9+
const appContext = useContext(AppContext);
10+
const { isLoggedIn, isProcessingLogin, logout } = useAuth();
811

9-
const [darkMode, setDarkMode] = useState(appContext.state.darkMode)
10-
const [dropdown, setDropdown] = useState(false)
12+
const [darkMode, setDarkMode] = useState(appContext.state.darkMode);
13+
const [dropdown, setDropdown] = useState(false);
1114

12-
const toggleDarkMode = () => {
13-
setDarkMode((prev) => !prev)
14-
appContext.toggleTheme()
15-
}
15+
const toggleDarkMode = () => {
16+
setDarkMode((prev) => !prev);
17+
appContext.toggleTheme();
18+
};
1619

17-
useEffect(() => {
18-
setDarkMode(appContext.state.darkMode)
19-
}, [appContext.state.darkMode])
20+
useEffect(() => {
21+
setDarkMode(appContext.state.darkMode);
22+
}, [appContext.state.darkMode]);
2023

21-
return (
22-
<div className={`fixed w-full h-[60px] flex flex-row items-center border-b-[1px] px-[65px] font-inter z-10
24+
return (
25+
<div
26+
className={`fixed w-full h-[60px] flex flex-row items-center border-b-[1px] px-[65px] font-inter z-10
2327
${darkMode ? "bg-dark1 border-bd" : "bg-white borderblue2"}
2428
sm:px-[30px]
25-
`}>
26-
<div
27-
className={`flex flex-row gap-x-[15px] text-[22px] cursor-pointer ${darkMode ? "text-white" : "text-[#010342]"} sm:text-[18px]`}
28-
onClick={() => {router.push('/')}}
29-
>
30-
<img src={`${darkMode ? "/assets/logoWhite.svg" : "/assets/logo.svg"}`} alt="logo" className="w-[20px] sm:w-[15px]"/>
31-
<span>HRSpace</span>
32-
</div>
33-
29+
`}
30+
>
31+
<div
32+
className={`flex flex-row gap-x-[15px] text-[22px] cursor-pointer ${
33+
darkMode ? "text-white" : "text-[#010342]"
34+
} sm:text-[18px]`}
35+
onClick={() => {
36+
router.push("/");
37+
}}
38+
>
39+
<img
40+
src={`${darkMode ? "/assets/logoWhite.svg" : "/assets/logo.svg"}`}
41+
alt="logo"
42+
className="w-[20px] sm:w-[15px]"
43+
/>
44+
<span>HRSpace</span>
45+
</div>
3446

35-
<div className="ml-auto mr-[30px] cursor-pointer p-[10px] " onClick={toggleDarkMode}>
36-
{ darkMode ?
37-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="white" className="w-5 h-5">
38-
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
39-
</svg>
40-
:
41-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
42-
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
43-
</svg>
44-
}
45-
</div>
47+
<div
48+
className="ml-auto mr-[30px] cursor-pointer p-[10px] "
49+
onClick={toggleDarkMode}
50+
>
51+
{darkMode ? (
52+
<svg
53+
xmlns="http://www.w3.org/2000/svg"
54+
fill="none"
55+
viewBox="0 0 24 24"
56+
strokeWidth={1.5}
57+
stroke="white"
58+
className="w-5 h-5"
59+
>
60+
<path
61+
strokeLinecap="round"
62+
strokeLinejoin="round"
63+
d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
64+
/>
65+
</svg>
66+
) : (
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
fill="none"
70+
viewBox="0 0 24 24"
71+
strokeWidth={1.5}
72+
stroke="currentColor"
73+
className="w-5 h-5"
74+
>
75+
<path
76+
strokeLinecap="round"
77+
strokeLinejoin="round"
78+
d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
79+
/>
80+
</svg>
81+
)}
82+
</div>
4683

47-
<div className={`flex flex-row gap-x-[40px] text-[14px] ${darkMode && "text-white"} sm:text-[12px] sm:hidden`}>
48-
<button onClick={() => {router.push('/login')}}>Login</button>
49-
<button
50-
className={`flex flex-row items-center gap-x-[6px] px-[20px] py-[8px] rounded-2xl text-[#eoeb3d] font-medium
51-
${darkMode ? "bg-dark3" : "bg-[#F5F9FC]"}
52-
sm: px-[10px] py-[6px]
53-
`}
54-
onClick={() => {router.push('/signup')}}
55-
>
56-
Sign Up
57-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
58-
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
59-
</svg>
60-
</button>
61-
</div>
62-
63-
<div className="relative">
64-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke={darkMode ? "white" : '#0D0E12'} className="w-6 h-6 cursor-pointer md:hidden" onClick={() => {setDropdown((prevState) => !prevState)}}>
65-
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
66-
</svg>
84+
<div
85+
className={`flex flex-row gap-x-[40px] text-[14px] ${
86+
darkMode && "text-white"
87+
} sm:text-[12px] sm:hidden`}
88+
>
89+
{isLoggedIn ? (
90+
<>
91+
<button
92+
onClick={() => {
93+
router.push(ROUTES.DASHBOARD);
94+
}}
95+
>
96+
Dashboard
97+
</button>
98+
<button
99+
onClick={logout}
100+
>
101+
Logout
102+
</button>
103+
</>
104+
) : (
105+
<>
106+
<button
107+
onClick={() => {
108+
router.push(ROUTES.LOGIN);
109+
}}
110+
>
111+
Login
112+
</button>
113+
<button
114+
className={`flex flex-row items-center gap-x-[6px] px-[20px] py-[8px] rounded-2xl text-[#eoeb3d] font-medium
115+
${darkMode ? "bg-dark3" : "bg-[#F5F9FC]"}
116+
sm: px-[10px] py-[6px]
117+
`}
118+
onClick={() => {
119+
router.push(ROUTES.SIGNUP);
120+
}}
121+
>
122+
Sign Up
123+
<svg
124+
xmlns="http://www.w3.org/2000/svg"
125+
fill="none"
126+
viewBox="0 0 24 24"
127+
strokeWidth={1.5}
128+
stroke="currentColor"
129+
className="w-4 h-4"
130+
>
131+
<path
132+
strokeLinecap="round"
133+
strokeLinejoin="round"
134+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
135+
/>
136+
</svg>
137+
</button>
138+
</>
139+
)}
140+
</div>
67141

68-
{dropdown && <div className="absolute w-[150px] h-auto transition-height duration-3000 ease-in-out dark:bg-dark3 rounded-md right-[1px] mt-[18px] cursor-pointer md:hidden overflow-hidden bg-gray-200 text-{#535479]">
69-
<div className={`flex flex-col box-border text-[14px] ${darkMode && "text-white"}`}
70-
onClick={() => {
71-
router.push('/login')
72-
setDropdown(false)
73-
}}
74-
>
75-
<div className={`border-b-[1px] px-[20px] py-[10px] dark:border-bd border-gray-300 dark:hover:bg-gray-600 hover:bg-gray-100`}>
76-
<span className="self-start">Login</span>
77-
</div>
78-
</div>
142+
<div className="relative">
143+
<svg
144+
xmlns="http://www.w3.org/2000/svg"
145+
fill="none"
146+
viewBox="0 0 24 24"
147+
strokeWidth={1.5}
148+
stroke={darkMode ? "white" : "#0D0E12"}
149+
className="w-6 h-6 cursor-pointer md:hidden"
150+
onClick={() => {
151+
setDropdown((prevState) => !prevState);
152+
}}
153+
>
154+
<path
155+
strokeLinecap="round"
156+
strokeLinejoin="round"
157+
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
158+
/>
159+
</svg>
79160

80-
<div className={`flex flex-col box-border text-[14px] ${darkMode && "text-white"}`}
81-
onClick={() => {
82-
router.push('/signup')
83-
setDropdown(false)
84-
}}
85-
>
86-
<div className={`px-[20px] py-[10px] border-white dark:hover:bg-gray-600 hover:bg-gray-100`}>
87-
<span className="self-start">Sign Up</span>
88-
</div>
89-
</div>
161+
{dropdown && (
162+
<div className="absolute w-[150px] h-auto transition-height duration-3000 ease-in-out dark:bg-dark3 rounded-md right-[1px] mt-[18px] cursor-pointer md:hidden overflow-hidden bg-gray-200 text-{#535479]">
163+
{isLoggedIn ? (
164+
<>
165+
<div
166+
className={`flex flex-col box-border text-[14px] ${
167+
darkMode && "text-white"
168+
}`}
169+
onClick={() => {
170+
router.push(ROUTES.DASHBOARD);
171+
setDropdown(false);
172+
}}
173+
>
174+
<div
175+
className={`border-b-[1px] px-[20px] py-[10px] dark:border-bd border-gray-300 dark:hover:bg-gray-600 hover:bg-gray-100`}
176+
>
177+
<span className="self-start">Dashboard</span>
178+
</div>
179+
</div>
180+
</>
181+
) : (
182+
<>
183+
<div
184+
className={`flex flex-col box-border text-[14px] ${
185+
darkMode && "text-white"
186+
}`}
187+
onClick={() => {
188+
router.push(ROUTES.LOGIN);
189+
setDropdown(false);
190+
}}
191+
>
192+
<div
193+
className={`border-b-[1px] px-[20px] py-[10px] dark:border-bd border-gray-300 dark:hover:bg-gray-600 hover:bg-gray-100`}
194+
>
195+
<span className="self-start">Login</span>
196+
</div>
197+
</div>
90198

91-
</div>}
92-
</div>
93-
</div>
94-
)
95-
}
199+
<div
200+
className={`flex flex-col box-border text-[14px] ${
201+
darkMode && "text-white"
202+
}`}
203+
onClick={() => {
204+
router.push(ROUTES.SIGNUP);
205+
setDropdown(false);
206+
}}
207+
>
208+
<div
209+
className={`px-[20px] py-[10px] border-white dark:hover:bg-gray-600 hover:bg-gray-100`}
210+
>
211+
<span className="self-start">Sign Up</span>
212+
</div>
213+
</div>
214+
</>
215+
)}
216+
</div>
217+
)}
218+
</div>
219+
</div>
220+
);
221+
};
96222

97-
export default Navbar
223+
export default Navbar;

0 commit comments

Comments
 (0)