MCPeasy

import { useState } from 'react' import { useAuth } from '../hooks/useAuth' 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' export default function LoginPage() { const [username, setUsername] = useState('') const [password, setPassword] = useState('') const { login, isLoggingIn, loginError } = useAuth() const handleSubmit = (e) => { e.preventDefault() login(username, password) } return ( <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div className="max-w-md w-full"> <Card> <CardHeader className="text-center"> <CardTitle className="text-3xl font-bold">MCPeasy Admin</CardTitle> <CardDescription>Sign in to manage your MCP server</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleSubmit} className="space-y-4"> <div className="space-y-2"> <Label htmlFor="username">Username</Label> <Input id="username" name="username" type="text" required placeholder="Enter username" value={username} onChange={(e) => setUsername(e.target.value)} disabled={isLoggingIn} /> </div> <div className="space-y-2"> <Label htmlFor="password">Password</Label> <Input id="password" name="password" type="password" required placeholder="Enter password" value={password} onChange={(e) => setPassword(e.target.value)} disabled={isLoggingIn} /> </div> {loginError && ( <div className="text-destructive text-sm text-center"> {loginError} </div> )} <Button type="submit" disabled={isLoggingIn} className="w-full" > {isLoggingIn ? 'Signing in...' : 'Sign in'} </Button> </form> </CardContent> </Card> </div> </div> ) }