[6eba109] | 1 | import React, { useRef, useState, useEffect, useContext } from "react";
|
---|
| 2 | import { Navigate } from "react-router-dom";
|
---|
| 3 | import AuthApi from "../api/AuthApi";
|
---|
[800779d] | 4 | import axios from "../api/axios";
|
---|
[6eba109] | 5 | import Cookies from "js-cookie";
|
---|
[cae16b5] | 6 | import { LoginButton, LoginInput } from "../Components/Styled/Login.style";
|
---|
[800779d] | 7 | const LOGIN_URL = "/login";
|
---|
| 8 |
|
---|
| 9 | const Login = () => {
|
---|
[6eba109] | 10 | const { auth, setAuth } = useContext(AuthApi);
|
---|
[800779d] | 11 | const userRef = useRef();
|
---|
| 12 | const errRef = useRef();
|
---|
| 13 |
|
---|
| 14 | const [username, setUsername] = useState("");
|
---|
| 15 | const [password, setPassword] = useState("");
|
---|
| 16 | const [errMsg, setErrMsg] = useState("");
|
---|
| 17 |
|
---|
| 18 | useEffect(() => {
|
---|
[af801e3] | 19 | if (!auth) userRef.current.focus();
|
---|
[800779d] | 20 | }, []);
|
---|
| 21 |
|
---|
| 22 | const handleSubmit = async (e) => {
|
---|
| 23 | e.preventDefault();
|
---|
| 24 |
|
---|
| 25 | const response = await axios.post(
|
---|
| 26 | LOGIN_URL,
|
---|
| 27 | `username=${username}&password=${password}`,
|
---|
| 28 | {
|
---|
| 29 | headers: {
|
---|
| 30 | "content-type": "application/x-www-form-urlencoded",
|
---|
| 31 | withCredentials: true,
|
---|
| 32 | },
|
---|
| 33 | }
|
---|
| 34 | );
|
---|
[6eba109] | 35 | if (!response.request.responseURL.includes("error")) {
|
---|
| 36 | // ako NE redirektira na /login?error
|
---|
[c68150f] | 37 | var in30Minutes = 1 / 48;
|
---|
| 38 | Cookies.set("JSESSIONID", response.data.sessionId, {
|
---|
| 39 | expires: in30Minutes,
|
---|
| 40 | });
|
---|
[6eba109] | 41 | setAuth(true);
|
---|
| 42 | setErrMsg("");
|
---|
| 43 | } else {
|
---|
| 44 | setErrMsg("Погрешно корисиничко име и/или лозинка");
|
---|
| 45 | }
|
---|
| 46 |
|
---|
[800779d] | 47 | setUsername("");
|
---|
| 48 | setPassword("");
|
---|
| 49 | };
|
---|
| 50 |
|
---|
[6eba109] | 51 | return auth ? (
|
---|
[702ca77] | 52 | <Navigate to="/user_dashboard" />
|
---|
[800779d] | 53 | ) : (
|
---|
[cae16b5] | 54 | <div
|
---|
| 55 | style={{
|
---|
| 56 | marginTop: "140px",
|
---|
| 57 | display: "flex",
|
---|
| 58 | alignItems: "center",
|
---|
| 59 | flexFlow: "column",
|
---|
| 60 | width: "fit-content",
|
---|
| 61 | margin: "auto",
|
---|
| 62 | border: "2px solid lightgrey",
|
---|
| 63 | padding: "25px",
|
---|
| 64 | boxShadow: "2px 2px 6px #aaaaaa",
|
---|
| 65 | marginBottom: "80px",
|
---|
| 66 | }}
|
---|
| 67 | >
|
---|
| 68 | <h2>Најава</h2>
|
---|
| 69 | <form
|
---|
| 70 | onSubmit={handleSubmit}
|
---|
| 71 | style={{
|
---|
| 72 | display: "flex",
|
---|
| 73 | flexDirection: "column",
|
---|
| 74 | alignItems: "center",
|
---|
| 75 | width: "400px",
|
---|
| 76 | }}
|
---|
| 77 | >
|
---|
| 78 | <LoginInput
|
---|
[800779d] | 79 | type="text"
|
---|
| 80 | id="username"
|
---|
| 81 | ref={userRef}
|
---|
| 82 | autoComplete="off"
|
---|
| 83 | onChange={(e) => setUsername(e.target.value)}
|
---|
| 84 | value={username}
|
---|
| 85 | required
|
---|
[cae16b5] | 86 | placeholder="Email"
|
---|
[800779d] | 87 | />
|
---|
[cae16b5] | 88 | <LoginInput
|
---|
[800779d] | 89 | type="password"
|
---|
| 90 | id="password"
|
---|
| 91 | onChange={(e) => setPassword(e.target.value)}
|
---|
| 92 | value={password}
|
---|
[cae16b5] | 93 | placeholder="Лозинка"
|
---|
[800779d] | 94 | required
|
---|
| 95 | />
|
---|
[cae16b5] | 96 | <LoginButton>Најави се</LoginButton>
|
---|
| 97 | <p
|
---|
| 98 | ref={errRef}
|
---|
| 99 | className={errMsg ? "errmsg" : "offscreen"}
|
---|
| 100 | style={{ color: "red", marginTop: "20px" }}
|
---|
| 101 | >
|
---|
| 102 | {errMsg}
|
---|
| 103 | </p>
|
---|
[800779d] | 104 | </form>
|
---|
[cae16b5] | 105 | <p style={{ marginTop: "20px" }}>
|
---|
| 106 | Немаш сметка? <a href="/registration">Регистрирај се</a>{" "}
|
---|
| 107 | </p>
|
---|
[800779d] | 108 | </div>
|
---|
| 109 | );
|
---|
| 110 | };
|
---|
| 111 |
|
---|
| 112 | export default Login;
|
---|