[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import { Container, Form, Button } from "react-bootstrap";
|
---|
| 3 | import { AiFillLock } from "react-icons/ai";
|
---|
| 4 | import useFormData from "../Hooks/useFormData";
|
---|
| 5 | import useLogin from "../Hooks/User/useLogin";
|
---|
| 6 | import { Link } from "react-router-dom";
|
---|
| 7 |
|
---|
| 8 | const LoginForm = () => {
|
---|
| 9 | const { formData, onFormChange, onCheckBoxChange, setFormData } = useFormData(
|
---|
| 10 | {
|
---|
| 11 | email: "",
|
---|
| 12 | password: "",
|
---|
| 13 | }
|
---|
| 14 | );
|
---|
| 15 |
|
---|
| 16 | const { login } = useLogin();
|
---|
| 17 |
|
---|
| 18 | return (
|
---|
| 19 | <Container
|
---|
| 20 | className="rounded-5 m-5 my-auto mx-auto py-5 px-5"
|
---|
| 21 | style={{ backgroundColor: "#ffffff" }}
|
---|
| 22 | >
|
---|
| 23 | <Form>
|
---|
| 24 | <Form.Group className="mb-3" controlId="formBasicEmail">
|
---|
| 25 | <Form.Label>Е-адреса</Form.Label>
|
---|
| 26 | <Form.Control
|
---|
| 27 | type="email"
|
---|
| 28 | placeholder="Enter email"
|
---|
| 29 | name="email"
|
---|
| 30 | onChange={onFormChange}
|
---|
| 31 | value={formData.email}
|
---|
| 32 | />
|
---|
| 33 | <Form.Text className="text-muted">
|
---|
| 34 | Вашите податоци никогаш нема да бидат споделени.
|
---|
| 35 | </Form.Text>
|
---|
| 36 | </Form.Group>
|
---|
| 37 |
|
---|
| 38 | <Form.Group className="mb-3" controlId="formBasicPassword">
|
---|
| 39 | <Form.Label>Лозинка</Form.Label>
|
---|
| 40 | <Form.Control
|
---|
| 41 | type="password"
|
---|
| 42 | placeholder="Password"
|
---|
| 43 | name="password"
|
---|
| 44 | onChange={onFormChange}
|
---|
| 45 | value={formData.password}
|
---|
| 46 | />
|
---|
| 47 | </Form.Group>
|
---|
| 48 | <Form.Group className="mb-3" controlId="formBasicCheckbox">
|
---|
| 49 | <Form.Check type="checkbox" label="Check me out" />
|
---|
| 50 | </Form.Group>
|
---|
| 51 | <Link to={"/register"} style={{textDecoration: "none"}}>
|
---|
| 52 | <Form.Text className="text-muted" style={{color: "#159895!important"}} >
|
---|
| 53 | Регистритрај се
|
---|
| 54 | </Form.Text>
|
---|
| 55 | </Link>
|
---|
| 56 | <Form.Group className="my-1">
|
---|
| 57 | <Button
|
---|
| 58 | type="submit"
|
---|
| 59 | style={{ backgroundColor: "#159895" }}
|
---|
| 60 | size="md"
|
---|
| 61 | onClick={(e) => {
|
---|
| 62 | e.preventDefault();
|
---|
| 63 | console.log(formData);
|
---|
| 64 | login(formData)
|
---|
| 65 | }}
|
---|
| 66 | >
|
---|
| 67 | <span className="ikona my-1">
|
---|
| 68 | <AiFillLock />
|
---|
| 69 | </span>
|
---|
| 70 | <span className="ikona mx-3">Најави се</span>
|
---|
| 71 | </Button>
|
---|
| 72 | </Form.Group>
|
---|
| 73 | </Form>
|
---|
| 74 | </Container>
|
---|
| 75 | );
|
---|
| 76 | };
|
---|
| 77 |
|
---|
| 78 | export default LoginForm;
|
---|