добавляет кастомный инпут

codEnjoyer · Nov 20, 2023 · 2e10651 · 2e10651
1 parent 23c1e43
commit 2e10651
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx 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
@@ -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
@@ -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
@@ -1,5 +1,6 @@
 import React from 'react';
 
+
 interface IUserProfileModalProps {
     img?: string
 }