Update (#125)

* add speechgenarator

* css updated

* css upadate

* add validations

* ✨ Account Deletion

---------

Co-authored-by: dinidusachintha <dinidusachintha7@gmail.com>

backend/controllers/userController.js

@@ -516,3 +516,20 @@ export const updatePassword = async (req, res) => {
         return res.status(500).json({ message: 'Server error' })
     }
 }
+
+export const deleteUserAccount = async (req, res, next) => {
+    try {
+        const user = await User.findById(req.user._id)
+
+        if (!user) {
+            res.status(404)
+            throw new Error('User not found')
+        }
+
+        await User.findByIdAndDelete(req.user._id)
+
+        res.status(200).json({ message: 'User account deleted successfully' })
+    } catch (error) {
+        return next(error)
+    }
+}

backend/routes/Blog.js

@@ -6,7 +6,7 @@ const router = Router()
 // Function to validate required fields with enhanced rules
 const validateBlogFields = (title, content, author) => {
     const errors = {}
-
+    
     if (!title) {
         errors.title = 'Title is required.'
     } else if (title.length < 5) {
@@ -18,7 +18,7 @@ const validateBlogFields = (title, content, author) => {
     } else if (content.length < 10) {
         errors.content = 'Content must be at least 10 characters long.'
     }
-
+    
     if (!author) {
         errors.author = 'Author is required.'
     } else if (author.trim().length === 0) {
@@ -37,9 +37,9 @@ router.post('/add', async (req, res) => {
         const errors = validateBlogFields(title, content, author)
         if (Object.keys(errors).length) {
             // Return a structured response showing all validation errors
-            return res.status(400).json({
+            return res.status(400).json({ 
                 message: 'Validation failed. Please fix the errors below.',
-                errors,
+                errors 
             })
         }
 
@@ -95,13 +95,11 @@ router.put('/update/:id', async (req, res) => {
         // Validate required fields
         const errors = validateBlogFields(title, content, author)
         if (Object.keys(errors).length) {
-
             // Return a structured response showing all validation errors
-            return res.status(400).json({
+            return res.status(400).json({ 
                 message: 'Validation failed. Please fix the errors below.',
-                errors,
+                errors
             })
-
         }
 
         // Find the blog post by ID and update it

backend/routes/userRoute.js

@@ -1,6 +1,7 @@
 import express from 'express'
 import {
     authUser,
+    deleteUserAccount,
     forgotPassword,
     getUserById,
     logoutUser,
@@ -29,6 +30,7 @@ router.route('/upgrade').post(protect, upgradeMembership)
 router.route('/paymentIntent').post(protect, paymentUser)
 router.route('/validate-password').post(protect, validatePassword) // Route to validate the current password
 router.route('/update-password').put(protect, updatePassword) // Route to update the password
+router.route('/').delete(protect, deleteUserAccount)
 
 router.route('/:id').get(protect, getUserById)
 

frontend/src/Components/ConfirmationModalDelete.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const ConfirmationModalDelete = ({ isOpen, onClose, onConfirm, confirmationText, setConfirmationText }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 bg-gray-800 bg-opacity-50 flex justify-center items-center z-50">
+            <div className="bg-white p-6 rounded shadow-md w-1/3">
+                <h2 className="text-xl font-semibold mb-4">Confirm Account Deletion</h2>
+                <p>Type <strong>"I want to delete my account"</strong> to confirm:</p>
+                <input
+                    type="text"
+                    value={confirmationText}
+                    onChange={(e) => setConfirmationText(e.target.value)}
+                    className="border border-gray-300 p-2 rounded mb-4 w-full"
+                />
+                <div className="flex justify-end">
+                    <button onClick={onClose} className="mr-2 bg-gray-300 text-gray-700 font-bold py-1 px-3 rounded">
+                        Cancel
+                    </button>
+                    <button onClick={onConfirm} className="bg-red-600 text-white font-bold py-1 px-3 rounded">
+                        Confirm
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmationModalDelete;

frontend/src/Components/DeleteAccountButton.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { toast } from 'react-hot-toast';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import ConfirmationModal from './ConfirmationModalDelete'; // Import the modal component
+
+const DeleteAccountButton = () => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [confirmationText, setConfirmationText] = useState('');
+    const navigate = useNavigate();
+
+    const handleDeleteAccount = async () => {
+        if (confirmationText !== 'I want to delete my account') {
+            toast.error('Please type "I want to delete my account" to confirm.');
+            return;
+        }
+
+        try {
+            const response = await axios.delete('/api/users'); // Adjust the endpoint as necessary
+            toast.success(response.data.message);
+
+            // Redirect to the registration page after deletion
+            navigate('/register'); // Adjust the path as necessary
+        } catch (error) {
+            toast.error(error.response?.data?.message || 'Failed to delete account');
+        }
+    };
+
+    return (
+        <div>
+            <button
+                onClick={() => setIsModalOpen(true)}
+                className="bg-red-600 text-white font-bold py-2 px-4 rounded hover:bg-red-700 transition duration-200"
+            >
+                Delete Account
+            </button>
+
+            <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                onConfirm={handleDeleteAccount}
+                confirmationText={confirmationText}
+                setConfirmationText={setConfirmationText}
+            />
+        </div>
+    );
+};
+
+export default DeleteAccountButton;

frontend/src/Pages/Customer/Settings.jsx

@@ -3,6 +3,7 @@ import axios from 'axios'
 import Address from '../../Components/Address'
 import toast from 'react-hot-toast'
 import PasswordUpdate from '../../Components/PasswordUpdate'
+import DeleteAccountButton from '../../Components/DeleteAccountButton'
 
 function Settings() {
     const [previewUrl, setPreviewUrl] = useState(null)
@@ -376,6 +377,9 @@ function Settings() {
                 </div>
                 <Address />
                 <PasswordUpdate />
+                <div className='pl-12'>
+                <DeleteAccountButton />
+                </div>
             </div>
         </div>
     )

frontend/src/Pages/blog manage/AddBlog.jsx

@@ -87,8 +87,6 @@ function AddNews() {
     const addNews = async (e) => {
         e.preventDefault()
 
-
-
         const titleError = validateTitle()
         const contentError = validateContent()
         const authorError = validateAuthor()