source: reactapp/src/Pages/Registration.js@ 8dffe02

main
Last change on this file since 8dffe02 was c68150f, checked in by unknown <mlviktor23@…>, 2 years ago

left: moderation, oAuth, messaging

  • Property mode set to 100644
File size: 5.6 KB
Line 
1import React, { useRef, useState, useEffect, useContext } from "react";
2import axios from "../api/axios";
3import {
4 FieldConstraintModal,
5 LoginButton,
6 LoginInput,
7 RequiredAsterisk,
8} from "../Components/Styled/Login.style";
9import { Navigate } from "react-router-dom";
10import AuthApi from "../api/AuthApi";
11const REGISTRATION_URL = "/registration";
12
13const Registration = () => {
14 const { auth, setAuth } = useContext(AuthApi);
15 const userRef = useRef();
16 const errRef = useRef();
17
18 const [fullName, setFullName] = useState("");
19 const [username, setUsername] = useState("");
20 const [email, setEmail] = useState("");
21 const [password, setPassword] = useState("");
22 const [errMsg, setErrMsg] = useState("");
23
24 const [registrationSuccessful, setRegistrationSuccessful] = useState(false);
25
26 useEffect(() => {
27 userRef.current.focus();
28 }, []);
29
30 const handleSubmit = async (e) => {
31 e.preventDefault();
32
33 try {
34 const response = await axios(REGISTRATION_URL, {
35 method: "post",
36 headers: { "Content-Type": "application/json" },
37 data: {
38 fullName: fullName,
39 username: username,
40 email: email,
41 password: password,
42 },
43 });
44 setRegistrationSuccessful(true);
45 } catch (error) {
46 setErrMsg("Некои од полињата се неправилни.");
47 }
48 };
49
50 const [FieldConstraintModalOpacity1, setFieldConstraintModalOpacity1] =
51 useState(0);
52 const [FieldConstraintModalOpacity2, setFieldConstraintModalOpacity2] =
53 useState(0);
54
55 return auth ? (
56 <Navigate to="/user_dashboard" />
57 ) : registrationSuccessful === false ? (
58 <div
59 style={{
60 marginTop: "140px",
61 display: "flex",
62 alignItems: "center",
63 flexFlow: "column",
64 width: "fit-content",
65 margin: "auto",
66 border: "2px solid lightgrey",
67 padding: "25px",
68 boxShadow: "2px 2px 6px #aaaaaa",
69 marginBottom: "80px",
70 position: "relative",
71 }}
72 >
73 <h2>Регистрација</h2>
74 <form
75 onSubmit={handleSubmit}
76 style={{
77 display: "flex",
78 flexDirection: "column",
79 alignItems: "center",
80 width: "400px",
81 }}
82 >
83 <LoginInput
84 type="text"
85 id="fullName"
86 ref={userRef}
87 autoComplete="off"
88 onChange={(e) => setFullName(e.target.value)}
89 value={fullName}
90 placeholder="Име"
91 maxLength={42}
92 />
93 <LoginInput
94 type="text"
95 id="username"
96 autoComplete="off"
97 onChange={(e) => setUsername(e.target.value)}
98 value={username}
99 required
100 placeholder="Корисничко име"
101 maxLength={42}
102 onFocus={(e) => {
103 setFieldConstraintModalOpacity1(1);
104 }}
105 onBlur={(e) => {
106 setFieldConstraintModalOpacity1(0);
107 }}
108 />
109 <RequiredAsterisk top="142px">*</RequiredAsterisk>
110 <LoginInput
111 type="text"
112 id="email"
113 autoComplete="off"
114 onChange={(e) => setEmail(e.target.value)}
115 value={email}
116 required
117 placeholder="Email"
118 maxLength={42}
119 />
120 <RequiredAsterisk top="206px">*</RequiredAsterisk>
121 <LoginInput
122 type="password"
123 id="password"
124 onChange={(e) => setPassword(e.target.value)}
125 value={password}
126 placeholder="Лозинка"
127 required
128 maxLength={36}
129 onFocus={(e) => {
130 setFieldConstraintModalOpacity2(1);
131 }}
132 onBlur={(e) => {
133 setFieldConstraintModalOpacity2(0);
134 }}
135 />
136 <RequiredAsterisk top="270px">*</RequiredAsterisk>
137 <p style={{ marginBottom: "10px", marginTop: "5px", fontSize: "14px" }}>
138 Означените полиња се задолжителни.
139 </p>
140 <LoginButton>Регистрирај се</LoginButton>
141 <p
142 ref={errRef}
143 className={errMsg ? "errmsg" : "offscreen"}
144 style={{ color: "red", marginTop: "20px" }}
145 >
146 {errMsg}
147 </p>
148 </form>
149
150 <FieldConstraintModal
151 opacity={FieldConstraintModalOpacity1}
152 right="-420px"
153 top="100px"
154 >
155 Корисничкото име мора да е составено од 6-30 алфанумерички знаци и долни
156 црти (_) и мора да започнува со буква.
157 </FieldConstraintModal>
158
159 <FieldConstraintModal
160 opacity={FieldConstraintModalOpacity2}
161 right="-420px"
162 top="230px"
163 >
164 Лозинката мора да биде долга 8-20 знаци и да содржи барем една цифра,
165 една голема, една мала буква и еден од знаците !@#$%&*()-+=^.
166 </FieldConstraintModal>
167 </div>
168 ) : (
169 <div
170 style={{
171 marginTop: "140px",
172 display: "flex",
173 alignItems: "center",
174 flexFlow: "column",
175 width: "fit-content",
176 margin: "auto",
177 border: "2px solid lightgrey",
178 padding: "25px",
179 boxShadow: "2px 2px 6px #aaaaaa",
180 marginBottom: "80px",
181 position: "relative",
182 }}
183 >
184 <p>
185 Успешна регистрација! На <b>{email}</b> е испратен токен за потврда на
186 сметката.
187 </p>
188 <a href="/login" style={{ marginTop: "15px" }}>
189 Оди на најава
190 </a>
191 </div>
192 );
193};
194
195export default Registration;
Note: See TracBrowser for help on using the repository browser.