MCP FOR ITSM

import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Form, Button, Card, Alert } from 'react-bootstrap'; import { authService } from '../services/api'; const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const navigate = useNavigate(); const handleSubmit = async (e) => { e.preventDefault(); // Reset error setError(''); // Validate inputs if (!email || !password) { setError('Please enter both email and password'); return; } try { setLoading(true); await authService.login(email, password); navigate('/'); // Redirect to dashboard on successful login } catch (err) { setError(err.message || 'Failed to login. Please check your credentials.'); } finally { setLoading(false); } }; return ( <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '70vh' }}> <Card style={{ width: '400px' }}> <Card.Body> <Card.Title className="text-center mb-4">Login to ITSM Integration Platform</Card.Title> {error && <Alert variant="danger">{error}</Alert>} <Form onSubmit={handleSubmit}> <Form.Group className="mb-3" controlId="formEmail"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter your email" value={email} onChange={(e) => setEmail(e.target.value)} required /> </Form.Group> <Form.Group className="mb-3" controlId="formPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Enter your password" value={password} onChange={(e) => setPassword(e.target.value)} required /> </Form.Group> <Button variant="primary" type="submit" className="w-100 mt-3" disabled={loading} > {loading ? 'Logging in...' : 'Login'} </Button> </Form> </Card.Body> </Card> </div> ); }; export default Login;