Index: phonelux-frontend/src/components/LoginRegisterComponents/InputFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/InputFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/InputFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+
+export class InputFormComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         focused: false
+      }
+    }
+
+    handleFocus = (e) => {
+        this.setState({
+            focused: true
+        })
+    }
+
+  render() {
+
+    const {errorMessage,setValue, ...inputProps} = this.props
+
+
+    return (
+      <div className='inputform-validation-container'>
+        <input className = 'validation-inputs'  onChange={(e) => this.props.setValue(e)}
+        {...inputProps}
+        onBlur={this.handleFocus}
+        focused={this.state.focused.toString()}
+        />
+        <span className='form-error-span'>{this.props.errorMessage}</span>
+      </div>
+    )
+  }
+}
+
+export default InputFormComponent
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,146 @@
+.loginform-main-div {
+  text-align: center;
+  justify-content: center;
+  display: flex; 
+  padding-top: 40px;
+  padding-bottom: 90px;
+  background-color: #e1e3eb;
+  height: 100%;
+}
+
+
+.loginform-sub-main-div{
+  display: flex;
+  justify-content: center;
+  height: fit-content;
+  width: fit-content;
+  box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
+  padding-top: 30px;
+  border-radius: 60px; 
+  background-color: white;
+  width: 65%;
+
+}
+.loginform-imgs-div {
+    padding-top: 20px;
+    justify-content: center;
+    display: flex;
+  }
+.loginform-image-container {
+  background-color: rgb(223, 221, 221); 
+  border-radius: 150px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 115px;
+  width: 115px;
+}
+.loginform-profile-img {
+  height: 100px;
+  width: 100px;
+  border-radius: 130px;
+} 
+
+.loginform-sub-main-div > div{
+  margin-bottom: 50px;
+  margin-left: 80px;
+  margin-right: 80px;
+}
+
+.loginform-email-input > .inputform-validation-container > .validation-inputs{
+  width: 50%;
+}
+
+.loginform-password-input > .inputform-validation-container > .validation-inputs{
+  width: 50%;
+}
+
+.validation-inputs{
+    width: 100%;
+    height: 50px;
+    border-radius: 60px;
+    box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
+    border: none;
+    outline: none;
+    background-color: #fff;
+}
+
+
+.inputform-validation-container{
+  width: 100%;
+  justify-content: center;
+}
+
+
+.validation-inputs{
+    padding-left: 20px;
+    font-size: 22px;
+    width: 100%;
+}
+
+
+.loginform-button{
+    width: 80%;
+    height: 50px;
+    border-radius: 60px;
+    background-color: #91AD7E ;
+    color: white;
+    font-size: 25px;
+    border: none;
+    margin-top: 30px;
+}
+
+.loginform-button:hover{
+  background-color: #5c6b52 ;
+  cursor:pointer;
+}
+
+.form-error-span{
+  font-size: 12px;
+  padding: 3px;
+  color:red;
+  display: block;
+  justify-content: center;
+  display: none;
+}
+
+.loginform-sub-main-div > div{
+  width: 90%;
+}
+
+.loginform-button{
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.inputform-validation-container input:invalid[focused="true"] ~ span{
+  display: block;
+}
+
+.loginform-password-input{
+  margin-top: 15px;
+}
+
+.inputform-validation-container input:invalid[focused="true"]{
+  border: 1px solid red;
+}
+
+.form-error-span{
+  width: 100%;
+}
+
+.register-link{
+    font-size: 25px;
+    font-weight: 400;
+    color: rgb(53, 99, 70);
+    text-decoration: none;
+    color: blue;
+}
+ .register-link > a{
+     color: rgb(53, 99, 70);
+     text-decoration: none;
+ }
+
+ .register-link > a:hover{
+  color: blue;
+ }
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+import profileIcon from "../../images/profileicon.png";
+import EmailIcon from '@mui/icons-material/Email';
+import "./LoginFormComponent.css"
+import InputFormComponent from './InputFormComponent';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+
+
+export class LoginFormComponent extends Component {
+
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      email: '',
+      password: '',
+    }
+  }
+  
+  changeHandler = (e) =>{
+      this.setState({[e.target.name] : e.target.value})
+  }
+
+  submitHandler = (e) => {
+      e.preventDefault()
+      var qs = require('qs');
+      var dataToSend = qs.stringify({
+        'email': this.state.email,
+        'password': this.state.password
+      });
+
+      var config = {
+        method: 'post',
+        url: '/login',
+        headers: { 
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data : dataToSend
+      };
+
+      axios(config)
+      .then(function (response) {
+        console.log(response.data);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+
+  }
+
+  setValue = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+ 
+  }
+  
+
+render() {
+
+  const {email,password} = this.state
+
+  return (
+      <div className="loginform-main-div">
+       <div className="loginform-sub-main-div">
+         <div>
+
+           <div className="loginform-imgs-div">
+             <div className="loginform-image-container">
+               <img src={profileIcon} alt="profile" className="loginform-profile-img"/>
+             </div>
+           </div>
+  
+           <form onSubmit={this.submitHandler}>
+             <h1>Најава</h1>
+
+             <div className='loginform-email-input'>
+             <InputFormComponent type='text' placeholder='Е-маил адреса' name='email' required={true}
+              setValue={this.setValue} errorMessage='Полето е задолжително!'/>
+             </div>
+  
+             <div className="loginform-password-input">
+              <InputFormComponent type='password' placeholder='Лозинка' name='password' 
+               setValue={this.setValue} required={true}
+                errorMessage='Полето е задолжително!'/>
+             </div>
+
+  
+            <div className="loginform-button-wrapper">
+            <button className='loginform-button' type="submit">Најави се</button>
+            </div>  
+           </form>
+           <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
+  
+         </div>
+         
+       </div>
+      </div>
+    );
+}
+}
+
+export default LoginFormComponent
Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,161 @@
+.registerform-main-div {
+    text-align: center;
+    justify-content: center;
+    display: flex; 
+    padding-top: 40px;
+    padding-bottom: 90px;
+    background-color: #e1e3eb;
+    height: 100%;
+  }
+  body{height: 100%;}
+
+  .registerform-sub-main-div{
+    display: flex;
+    justify-content: center;
+    height: fit-content;
+    width: fit-content;
+    box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
+    padding-top: 30px;
+    border-radius: 60px; 
+    background-color: white;
+    width: 65%;
+
+  }
+  .registerform-imgs-div {
+      padding-top: 20px;
+      justify-content: center;
+      display: flex;
+    }
+  .registerform-image-container {
+    background-color: rgb(223, 221, 221); 
+    border-radius: 150px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 115px;
+    width: 115px;
+  }
+  .registerform-profile-img {
+    height: 100px;
+    width: 100px;
+    border-radius: 130px;
+  } 
+
+  .registerform-sub-main-div > div{
+    margin-bottom: 50px;
+    margin-left: 80px;
+    margin-right: 80px;
+  }
+
+  .validation-inputs{
+      width: 300px;
+      height: 50px;
+      border-radius: 60px;
+      box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
+      border: none;
+      outline: none;
+      background-color: #fff;
+  }
+
+
+  .registerform-name-lastname div{
+    width: 50%;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .registerform-name-lastname{
+    display: flex;
+  }
+
+  .registerform-name-lastname input{
+    width: 90%;
+  }
+
+  .registerform-confirm-password-input{
+    padding-top: 20px;
+    width: 100%;
+  }
+
+  .inputform-validation-container{
+    width: 100%;
+  }
+
+
+  .validation-inputs{
+      padding-left: 20px;
+      font-size: 22px;
+      width: 100%;
+  }
+
+  .registerform-password-input > .inputform-validation-container > .validation-inputs{
+    width: 50%;
+  }
+
+  .registerform-password-input{
+    margin-top: 20px;
+    width: 100%;
+}
+
+.registerform-email-input{
+    padding-top: 20px;
+    width: 100%;
+}
+
+.lastname-input{
+    padding-top: 20px;
+}
+
+.registerform-confirm-password-input input{
+  width: 50%;
+}
+
+.password-input input{
+width: 50%;
+} 
+
+.registerform-email-input input{
+  width: 50%;
+}
+
+
+  .registerform-button{
+      width: 80%;
+      height: 50px;
+      border-radius: 60px;
+      background-color: #91AD7E ;
+      color: white;
+      font-size: 25px;
+      border: none;
+      margin-top: 30px;
+  }
+
+  .registerform-button:hover{
+    background-color: #5c6b52 ;
+    cursor:pointer;
+  }
+
+  .form-error-span{
+    font-size: 12px;
+    padding: 3px;
+    color:red;
+    display: block;
+    justify-content: center;
+    display: none;
+  }
+
+  .inputform-validation-container input:invalid[focused="true"] ~ span{
+    display: block;
+  }
+
+  .inputform-validation-container  input:invalid[focused="true"]{
+    border: 1px solid red;
+  }
+
+
+  .form-error-span{
+    width: 100%;
+  }
+
+
+
Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,121 @@
+import React, { Component } from 'react'
+import profileIcon from "../../images/profileicon.png";
+import "./RegisterFormComponent.css"
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import InputFormComponent from './InputFormComponent';
+import { Input } from '@mui/material';
+import axios from 'axios';
+
+
+export class RegisterFormComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        confirmPassword:'',
+      }
+    }
+  
+    submitHandler = (e) => {
+        e.preventDefault()
+
+        let dataToSend = JSON.stringify({
+          "firstName": this.state.firstName,
+          "lastName": this.state.lastName,
+          "email": this.state.email,
+          "password": this.state.password
+        });
+
+        let config = {
+          method: 'post',
+          url: '/registration',
+          headers: { 
+            'Content-Type': 'application/json'
+          },
+          data : dataToSend
+        };
+
+        axios(config)
+        .then(function (response) {
+          console.log(response);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+
+    }
+
+    setValue = (e) => {
+      this.setState({
+        [e.target.name]: e.target.value
+      })
+    }
+
+
+    
+
+  render() {
+
+    const {firstName,lastName,email,password,confirmPassword} = this.state
+
+    return (
+        <div className="registerform-main-div">
+         <div className="registerform-sub-main-div">
+           <div>
+
+             <div className="registerform-imgs-div">
+               <div className="registerform-image-container">
+                 <img src={profileIcon} alt="profile" className="registerform-profile-img"/>
+               </div>
+             </div>
+    
+             <form onSubmit={this.submitHandler}>
+               <h1>Регистрација</h1>
+
+               <div className='registerform-name-lastname'>
+                 <InputFormComponent type='text' placeholder='Име' name='firstName' required={true}
+                 setValue={this.setValue} errorMessage='Името е задолжително!'/>
+
+                 <InputFormComponent type='text' placeholder='Презиме' name='lastName' required={true}
+                 setValue={this.setValue}  errorMessage='Презимето е задолжително!'/>
+               </div>
+               
+               <div className='registerform-email-input'>
+               <InputFormComponent type='email' placeholder='Е-маил адреса' name='email' required={true}
+                setValue={this.setValue} errorMessage='Погрешен формат на е-маил адреса!'/>
+               </div>
+    
+               <div className="registerform-password-input">
+                <InputFormComponent type='password' placeholder='Лозинка' name='password' 
+                 setValue={this.setValue} pattern='^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$' required={true}
+                  errorMessage='Лозинката мора да има должина најмалку 8 карактери, 
+                 да содржи најмалку една голема буква, еден број и еден посебен знак!'/>
+               </div>
+
+               <div className="registerform-confirm-password-input">
+               <InputFormComponent type='password' placeholder='Потврди лозинка' name='confirmPassword' required={true} 
+               pattern={this.state.password}
+               setValue={this.setValue} errorMessage='Лозинките не се исти!'/>
+               </div>
+    
+              <div className="registerform-button-wrapper">
+              <button className='registerform-button' type="submit">Регистрирај се</button>
+              </div>  
+               
+             </form>
+    
+           </div>
+           
+         </div>
+        </div>
+      );
+  }
+}
+
+export default RegisterFormComponent
