1 | import Axios from "axios";
|
---|
2 | import Container from "react-bootstrap/Container";
|
---|
3 | import Form from "react-bootstrap/Form";
|
---|
4 | import { Helmet } from "react-helmet-async";
|
---|
5 | import Button from "react-bootstrap/Button";
|
---|
6 | import "../styles/SigninScreen.css";
|
---|
7 | import React, { useContext, useEffect, useState } from "react";
|
---|
8 | import { Link, useLocation, useNavigate } from "react-router-dom";
|
---|
9 | import { Store } from "../Store";
|
---|
10 | import { toast } from "react-toastify";
|
---|
11 | import { getError } from "../components/utils";
|
---|
12 |
|
---|
13 | function SignupScreen() {
|
---|
14 | const navigate = useNavigate();
|
---|
15 | const { search } = useLocation();
|
---|
16 | const redirectInUrl = new URLSearchParams(search).get("redirect");
|
---|
17 | const redirect = redirectInUrl ? redirectInUrl : "/";
|
---|
18 |
|
---|
19 | const [name, setName] = useState("");
|
---|
20 | const [contact, setContact] = useState("");
|
---|
21 | const [email, setEmail] = useState("");
|
---|
22 | const [password, setPassword] = useState("");
|
---|
23 | const [confirmPassword, setConfirmPassword] = useState("");
|
---|
24 |
|
---|
25 | const { state, dispatch: ctxDispatch } = useContext(Store);
|
---|
26 | const { userInfo } = state;
|
---|
27 |
|
---|
28 | const submitHandler = async (e) => {
|
---|
29 | e.preventDefault();
|
---|
30 | if (password !== confirmPassword) {
|
---|
31 | toast.error("Лозинките не се совпаѓаат");
|
---|
32 | return;
|
---|
33 | }
|
---|
34 | try {
|
---|
35 | const { data } = await Axios.post("/api/users/signup", {
|
---|
36 | name,
|
---|
37 | contact,
|
---|
38 | email,
|
---|
39 | password,
|
---|
40 | });
|
---|
41 | ctxDispatch({ type: "USER_SIGNIN", payload: data });
|
---|
42 | localStorage.setItem("userInfo", JSON.stringify(data));
|
---|
43 | navigate(redirect || "/");
|
---|
44 | } catch (err) {
|
---|
45 | toast.error(getError(err));
|
---|
46 | }
|
---|
47 | };
|
---|
48 |
|
---|
49 | useEffect(() => {
|
---|
50 | if (userInfo) {
|
---|
51 | navigate(redirect);
|
---|
52 | }
|
---|
53 | }, [navigate, redirect, userInfo]);
|
---|
54 |
|
---|
55 | return (
|
---|
56 | <div className="pageContainer">
|
---|
57 | <Container className="main">
|
---|
58 | <Helmet>
|
---|
59 | <title>Регистрирај се</title>
|
---|
60 | </Helmet>
|
---|
61 | <h1>Регистрирај се</h1>
|
---|
62 | <Form className="formCointainer" onSubmit={submitHandler}>
|
---|
63 | <Form.Group controlId="name">
|
---|
64 | <Form.Label>Име и Презиме</Form.Label>
|
---|
65 | <Form.Control
|
---|
66 | style={{ textAlign: "left" }}
|
---|
67 | required
|
---|
68 | onChange={(e) => setName(e.target.value)}
|
---|
69 | />
|
---|
70 | </Form.Group>
|
---|
71 | <Form.Group controlId="contact">
|
---|
72 | <Form.Label>Телефон</Form.Label>
|
---|
73 | <Form.Control
|
---|
74 | type="text"
|
---|
75 | required
|
---|
76 | onChange={(e) => setContact(e.target.value)}
|
---|
77 | />
|
---|
78 | </Form.Group>
|
---|
79 | <Form.Group controlId="email">
|
---|
80 | <Form.Label>Email</Form.Label>
|
---|
81 | <Form.Control
|
---|
82 | type="email"
|
---|
83 | required
|
---|
84 | onChange={(e) => setEmail(e.target.value)}
|
---|
85 | />
|
---|
86 | </Form.Group>
|
---|
87 | <Form.Group controlId="password">
|
---|
88 | <Form.Label>Лозинка</Form.Label>
|
---|
89 | <Form.Control
|
---|
90 | type="password"
|
---|
91 | required
|
---|
92 | onChange={(e) => setPassword(e.target.value)}
|
---|
93 | />
|
---|
94 | </Form.Group>
|
---|
95 | <Form.Group controlId="confirmPassword">
|
---|
96 | <Form.Label>Потврди Лозинка</Form.Label>
|
---|
97 | <Form.Control
|
---|
98 | type="password"
|
---|
99 | required
|
---|
100 | onChange={(e) => setConfirmPassword(e.target.value)}
|
---|
101 | />
|
---|
102 | </Form.Group>
|
---|
103 | <div className="submitBtnContainer">
|
---|
104 | <Button variant="danger" size="lg" type="submit">
|
---|
105 | Регистрирај се
|
---|
106 | </Button>
|
---|
107 | </div>
|
---|
108 | <div className="registerParagraph">
|
---|
109 | Имате профил?{" "}
|
---|
110 | <Link to={`/signin?redirect=${redirect}`}>Најави се</Link>
|
---|
111 | </div>
|
---|
112 | </Form>
|
---|
113 | </Container>
|
---|
114 | </div>
|
---|
115 | );
|
---|
116 | }
|
---|
117 |
|
---|
118 | export default SignupScreen;
|
---|