Implement secure user authentication with role-based access control

Integrates user authentication using bcrypt, session management with PostgreSQL, and role-based access control for enhanced security and user management.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/ab880d72-1a34-4d36-b5be-9f44df85ed1a.jpg

client/src/pages/Dashboard.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useAuth } from "@/hooks/useAuth";
+import NewSaleForm from "@/components/NewSaleForm";
+import SalesHistory from "@/components/SalesHistory";
+import Administration from "@/components/Administration";
+import { Package, History, Settings, LogOut, User } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+export default function Dashboard() {
+  const { user, logout } = useAuth();
+  const { toast } = useToast();
+  const [activeTab, setActiveTab] = useState("new-sale");
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      toast({
+        title: "Déconnexion réussie",
+        description: "À bientôt !",
+      });
+    } catch (error) {
+      toast({
+        title: "Erreur",
+        description: "Erreur lors de la déconnexion",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const canAccessAdmin = user?.role === "admin";
+  const canDeleteSales = user?.role === "admin" || user?.role === "manager";
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-primary/10 rounded-lg">
+                <Package className="h-6 w-6 text-primary" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-gray-900">Registre des Ventes</h1>
+                <p className="text-sm text-gray-500">Gestion des feux d'artifice</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-4">
+              <div className="text-right">
+                <p className="text-sm font-medium text-gray-900">
+                  {user?.firstName} {user?.lastName}
+                </p>
+                <p className="text-xs text-gray-500 capitalize">{user?.role}</p>
+              </div>
+              <Button variant="outline" size="sm" onClick={handleLogout}>
+                <LogOut className="h-4 w-4 mr-2" />
+                Déconnexion
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+          <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:grid-cols-auto">
+            <TabsTrigger value="new-sale" className="flex items-center gap-2">
+              <Package className="h-4 w-4" />
+              Nouvelle Vente
+            </TabsTrigger>
+            <TabsTrigger value="history" className="flex items-center gap-2">
+              <History className="h-4 w-4" />
+              Historique
+            </TabsTrigger>
+            {canAccessAdmin && (
+              <TabsTrigger value="admin" className="flex items-center gap-2">
+                <Settings className="h-4 w-4" />
+                Administration
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          <TabsContent value="new-sale">
+            <NewSaleForm />
+          </TabsContent>
+
+          <TabsContent value="history">
+            <SalesHistory canDelete={canDeleteSales} />
+          </TabsContent>
+
+          {canAccessAdmin && (
+            <TabsContent value="admin">
+              <Administration />
+            </TabsContent>
+          )}
+        </Tabs>
+      </main>
+    </div>
+  );
+}

client/src/pages/Login.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { useToast } from "@/hooks/use-toast";
+import { useAuth } from "@/hooks/useAuth";
+import { loginSchema, type LoginData } from "@shared/schema";
+import { LogIn, Sparkles } from "lucide-react";
+
+export default function Login() {
+  const { login, isLoggingIn } = useAuth();
+  const { toast } = useToast();
+
+  const form = useForm<LoginData>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (data: LoginData) => {
+    try {
+      await login(data);
+      toast({
+        title: "Connexion réussie",
+        description: "Bienvenue dans l'application !",
+      });
+    } catch (error) {
+      toast({
+        title: "Erreur de connexion",
+        description: "Nom d'utilisateur ou mot de passe incorrect",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50 p-4">
+      <Card className="w-full max-w-md shadow-lg">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-primary/10 rounded-full">
+              <Sparkles className="h-8 w-8 text-primary" />
+            </div>
+          </div>
+          <CardTitle className="text-2xl font-bold">Registre des Ventes</CardTitle>
+          <p className="text-muted-foreground">Connectez-vous pour accéder à l'application</p>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nom d'utilisateur</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Votre nom d'utilisateur" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Mot de passe</FormLabel>
+                    <FormControl>
+                      <Input type="password" placeholder="Votre mot de passe" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" className="w-full" disabled={isLoggingIn}>
+                <LogIn className="h-4 w-4 mr-2" />
+                {isLoggingIn ? "Connexion..." : "Se connecter"}
+              </Button>
+            </form>
+          </Form>
+          
+          <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
+            <h4 className="font-medium text-blue-900 mb-2">Compte par défaut :</h4>
+            <div className="text-sm text-blue-700 space-y-1">
+              <p><strong>Utilisateur :</strong> admin</p>
+              <p><strong>Mot de passe :</strong> admin123</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}