почистил глобальное состояние, допиливаю авторизацию,

codEnjoyer · Dec 11, 2023 · 3532e0e · 3532e0e
1 parent 0926fdb
commit 3532e0e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 71 deletions.
diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx b/frontend/src/UIComponents/customInput/CustomInput.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React from 'react';
 import "./customInput.scss"
 import {FieldValues, RegisterOptions, UseFormRegister} from "react-hook-form";
 
@@ -15,8 +15,6 @@ interface IPropTypes {
     defaultValue?: string,
     register: UseFormRegister<FieldValues>,
     required?: boolean,
-    value: string,
-    changeValue?: (e: string) => void,
 }
 
 const CustomInput: React.FC<IPropTypes> =
@@ -32,18 +30,13 @@ const CustomInput: React.FC<IPropTypes> =
          defaultValue,
          register,
          validateRules,
-         value,
-         changeValue,
+        ...inputProps
      }) => {
-        const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-            if (changeValue)
-                changeValue(e.currentTarget.value)
-        }, [changeValue])
         return (
-
-
             <div className="custom-input" style={{width: width, height: height}}>
+                <label htmlFor={name}></label>
                 <input
+                    id={name}
                     type={type}
                     className={className}
                     placeholder={placeholder !== undefined ? placeholder : ""}
@@ -52,9 +45,9 @@ const CustomInput: React.FC<IPropTypes> =
                     style={{height: height}}
                     defaultValue={defaultValue}
                     {...register(name, validateRules)}
-                    onChange={handleOnChange}
-                    value={value}
+                    {...inputProps}
                 />
+                {/*{error.message && <span className="custom-input__error">{error.message}</span>}*/}
             </div>
         );
     };

diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -6,24 +6,27 @@ import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox.tsx
 import {useNavigate} from "react-router-dom"
 import {useForm} from "react-hook-form";
 
+import {observer} from "mobx-react-lite";
+
 import rulesValidation from "../../utils/auth.ts";
+import authStore from "../../store/authStore.ts";
 
-const AuthForm: React.FC = () => {
+const AuthForm: React.FC = observer(() => {
     const navigateTo = useNavigate()
     const {register, handleSubmit} = useForm()
 
-    const [login, setLogin] = useState("")
-    const [password, setPassword] = useState("")
     const [isPasswordShows, setIsPasswordShows] = useState(false)
 
     const handleOnChangeIsPasswordShows = useCallback(() => {
         setIsPasswordShows(!isPasswordShows)
     }, [isPasswordShows])
 
+    const onHandleSubmit = useCallback(({login, password}) => {
+        authStore.signIn(login, password).then(() => navigateTo('/map'))
+    }, [navigateTo])
+
     return (
-        <form className="auth__form" onSubmit={handleSubmit((data) => {
-            console.log(data)
-        })}>
+        <form className="auth__form" onSubmit={handleSubmit((data) => onHandleSubmit(data))}>
             <h2 className="auth-form-title">ВХОД</h2>
             <fieldset className="auth-fields">
                 <CustomInput
@@ -33,19 +36,13 @@ const AuthForm: React.FC = () => {
                     validateRules={rulesValidation.login.rules}
                     autoFocus={true}
                     placeholder="Логин"
-                    required={true}
-                    value={login}
-                    changeValue={setLogin}
                 />
                 <CustomInput
                     type={isPasswordShows ? "text" : "password"}
                     register={register}
                     name={rulesValidation.password.fieldName}
                     validateRules={rulesValidation.password.rules}
                     placeholder="Пароль"
-                    required={true}
-                    value={password}
-                    changeValue={setPassword}
                 />
             </fieldset>
             <CustomCheckbox
@@ -58,6 +55,6 @@ const AuthForm: React.FC = () => {
             <input type="submit" className="auth__btn" value="ВОЙТИ"/>
         </form>
     );
-};
+});
 
 export default AuthForm;
diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -4,70 +4,38 @@ import axios from "axios";
 
 class AuthStore {
     isUserAuthorized: boolean = false
-    userRole: string | null = null
-    userLogin: string = ""
-
-    userPassword: string = ""
-    userEmail: string = ""
-    isPasswordShows: boolean = false
+    // userRole: string | null = null
 
     constructor() {
         makeAutoObservable(this)
     }
 
-    changeIsPasswordShows() {
-        this.isPasswordShows = !this.isPasswordShows
-    }
-
-    signInUser() {
-        this.isUserAuthorized = true
-    }
-
     async logOutUser() {
-        this.signOutUser()
-        axios.post("http://localhost:8000/auth/logout").catch(reason => console.log(reason))
-    }
-
-    signOutUser() {
         this.isUserAuthorized = false
+        axios.post("http://localhost:8000/auth/logout").catch(reason => console.log(reason))
     }
 
-    changeUserLogin(newLogin: string) {
-        this.userLogin = newLogin
-    }
-
-    changeUserPassword(newPassword: string) {
-        this.userPassword = newPassword
-    }
-
-    changeUserEmail(newEmail: string) {
-        this.userEmail = newEmail + "@example.com"
-    }
-
-    async signIn() {
+    async signIn(login: string, password: string) {
+        console.log(login, password)
         await axios.post("http://localhost:8000/auth/login", {
-            username: this.userEmail,
-            password: this.userPassword,
+            username: login,
+            password: password,
         }, {
             headers: {
                 'access': 'application/json',
                 'Content-Type': 'application/x-www-form-urlencoded'
             }, withCredentials: true
         })
-            .then(() => this.signInUser())
+            .then(() => this.isUserAuthorized = true)
             .catch(reason => console.log(reason))
     }
 
-    async signUp() {
+    private async signUp(login: string, password: string,) {
         axios.post("http://localhost:8000/auth/register", {
-            username: this.userLogin,
-            email: this.userEmail,
-            password: this.userPassword
-        }).then(r => {
-            console.log(r.data)
-            this.changeUserLogin("")
-            this.changeUserPassword("")
-        }).catch(() => alert("Неправильно введены данные"))
+            username: login,
+            password: password
+        })
+            .catch(() => alert("Неправильно введены данные"))
     }
 }
 

diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
@@ -3,7 +3,7 @@ import {IRuleValidationListType} from "../types/RuleValidationType.ts";
 const rulesValidation: IRuleValidationListType = {
     login:
         {
-            fieldName: "login", rules: {required: true, min: 6, max: 20, pattern: /^[a-zA-Z0-9_]+$/}
+            fieldName: "login", rules: {required: true, min: 6, max: 20}
         },
     password:
         {