From 8733795c8449f3514369d7b4220934760e386f1b Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Fri, 25 Apr 2025 01:09:30 +0530 Subject: finance/frontend: fix: did some minor changes to the frontend --- frontend/src/components/shared/AuthContext.tsx | 92 +++++++++++++++++++++++ frontend/src/components/shared/Notification.tsx | 58 ++++++++------ frontend/src/components/shared/ProtectedRoute.tsx | 37 +++++++++ 3 files changed, 163 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/shared/AuthContext.tsx create mode 100644 frontend/src/components/shared/ProtectedRoute.tsx (limited to 'frontend/src/components') diff --git a/frontend/src/components/shared/AuthContext.tsx b/frontend/src/components/shared/AuthContext.tsx new file mode 100644 index 0000000..a3ec5a0 --- /dev/null +++ b/frontend/src/components/shared/AuthContext.tsx @@ -0,0 +1,92 @@ +'use client'; + +import { createContext, useContext, useEffect, useState, ReactNode } from 'react'; +import { useRouter } from 'next/navigation'; +import { authApi, userApi } from '@/lib/api'; + +interface User { + ID: number; + Name: string; + Email: string; +} + +interface AuthContextType { + user: User | null; + isLoading: boolean; + isAuthenticated: boolean; + login: (email: string, password: string) => Promise; + signup: (name: string, email: string, password: string) => Promise; + logout: () => void; +} + +const AuthContext = createContext(null); + +export function AuthProvider({ children }: { children: ReactNode }) { + const [user, setUser] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const router = useRouter(); + + // Check if the user is already logged in + useEffect(() => { + const checkAuth = async () => { + const token = localStorage.getItem('token'); + if (!token) { + setIsLoading(false); + return; + } + + try { + const userData = await userApi.getProfile(); + setUser(userData); + } catch (error) { + // Clear invalid token + localStorage.removeItem('token'); + } finally { + setIsLoading(false); + } + }; + + checkAuth(); + }, []); + + // Login function + const login = async (email: string, password: string) => { + const response = await authApi.login(email, password); + setUser(response.user); + return response; + }; + + // Signup function + const signup = async (name: string, email: string, password: string) => { + return await authApi.signup(name, email, password); + }; + + // Logout function + const logout = () => { + authApi.logout(); + setUser(null); + }; + + return ( + + {children} + + ); +} + +export function useAuth() { + const context = useContext(AuthContext); + if (!context) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +} \ No newline at end of file diff --git a/frontend/src/components/shared/Notification.tsx b/frontend/src/components/shared/Notification.tsx index bcc11c4..68cbc7a 100644 --- a/frontend/src/components/shared/Notification.tsx +++ b/frontend/src/components/shared/Notification.tsx @@ -1,11 +1,29 @@ 'use client'; import { useEffect, useState } from 'react'; -import { CheckCircle, AlertCircle, X } from 'lucide-react'; +import { CheckCircle, AlertCircle, Info, X } from 'lucide-react'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib/utils'; export type NotificationType = 'success' | 'error' | 'info'; -interface NotificationProps { +const notificationVariants = cva( + "fixed z-50 top-4 right-4 flex items-center gap-3 p-4 rounded-lg shadow-lg border max-w-sm transition-all duration-300 animate-in fade-in slide-in-from-top-5", + { + variants: { + variant: { + success: "bg-background border-border text-foreground", + error: "bg-background border-border text-foreground", + info: "bg-background border-border text-foreground", + } + }, + defaultVariants: { + variant: "info", + }, + } +); + +interface NotificationProps extends VariantProps { type: NotificationType; message: string; duration?: number; @@ -41,38 +59,30 @@ export function Notification({ const getIcon = () => { switch (type) { case 'success': - return ; + return ; case 'error': - return ; + return ; case 'info': - return ; + return ; default: return null; } }; - const getContainerClasses = () => { - const baseClasses = 'fixed top-4 right-4 z-50 flex items-center gap-3 rounded-lg p-4 shadow-md max-w-sm'; - - switch (type) { - case 'success': - return `${baseClasses} bg-green-50 text-green-800 border border-green-200`; - case 'error': - return `${baseClasses} bg-red-50 text-red-800 border border-red-200`; - case 'info': - return `${baseClasses} bg-blue-50 text-blue-800 border border-blue-200`; - default: - return baseClasses; - } - }; - return ( -
- {getIcon()} -
{message}
+
+
+ {getIcon()} +
+
{message}