3# Установил дополнительно библиотеку для иконки стрелки. Написал компонент для…

3# Установил дополнительно библиотеку для иконки стрелки. Написал компонент для 3 полей "Decoded text", "Encoded text" и "Password".

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^6.2.1",
         "@mui/material": "^6.2.1",
         "next": "15.1.1",
         "react": "^19.0.0",
@@ -935,6 +936,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.2.1.tgz",
+      "integrity": "sha512-bP0XtW+t5KFL+wjfQp2UctN/8CuWqF1qaxbYuCAsJhL+AzproM8gGOh2n8sNBcrjbVckzDNqaXqxdpn+OmoWug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.2.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.2.1.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.2.1",
     "@mui/material": "^6.2.1",
     "next": "15.1.1",
     "react": "^19.0.0",

frontend/src/app/components/InputField.tsx

+import { Grid2, TextField, Typography } from "@mui/material";
+import { ChangeEvent } from "react";
+
+interface Props {
+  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 = name;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Grid2 container alignItems="center" paddingY={2}>
+      <Grid2 size={name === "Password" ? 8 : 4}>
+        <Typography
+          component="label"
+          htmlFor={`${name}-input`}
+          sx={{ fontSize: 20, display: "block" }}
+        >
+          {labelText}
+        </Typography>
+      </Grid2>
+
+      <Grid2 size={name === "Password" ? 4 : 8}>
+        <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>
+  );
+}