Ignore:
Timestamp:
12/12/24 17:06:06 (5 weeks ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
d565449
Message:

Pred finalna verzija

File:
1 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/pages/Login/Login.jsx

    rd565449 r0c6b92a  
    1 import React, { useState } from "react";
    2 import { Link, useNavigate } from "react-router-dom";
     1import React, {useContext, useState} from "react";
     2import {Link, useLocation, useNavigate} from "react-router-dom";
    33import styles from "./Login.module.css";
    44import illustration from "../../assets/illustration_img.png";
     5import Logo from "../../components/Logo/Logo.jsx";
     6import HttpService from "../../scripts/net/HttpService.js";
     7import {useAppContext} from "../../components/AppContext/AppContext.jsx";
     8import config from "../../scripts/net/netconfig.js";
    59
    6 const LoginPage = ({onLogin}) => {
    7   const [username, setUsername] = useState("");
    8   const [password, setPassword] = useState("");
    9   const [error, setError] = useState(null);
    10   const navigate = useNavigate();
     10const LoginPage = () => {
     11    const [formUsername, setFormUsername] = useState("");
     12    const [password, setPassword] = useState("");
     13    const [error, setError] = useState(null);
     14    const navigate = useNavigate();
     15    const location = useLocation();
    1116
    12   const payload = {
    13     username: username,
    14     password: password
    15   };
     17    const {setUsername, setIsAuthenticated} = useAppContext();
    1618
    17   const handleLogin = (e) => {
    18     e.preventDefault();
     19    const {targetPath} = location.state || {targetPath: {pathname: "/"}};
    1920
    20     fetch("http://localhost:8080/api/auth/login", {
    21       method: "POST",
    22       headers: {
    23         "Content-Type": "application/json",
    24       },
    25       body: JSON.stringify(payload),
    26     })
    27       .then((response) => {
    28         if (!response.ok) {
    29           throw new Error("Login failed: resp = " + response.statusText);
    30         }
    31         return response.json();
    32       })
    33       .then((data) => {
    34         if (data.token) {
    35           navigate("/Maps/FinkiMaps/Draw");
    36           onLogin(data.token)
    37         } else {
    38           setError("Invalid username or password.");
    39         }
    40       })
    41       .catch((error) => {
    42         console.error("Login failed", error);
    43         setError("Login failed. Please try again.");
    44       });
    45    
    46   };
     21    const payload = {
     22        username: formUsername,
     23        password: password,
     24    };
    4725
    48   return (
    49     <div className={styles.wrapper}>
    50       <div className={styles.illustration}>
    51         <img src={illustration} alt="illustration" />
    52       </div>
    53       <div className={styles.form}>
    54         <div className={styles.heading}>LOGIN</div>
    55         <form onSubmit={handleLogin}>
    56           <div>
    57             <label htmlFor="username">Username</label>
    58             <input
    59               type="text"
    60               id="name"
    61               placeholder="Enter your username"
    62               onChange={(e) => setUsername(e.target.value)}
    63               value={username}
    64               required
    65             />
    66           </div>
    67           <div>
    68             <label htmlFor="password">Password</label>
    69             <input
    70               type="password"
    71               id="password"
    72               placeholder="Enter your password"
    73               onChange={(e) => setPassword(e.target.value)}
    74               value={password}
    75               required
    76             />
    77           </div>
    78           {error && <p className={styles.error}>{error}</p>}
    79           <button type="submit">Submit</button>
    80         </form>
    81         <p>
    82           Don't have an account? <Link to="/Signup"> Sign Up </Link>
    83         </p>
    84       </div>
    85     </div>
    86   );
     26    const handleLogin = async () => {
     27        const httpService = new HttpService();
     28        return httpService.post(config.auth.login, payload)
     29
     30    };
     31
     32
     33    const login = async (e) => {
     34        e.preventDefault();
     35
     36        handleLogin()
     37            .then(resp => {
     38                if (resp.token) {
     39                    navigate(targetPath)
     40                    localStorage.setItem("token", resp.token);
     41                    setUsername(resp.username);
     42                    setIsAuthenticated(true);
     43                    console.log("ROLES",resp.roles)
     44                } else {
     45                    setError("Invalid username or password.");
     46                }
     47            }).catch(reason => {
     48            console.error("Login failed", reason);
     49            setError("Login failed. Please try again.")
     50        })
     51
     52        // fetch("http://localhost:8080/api/auth/login", {
     53        //   method: "POST",
     54        //   headers: {
     55        //     "Content-Type": "application/json",
     56        //   },
     57        //   body: JSON.stringify(payload),
     58        // })
     59        //   .then((response) => {
     60        //     if (!response.ok) {
     61        //       throw new Error("Login failed: resp = " + response.statusText);
     62        //     }
     63        //     return response.json();
     64        //   })
     65        //   .then((data) => {
     66        //     if (data.token) {
     67        //       navigate(targetPath);
     68        //       handleLogin(data);
     69        //     } else {
     70        //       setError("Invalid username or password.");
     71        //     }
     72        //   })
     73        //   .catch((error) => {
     74        //     console.error("Login failed", error);
     75        //     setError("Login failed. Please try again.");
     76        //   });
     77    };
     78
     79    return (
     80        <div className={styles.wrapper}>
     81            <Logo></Logo>
     82            <div className={styles.illustration}>
     83                <img src={illustration} alt="illustration"/>
     84            </div>
     85            <div className={styles.form}>
     86                <div className={styles.heading}>LOGIN</div>
     87                <form onSubmit={login}>
     88                    <div>
     89                        <label htmlFor="username">Username</label>
     90                        <input
     91                            type="text"
     92                            id="name"
     93                            placeholder="Enter your username"
     94                            onChange={(e) => setFormUsername(e.target.value)}
     95                            value={formUsername}
     96                            required
     97                        />
     98                    </div>
     99                    <div>
     100                        <label htmlFor="password">Password</label>
     101                        <input
     102                            type="password"
     103                            id="password"
     104                            placeholder="Enter your password"
     105                            onChange={(e) => setPassword(e.target.value)}
     106                            value={password}
     107                            required
     108                        />
     109                    </div>
     110                    {error && <p className={styles.error}>{error}</p>}
     111                    <button type="submit">Submit</button>
     112                </form>
     113                <p>
     114                    Don't have an account? <Link to="/Signup"> Sign Up </Link>
     115                </p>
     116            </div>
     117        </div>
     118    );
    87119};
    88120
Note: See TracChangeset for help on using the changeset viewer.