LoginPage.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import React from "react";
  2. import FloatingLabel from "react-bootstrap/FloatingLabel";
  3. import Form from "react-bootstrap/Form";
  4. import Button from "react-bootstrap/Button";
  5. import Alert from "react-bootstrap/Alert";
  6. import { useState } from "react";
  7. import { store } from "../reducers/index";
  8. import { actionFullLogin } from "../actions";
  9. import { Link } from "react-router-dom";
  10. import { connect } from "react-redux";
  11. const Login = ({ onLogin }) => {
  12. const [login, setLogin] = useState("");
  13. const [password, setPassword] = useState("");
  14. return (
  15. <div className="formContainerLogin">
  16. <h1 className="textLogin">Login</h1>
  17. <FloatingLabel
  18. controlId="floatingInput"
  19. label="Enter Login"
  20. className="mb-3"
  21. onChange={(e) => {
  22. setLogin(e.target.value);
  23. }}
  24. >
  25. <Form.Control
  26. type="text"
  27. placeholder="text"
  28. className="form-control-editing"
  29. />
  30. </FloatingLabel>
  31. <FloatingLabel
  32. controlId="floatingPassword"
  33. label="Enter Password"
  34. onChange={(e) => {
  35. setPassword(e.target.value);
  36. }}
  37. >
  38. <Form.Control
  39. type="password"
  40. placeholder="Password"
  41. className="form-control-editing"
  42. />
  43. </FloatingLabel>
  44. <div className="d-flex loginForm">
  45. <Button
  46. variant="primary"
  47. type="submit"
  48. className="btn-setting"
  49. onClick={() => {
  50. onLogin(login, password);
  51. }}
  52. disabled={!login || !password}
  53. >
  54. <b>Login</b>
  55. </Button>
  56. <Link to="/registration" className="registerLink alert-link">
  57. Don't have an account? Register
  58. </Link>
  59. </div>
  60. </div>
  61. );
  62. };
  63. export const CLogin = connect(null, { onLogin: actionFullLogin })(Login);