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