Add sweet alert

backend/src/main/java/org/maires/employee/controller/dto/EmployeeCreationDto.java

@@ -23,7 +23,7 @@ public record EmployeeCreationDto(
     @Size(min = 4, message = "Full name must be >= 4 characters!")
     @Pattern(
         regexp = "\\D+",
-        message = "FullName must not contain digit!"
+        message = "Full name must not contain digit!"
     )
     String fullName,
 

frontend/src/app/dashboard-employees/page.tsx

@@ -22,7 +22,7 @@ function DashboardEmployees() {
 
   return (
 
-    <div className="bg-white px-spacing-regular-20 mb-1">
+    <div className="px-spacing-regular-20 mb-1">
 
       {isModalCreateEmployeeOpen && <ModalCreateEmployee />}
 

frontend/src/app/dashboard-users/page.tsx

@@ -21,7 +21,7 @@ function DashboardUsers() {
   if (isAuthenticated === null || !isAuthenticated) return null;
 
   return (
-    <div className="bg-white px-spacing-regular-20 mb-1">
+    <div className="px-spacing-regular-20 mb-1">
 
       {isModalCreateUserOpen && <ModalCreateUser />}
 

frontend/src/app/globals.css

@@ -8,6 +8,10 @@
   @apply font-roboto;
 }
 
+body {
+  @apply bg-light-neutral-150
+}
+
 td, th {
   @apply p-spacing-little-08
 }

frontend/src/app/reset-password/page.tsx

@@ -3,73 +3,94 @@
 'use client';
 
 import React, { useState } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Swal from 'sweetalert2';
+import Button from '../../components/buttons/Button';
 
 function PasswordResetPage() {
   const [newPassword, setNewPassword] = useState('');
+  const [loading, setLoading] = useState(false);
   const searchParams = useSearchParams();
   const token = searchParams.get('token');
+  const router = useRouter();
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewPassword(e.target.value);
   };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setLoading(true);
 
-    const response = await fetch(`http://localhost:8080/password/reset?token=${token}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ newPassword }),
-    });
-
-    if (response.ok) {
-      alert('Password has been changed!');
-    } else {
-      const errorData = await response.json();
-      alert(`Failed to reset password: ${errorData.message}`);
+    try {
+      const response = await fetch(`http://localhost:8080/password/reset?token=${token}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ newPassword }),
+      });
+
+      if (response.ok) {
+        const Toast = Swal.mixin({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 3000,
+          timerProgressBar: true,
+          didOpen: (toast) => {
+            toast.onmouseenter = Swal.stopTimer;
+            toast.onmouseleave = Swal.resumeTimer;
+          },
+        });
+
+        Toast.fire({
+          icon: 'success',
+          title: 'Changed successfully',
+        }).then(() => router.replace('/'));
+      }
+    } catch (error) {
+      console.error('Error fetching:', error);
+      return null;
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
     <div
-      className="bg-slate-300 h-screen flex items-center justify-center"
+      className="bg-gradient-to-br from-dark-neutral-800 via-dark-neutral-900 to-dark-neutral-1100 h-screen flex items-center justify-center"
     >
+
       <form
-        className="bg-white p-6 rounded shadow-md w-full max-w-xs"
+        className="flex flex-col gap-6 bg-light-neutral-100 border border-light-neutral-400 rounded-lg p-8 shadow-xl"
         onSubmit={ handleSubmit }
       >
+
         <h1
-          className="text-xl text-black font-bold mb-4"
+          className="font-bold text-center text-2xl text-light-neutral-900"
         >
           Reset Password
         </h1>
 
-        <label
-          htmlFor="newPassword"
-          className="block text-sm font-medium mb-2 text-black"
-        >
-          Your new password
-        </label>
         <input
-          className="w-full p-2 border border-gray-300 rounded mb-4 text-black"
-          onChange={ handlePasswordChange }
+          className="rounded-xl px-3 py-2 text-black border border-light-neutral-400 bg-light-neutral-0 hover:border-dark-neutral-300 w-full"
           type="password"
           name="newPassword"
           id="newPassword"
+          placeholder="Your new password"
           value={ newPassword }
           required
+          onChange={ handlePasswordChange }
+        />
+
+        <Button
+          loading={ loading }
+          text="Reset password"
         />
 
-        <button
-          type="submit"
-          className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition duration-200"
-        >
-          Reset Password
-        </button>
       </form>
+
     </div>
   );
 }

frontend/src/components/FormLogin.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useDispatch, useSelector } from 'react-redux';
 import Swal from 'sweetalert2';
+import Image from 'next/image';
 import AuthFooter from './AuthFooter';
 import Button from './buttons/Button';
 import Divider from './Divider';
@@ -15,6 +16,8 @@ import ModalChangePassword from './modal/ModalChangePassword';
 import { AppDispatch, RootState } from '../store';
 import auth from '../services/auth';
 import { clearError } from '../store/authSlice';
+import login from '../../public/login.svg';
+import loginAvatar from '../../public/loginAvatar.svg';
 
 function FormLogin() {
   const dispatch = useDispatch<AppDispatch>();
@@ -78,7 +81,15 @@ function FormLogin() {
 
   return (
 
-    <>
+    <div className="flex justify-center items-center w-fit mx-4">
+
+      <div>
+        <Image
+          className="hidden sm:flex"
+          src={ login }
+          alt="Logo"
+        />
+      </div>
 
       {isModalPasswordChangeOpen && <ModalChangePassword />}
 
@@ -87,11 +98,21 @@ function FormLogin() {
         onSubmit={ handleSubmit }
       >
 
-        <h1
-          className="font-bold text-center text-2xl text-light-neutral-900 my-4"
-        >
-          Welcome back
-        </h1>
+        <div className="flex flex-col items-center justify-center">
+          <h1
+            className="font-bold text-center text-2xl text-light-neutral-900 my-4"
+          >
+            Welcome back
+          </h1>
+
+          <Image
+            height={ 70 }
+            width={ 70 }
+            src={ loginAvatar }
+            alt="Login avatar"
+          />
+
+        </div>
 
         <Input
           type="text"
@@ -134,7 +155,7 @@ function FormLogin() {
 
       </form>
 
-    </>
+    </div>
 
   );
 }