Backend/Diligent.WebAPI.Host/DTOs/Customer/CustomerCreateDTO.cs

@@ -1,11 +1,37 @@
-namespace Diligent.WebAPI.Host.DTOs.Customer
+using System.ComponentModel.DataAnnotations;
+
+namespace Diligent.WebAPI.Host.DTOs.Customer
 {
     public class CustomerCreateDTO
     {
+
+        [RegularExpression(@"^[a-zA-Z0-9]+$", ErrorMessage = "First Name should not contain special characters")]
+        [Required(ErrorMessage = "Field First Name should not be empty")]
         public string FirstName { get; set; }
+
+
+
+        [RegularExpression(@"^[a-zA-Z0-9]+$", ErrorMessage = "Last Name should not contain special characters")]
+        [Required(ErrorMessage = "Field Last Name should not be empty")]
         public string LastName { get; set; }
+
+
+
+        [Required(ErrorMessage = "Field E-mail should not be empty")]
+        [EmailAddress(ErrorMessage = "Category Name should not be empty")]
         public string Email { get; set; }
+
+
+
+        [Required(ErrorMessage = "Field Username should not be empty")]
+        [MinLength(8, ErrorMessage = "Username must have a minimum length of 6 characters")]
         public string Username { get; set; }
+
+
+
+        [Required(ErrorMessage = "Field Password should not be empty")]
+        [RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,32}$", ErrorMessage = "Password must be between 8 and 32 characters and contain one uppercase letter, one lowercase letter, one digit and one special character.")]
+        [MinLength(8, ErrorMessage = "Password must have a minimum length of 8 characters")]
         public string Password { get; set; }
     }
 }

Backend/Diligent.WebAPI.Host/Extensions/ModelValidationMIddlewareConfiguration.cs

@@ -0,0 +1,25 @@
+using Diligent.WebAPI.Host.Middlewares;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Diligent.WebAPI.Host.Extensions
+{
+    public static class ModelValidationMIddlewareConfiguration
+    {
+        public static void ConfigureValidationMiddleware(this WebApplicationBuilder builder)
+        {
+            var services = builder.Services;
+            // Override default model validation middleware.
+            services.Configure<ApiBehaviorOptions>(options =>
+            {
+                options.SuppressModelStateInvalidFilter = true;
+            });
+
+            // Register custom validation middleware
+            services.AddMvcCore(options =>
+            {
+                options.Filters.Add(typeof(ModelValidationMiddleware));
+            })
+            .AddDataAnnotations();
+        }
+    }
+}

Backend/Diligent.WebAPI.Host/Middlewares/ModelValidationMiddleware.cs

@@ -0,0 +1,34 @@
+using Diligent.WebAPI.Host.Exceptions;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.Filters;
+using System.Net;
+
+namespace Diligent.WebAPI.Host.Middlewares
+{
+    public class ModelValidationMiddleware : IActionFilter
+    {
+        public void OnActionExecuted(ActionExecutedContext context) { }
+
+        public void OnActionExecuting(ActionExecutingContext context)
+        {
+            if (!context.ModelState.IsValid)
+            {
+                var validationItems = context.ModelState
+                    .Where(x => x.Value != null && x.Value.Errors.Count > 0)
+                    .Select(x => new { Key = x.Key, Value = x.Value?.Errors.Select(e => e.ErrorMessage).First() })
+                    .ToList();
+
+                string msg = "";
+
+                validationItems.ForEach(n => msg += n.Value + ". ");
+
+                var response = new ErrorDetails
+                {
+                    StatusCode = (int)HttpStatusCode.BadRequest,
+                    Message = msg
+                };
+                context.Result = new BadRequestObjectResult(response);
+            }
+        }
+    }
+}

Backend/Diligent.WebAPI.Host/Program.cs

@@ -7,6 +7,7 @@ var builder = WebApplication.CreateBuilder(args);
 builder.ConfigureData(builder.Configuration);
 var collection = builder.Services;
 Diligent.WebAPI.Host.Extensions.ApiConfiguration.ConfigureServices(collection);
