Router and shadcn
This commit is contained in:
Louis Knight-Webb
@@ -1,22 +1,16 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { Button } from '@/components/ui/button'
|
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
||||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
||||||
import { ProjectsPage } from '@/components/projects/projects-page'
|
|
||||||
import { UsersPage } from '@/components/users/users-page'
|
|
||||||
import { LoginForm } from '@/components/auth/login-form'
|
import { LoginForm } from '@/components/auth/login-form'
|
||||||
import { ApiResponse } from 'shared/types'
|
import { Navbar } from '@/components/layout/navbar'
|
||||||
import { authStorage, isAuthenticated, logout, makeAuthenticatedRequest } from '@/lib/auth'
|
import { HomePage } from '@/pages/home'
|
||||||
import { ArrowLeft, Heart, Activity, FolderOpen, Users, CheckCircle, AlertCircle, LogOut } from 'lucide-react'
|
import { Projects } from '@/pages/projects'
|
||||||
|
import { Users } from '@/pages/users'
|
||||||
|
import { isAuthenticated } from '@/lib/auth'
|
||||||
|
|
||||||
function App() {
|
function AppContent() {
|
||||||
const [currentPage, setCurrentPage] = useState<'home' | 'projects' | 'users'>('home')
|
const location = useLocation()
|
||||||
const [message, setMessage] = useState<string>('')
|
|
||||||
const [messageType, setMessageType] = useState<'success' | 'error'>('success')
|
|
||||||
const [loading, setLoading] = useState(false)
|
|
||||||
const [authenticated, setAuthenticated] = useState(false)
|
const [authenticated, setAuthenticated] = useState(false)
|
||||||
|
const showNavbar = location.pathname !== '/' || authenticated
|
||||||
const currentUser = authStorage.getUser()
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setAuthenticated(isAuthenticated())
|
setAuthenticated(isAuthenticated())
|
||||||
@@ -24,270 +18,37 @@ function App() {
|
|||||||
|
|
||||||
const handleLogin = () => {
|
const handleLogin = () => {
|
||||||
setAuthenticated(true)
|
setAuthenticated(true)
|
||||||
setCurrentPage('home')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
logout()
|
|
||||||
setAuthenticated(false)
|
setAuthenticated(false)
|
||||||
setCurrentPage('home')
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchHello = async () => {
|
|
||||||
setLoading(true)
|
|
||||||
try {
|
|
||||||
const response = await makeAuthenticatedRequest('/api/hello?name=Bloop')
|
|
||||||
const data = await response.json()
|
|
||||||
setMessage(data.message)
|
|
||||||
setMessageType('success')
|
|
||||||
} catch (error) {
|
|
||||||
setMessage('Error connecting to backend')
|
|
||||||
setMessageType('error')
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkHealth = async () => {
|
|
||||||
setLoading(true)
|
|
||||||
try {
|
|
||||||
const response = await makeAuthenticatedRequest('/api/health')
|
|
||||||
const data: ApiResponse<string> = await response.json()
|
|
||||||
setMessage(data.message || 'Health check completed')
|
|
||||||
setMessageType('success')
|
|
||||||
} catch (error) {
|
|
||||||
setMessage('Backend health check failed')
|
|
||||||
setMessageType('error')
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!authenticated) {
|
if (!authenticated) {
|
||||||
return <LoginForm onSuccess={handleLogin} />
|
return <LoginForm onSuccess={handleLogin} />
|
||||||
}
|
}
|
||||||
|
|
||||||
if (currentPage === 'projects' || currentPage === 'users') {
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<div className="border-b">
|
{showNavbar && <Navbar onLogout={handleLogout} />}
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className={showNavbar && location.pathname !== '/' ? "max-w-7xl mx-auto p-6 sm:p-8" : ""}>
|
||||||
<div className="flex items-center justify-between h-16">
|
<Routes>
|
||||||
<div className="flex items-center space-x-6">
|
<Route path="/" element={<HomePage />} />
|
||||||
<h2 className="text-lg font-semibold">Bloop</h2>
|
<Route path="/projects" element={<Projects />} />
|
||||||
<div className="flex items-center space-x-1">
|
<Route path="/projects/:projectId" element={<Projects />} />
|
||||||
<Button
|
<Route path="/users" element={<Users />} />
|
||||||
variant={currentPage === 'projects' ? 'default' : 'ghost'}
|
</Routes>
|
||||||
size="sm"
|
|
||||||
onClick={() => setCurrentPage('projects')}
|
|
||||||
>
|
|
||||||
<FolderOpen className="mr-2 h-4 w-4" />
|
|
||||||
Projects
|
|
||||||
</Button>
|
|
||||||
{currentUser?.is_admin && (
|
|
||||||
<Button
|
|
||||||
variant={currentPage === 'users' ? 'default' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setCurrentPage('users')}
|
|
||||||
>
|
|
||||||
<Users className="mr-2 h-4 w-4" />
|
|
||||||
Users
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
Welcome, {currentUser?.email}
|
|
||||||
</div>
|
|
||||||
<Button variant="ghost" onClick={() => setCurrentPage('home')}>
|
|
||||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
||||||
Home
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" onClick={handleLogout}>
|
|
||||||
<LogOut className="mr-2 h-4 w-4" />
|
|
||||||
Logout
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="max-w-7xl mx-auto p-6 sm:p-8">
|
|
||||||
{currentPage === 'projects' ? <ProjectsPage /> : <UsersPage />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
|
|
||||||
<div className="container mx-auto px-4 py-12">
|
|
||||||
<div className="max-w-4xl mx-auto">
|
|
||||||
<div className="text-center mb-12">
|
|
||||||
<div className="flex items-center justify-center mb-6">
|
|
||||||
<div className="rounded-full bg-primary/10 p-4">
|
|
||||||
<Heart className="h-8 w-8 text-primary" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-4xl font-bold tracking-tight mb-4">
|
|
||||||
Welcome to Bloop
|
|
||||||
</h1>
|
|
||||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
|
||||||
A modern full-stack monorepo built with Rust backend and React frontend.
|
|
||||||
Get started by exploring our features below.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
|
|
||||||
<Card className="hover:shadow-md transition-shadow">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="rounded-lg bg-blue-100 p-2 mr-3">
|
|
||||||
<Heart className="h-5 w-5 text-blue-600" />
|
|
||||||
</div>
|
|
||||||
<CardTitle className="text-lg">API Test</CardTitle>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Test the connection between frontend and backend
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button
|
|
||||||
onClick={fetchHello}
|
|
||||||
disabled={loading}
|
|
||||||
className="w-full"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<Heart className="mr-2 h-4 w-4" />
|
|
||||||
Say Hello
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="hover:shadow-md transition-shadow">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="rounded-lg bg-green-100 p-2 mr-3">
|
|
||||||
<Activity className="h-5 w-5 text-green-600" />
|
|
||||||
</div>
|
|
||||||
<CardTitle className="text-lg">Health Check</CardTitle>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Monitor the health status of your backend services
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button
|
|
||||||
onClick={checkHealth}
|
|
||||||
variant="outline"
|
|
||||||
disabled={loading}
|
|
||||||
className="w-full"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<Activity className="mr-2 h-4 w-4" />
|
|
||||||
Check Health
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="hover:shadow-md transition-shadow">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="rounded-lg bg-purple-100 p-2 mr-3">
|
|
||||||
<FolderOpen className="h-5 w-5 text-purple-600" />
|
|
||||||
</div>
|
|
||||||
<CardTitle className="text-lg">Projects</CardTitle>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Manage your projects with full CRUD operations
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button
|
|
||||||
onClick={() => setCurrentPage('projects')}
|
|
||||||
className="w-full"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<FolderOpen className="mr-2 h-4 w-4" />
|
|
||||||
View Projects
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{currentUser?.is_admin && (
|
|
||||||
<Card className="hover:shadow-md transition-shadow">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="rounded-lg bg-orange-100 p-2 mr-3">
|
|
||||||
<Users className="h-5 w-5 text-orange-600" />
|
|
||||||
</div>
|
|
||||||
<CardTitle className="text-lg">Users</CardTitle>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Manage user accounts and permissions
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button
|
|
||||||
onClick={() => setCurrentPage('users')}
|
|
||||||
className="w-full"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<Users className="mr-2 h-4 w-4" />
|
|
||||||
Manage Users
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card className="hover:shadow-md transition-shadow">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="rounded-lg bg-red-100 p-2 mr-3">
|
|
||||||
<LogOut className="h-5 w-5 text-red-600" />
|
|
||||||
</div>
|
|
||||||
<CardTitle className="text-lg">Account</CardTitle>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Logged in as {currentUser?.email}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button
|
|
||||||
onClick={handleLogout}
|
|
||||||
variant="outline"
|
|
||||||
className="w-full"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<LogOut className="mr-2 h-4 w-4" />
|
|
||||||
Logout
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<Alert variant={messageType === 'error' ? 'destructive' : 'default'} className="max-w-2xl mx-auto">
|
|
||||||
{messageType === 'error' ? (
|
|
||||||
<AlertCircle className="h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<CheckCircle className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
<AlertDescription>
|
|
||||||
{message}
|
|
||||||
</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-12 text-center">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Built with ❤️ using Rust, React, TypeScript, and Tailwind CSS
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<AppContent />
|
||||||
|
</BrowserRouter>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default App
|
export default App
|
||||||
|
|||||||
72
frontend/src/components/layout/navbar.tsx
Normal file
72
frontend/src/components/layout/navbar.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import { Link, useLocation } from 'react-router-dom'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { authStorage, logout } from '@/lib/auth'
|
||||||
|
import { ArrowLeft, FolderOpen, Users, LogOut } from 'lucide-react'
|
||||||
|
|
||||||
|
interface NavbarProps {
|
||||||
|
onLogout: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Navbar({ onLogout }: NavbarProps) {
|
||||||
|
const location = useLocation()
|
||||||
|
const currentUser = authStorage.getUser()
|
||||||
|
const isHome = location.pathname === '/'
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
logout()
|
||||||
|
onLogout()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-b">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
<div className="flex items-center space-x-6">
|
||||||
|
<h2 className="text-lg font-semibold">Bloop</h2>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant={location.pathname === '/projects' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<Link to="/projects">
|
||||||
|
<FolderOpen className="mr-2 h-4 w-4" />
|
||||||
|
Projects
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
{currentUser?.is_admin && (
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant={location.pathname === '/users' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<Link to="/users">
|
||||||
|
<Users className="mr-2 h-4 w-4" />
|
||||||
|
Users
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Welcome, {currentUser?.email}
|
||||||
|
</div>
|
||||||
|
{!isHome && (
|
||||||
|
<Button asChild variant="ghost">
|
||||||
|
<Link to="/">
|
||||||
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button variant="ghost" onClick={handleLogout}>
|
||||||
|
<LogOut className="mr-2 h-4 w-4" />
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
242
frontend/src/pages/home.tsx
Normal file
242
frontend/src/pages/home.tsx
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import { ApiResponse } from 'shared/types'
|
||||||
|
import { authStorage, makeAuthenticatedRequest } from '@/lib/auth'
|
||||||
|
import { Heart, Activity, FolderOpen, Users, CheckCircle, AlertCircle, Zap, Shield, Code } from 'lucide-react'
|
||||||
|
|
||||||
|
export function HomePage() {
|
||||||
|
const [message, setMessage] = useState<string>('')
|
||||||
|
const [messageType, setMessageType] = useState<'success' | 'error'>('success')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const currentUser = authStorage.getUser()
|
||||||
|
|
||||||
|
const fetchHello = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const response = await makeAuthenticatedRequest('/api/hello?name=Bloop')
|
||||||
|
const data = await response.json()
|
||||||
|
setMessage(data.message)
|
||||||
|
setMessageType('success')
|
||||||
|
} catch (error) {
|
||||||
|
setMessage('Error connecting to backend')
|
||||||
|
setMessageType('error')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkHealth = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const response = await makeAuthenticatedRequest('/api/health')
|
||||||
|
const data: ApiResponse<string> = await response.json()
|
||||||
|
setMessage(data.message || 'Health check completed')
|
||||||
|
setMessageType('success')
|
||||||
|
} catch (error) {
|
||||||
|
setMessage('Backend health check failed')
|
||||||
|
setMessageType('error')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
|
||||||
|
<div className="container mx-auto px-4 py-12">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<div className="flex items-center justify-center mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl"></div>
|
||||||
|
<div className="relative rounded-full bg-primary/10 p-4 border">
|
||||||
|
<Heart className="h-8 w-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary" className="mb-4">
|
||||||
|
<Zap className="mr-1 h-3 w-3" />
|
||||||
|
Mission Control Dashboard
|
||||||
|
</Badge>
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight mb-4 bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text">
|
||||||
|
Welcome to Bloop
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
|
||||||
|
A modern full-stack monorepo built with Rust backend and React frontend.
|
||||||
|
Get started by exploring our features below.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-center gap-4">
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
<Shield className="mr-1 h-3 w-3" />
|
||||||
|
Secure
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
<Code className="mr-1 h-3 w-3" />
|
||||||
|
Type-Safe
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
<Activity className="mr-1 h-3 w-3" />
|
||||||
|
Real-time
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature Cards */}
|
||||||
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
|
||||||
|
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="rounded-lg bg-primary/10 p-2 mr-3 group-hover:bg-primary/20 transition-colors">
|
||||||
|
<Heart className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-lg">API Test</CardTitle>
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary" className="text-xs">Test</Badge>
|
||||||
|
</div>
|
||||||
|
<CardDescription>
|
||||||
|
Test the connection between frontend and backend
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button
|
||||||
|
onClick={fetchHello}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full group-hover:shadow-sm transition-shadow"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<Heart className="mr-2 h-4 w-4" />
|
||||||
|
{loading ? 'Testing...' : 'Say Hello'}
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="rounded-lg bg-emerald-500/10 p-2 mr-3 group-hover:bg-emerald-500/20 transition-colors">
|
||||||
|
<Activity className="h-5 w-5 text-emerald-600" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-lg">Health Check</CardTitle>
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary" className="text-xs">Monitor</Badge>
|
||||||
|
</div>
|
||||||
|
<CardDescription>
|
||||||
|
Monitor the health status of your backend services
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button
|
||||||
|
onClick={checkHealth}
|
||||||
|
variant="outline"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full group-hover:shadow-sm transition-shadow"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<Activity className="mr-2 h-4 w-4" />
|
||||||
|
{loading ? 'Checking...' : 'Check Health'}
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="rounded-lg bg-violet-500/10 p-2 mr-3 group-hover:bg-violet-500/20 transition-colors">
|
||||||
|
<FolderOpen className="h-5 w-5 text-violet-600" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-lg">Projects</CardTitle>
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary" className="text-xs">CRUD</Badge>
|
||||||
|
</div>
|
||||||
|
<CardDescription>
|
||||||
|
Manage your projects with full CRUD operations
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button asChild className="w-full group-hover:shadow-sm transition-shadow" size="sm">
|
||||||
|
<Link to="/projects">
|
||||||
|
<FolderOpen className="mr-2 h-4 w-4" />
|
||||||
|
View Projects
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{currentUser?.is_admin && (
|
||||||
|
<Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted lg:col-span-2">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="rounded-lg bg-amber-500/10 p-2 mr-3 group-hover:bg-amber-500/20 transition-colors">
|
||||||
|
<Users className="h-5 w-5 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
Users
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
<Shield className="mr-1 h-3 w-3" />
|
||||||
|
Admin Only
|
||||||
|
</Badge>
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="mt-1">
|
||||||
|
Manage user accounts and permissions
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button asChild className="group-hover:shadow-sm transition-shadow" size="sm">
|
||||||
|
<Link to="/users">
|
||||||
|
<Users className="mr-2 h-4 w-4" />
|
||||||
|
Manage Users
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Alert */}
|
||||||
|
{message && (
|
||||||
|
<div className="max-w-2xl mx-auto mb-8">
|
||||||
|
<Alert variant={messageType === 'error' ? 'destructive' : 'default'} className="border-muted/50">
|
||||||
|
{messageType === 'error' ? (
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<CheckCircle className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
<AlertDescription className="font-medium">
|
||||||
|
{message}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<Separator className="my-12 max-w-2xl mx-auto" />
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-muted-foreground mb-2">
|
||||||
|
Built with ❤️ using modern technologies
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<Badge variant="outline" className="text-xs">Rust</Badge>
|
||||||
|
<Badge variant="outline" className="text-xs">React</Badge>
|
||||||
|
<Badge variant="outline" className="text-xs">TypeScript</Badge>
|
||||||
|
<Badge variant="outline" className="text-xs">Tailwind CSS</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
23
frontend/src/pages/projects.tsx
Normal file
23
frontend/src/pages/projects.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
|
import { ProjectList } from '@/components/projects/project-list'
|
||||||
|
import { ProjectDetail } from '@/components/projects/project-detail'
|
||||||
|
|
||||||
|
export function Projects() {
|
||||||
|
const { projectId } = useParams<{ projectId: string }>()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
navigate('/projects')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (projectId) {
|
||||||
|
return (
|
||||||
|
<ProjectDetail
|
||||||
|
projectId={projectId}
|
||||||
|
onBack={handleBack}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return <ProjectList />
|
||||||
|
}
|
||||||
188
frontend/src/pages/users.tsx
Normal file
188
frontend/src/pages/users.tsx
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||||
|
import { User, ApiResponse } from 'shared/types'
|
||||||
|
import { UserForm } from '@/components/users/user-form'
|
||||||
|
import { makeAuthenticatedRequest, authStorage } from '@/lib/auth'
|
||||||
|
import { Plus, Edit, Trash2, Calendar, AlertCircle, Loader2, Shield, User as UserIcon } from 'lucide-react'
|
||||||
|
|
||||||
|
export function Users() {
|
||||||
|
const [users, setUsers] = useState<User[]>([])
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [showForm, setShowForm] = useState(false)
|
||||||
|
const [editingUser, setEditingUser] = useState<User | null>(null)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const currentUser = authStorage.getUser()
|
||||||
|
|
||||||
|
const fetchUsers = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
setError('')
|
||||||
|
try {
|
||||||
|
const response = await makeAuthenticatedRequest('/api/users')
|
||||||
|
const data: ApiResponse<User[]> = await response.json()
|
||||||
|
if (data.success && data.data) {
|
||||||
|
setUsers(data.data)
|
||||||
|
} else {
|
||||||
|
setError('Failed to load users')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch users:', error)
|
||||||
|
setError('Failed to connect to server')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id: string, email: string) => {
|
||||||
|
if (!confirm(`Are you sure you want to delete user "${email}"? This action cannot be undone.`)) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await makeAuthenticatedRequest(`/api/users/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
})
|
||||||
|
if (response.ok) {
|
||||||
|
fetchUsers()
|
||||||
|
} else if (response.status === 403) {
|
||||||
|
setError('You cannot delete this user')
|
||||||
|
} else {
|
||||||
|
setError('Failed to delete user')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to delete user:', error)
|
||||||
|
setError('Failed to delete user')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (user: User) => {
|
||||||
|
setEditingUser(user)
|
||||||
|
setShowForm(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFormSuccess = () => {
|
||||||
|
setShowForm(false)
|
||||||
|
setEditingUser(null)
|
||||||
|
fetchUsers()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUsers()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Users</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Manage user accounts and permissions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{currentUser?.is_admin && (
|
||||||
|
<Button onClick={() => setShowForm(true)}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Add User
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertDescription>
|
||||||
|
{error}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Loading users...
|
||||||
|
</div>
|
||||||
|
) : users.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="py-12 text-center">
|
||||||
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
|
||||||
|
<UserIcon className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-4 text-lg font-semibold">No users found</h3>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground">
|
||||||
|
Get started by creating the first user account.
|
||||||
|
</p>
|
||||||
|
{currentUser?.is_admin && (
|
||||||
|
<Button
|
||||||
|
className="mt-4"
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Add your first user
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{users.map((user) => (
|
||||||
|
<Card key={user.id} className="hover:shadow-md transition-shadow">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<CardTitle className="text-lg flex items-center">
|
||||||
|
{user.is_admin ? (
|
||||||
|
<Shield className="mr-2 h-4 w-4 text-orange-500" />
|
||||||
|
) : (
|
||||||
|
<UserIcon className="mr-2 h-4 w-4 text-blue-500" />
|
||||||
|
)}
|
||||||
|
{user.email}
|
||||||
|
</CardTitle>
|
||||||
|
<Badge variant={user.is_admin ? "default" : "secondary"}>
|
||||||
|
{user.is_admin ? "Admin" : "User"}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<CardDescription className="flex items-center">
|
||||||
|
<Calendar className="mr-1 h-3 w-3" />
|
||||||
|
Joined {new Date(user.created_at).toLocaleDateString()}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleEdit(user)}
|
||||||
|
className="h-8"
|
||||||
|
>
|
||||||
|
<Edit className="mr-1 h-3 w-3" />
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
{currentUser?.is_admin && currentUser.id !== user.id && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDelete(user.id, user.email)}
|
||||||
|
className="h-8 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-1 h-3 w-3" />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<UserForm
|
||||||
|
open={showForm}
|
||||||
|
onClose={() => {
|
||||||
|
setShowForm(false)
|
||||||
|
setEditingUser(null)
|
||||||
|
}}
|
||||||
|
onSuccess={handleFormSuccess}
|
||||||
|
user={editingUser}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user