From 2e106510bf79f712d73414798faa4d512bfc962b Mon Sep 17 00:00:00 2001
From: mihail323i21 <mihail323i21@gmail.com>
Date: Tue, 21 Nov 2023 03:17:40 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=B0=D1=81=D1=82=D0=BE=D0=BC=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B9=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UIComponents/customInput/CustomInput.tsx  | 30 +++++++++++++++++++
 .../UIComponents/customInput/customInput.scss | 21 +++++++++++++
 .../authentication/Authentication.tsx         | 16 ++++------
 .../UserProfile/UserProfileModalBody.tsx      |  1 +
 4 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/UIComponents/customInput/CustomInput.tsx
 create mode 100644 frontend/src/UIComponents/customInput/customInput.scss

diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx b/frontend/src/UIComponents/customInput/CustomInput.tsx
new file mode 100644
index 0000000..f12fee8
--- /dev/null
+++ b/frontend/src/UIComponents/customInput/CustomInput.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import authStore from "../../store/authStore.ts";
+import "./customInput.scss"
+
+interface IPropTypes {
+    placeholder: string,
+    value: string,
+    handleOnChange: (e: string) => void,
+    type: string,
+    autoFocus?: boolean
+}
+
+const CustomInput: React.FC<IPropTypes> = ({placeholder, value, handleOnChange, type, autoFocus}) => {
+    return (
+        <div className="custom-input">
+            <input type={type} className="login__input"
+                   placeholder={placeholder}
+                   value={value}
+                   onChange={(e) => {
+                       handleOnChange(e.target.value)
+                       authStore.changeUserLogin(e.target.value)
+                       authStore.changeUserEmail(e.target.value)
+                   }}
+                   autoFocus={autoFocus !== undefined ? autoFocus : false}
+            />
+        </div>
+    );
+};
+
+export default CustomInput;
diff --git a/frontend/src/UIComponents/customInput/customInput.scss b/frontend/src/UIComponents/customInput/customInput.scss
new file mode 100644
index 0000000..d566a70
--- /dev/null
+++ b/frontend/src/UIComponents/customInput/customInput.scss
@@ -0,0 +1,21 @@
+@import "./../../styles/variablesStyles";
+.custom-input {
+  margin-top: 15px;
+  background: $inputBGColor;
+  border-radius: 30px;
+
+  > input {
+    font-size: 16px;
+    color: $inputTextColor;
+    left: 10%;
+    width: 80%;
+    height: 70px;
+    background: none;
+    border: none;
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+  }
+}
diff --git a/frontend/src/components/authentication/Authentication.tsx b/frontend/src/components/authentication/Authentication.tsx
index 0ea63c8..59588c3 100644
--- a/frontend/src/components/authentication/Authentication.tsx
+++ b/frontend/src/components/authentication/Authentication.tsx
@@ -5,6 +5,7 @@ import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox.tsx
 import authStore from "../../store/authStore.ts";
 import {observer} from "mobx-react-lite";
 import {useNavigate} from "react-router-dom";
+import CustomInput from "../../UIComponents/customInput/CustomInput.tsx";
 
 const Authentication: React.FC = observer(() => {
     const navigateTo = useNavigate()
@@ -21,17 +22,10 @@ const Authentication: React.FC = observer(() => {
             <form className="auth__form">
                 <h2 className="auth-form-title">ВХОД</h2>
                 <fieldset className="auth-fields">
-                    <div className="auth-data__field">
-                        <input type="email" className="login__input"
-                               placeholder="Логин"
-                               value={authStore.userLogin}
-                               onChange={(e) => {
-                                   authStore.changeUserLogin(e.target.value)
-                                   authStore.changeUserEmail(e.target.value)
-                               }}
-                               autoFocus={true}
-                        />
-                    </div>
+                    <CustomInput type="email" value="" handleOnChange={(e) => {
+                        authStore.changeUserLogin(e.target.value)
+                        authStore.changeUserEmail(e.target.value)
+                    }} autoFocus={true} placeholder="Логин"/>
                     <div className="auth-data__field">
                         <input type={isPasswordShows ? "text" : "password"} className="password__input"
                                value={authStore.userPassword}
diff --git a/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx
index 0a3abd8..0bd7beb 100644
--- a/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx
+++ b/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+
 interface IUserProfileModalProps {
     img?: string
 }