+builder.ConfigureValidationMiddleware();
 var app = builder.Build();
 
 app.UseCors("ClientPermission");

Frontend/src/components/RegisterForm.js

@@ -1,85 +1,125 @@
-import React, { useContext, useState } from 'react'
-import { Col, FloatingLabel, Form, FormGroup, Row } from 'react-bootstrap'
-import { Link, useNavigate } from 'react-router-dom';
-import { UserContext } from '../contexts/userContext';
-import userService from '../services/userService'
+import React, { useContext, useEffect, useState } from "react";
+import { Col, FloatingLabel, Form, FormGroup, Row } from "react-bootstrap";
+import { Link, useNavigate } from "react-router-dom";
+import { UserContext } from "../contexts/userContext";
+import userService from "../services/userService";
 
 const RegisterForm = () => {
-
   const navigate = useNavigate();
-    const { setUser } = useContext(UserContext)
+  const { setUser } = useContext(UserContext);
+  const [error, setError] = useState(null);
 
   const [registerValues, setRegister] = useState({
-        username: '',
-        password: '',
-        email: '',
-        firstName: '',
-        lastName: ''
-    })
+    username: "",
+    password: "",
+    email: "",
+    firstName: "",
+    lastName: "",
+  });
 
-    const submitHandler = (e) =>{
+  const submitHandler = (e) => {
     e.preventDefault();
 
-        // potrebna jos validacija
-
-        userService.register(registerValues)
-        .then(res => {
-            localStorage.setItem("user", JSON.stringify(res))
-            setUser(res)
-            navigate('/main')
+    userService
+      .register(registerValues)
+      .then((res) => {
+        localStorage.setItem("user", JSON.stringify(res));
+        setUser(res);
+        navigate("/main");
       })
-        .catch(err => console.log(err))
-    }
+      .catch((err) => {
+        // console.log(err)
+        setError(err.response.data.message.split("."));
+      });
+  };
+
+  useEffect(() => {
+  }, []);
 
   return (
-    <Form onSubmit={submitHandler} className='p-3 p-md-5 py-3 py-md-4 rounded bg-dark text-light'>
-        <h5 className='text-start p-0 m-0 display-6'>Sign Up</h5>
-        <p className='text-muted p-0 m-0 py-3 pb-4 text-start'>Please enter your valid credentials</p>
-        <FormGroup as={Row}>
-            <Col md='6' className='pe-1'>
-                <FloatingLabel
-                    label="First Name"
-                    className="mb-3"
+    <Form
+      onSubmit={submitHandler}
+      className="p-3 p-md-5 py-3 py-md-4 rounded bg-dark text-light"
     >
-                    <Form.Control value={registerValues.firstName} onChange={e => setRegister({...registerValues, firstName: e.target.value})} type="text" className='bg-dark  w-100 text-light' placeholder="Enter your first name..." />
+      <h5 className="text-start p-0 m-0 display-6">Sign Up</h5>
+      <p className="text-muted p-0 m-0 py-3 pb-4 text-start">
+        Please enter your valid credentials
+      </p>
+      {error &&
+        error.map((n) => 
+          <p key={n} className="text-light bg-dark d-block p-0 m-0">{n.trim()}</p>
+        )}
+      <FormGroup as={Row}>
+        <Col md="6" className="pe-1">
+          <FloatingLabel label="First Name" className="mb-3">
+            <Form.Control
+              value={registerValues.firstName}
+              onChange={(e) =>
+                setRegister({ ...registerValues, firstName: e.target.value })
+              }
+              type="text"
+              className="bg-dark  w-100 text-light"
+              placeholder="Enter your first name..."
+            />
           </FloatingLabel>
         </Col>
-            <Col md='6' className='ps-1'>
-                <FloatingLabel
-                    label="Last Name"
-                    className="mb-3"
-                >
-                    <Form.Control value={registerValues.lastName} onChange={e => setRegister({...registerValues, lastName: e.target.value})} type="text" className='bg-dark w-100 text-light' placeholder="Enter your last name..." />
+        <Col md="6" className="ps-1">
+          <FloatingLabel label="Last Name" className="mb-3">
+            <Form.Control
+              value={registerValues.lastName}
+              onChange={(e) =>
+                setRegister({ ...registerValues, lastName: e.target.value })
+              }
+              type="text"
+              className="bg-dark w-100 text-light"
+              placeholder="Enter your last name..."
+            />
           </FloatingLabel>
         </Col>
       </FormGroup>
-        <FloatingLabel
-            label="Username"
-            className="mb-3 w-100"
-        >
-            <Form.Control value={registerValues.username} onChange={e => setRegister({...registerValues, username: e.target.value})} type="text" className='bg-dark text-light responsive-input-register' placeholder="Enter your username..." />
+      <FloatingLabel label="Username" className="mb-3 w-100">
+        <Form.Control
+          value={registerValues.username}
+          onChange={(e) =>
+            setRegister({ ...registerValues, username: e.target.value })
+          }
+          type="text"
+          className="bg-dark text-light responsive-input-register"
+          placeholder="Enter your username..."
+        />
       </FloatingLabel>
-        <FloatingLabel
-            label="E-Mail"
-            className="mb-3"
-        >
-            <Form.Control value={registerValues.email} onChange={e => setRegister({...registerValues, email: e.target.value})} type="text" className='w-100 bg-dark text-light' placeholder="Enter your e-mail adress..." />
+      <FloatingLabel label="E-Mail" className="mb-3">
+        <Form.Control
+          value={registerValues.email}
+          onChange={(e) =>
+            setRegister({ ...registerValues, email: e.target.value })
+          }
+          type="text"
+          className="w-100 bg-dark text-light"
+          placeholder="Enter your e-mail adress..."
+        />
       </FloatingLabel>
       <FormGroup as={Row}>
-            <Col md='6' className='pe-1'>
-                <FloatingLabel
-                    label="Password"
-                    className="mb-3"
-                >
-                    <Form.Control value={registerValues.password} onChange={e => setRegister({...registerValues, password: e.target.value})} type="password" className='bg-dark text-light' placeholder="Enter your password..." />
+        <Col md="6" className="pe-1">
+          <FloatingLabel label="Password" className="mb-3">
+            <Form.Control
+              value={registerValues.password}
+              onChange={(e) =>
+                setRegister({ ...registerValues, password: e.target.value })
+              }
+              type="password"
+              className="bg-dark text-light"
+              placeholder="Enter your password..."
+            />
           </FloatingLabel>
         </Col>
-            <Col md='6' className='ps-1'>
-                <FloatingLabel
-                    label="Confirm Password"
-                    className="mb-3"
-                >
-                    <Form.Control type="password" className='bg-dark text-light' placeholder="Confirm your password..." />
+        <Col md="6" className="ps-1">
+          <FloatingLabel label="Confirm Password" className="mb-3">
+            <Form.Control
+              type="password"
+              className="bg-dark text-light"
+              placeholder="Confirm your password..."
+            />
           </FloatingLabel>
         </Col>
       </FormGroup>
@@ -89,12 +129,16 @@ const RegisterForm = () => {
         >
             <Form.Control type="text" className='w-100 bg-dark text-light' placeholder="Enter your phone number..." />
         </FloatingLabel> */}
-        <input type='submit' className='btn py-2 mt-4 w-100 btn-main text-dark' value={'Sign in'} />
-        <Link className='text-light m-0 p-0' to='/'>
-            <p className='w-100 text-start pt-3'>Back to home</p>
+      <input
+        type="submit"
+        className="btn py-2 mt-4 w-100 btn-main text-dark"
+        value={"Sign in"}
+      />
+      <Link className="text-light m-0 p-0" to="/">
+        <p className="w-100 text-start pt-3">Back to home</p>
       </Link>
     </Form>
-  )
-}
+  );
+};
 
-export default RegisterForm
+export default RegisterForm;