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";
import { ChangeEvent } from "react";
interface Props {
name: "Decoded" | "Encoded" | "Password";
value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
name: "Decoded" | "Encoded" | "Password";
value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
}
export default function InputField({ name, value, onChange }: Props) {
let labelText: string = "";
switch (name) {
case "Decoded":
labelText = `Decoded message`;
break;
case "Encoded":
labelText = `Encoded message`;
break;
case "Password":
labelText = "";
break;
default:
break;
}
let labelText: string = "";
switch (name) {
case "Decoded":
labelText = `Decoded message`;
break;
case "Encoded":
labelText = `Encoded message`;
break;
case "Password":
labelText = "";
break;
default:
break;
}
return (
<Grid2 container alignItems="center" paddingY={2} spacing={2}>
<Grid2 flexGrow={1}>
<Typography
component="label"
htmlFor={`${name}-input`}
sx={{
fontSize: {
xs: "16px",
sm: "20px",
},
}}
>
{labelText}
</Typography>
</Grid2>
return (
<Grid2 container alignItems="center" paddingY={2} spacing={2}>
<Grid2 flexGrow={1}>
<Typography
component="label"
htmlFor={`${name}-input`}
sx={{
fontSize: {
xs: "16px",
sm: "20px",
},
}}
>
{labelText}
</Typography>
</Grid2>
<Grid2
size={name === "Password" ? 6 : 8}
sx={{ "@media (max-width: 900px)": { width: "100%" } }}
>
<TextField
fullWidth
multiline={name !== "Password"}
rows={name === "Password" ? 1 : 6}
variant="outlined"
id={`${name}-input`}
name={name}
label={name}
value={value}
onChange={onChange}
/>
</Grid2>
</Grid2>
);
<Grid2 size={name === "Password" ? 6 : 8} sx={{ "@media (max-width: 900px)": { width: "100%" } }}>
<TextField
fullWidth
multiline={name !== "Password"}
rows={name === "Password" ? 1 : 6}
variant="outlined"
id={`${name}-input`}
name={name}
label={name}
value={value}
onChange={onChange}
/>
</Grid2>
</Grid2>
);
}
frontend/src/app/page.tsx
View file @ 2ba3b6ab
......@@ -5,125 +5,107 @@ import { ChangeEvent, FormEvent, useState } from "react";
import InputField from "./components/InputField";
interface IFormData {
decoded: string;
encoded: string;
password: string;
decoded: string;
encoded: string;
password: string;
}
export default function Home() {
const [formData, setFormData] = useState<IFormData>({
encoded: "",
decoded: "",
password: "",
});
const [formData, setFormData] = useState<IFormData>({
encoded: "",
decoded: "",
password: "",
});
const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
};
const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
};
const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name.toLowerCase()]: value,
}));
};
const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name.toLowerCase()]: value,
}));
};
return (
<div className="App">
<Container sx={{ marginTop: 2 }} maxWidth="lg">
<Typography
variant="h3"
sx={{
fontSize: {
xs: "24px",
sm: "36px",
},
}}
>
Cypher Coder/Decoder
</Typography>
<Box
sx={{
maxWidth: {
xs: "90%",
sm: "80%",
lg: "70%",
},
}}
component="form"
autoComplete="off"
onSubmit={submitFormHandler}
paddingY={2}
>
<Grid2 container direction="column" spacing={2}>
<InputField
name="Decoded"
value={formData.decoded}
onChange={onInputChangeHandler}
/>
<Grid2
container
alignItems="center"
sx={{
flexDirection: {
xs: "column",
md: "row",
},
}}
>
<Grid2 size={7}>
<InputField
name="Password"
value={formData.password}
onChange={onInputChangeHandler}
/>
</Grid2>
<Grid2 container justifyContent={{}}>
<Grid2>
<Button
size="small"
variant="contained"
startIcon={<ArrowDownwardIcon />}
>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Encode
</Typography>
</Button>
</Grid2>
return (
<div className="App">
<Container sx={{ marginTop: 2 }} maxWidth="lg">
<Typography
variant="h3"
sx={{
fontSize: {
xs: "24px",
sm: "36px",
},
}}
>
Cypher Coder/Decoder
</Typography>
<Box
sx={{
maxWidth: {
xs: "90%",
sm: "80%",
lg: "70%",
},
}}
component="form"
autoComplete="off"
onSubmit={submitFormHandler}
paddingY={2}
>
<Grid2 container direction="column" spacing={2}>
<InputField name="Decoded" value={formData.decoded} onChange={onInputChangeHandler} />
<Grid2
container
alignItems="center"
sx={{
flexDirection: {
xs: "column",
md: "row",
},
}}
>
<Grid2 size={7}>
<InputField name="Password" value={formData.password} onChange={onInputChangeHandler} />
</Grid2>
<Grid2 container justifyContent={{}}>
<Grid2>
<Button size="small" variant="contained" startIcon={<ArrowDownwardIcon />}>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Encode
</Typography>
</Button>
</Grid2>
<Grid2>
<Button
size="small"
variant="contained"
startIcon={
<ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />
}
>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Decode
</Typography>
</Button>
</Grid2>
</Grid2>
</Grid2>
<Grid2>
<Button
size="small"
variant="contained"
startIcon={<ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />}
>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Decode
</Typography>
</Button>
</Grid2>
</Grid2>
</Grid2>
<InputField
name="Encoded"
value={formData.encoded}
onChange={onInputChangeHandler}
/>
</Grid2>
</Box>
</Container>
</div>
);
<InputField name="Encoded" value={formData.encoded} onChange={onInputChangeHandler} />
</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