1 | import React, {useState} from 'react';
|
---|
2 | import {useNavigate} from 'react-router-dom';
|
---|
3 | const AUTH_TOKEN = 'auth_token';
|
---|
4 |
|
---|
5 | const loginForm = (props) => {
|
---|
6 | const[auth, setAuth] = useState({});
|
---|
7 | const navigate = useNavigate();
|
---|
8 |
|
---|
9 | const login = (e) => {
|
---|
10 | const auth = {
|
---|
11 | "username":e.target.username.value,
|
---|
12 | "password":e.target.password.value
|
---|
13 | }
|
---|
14 |
|
---|
15 | props.login(auth, (response) => {
|
---|
16 | debugger;
|
---|
17 | localStorage.setItem(AUTH_TOKEN, response.data)
|
---|
18 | navigate("/");
|
---|
19 | })
|
---|
20 | }
|
---|
21 |
|
---|
22 | const onChangeHandler = (e) => {
|
---|
23 | const name = e.target.name;
|
---|
24 | const value = e.target.value;
|
---|
25 | setAuth({name:value});
|
---|
26 | }
|
---|
27 |
|
---|
28 | return (
|
---|
29 | <div>
|
---|
30 | <form onSubmit={login}>
|
---|
31 | <div className="row form-group">
|
---|
32 | <div className="col-md-6 font-weight-bold"> Корисничко име:</div>
|
---|
33 | <div className="col-md-6">
|
---|
34 | <input name={"username"} onChange={onChangeHandler} defaultValue={auth.username} type="text"
|
---|
35 | className="form-control"/>
|
---|
36 | </div>
|
---|
37 | </div>
|
---|
38 | <div className="row form-group">
|
---|
39 | <div className="col-md-6 font-weight-bold"> Лозинка:</div>
|
---|
40 | <div className="col-md-6">
|
---|
41 | <input name={"password"} onChange={onChangeHandler} defaultValue={auth.password} type="password"
|
---|
42 | className="form-control"
|
---|
43 | title="Лозинка"/>
|
---|
44 | </div>
|
---|
45 | </div>
|
---|
46 | <div className="col-md-12 text-right">
|
---|
47 |
|
---|
48 | <button type="submit" className="btn btn-primary" title="Зачувај">
|
---|
49 | <i className="fa fa-fw fa-user"></i> Логин
|
---|
50 | </button>
|
---|
51 | </div>
|
---|
52 | </form>
|
---|
53 | </div>
|
---|
54 | )
|
---|
55 | }
|
---|
56 |
|
---|
57 | export default loginForm; |
---|