Skip to content

H
Homework83_M11
Commit 2ba3b6ab authored by Ли Джен Сеп's avatar Ли Джен Сеп 💬
Browse files
Options

удалил package-lock

parent 9a63e9ea
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 164 deletions
frontend/src/app/components/InputField.tsx
View file @ 2ba3b6ab
...@@ -2,60 +2,57 @@ import { Grid2, TextField, Typography } from "@mui/material"; ...@@ -2,60 +2,57 @@ import { Grid2, TextField, Typography } from "@mui/material";
import { ChangeEvent } from "react"; import { ChangeEvent } from "react";
interface Props { interface Props {
name: "Decoded" | "Encoded" | "Password"; name: "Decoded" | "Encoded" | "Password";
value: string; value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void; onChange: (e: ChangeEvent<HTMLInputElement>) => void;
} }
export default function InputField({ name, value, onChange }: Props) { export default function InputField({ name, value, onChange }: Props) {
let labelText: string = ""; let labelText: string = "";
switch (name) { switch (name) {
case "Decoded": case "Decoded":
labelText = `Decoded message`; labelText = `Decoded message`;
break; break;
case "Encoded": case "Encoded":
labelText = `Encoded message`; labelText = `Encoded message`;
break; break;
case "Password": case "Password":
labelText = ""; labelText = "";
break; break;
default: default:
break; break;
} }
return ( return (
<Grid2 container alignItems="center" paddingY={2} spacing={2}> <Grid2 container alignItems="center" paddingY={2} spacing={2}>
<Grid2 flexGrow={1}> <Grid2 flexGrow={1}>
<Typography <Typography
component="label" component="label"
htmlFor={`${name}-input`} htmlFor={`${name}-input`}
sx={{ sx={{
fontSize: { fontSize: {
xs: "16px", xs: "16px",
sm: "20px", sm: "20px",
}, },
}} }}
> >
{labelText} {labelText}
</Typography> </Typography>
</Grid2> </Grid2>
<Grid2 <Grid2 size={name === "Password" ? 6 : 8} sx={{ "@media (max-width: 900px)": { width: "100%" } }}>
size={name === "Password" ? 6 : 8} <TextField
sx={{ "@media (max-width: 900px)": { width: "100%" } }} fullWidth
> multiline={name !== "Password"}
<TextField rows={name === "Password" ? 1 : 6}
fullWidth variant="outlined"
multiline={name !== "Password"} id={`${name}-input`}
rows={name === "Password" ? 1 : 6} name={name}
variant="outlined" label={name}
id={`${name}-input`} value={value}
name={name} onChange={onChange}
label={name} />
value={value} </Grid2>
onChange={onChange} </Grid2>
/> );
</Grid2>
</Grid2>
);
} }
frontend/src/app/page.tsx
View file @ 2ba3b6ab
...@@ -5,125 +5,107 @@ import { ChangeEvent, FormEvent, useState } from "react"; ...@@ -5,125 +5,107 @@ import { ChangeEvent, FormEvent, useState } from "react";
import InputField from "./components/InputField"; import InputField from "./components/InputField";
interface IFormData { interface IFormData {
decoded: string; decoded: string;
encoded: string; encoded: string;
password: string; password: string;
} }
export default function Home() { export default function Home() {
const [formData, setFormData] = useState<IFormData>({ const [formData, setFormData] = useState<IFormData>({
encoded: "", encoded: "",
decoded: "", decoded: "",
password: "", password: "",
}); });
const submitFormHandler = (e: FormEvent<HTMLFormElement>) => { const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
}; };
const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => { const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target; const { name, value } = e.target;
setFormData((prevData) => ({ setFormData((prevData) => ({
...prevData, ...prevData,
[name.toLowerCase()]: value, [name.toLowerCase()]: value,
})); }));
}; };
return ( return (
<div className="App"> <div className="App">
<Container sx={{ marginTop: 2 }} maxWidth="lg"> <Container sx={{ marginTop: 2 }} maxWidth="lg">
<Typography <Typography
variant="h3" variant="h3"
sx={{ sx={{
fontSize: { fontSize: {
xs: "24px", xs: "24px",
sm: "36px", sm: "36px",
}, },
}} }}
> >
Cypher Coder/Decoder Cypher Coder/Decoder
</Typography> </Typography>
<Box <Box
sx={{ sx={{
maxWidth: { maxWidth: {
xs: "90%", xs: "90%",
sm: "80%", sm: "80%",
lg: "70%", lg: "70%",
}, },
}} }}
component="form" component="form"
autoComplete="off" autoComplete="off"
onSubmit={submitFormHandler} onSubmit={submitFormHandler}
paddingY={2} paddingY={2}
> >
<Grid2 container direction="column" spacing={2}> <Grid2 container direction="column" spacing={2}>
<InputField <InputField name="Decoded" value={formData.decoded} onChange={onInputChangeHandler} />
name="Decoded" <Grid2
value={formData.decoded} container
onChange={onInputChangeHandler} alignItems="center"
/> sx={{
<Grid2 flexDirection: {
container xs: "column",
alignItems="center" md: "row",
sx={{ },
flexDirection: { }}
xs: "column", >
md: "row", <Grid2 size={7}>
}, <InputField name="Password" value={formData.password} onChange={onInputChangeHandler} />
}} </Grid2>
> <Grid2 container justifyContent={{}}>
<Grid2 size={7}> <Grid2>
<InputField <Button size="small" variant="contained" startIcon={<ArrowDownwardIcon />}>
name="Password" <Typography
value={formData.password} sx={{
onChange={onInputChangeHandler} display: { xs: "none", md: "inline" },
/> }}
</Grid2> >
<Grid2 container justifyContent={{}}> Encode
<Grid2> </Typography>
<Button </Button>
size="small" </Grid2>
variant="contained"
startIcon={<ArrowDownwardIcon />}
>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Encode
</Typography>
</Button>
</Grid2>
<Grid2> <Grid2>
<Button <Button
size="small" size="small"
variant="contained" variant="contained"
startIcon={ startIcon={<ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />}
<ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} /> >
} <Typography
> sx={{
<Typography display: { xs: "none", md: "inline" },
sx={{ }}
display: { xs: "none", md: "inline" }, >
}} Decode
> </Typography>
Decode </Button>
</Typography> </Grid2>
</Button> </Grid2>
</Grid2> </Grid2>
</Grid2>
</Grid2>
<InputField <InputField name="Encoded" value={formData.encoded} onChange={onInputChangeHandler} />
name="Encoded" </Grid2>
value={formData.encoded} </Box>
onChange={onInputChangeHandler} </Container>
/> </div>
</Grid2> );
</Box>
</Container>
</div>
);
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment