Index: reactapp/src/App.js
===================================================================
--- reactapp/src/App.js	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ reactapp/src/App.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -2,4 +2,5 @@
 import SearchResults from "./Pages/SearchResults";
 import Login from "./Pages/Login";
+import Registration from "./Pages/Registration";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Home from "./Pages/Home";
@@ -37,5 +38,5 @@
     const session = Cookies.get("JSESSIONID");
     if (session) {
-      setAuth(true); // go stava true ako postoi takvo cookie (zasto auth=false na sekoe renderiranje)
+      setAuth(true);
       fetchUser();
     } else {
@@ -69,4 +70,5 @@
           >
             <Route path="login" element={<Login />}></Route>
+            <Route path="registration" element={<Registration />}></Route>
             <Route path="professor">
               <Route
Index: reactapp/src/Components/OpinionTree.js
===================================================================
--- reactapp/src/Components/OpinionTree.js	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ reactapp/src/Components/OpinionTree.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -105,5 +105,5 @@
       {
         method: "post",
-        data: {
+        body: {
           content: replyContent,
         },
Index: reactapp/src/Components/Styled/Login.style.js
===================================================================
--- reactapp/src/Components/Styled/Login.style.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/Components/Styled/Login.style.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const LoginInput = styled.input`
+  height: 30px;
+  width: 100%;
+  margin: 15px;
+  padding: 15px;
+  font-size: 16px;
+  border: 2px solid #ccc;
+`;
+
+export const LoginButton = styled.button`
+  background-color: rgba(0, 102, 204, 1);
+  opacity: 0.6;
+  padding: 5px 16px;
+  transition: 0.4s;
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+  color: white;
+  border: 0;
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 10px;
+  width: 100%;
+`;
+
+export const RequiredAsterisk = styled.p`
+  color: rgba(0, 102, 204, 1);
+  font-weight: bold;
+  position: absolute;
+  right: 38px;
+  top: ${(props) => props.top};
+  font-size: 18px;
+`;
+
+export const FieldConstraintModal = styled.div`
+  width: 400px;
+  padding: 15px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: block;
+  transition: opacity 0.4s ease-out;
+  opacity: ${(props) => props.opacity};
+  position: absolute;
+  right: ${(props) => props.right};
+  top: ${(props) => props.top};
+`;
Index: reactapp/src/Components/Styled/Main.style.js
===================================================================
--- reactapp/src/Components/Styled/Main.style.js	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ reactapp/src/Components/Styled/Main.style.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -12,4 +12,5 @@
   padding-bottom: 30px;
   width: 80%;
+  box-shadow: 2px 2px 10px #aaaaaa;
 `;
 
Index: reactapp/src/Pages/Login.js
===================================================================
--- reactapp/src/Pages/Login.js	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ reactapp/src/Pages/Login.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -4,4 +4,5 @@
 import axios from "../api/axios";
 import Cookies from "js-cookie";
+import { LoginButton, LoginInput } from "../Components/Styled/Login.style";
 const LOGIN_URL = "/login";
 
@@ -48,12 +49,29 @@
     <Navigate to="/user_dashboard" />
   ) : (
-    <div style={{ marginTop: "140px" }}>
-      <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"}>
-        {errMsg}
-      </p>
-      <h1>Најава</h1>
-      <form onSubmit={handleSubmit}>
-        <label htmlFor="username">E-mail:</label>
-        <input
+    <div
+      style={{
+        marginTop: "140px",
+        display: "flex",
+        alignItems: "center",
+        flexFlow: "column",
+        width: "fit-content",
+        margin: "auto",
+        border: "2px solid lightgrey",
+        padding: "25px",
+        boxShadow: "2px 2px 6px #aaaaaa",
+        marginBottom: "80px",
+      }}
+    >
+      <h2>Најава</h2>
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          width: "400px",
+        }}
+      >
+        <LoginInput
           type="text"
           id="username"
@@ -63,15 +81,26 @@
           value={username}
           required
+          placeholder="Email"
         />
-        <label htmlFor="password">Лозинка:</label>
-        <input
+        <LoginInput
           type="password"
           id="password"
           onChange={(e) => setPassword(e.target.value)}
           value={password}
+          placeholder="Лозинка"
           required
         />
-        <button>Најави се</button>
+        <LoginButton>Најави се</LoginButton>
+        <p
+          ref={errRef}
+          className={errMsg ? "errmsg" : "offscreen"}
+          style={{ color: "red", marginTop: "20px" }}
+        >
+          {errMsg}
+        </p>
       </form>
+      <p style={{ marginTop: "20px" }}>
+        Немаш сметка? <a href="/registration">Регистрирај се</a>{" "}
+      </p>
     </div>
   );
Index: reactapp/src/Pages/Registration.js
===================================================================
--- reactapp/src/Pages/Registration.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/Pages/Registration.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -0,0 +1,190 @@
+import React, { useRef, useState, useEffect } from "react";
+import axios from "../api/axios";
+import {
+  FieldConstraintModal,
+  LoginButton,
+  LoginInput,
+  RequiredAsterisk,
+} from "../Components/Styled/Login.style";
+const REGISTRATION_URL = "/registration";
+
+const Registration = () => {
+  const userRef = useRef();
+  const errRef = useRef();
+
+  const [fullName, setFullName] = useState("");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errMsg, setErrMsg] = useState("");
+
+  const [registrationSuccessful, setRegistrationSuccessful] = useState(false);
+
+  useEffect(() => {
+    userRef.current.focus();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await axios(REGISTRATION_URL, {
+        method: "post",
+        headers: { "Content-Type": "application/json" },
+        data: {
+          fullName: fullName,
+          username: username,
+          email: email,
+          password: password,
+        },
+      });
+      setRegistrationSuccessful(true);
+    } catch (error) {
+      setErrMsg("Некои од полињата се неправилни.");
+    }
+  };
+
+  const [FieldConstraintModalOpacity1, setFieldConstraintModalOpacity1] =
+    useState(0);
+  const [FieldConstraintModalOpacity2, setFieldConstraintModalOpacity2] =
+    useState(0);
+
+  return registrationSuccessful === false ? (
+    <div
+      style={{
+        marginTop: "140px",
+        display: "flex",
+        alignItems: "center",
+        flexFlow: "column",
+        width: "fit-content",
+        margin: "auto",
+        border: "2px solid lightgrey",
+        padding: "25px",
+        boxShadow: "2px 2px 6px #aaaaaa",
+        marginBottom: "80px",
+        position: "relative",
+      }}
+    >
+      <h2>Регистрација</h2>
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          width: "400px",
+        }}
+      >
+        <LoginInput
+          type="text"
+          id="fullName"
+          ref={userRef}
+          autoComplete="off"
+          onChange={(e) => setFullName(e.target.value)}
+          value={fullName}
+          placeholder="Име"
+          maxLength={42}
+        />
+        <LoginInput
+          type="text"
+          id="username"
+          autoComplete="off"
+          onChange={(e) => setUsername(e.target.value)}
+          value={username}
+          required
+          placeholder="Корисничко име"
+          maxLength={42}
+          onFocus={(e) => {
+            setFieldConstraintModalOpacity1(1);
+          }}
+          onBlur={(e) => {
+            setFieldConstraintModalOpacity1(0);
+          }}
+        />
+        <RequiredAsterisk top="142px">*</RequiredAsterisk>
+        <LoginInput
+          type="text"
+          id="email"
+          autoComplete="off"
+          onChange={(e) => setEmail(e.target.value)}
+          value={email}
+          required
+          placeholder="Email"
+          maxLength={42}
+        />
+        <RequiredAsterisk top="206px">*</RequiredAsterisk>
+        <LoginInput
+          type="password"
+          id="password"
+          onChange={(e) => setPassword(e.target.value)}
+          value={password}
+          placeholder="Лозинка"
+          required
+          maxLength={36}
+          onFocus={(e) => {
+            setFieldConstraintModalOpacity2(1);
+          }}
+          onBlur={(e) => {
+            setFieldConstraintModalOpacity2(0);
+          }}
+        />
+        <RequiredAsterisk top="270px">*</RequiredAsterisk>
+        <p style={{ marginBottom: "10px", marginTop: "5px", fontSize: "14px" }}>
+          Означените полиња се задолжителни.
+        </p>
+        <LoginButton>Регистрирај се</LoginButton>
+        <p
+          ref={errRef}
+          className={errMsg ? "errmsg" : "offscreen"}
+          style={{ color: "red", marginTop: "20px" }}
+        >
+          {errMsg}
+        </p>
+      </form>
+
+      <FieldConstraintModal
+        opacity={FieldConstraintModalOpacity1}
+        right="-420px"
+        top="100px"
+      >
+        Корисничкото име мора да е составено од 6-30 алфанумерички знаци и долни
+        црти (_) и мора да започнува со буква.
+      </FieldConstraintModal>
+
+      <FieldConstraintModal
+        opacity={FieldConstraintModalOpacity2}
+        right="-420px"
+        top="230px"
+      >
+        Лозинката мора да биде долга 8-20 знаци и да содржи барем една цифра,
+        една голема, една мала буква и еден од знаците !@#$%&*()-+=^.
+      </FieldConstraintModal>
+    </div>
+  ) : (
+    <div
+      style={{
+        marginTop: "140px",
+        display: "flex",
+        alignItems: "center",
+        flexFlow: "column",
+        width: "fit-content",
+        margin: "auto",
+        border: "2px solid lightgrey",
+        padding: "25px",
+        boxShadow: "2px 2px 6px #aaaaaa",
+        marginBottom: "80px",
+        position: "relative",
+      }}
+    >
+      <p>
+        Успешна регистрација! На <b>{email}</b> е испратен токен за потврда на
+        сметката.
+      </p>
+      <a href="/login" style={{ marginTop: "15px" }}>
+        Оди на најава
+      </a>
+    </div>
+  );
+};
+
+export default Registration;
Index: reactapp/src/Pages/UserDashboard.js
===================================================================
--- reactapp/src/Pages/UserDashboard.js	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ reactapp/src/Pages/UserDashboard.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -24,15 +24,11 @@
       <h3>Кориснички податоци:</h3>
       <UserDetailsCard>
-        <UserDetailsCardContent>
-          <b>Име:</b> {user.fullName}{" "}
-          <i style={{ fontSize: 14, color: "#0066cc" }}>
-            (<u>промени</u>)
-          </i>
-        </UserDetailsCardContent>
+        {user.fullName && (
+          <UserDetailsCardContent>
+            <b>Име:</b> {user.fullName}{" "}
+          </UserDetailsCardContent>
+        )}
         <UserDetailsCardContent>
           <b>Корисничко име:</b> {user.username}{" "}
-          <i style={{ fontSize: 14, color: "#0066cc" }}>
-            (<u>промени</u>)
-          </i>
         </UserDetailsCardContent>
         <UserDetailsCardContent>
Index: springapp/src/main/java/mk/profesori/springapp/Controller/PublicController.java
===================================================================
--- springapp/src/main/java/mk/profesori/springapp/Controller/PublicController.java	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ springapp/src/main/java/mk/profesori/springapp/Controller/PublicController.java	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -23,5 +23,5 @@
 @RestController
 @RequestMapping("/public")
-@CrossOrigin(origins = { "http://192.168.0.17:3000", "http://192.168.0.24:3000" })
+@CrossOrigin(origins = { "http://192.168.0.17:3000", "http://192.168.0.28:3000" })
 public class PublicController {
 
Index: springapp/src/main/java/mk/profesori/springapp/Controller/SecureController.java
===================================================================
--- springapp/src/main/java/mk/profesori/springapp/Controller/SecureController.java	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ springapp/src/main/java/mk/profesori/springapp/Controller/SecureController.java	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -25,5 +25,5 @@
 @RestController
 @RequestMapping("/secure")
-@CrossOrigin(origins = { "http://192.168.0.17:3000", "http://192.168.0.24:3000" })
+@CrossOrigin(origins = { "http://192.168.0.17:3000", "http://192.168.0.28:3000" })
 public class SecureController {
 
Index: springapp/src/main/java/mk/profesori/springapp/Security/SecurityConfiguration.java
===================================================================
--- springapp/src/main/java/mk/profesori/springapp/Security/SecurityConfiguration.java	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ springapp/src/main/java/mk/profesori/springapp/Security/SecurityConfiguration.java	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -37,5 +37,5 @@
             @Override
             public void addCorsMappings(CorsRegistry registry) {
-                registry.addMapping("/**").allowedOrigins("http://192.168.0.17:3000", "http://192.168.0.24:3000")
+                registry.addMapping("/**").allowedOrigins("http://192.168.0.17:3000", "http://192.168.0.28:3000")
                         .allowCredentials(true);
             }
Index: springapp/src/main/resources/application.properties
===================================================================
--- springapp/src/main/resources/application.properties	(revision 62b653fbfa2f2521de0bbd3bc445083c3cf5f032)
+++ springapp/src/main/resources/application.properties	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
@@ -8,5 +8,5 @@
 spring.jpa.properties.hibernate.format_sql=true
 server.address=192.168.0.17
-spring.mail.host=192.168.0.24
+spring.mail.host=192.168.0.28
 spring.mail.username=mailuser
 spring.mail.password=mailpass
