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

frontend/package.json

@@ -10,15 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/greensock": "^1.15.32",
+    "axios": "^1.5.1",
     "gsap": "^3.12.2",
-    "localforage": "^1.10.0",
-    "match-sorter": "^6.3.1",
     "mobx": "^6.10.2",
+    "mobx-react-lite": "^4.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
-    "sort-by": "^0.0.2"
+    "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/components/authentication/Authentication.tsx

@@ -4,8 +4,9 @@ import './../../styles/authentication.scss'
 import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
 import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox.tsx";
 import authStore from "../../store/authStore.ts";
+import {observer} from "mobx-react-lite";
 
-const Authentication: React.FC = () => {
+const Authentication: React.FC = observer(() => {
     const navigateTo = useNavigate()
 
     const [isPasswordShows, setIsPasswordShow] = useState(false)
@@ -24,7 +25,10 @@ const Authentication: React.FC = () => {
                 <h2 className="auth-form-title">АВТОРИЗАЦИЯ</h2>
                 <fieldset className="auth-fields">
                     <div className="auth-data__field">
-                        <input type="email" className="login__input" placeholder="Логин"/>
+                        <input type="email" className="login__input"
+                               placeholder="Логин"
+                               value={authStore.userLogin}
+                               onChange={(e) => authStore.changeUserLogin(e.target.value)}/>
                     </div>
                     <div className="auth-data__field">
                         {isPasswordShows
@@ -41,6 +45,6 @@ const Authentication: React.FC = () => {
             <CustomButton text="Вернуться обратно" handleOnClick={() => navigateTo('/')}></CustomButton>
         </div>
     );
-};
+});
 
 export default Authentication;

frontend/src/store/authStore.ts

@@ -2,7 +2,7 @@ import {makeAutoObservable} from "mobx";
 
 class AuthStore {
     isUserAuthorized: boolean = false
-    userLogin: string | null = null
+    userLogin: string = ""
     userPassword: string | null = null
 
     constructor() {
@@ -16,6 +16,10 @@ class AuthStore {
     signOutUser() {
         this.isUserAuthorized = false;
     }
+
+    changeUserLogin(newValue: string) {
+        this.userLogin = newValue
+    }
 }
 
 export default new AuthStore()

package.json

@@ -1,8 +1,7 @@
 {
   "dependencies": {
     "axios": "^1.6.1",
-    "mobx": "^6.10.2",
-    "mobx-react-lite": "^4.0.5",
-    "react-dom": "^18.2.0"
+    "mobx": "^6.11.0",
+    "mobx-react-lite": "^4.0.5"
   }
 }