#5 Добавил удаление пробелов

frontend/src/app/components/InputField.tsx

@@ -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

@@ -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>
+    );
 }

service/src/message/message.controller.ts

@@ -6,7 +6,7 @@ import { CreateMessageDto } from './dto/create-message.dto';
 export class MessageController {
   constructor(private readonly messageService: MessageService) {}
 
-  @Post('encode')
+  @Post('/encode')
   encodeMessage(@Body() createMessageDto: CreateMessageDto): {
     encoded: string;
   } {
@@ -15,7 +15,7 @@ export class MessageController {
     return { encoded };
   }
 
-  @Post('decode')
+  @Post('/decode')
   decodeMessage(@Body() createMessageDto: CreateMessageDto): {
     decoded: string;
   } {

service/src/message/message.service.ts

@@ -4,10 +4,10 @@ import { Vigenere } from 'caesar-salad';
 @Injectable()
 export class MessageService {
   encodeMessage(password: string, message: string): string {
-    return Vigenere.Cipher(password).crypt(message);
+    return Vigenere.Cipher(password.trim()).crypt(message);
   }
 
   decodeMessage(password: string, message: string): string {
-    return Vigenere.Decipher(password).crypt(message);
+    return Vigenere.Decipher(password.trim()).crypt(message);
   }
 }