sso

docker-compose.yml

@@ -6,8 +6,8 @@ services:
     container_name: traceability_web
     restart: always
     networks:
-      - caddy_default
+      - caddy_network
 
 networks:
-  caddy_default:
+  caddy_network:
     external: true

src/App.tsx

@@ -3,12 +3,15 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { AuthProvider } from "@/contexts/AuthContext";
+import { ProtectedRoute } from "@/components/ProtectedRoute";
 import Dashboard from "./pages/Dashboard";
 import DocumentationPage from "./pages/DocumentationPage";
 import AnalysisPage from "./pages/AnalysisPage";
 import ALMTypePage from "./pages/ALMTypePage";
 import TraceabilityMatrixPage from "./pages/TraceabilityMatrixPage";
 import ESPIDFHelperPage from "./pages/ESPIDFHelperPage";
+import LoginPage from "./pages/LoginPage";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -19,16 +22,61 @@ const App = () => (
       <Toaster />
       <Sonner />
       <BrowserRouter>
+        <AuthProvider>
           <Routes>
-          <Route path="/" element={<Dashboard />} />
+            <Route path="/login" element={<LoginPage />} />
-          <Route path="/documentation" element={<DocumentationPage />} />
+            <Route
-          <Route path="/analysis" element={<AnalysisPage />} />
+              path="/"
-          <Route path="/matrix" element={<TraceabilityMatrixPage />} />
+              element={
-          <Route path="/esp-idf" element={<ESPIDFHelperPage />} />
+                <ProtectedRoute>
-          <Route path="/alm/:type" element={<ALMTypePage />} />
+                  <Dashboard />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/documentation"
+              element={
+                <ProtectedRoute>
+                  <DocumentationPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/analysis"
+              element={
+                <ProtectedRoute>
+                  <AnalysisPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/matrix"
+              element={
+                <ProtectedRoute>
+                  <TraceabilityMatrixPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/esp-idf"
+              element={
+                <ProtectedRoute>
+                  <ESPIDFHelperPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/alm/:type"
+              element={
+                <ProtectedRoute>
+                  <ALMTypePage />
+                </ProtectedRoute>
+              }
+            />
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
           </Routes>
+        </AuthProvider>
       </BrowserRouter>
     </TooltipProvider>
   </QueryClientProvider>

src/components/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+import { Loader2 } from "lucide-react";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const location = useLocation();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}

src/components/layout/AppLayout.tsx

@@ -1,10 +1,20 @@
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar } from "./AppSidebar";
 import { ThemeToggle } from "@/components/ThemeToggle";
-import { RefreshCw, Clock } from "lucide-react";
+import { RefreshCw, Clock, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
+import { useAuth } from "@/contexts/AuthContext";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -19,6 +29,12 @@ export function AppLayout({
   onRefresh,
   isRefreshing = false,
 }: AppLayoutProps) {
+  const { user, logout } = useAuth();
+
+  const userInitials = user?.username
+    ? user.username.slice(0, 2).toUpperCase()
+    : "U";
+
   return (
     <SidebarProvider>
       <div className="min-h-screen flex w-full">
@@ -55,6 +71,34 @@ export function AppLayout({
                 </Button>
               )}
               <ThemeToggle />
+              
+              {/* User Menu */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="relative h-9 w-9 rounded-full">
+                    <Avatar className="h-9 w-9">
+                      <AvatarFallback className="bg-primary text-primary-foreground">
+                        {userInitials}
+                      </AvatarFallback>
+                    </Avatar>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56" align="end" forceMount>
+                  <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                      <p className="text-sm font-medium leading-none">{user?.username}</p>
+                      <p className="text-xs leading-none text-muted-foreground">
+                        {user?.email}
+                      </p>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={logout} className="text-destructive cursor-pointer">
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Log out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </header>
 

src/contexts/AuthContext.tsx

@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
+
+interface User {
+  id: number;
+  username: string;
+  email: string;
+  is_active: boolean;
+  is_admin: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (username: string, password: string) => Promise<{ success: boolean; message: string }>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const SSO_API_URL = "https://sso.nabd-co.com/verify";
+const SSO_API_KEY = "yPkNLCYNm7-UrSZtr_hi-oCx6LZ1DQFAKTGNOoCiMic";
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Check for existing session on mount
+    const storedUser = localStorage.getItem("auth_user");
+    if (storedUser) {
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch {
+        localStorage.removeItem("auth_user");
+      }
+    }
+    setIsLoading(false);
+  }, []);
+
+  const login = async (username: string, password: string): Promise<{ success: boolean; message: string }> => {
+    try {
+      const response = await fetch(SSO_API_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username,
+          password,
+          api_key: SSO_API_KEY,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.authorized && data.user) {
+        setUser(data.user);
+        localStorage.setItem("auth_user", JSON.stringify(data.user));
+        return { success: true, message: data.message };
+      } else {
+        return { success: false, message: data.message || "Authentication failed" };
+      }
+    } catch (error) {
+      console.error("Login error:", error);
+      return { success: false, message: "Connection error. Please try again." };
+    }
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem("auth_user");
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated: !!user,
+        isLoading,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Loader2, LogIn, AlertCircle } from "lucide-react";
+
+export default function LoginPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    const result = await login(username, password);
+
+    if (result.success) {
+      navigate("/", { replace: true });
+    } else {
+      setError(result.message);
+    }
+
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        {/* Logo */}
+        <div className="flex flex-col items-center gap-4">
+          <img
+            src="/images/nabd-logo.png"
+            alt="NABD Solutions"
+            className="h-16"
+          />
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-foreground">Traceability Dashboard</h1>
+            <p className="text-muted-foreground">ASF Sensor Hub</p>
+          </div>
+        </div>
+
+        {/* Login Card */}
+        <Card>
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-xl">Sign in</CardTitle>
+            <CardDescription>
+              Enter your credentials to access the dashboard
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="username">Username</Label>
+                <Input
+                  id="username"
+                  type="text"
+                  placeholder="Enter your username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  disabled={isLoading}
+                  required
+                  autoComplete="username"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  disabled={isLoading}
+                  required
+                  autoComplete="current-password"
+                />
+              </div>
+
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Signing in...
+                  </>
+                ) : (
+                  <>
+                    <LogIn className="mr-2 h-4 w-4" />
+                    Sign in
+                  </>
+                )}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Contact your administrator if you need access
+        </p>
+      </div>
+    </div>
+  );
+}