89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import { TabContext, TabList, TabPanel } from "@mui/lab";
|
|
import { Box, Divider, Tab, useTheme } from "@mui/material";
|
|
import { useState } from "react";
|
|
import { SqlInjectionLogin } from "./SqlInjectionLogin";
|
|
import { SqlInjectionRegister } from "./SqlInjectionRegister";
|
|
|
|
export const SqlInjection = () => {
|
|
// contexts
|
|
const theme = useTheme();
|
|
|
|
// states
|
|
const [subTabValue, setSubTabValue] = useState("register");
|
|
|
|
// logic for switching tabs
|
|
const subTabChangeEvent = (newTabValue: string) => {
|
|
setSubTabValue(newTabValue);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100vh",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
border: "solid 1px grey",
|
|
borderRadius: 2,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
maxHeight: "90vh",
|
|
width: "400px",
|
|
}}
|
|
>
|
|
<TabContext value={subTabValue}>
|
|
<TabList
|
|
onChange={(e, value) => {
|
|
subTabChangeEvent(value);
|
|
}}
|
|
scrollButtons={true}
|
|
sx={{
|
|
borderBottom: "1px solid " + theme.palette.divider,
|
|
}}
|
|
variant="standard"
|
|
>
|
|
<Tab
|
|
label="Register"
|
|
value="register"
|
|
/>
|
|
<Tab
|
|
label="Login"
|
|
value="login"
|
|
/>
|
|
</TabList>
|
|
<Box
|
|
sx={{
|
|
minHeight: "500px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
overflowY: "auto",
|
|
p: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<TabPanel
|
|
sx={{ p: 2 }}
|
|
value="register"
|
|
>
|
|
<SqlInjectionRegister />
|
|
</TabPanel>
|
|
<TabPanel
|
|
sx={{ p: 2 }}
|
|
value="login"
|
|
>
|
|
<SqlInjectionLogin />
|
|
</TabPanel>
|
|
{/* <Divider />
|
|
the logged in account details goes here */}
|
|
</Box>
|
|
</TabContext>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|