доделал валидацию авторизации

codEnjoyer · Dec 11, 2023 · 93ee7db · 93ee7db
1 parent 3532e0e
commit 93ee7db
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx b/frontend/src/UIComponents/customInput/CustomInput.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
 import "./customInput.scss"
-import {FieldValues, RegisterOptions, UseFormRegister} from "react-hook-form";
+import {RegisterOptions, UseFormRegister} from "react-hook-form";
+import {FormValues} from "../../components/authentication/AuthForm.tsx";
+
 
 interface IPropTypes {
     placeholder?: string,
     type: string,
-    name: string,
+    name?: "login" | "password",
     className?: string,
     autoFocus?: boolean,
     disabled?: boolean,
-    validateRules: RegisterOptions,
+    validateRules?: RegisterOptions,
     width?: string,
     height?: string,
     defaultValue?: string,
-    register: UseFormRegister<FieldValues>,
+    register?: UseFormRegister<FormValues>,
     required?: boolean,
+    value?: string,
 }
 
 const CustomInput: React.FC<IPropTypes> =
@@ -30,7 +33,7 @@ const CustomInput: React.FC<IPropTypes> =
          defaultValue,
          register,
          validateRules,
-        ...inputProps
+         ...inputProps
      }) => {
         return (
             <div className="custom-input" style={{width: width, height: height}}>
@@ -44,7 +47,7 @@ const CustomInput: React.FC<IPropTypes> =
                     disabled={disabled !== undefined ? disabled : false}
                     style={{height: height}}
                     defaultValue={defaultValue}
-                    {...register(name, validateRules)}
+                    {...register !== undefined && name !== undefined ? {...register(name, validateRules)} : ""}
                     {...inputProps}
                 />
                 {/*{error.message && <span className="custom-input__error">{error.message}</span>}*/}

diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -8,50 +8,60 @@ import {useForm} from "react-hook-form";
 
 import {observer} from "mobx-react-lite";
 
-import rulesValidation from "../../utils/auth.ts";
 import authStore from "../../store/authStore.ts";
+import auth from "../../utils/auth.ts";
+
+export type FormValues = {
+    login: string,
+    password: string,
+}
 
 const AuthForm: React.FC = observer(() => {
     const navigateTo = useNavigate()
-    const {register, handleSubmit} = useForm()
+    const {register, handleSubmit} = useForm<FormValues>()
 
     const [isPasswordShows, setIsPasswordShows] = useState(false)
 
     const handleOnChangeIsPasswordShows = useCallback(() => {
         setIsPasswordShows(!isPasswordShows)
     }, [isPasswordShows])
 
-    const onHandleSubmit = useCallback(({login, password}) => {
-        authStore.signIn(login, password).then(() => navigateTo('/map'))
+    const onHandleSubmit = useCallback((data: {login: string, password: string}) => {
+        authStore.signIn(data.login, data.password).then(() => navigateTo('/map'))
+        console.log(data.login, data.password)
     }, [navigateTo])
 
     return (
-        <form className="auth__form" onSubmit={handleSubmit((data) => onHandleSubmit(data))}>
+        <form
+            className="auth__form"
+            onSubmit={handleSubmit((data: FormValues) => onHandleSubmit(data))}
+        >
             <h2 className="auth-form-title">ВХОД</h2>
+
             <fieldset className="auth-fields">
                 <CustomInput
-                    type="email"
+                    type="text"
                     register={register}
-                    name={rulesValidation.login.fieldName}
-                    validateRules={rulesValidation.login.rules}
-                    autoFocus={true}
-                    placeholder="Логин"
+                    name="login"
+                    validateRules={auth.login.rules}
                 />
+
                 <CustomInput
                     type={isPasswordShows ? "text" : "password"}
                     register={register}
-                    name={rulesValidation.password.fieldName}
-                    validateRules={rulesValidation.password.rules}
-                    placeholder="Пароль"
+                    name={auth.password.fieldName}
+                    validateRules={auth.password.rules}
                 />
             </fieldset>
+
             <CustomCheckbox
                 text="Показать пароль"
                 id="is-remember"
                 additionalClassName="is-remember-password__checkbox"
                 handleOnChange={handleOnChangeIsPasswordShows}
                 isChecked={isPasswordShows}
             />
+
             <input type="submit" className="auth__btn" value="ВОЙТИ"/>
         </form>
     );

diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -41,7 +41,7 @@ const MapMenu: React.FC = observer(() => {
 
     return (
         <div>
-            {!user?.is_superuser
+            {user?.is_superuser
                 ? <SuperUserMap/>
                 : <EmployeeMap user={user} formattedDate={formattedDate}/>
             }

diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -4,19 +4,14 @@ import axios from "axios";
 
 class AuthStore {
     isUserAuthorized: boolean = false
+
     // userRole: string | null = null
 
     constructor() {
         makeAutoObservable(this)
     }
 
-    async logOutUser() {
-        this.isUserAuthorized = false
-        axios.post("http://localhost:8000/auth/logout").catch(reason => console.log(reason))
-    }
-
     async signIn(login: string, password: string) {
-        console.log(login, password)
         await axios.post("http://localhost:8000/auth/login", {
             username: login,
             password: password,
@@ -26,10 +21,23 @@ class AuthStore {
                 'Content-Type': 'application/x-www-form-urlencoded'
             }, withCredentials: true
         })
-            .then(() => this.isUserAuthorized = true)
+            .then(() => this.authorize())
             .catch(reason => console.log(reason))
     }
 
+    async logOutUser() {
+        this.unauthorize()
+        axios.post("http://localhost:8000/auth/logout").catch(reason => console.log(reason))
+    }
+
+    private unauthorize = () => {
+        this.isUserAuthorized = false
+    }
+
+    private authorize = () => {
+        this.isUserAuthorized = true
+    }
+
     private async signUp(login: string, password: string,) {
         axios.post("http://localhost:8000/auth/register", {
             username: login,

diff --git a/frontend/src/types/RuleValidationType.ts b/frontend/src/types/RuleValidationType.ts
@@ -6,6 +6,6 @@ export interface IRuleValidationListType {
 }
 
 export interface IRuleValidationType {
-    fieldName: string,
+    fieldName: "login" | "password",
     rules: RegisterOptions<FieldValues, string>
 }