[800779d] | 1 | import React, { useRef, useState, useEffect } from "react";
|
---|
| 2 | import axios from "../api/axios";
|
---|
| 3 | const LOGIN_URL = "/login";
|
---|
| 4 |
|
---|
| 5 | const Login = () => {
|
---|
| 6 | const userRef = useRef();
|
---|
| 7 | const errRef = useRef();
|
---|
| 8 |
|
---|
| 9 | const [username, setUsername] = useState("");
|
---|
| 10 | const [password, setPassword] = useState("");
|
---|
| 11 | const [errMsg, setErrMsg] = useState("");
|
---|
| 12 | const [success, setSuccess] = useState(false);
|
---|
| 13 |
|
---|
| 14 | useEffect(() => {
|
---|
| 15 | userRef.current.focus();
|
---|
| 16 | }, []);
|
---|
| 17 |
|
---|
| 18 | useEffect(() => {
|
---|
| 19 | setErrMsg("");
|
---|
| 20 | }, [username, password]);
|
---|
| 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 | );
|
---|
| 35 | setUsername("");
|
---|
| 36 | setPassword("");
|
---|
| 37 | setSuccess(true);
|
---|
| 38 | };
|
---|
| 39 |
|
---|
| 40 | return success ? (
|
---|
| 41 | <div style={{ marginTop: "140px" }}>
|
---|
| 42 | <h1>Успешна најава!</h1>
|
---|
| 43 | <br />
|
---|
| 44 | <p>
|
---|
| 45 | <a href="/">Оди на почетната страница</a>
|
---|
| 46 | </p>
|
---|
| 47 | </div>
|
---|
| 48 | ) : (
|
---|
| 49 | <div style={{ marginTop: "140px" }}>
|
---|
| 50 | <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"}>
|
---|
| 51 | {errMsg}
|
---|
| 52 | </p>
|
---|
| 53 | <h1>Најава</h1>
|
---|
| 54 | <form onSubmit={handleSubmit}>
|
---|
| 55 | <label htmlFor="username">E-mail:</label>
|
---|
| 56 | <input
|
---|
| 57 | type="text"
|
---|
| 58 | id="username"
|
---|
| 59 | ref={userRef}
|
---|
| 60 | autoComplete="off"
|
---|
| 61 | onChange={(e) => setUsername(e.target.value)}
|
---|
| 62 | value={username}
|
---|
| 63 | required
|
---|
| 64 | />
|
---|
| 65 | <label htmlFor="password">Лозинка:</label>
|
---|
| 66 | <input
|
---|
| 67 | type="password"
|
---|
| 68 | id="password"
|
---|
| 69 | onChange={(e) => setPassword(e.target.value)}
|
---|
| 70 | value={password}
|
---|
| 71 | required
|
---|
| 72 | />
|
---|
| 73 | <button>Најави се</button>
|
---|
| 74 | </form>
|
---|
| 75 | </div>
|
---|
| 76 | );
|
---|
| 77 | };
|
---|
| 78 |
|
---|
| 79 | export default Login;
|
---|