From 0269cefeebb42c0b4f40bd82fba8c3fdfe51a5c7 Mon Sep 17 00:00:00 2001 From: dimitar Date: Wed, 2 Apr 2025 20:44:03 +0200 Subject: [PATCH] tidy --- backend/src/auth/auth.controller.ts | 4 +- frontend/src/components/login/Login.jsx | 56 +++++---- frontend/src/components/navbar/Navbar.jsx | 144 +++++++++++++++++----- frontend/src/hooks/useAuth.jsx | 2 +- frontend/src/services/api.js | 1 - 5 files changed, 150 insertions(+), 57 deletions(-) diff --git a/backend/src/auth/auth.controller.ts b/backend/src/auth/auth.controller.ts index 684ea0e..44b9d45 100644 --- a/backend/src/auth/auth.controller.ts +++ b/backend/src/auth/auth.controller.ts @@ -153,7 +153,9 @@ export class AuthController { @UseGuards(JwtAuthGuard) @Get("user-info") async getUserInfo(@Request() req) { - return this.authService.getUserInfo(req.user.userId); + return await this.authService.getUserInfo(req.user.userId); + // const user = await this.authService.getUserInfo(req.user.userId); + // return user; } @Post("forgot-password") diff --git a/frontend/src/components/login/Login.jsx b/frontend/src/components/login/Login.jsx index 6cd5229..20ae9f7 100644 --- a/frontend/src/components/login/Login.jsx +++ b/frontend/src/components/login/Login.jsx @@ -1,36 +1,36 @@ -import { useState } from 'react'; -import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from 'react-router-dom'; -import { Button, Card, Input, FormGroup, Label, ErrorMessage } from '../UI'; -import { Link } from 'react-router-dom'; +import { useState } from "react"; +import { useAuth } from "../../hooks/useAuth"; +import { useNavigate } from "react-router-dom"; +import { Button, Card, Input, FormGroup, Label, ErrorMessage } from "../UI"; +import { Link } from "react-router-dom"; export default function Login() { const { login } = useAuth(); const navigate = useNavigate(); const [formData, setFormData] = useState({ - username: '', - password: '', + username: "", + password: "", }); - const [error, setError] = useState(''); + const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); - setError(''); + setError(""); setIsLoading(true); try { const userData = await login(formData.username, formData.password); - + // Navigate based on user role if (userData.isAdmin) { - navigate('/admin'); + navigate("/admin"); } else { - navigate('/dashboard'); // Navigate normal users to dashboard + navigate("/dashboard"); } } catch (err) { - setError('Invalid username or password'); - console.error('Login error:', err); + setError("Invalid username or password"); + console.error("Login error:", err); } finally { setIsLoading(false); } @@ -40,13 +40,19 @@ export default function Login() {
{/* Pattern overlay with lower z-index */}
- + {/* Main content with higher z-index */} - +
-

Sign in to your account

-

Welcome back! Please enter your details.

+

+ Sign in to your account +

+

+ Welcome back! Please enter your details. +

{error && ( @@ -66,7 +72,9 @@ export default function Login() { required placeholder="Enter your username" value={formData.username} - onChange={(e) => setFormData({ ...formData, username: e.target.value })} + onChange={(e) => + setFormData({ ...formData, username: e.target.value }) + } error={error} className="bg-neutral-800/50 border-neutral-700 text-white placeholder-neutral-400 focus:border-primary-400 focus:ring-primary-400" @@ -93,7 +101,9 @@ export default function Login() { required placeholder="Enter your password" value={formData.password} - onChange={(e) => setFormData({ ...formData, password: e.target.value })} + onChange={(e) => + setFormData({ ...formData, password: e.target.value }) + } error={error} className="bg-neutral-800/50 border-neutral-700 text-white placeholder-neutral-400 focus:border-primary-400 focus:ring-primary-400" @@ -110,7 +120,7 @@ export default function Login() { focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" > - {isLoading ? 'Signing in...' : 'Sign in'} + {isLoading ? "Signing in..." : "Sign in"}
@@ -142,4 +152,4 @@ export default function Login() { ); -} \ No newline at end of file +} diff --git a/frontend/src/components/navbar/Navbar.jsx b/frontend/src/components/navbar/Navbar.jsx index 24b522d..02fbcca 100644 --- a/frontend/src/components/navbar/Navbar.jsx +++ b/frontend/src/components/navbar/Navbar.jsx @@ -1,37 +1,70 @@ import { useState } from "react"; import { Dialog } from "@headlessui/react"; import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; -import { NavLink, Link } from "react-router-dom"; -import { Button } from '../UI'; +import { NavLink, Link, useNavigate } from "react-router-dom"; +import { Button } from "../UI"; +import { useAuth } from "../../hooks/useAuth"; -const navigation = [ +const publicNavigation = [ { name: "Дома", href: "/" }, { name: "За нас", href: "/about" }, { name: "Галерија", href: "/gallery" }, { name: "Контакт", href: "/contact" }, - // { name: "Админ", href: "/admin" }, { name: "Логин", href: "/login" }, ]; +const basePrivateNavigation = [ + { name: "Дома", href: "/" }, + { name: "За нас", href: "/about" }, + { name: "Галерија", href: "/gallery" }, + { name: "Контакт", href: "/contact" }, +]; + export default function Navbar() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const { user, logout } = useAuth(); + const navigate = useNavigate(); + const getNavigation = () => { + if (!user) return publicNavigation; + + // Add appropriate dashboard link based on user role + const privateNavigation = [...basePrivateNavigation]; + if (user.isAdmin) { + privateNavigation.push({ name: "Админ Панел", href: "/admin" }); + } else { + privateNavigation.push({ name: "Клиент Зона", href: "/dashboard" }); + } + return privateNavigation; + }; + + const navigation = getNavigation(); + const handleLogout = async () => { + try { + await logout(); + navigate("/"); + } catch (error) { + console.error("Logout failed:", error); + } + }; return (
- {/* Mobile menu */} + {/* Mobile Menu */}
+
+ {/* User Info in Mobile Menu */} + {user && ( +
+ + {user.name || user.email} + + + {user.isAdmin ? "Администратор" : "Корисник"} + +
+ )} + + {/* Navigation Items */} {navigation.map((item) => ( `block px-3 py-2 text-base font-medium rounded-lg transition-colors - ${isActive - ? 'bg-primary-700 text-white' - : 'text-neutral-200 hover:bg-primary-700/50 hover:text-white' - }` + ${ + isActive + ? "bg-primary-700 text-white" + : "text-neutral-200 hover:bg-primary-700/50 hover:text-white" + }` } onClick={() => setMobileMenuOpen(false)} > {item.name} ))} + + {/* Logout in Mobile Menu */} + {user && ( + + )}
@@ -125,4 +207,4 @@ export default function Navbar() { ); -} \ No newline at end of file +} diff --git a/frontend/src/hooks/useAuth.jsx b/frontend/src/hooks/useAuth.jsx index ab7ff2b..e90bb26 100644 --- a/frontend/src/hooks/useAuth.jsx +++ b/frontend/src/hooks/useAuth.jsx @@ -1,4 +1,3 @@ -// frontend/src/hooks/useAuth.jsx import { createContext, useContext, useState, useEffect } from "react"; import api from "../services/api"; @@ -51,6 +50,7 @@ export const AuthProvider = ({ children }) => { }; const logout = () => { + //no session menager in DB, can add it later localStorage.removeItem("token"); setUser(null); }; diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js index 7193730..9d26dc3 100644 --- a/frontend/src/services/api.js +++ b/frontend/src/services/api.js @@ -122,5 +122,4 @@ api.interceptors.response.use( return Promise.reject(error); }, ); -export const logout = () => api.post("/auth/logout"); export default api;