добавляет авторизацию по данным из формы

codEnjoyer · Nov 17, 2023 · e1534be · e1534be
1 parent 4c9df81
commit e1534be
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/frontend/src/components/authentication/Authentication.tsx b/frontend/src/components/authentication/Authentication.tsx
@@ -1,11 +1,10 @@
 import React, {useState} from 'react';
-import {useNavigate} from "react-router-dom";
 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";
-import axios from "axios";
+import {useNavigate} from "react-router-dom";
 
 const Authentication: React.FC = observer(() => {
     const navigateTo = useNavigate()
@@ -15,22 +14,6 @@ const Authentication: React.FC = observer(() => {
         setIsPasswordShow(!isPasswordShows)
     }
 
-
-    const signIn = () => {
-        axios.post("http://localhost:8000/auth/login", {
-            username: "user@example.com",
-            password: "ashdjashdjsahjdhsadsa",
-        })
-            .then(() => authStore.signInUser())
-            .catch((reason) => alert(reason))
-
-        navigateTo('/map')
-    }
-
-    const onHandleChangePassword = (target: string) => {
-        authStore.changeUserPassword(target)
-    }
-
     return (
         <div className="auth-page">
             <form className="auth__form">
@@ -47,18 +30,22 @@ const Authentication: React.FC = observer(() => {
                     <div className="auth-data__field">
                         {isPasswordShows
                             ? <input type="text" className="password__input" value={authStore.userPassword}
-                                     onChange={(e) => onHandleChangePassword(e.target.value)}
+                                     onChange={(e) => authStore.changeUserPassword(e.target.value)}
                                      placeholder="Пароль"/>
                             : <input type="password" className="password__input" value={authStore.userPassword}
-                                     onChange={(e) => onHandleChangePassword(e.target.value)}
+                                     onChange={(e) => authStore.changeUserPassword(e.target.value)}
                                      placeholder="Пароль"/>}
 
                     </div>
                 </fieldset>
                 <CustomCheckbox text="Показать пароль" id="is-remember"
                                 additionalClassName="is-remember-password__checkbox"
                                 handleOnChange={changeShowPassword}/>
-                <CustomButton additionalClassName="auth__btn" text="ВОЙТИ" handleOnClick={signIn}/>
+                <CustomButton additionalClassName="auth__btn" text="ВОЙТИ111" handleOnClick={() => {
+                    authStore.signIn().then(() => navigateTo('/map'))
+                }}/>
+                <CustomButton additionalClassName="auth__btn" text="ЗАРЕГИСТРИРОВАТЬСЯ"
+                              handleOnClick={authStore.signUp}/>
             </form>
             <CustomButton text="Вернуться обратно" handleOnClick={() => navigateTo('/')}></CustomButton>
         </div>

diff --git a/frontend/src/routes/AppRouter.tsx b/frontend/src/routes/AppRouter.tsx
@@ -22,6 +22,11 @@ const AppRouter: React.FC = observer(() => {
     ]
 
     const privateRoutes: RouteType[] = [
+        {
+            id: 2,
+            element: <Authentication/>,
+            path: "/login",
+        },
         {
             id: 3,
             element: <MapMenu/>,

diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -1,4 +1,6 @@
 import {makeAutoObservable} from "mobx";
+import axios from "axios";
+
 
 class AuthStore {
     isUserAuthorized: boolean = false
@@ -24,6 +26,32 @@ class AuthStore {
     changeUserPassword(newPassword: string) {
         this.userPassword = newPassword
     }
+
+    async signIn() {
+        this.signInUser()
+        axios.post("http://localhost:8000/auth/login", {
+            username: this.userLogin,
+            password: this.userPassword,
+        })
+            .then((resp) => {
+                console.log(resp.data)
+                this.signInUser()
+            })
+            .catch((reason) => {
+                alert(reason)
+                this.signOutUser()
+            })
+    }
+
+    signUp() {
+        axios.post("http://localhost:8000/auth/register", {
+            username: this.userLogin,
+            email: this.userLogin + "@example.com",
+            password: this.userPassword
+        })
+            .then(r => console.log(r.data))
+            .catch(reason => console.log(reason))
+    }
 }
 
 export default new AuthStore()