80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Card, Container, Form, Button, Alert } from "react-bootstrap";
|
|
|
|
export default function SQLInjection() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [msg, setMsg] = useState("");
|
|
const [status, setStatus] = useState(null);
|
|
const [query, setQuery] = useState("");
|
|
const [showQuery, setShowQuery] = useState(false);
|
|
|
|
const handleLogin = async () => {
|
|
const res = await fetch("http://localhost:5000/api/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const data = await res.json();
|
|
setStatus(res.status);
|
|
setMsg(data.message);
|
|
setQuery(data.query);
|
|
};
|
|
|
|
return (
|
|
<Container className="mt-5">
|
|
<Card className="shadow">
|
|
<Card.Body>
|
|
<Card.Title className="text-center">SQL Injection Demo</Card.Title>
|
|
<Card.Text className="text-muted text-center">
|
|
Try: <code>admin' --</code> as username
|
|
</Card.Text>
|
|
<Form>
|
|
<Form.Group className="mb-3" controlId="formUsername">
|
|
<Form.Control
|
|
type="text"
|
|
placeholder="Username"
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="formPassword">
|
|
<Form.Control
|
|
type="password"
|
|
placeholder="Password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="formShowQuery">
|
|
<Form.Check
|
|
type="checkbox"
|
|
label="Show query"
|
|
checked={showQuery}
|
|
onChange={(e) => setShowQuery(e.target.checked)}
|
|
/>
|
|
</Form.Group>
|
|
<div className="d-grid">
|
|
<Button variant="primary" onClick={handleLogin}>
|
|
Login
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
{msg && (
|
|
<Alert
|
|
className={`mt-3 ${
|
|
status === 200 ? "alert-success" : "alert-warning"
|
|
}`}
|
|
>
|
|
{msg}
|
|
</Alert>
|
|
)}
|
|
{showQuery && query && (
|
|
<Alert className="mt-3 info">
|
|
<strong>Query:</strong> {query}
|
|
</Alert>
|
|
)}
|
|
</Card.Body>
|
|
</Card>
|
|
</Container>
|
|
);
|
|
}
|