From 94f2cea2b9847b6d02b4c02d965fd1201ab80967 Mon Sep 17 00:00:00 2001
From: Abhijat Sinha <as9639@srmist.edu.in>
Date: Mon, 2 Jun 2025 20:37:52 +0530
Subject: [PATCH] SavePassword Function Fix

There Was an error When we try to save Password Previous Password will get Delete. We will use if statement to check and then only we will delete the password
---
 .../passop-mongo/src/components/Manager.jsx   | 280 +++++++++---------
 1 file changed, 133 insertions(+), 147 deletions(-)

diff --git a/Video 130/passop-mongo/src/components/Manager.jsx b/Video 130/passop-mongo/src/components/Manager.jsx
index e60c064a..28cb9e41 100644
--- a/Video 130/passop-mongo/src/components/Manager.jsx	
+++ b/Video 130/passop-mongo/src/components/Manager.jsx	
@@ -1,19 +1,18 @@
-import React from 'react'
-import { useRef, useState, useEffect } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
+import { useRef, useState, useEffect } from 'react'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 import { v4 as uuidv4 } from 'uuid';
-import 'react-toastify/dist/ReactToastify.css';
 
 const Manager = () => {
     const ref = useRef()
     const passwordRef = useRef()
-    const [form, setform] = useState({ site: "", username: "", password: "" })
+    const [form, setform] = useState({ site: '', username: '', password: '' })
     const [passwordArray, setPasswordArray] = useState([])
 
     const getPasswords = async () => {
-        let req = await fetch("http://localhost:3000/")
+        let req = await fetch('http://localhost:3000/')
         let passwords = await req.json()
-        setPasswordArray(passwords)
+        setPasswordArray(passwords);
     }
 
 
@@ -22,46 +21,23 @@ const Manager = () => {
     }, [])
 
 
-    const copyText = (text) => {
-        toast('Copied to clipboard!', {
-            position: "top-right",
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-            theme: "dark",
-        });
-        navigator.clipboard.writeText(text)
+    const handleChange = (e) => {
+        setform({ ...form, [e.target.name]: e.target.value })
     }
 
     const showPassword = () => {
-        passwordRef.current.type = "text"
-        console.log(ref.current.src)
-        if (ref.current.src.includes("icons/eyecross.png")) {
-            ref.current.src = "icons/eye.png"
-            passwordRef.current.type = "password"
-        }
-        else {
-            passwordRef.current.type = "text"
-            ref.current.src = "icons/eyecross.png"
+        if (ref.current.src.includes("/crosseye.svg")) {
+            ref.current.src = "/eye.svg"
+            passwordRef.current.type = 'password'
+        } else {
+            ref.current.src = "/crosseye.svg"
+            passwordRef.current.type = 'text'
         }
-
     }
 
     const savePassword = async () => {
-        if (form.site.length > 3 && form.username.length > 3 && form.password.length > 3) {
-
-            // If any such id exists in the db, delete it 
-            await fetch("http://localhost:3000/", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: form.id }) })
-
-            setPasswordArray([...passwordArray, { ...form, id: uuidv4() }])
-            await fetch("http://localhost:3000/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...form, id: uuidv4() }) })
-
-            // Otherwise clear the form and show toast
-            setform({ site: "", username: "", password: "" })
-            toast('Password saved!', {
+        if (form.site === '' || form.username === '' || form.password === '') {
+            toast.error('Please fill all fields!', {
                 position: "top-right",
                 autoClose: 5000,
                 hideProgressBar: false,
@@ -69,144 +45,155 @@ const Manager = () => {
                 pauseOnHover: true,
                 draggable: true,
                 progress: undefined,
-                theme: "dark",
+                theme: "light",
             });
+            return;
         }
-        else {
-            toast('Error: Password not saved!');
+        setPasswordArray([...passwordArray, { ...form, id: uuidv4() }])
+        //while editing delete the old password
+        if (form.id) {  // Changed from form.ide to form.id
+            await fetch("http://localhost:3000/", {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ id: form.id })
+            })
         }
-
+        // localStorage.setItem('passwords', JSON.stringify([...passwordArray, { ...form, id: uuidv4() }]))
+        await fetch("http://localhost:3000/", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ ...form, id: uuidv4() })
+        })
+        setform({ site: '', username: '', password: '' })
+        toast.success('Password saved successfully!', {
+            position: "top-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+        });
     }
-
     const deletePassword = async (id) => {
-        console.log("Deleting password with id ", id)
-        let c = confirm("Do you really want to delete this password?")
-        if (c) {
-            setPasswordArray(passwordArray.filter(item => item.id !== id))
-            
-            await fetch("http://localhost:3000/", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) })
-
-            toast('Password Deleted!', {
-                position: "top-right",
-                autoClose: 5000,
-                hideProgressBar: false,
-                closeOnClick: true, 
-                draggable: true,
-                progress: undefined,
-                theme: "dark",
-            });
-        }
-
+        let confirmDelete = window.confirm("Are you sure you want to delete this password?");
+        if (!confirmDelete) return;
+        setPasswordArray(passwordArray.filter((item) => item.id !== id))
+        // localStorage.setItem('passwords', JSON.stringify(passwordArray.filter((item) => item.id !== id)))
+        let res = await fetch("http://localhost:3000/", {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ id: id })
+        })
+
+        toast.error('Password deleted successfully!', {
+            position: "top-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+        });
     }
-
     const editPassword = (id) => {
-        setform({ ...passwordArray.filter(i => i.id === id)[0], id: id })
-        setPasswordArray(passwordArray.filter(item => item.id !== id))
-    }
-
 
-    const handleChange = (e) => {
-        setform({ ...form, [e.target.name]: e.target.value })
+        setform({
+            ...passwordArray.find((item) => item.id === id),
+            id: id // keep the id same for editing
+        })
+        setPasswordArray(passwordArray.filter((item) => item.id !== id))
     }
 
-
     return (
         <>
-            <ToastContainer />
-            <div className="absolute inset-0 -z-10 h-full w-full bg-green-50 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"><div className="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-green-400 opacity-20 blur-[100px]"></div></div>
-            <div className=" p-3 md:mycontainer min-h-[88.2vh] ">
+            <ToastContainer
+                position="top-right"
+                autoClose={5000}
+                hideProgressBar={false}
+                newestOnTop={false}
+                closeOnClick={false}
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                theme="light"
+            />
+
+            <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]"></div>
+            <div className="md:mycontainer">
                 <h1 className='text-4xl text font-bold text-center'>
-                    <span className='text-green-500'> &lt;</span>
-
-                    <span>Pass</span><span className='text-green-500'>OP/&gt;</span>
+                    <span className="text-green-700">&lt;</span>
+                    Pass
+                    <span className='text-[#FFD700] text-5xl'>Vault</span>
+                    <span className="text-green-700">/&gt;</span>
 
                 </h1>
-                <p className='text-green-900 text-lg text-center'>Your own Password Manager</p>
-
-                <div className="flex flex-col p-4 text-black gap-8 items-center">
-                    <input value={form.site} onChange={handleChange} placeholder='Enter website URL' className='rounded-full border border-green-500 w-full p-4 py-1' type="text" name="site" id="site" />
-                    <div className="flex flex-col md:flex-row w-full justify-between gap-8">
-                        <input value={form.username} onChange={handleChange} placeholder='Enter Username' className='rounded-full border border-green-500 w-full p-4 py-1' type="text" name="username" id="username" />
-                        <div className="relative">
-                            <input ref={passwordRef} value={form.password} onChange={handleChange} placeholder='Enter Password' className='rounded-full border border-green-500 w-full p-4 py-1' type="password" name="password" id="password" />
-                            <span className='absolute right-[3px] top-[4px] cursor-pointer' onClick={showPassword}>
-                                <img ref={ref} className='p-1' width={26} src="icons/eye.png" alt="eye" />
-                            </span>
+                <p className='text-yellow-400 text-lg text-center'>Your own password manager</p>
+
+                <div className="text-black flex flex-col p-4 gap-5">
+                    <input value={form.site} onChange={handleChange} placeholder='Enter Your Website Name' className='rounded-full border border-yellow-400 w-full p-4 py-1' type="text" name="site" id="site-name" />
+                    <div className="flex gap-8">
+                        <input value={form.username} onChange={handleChange} placeholder='Enter Your User Name' className='rounded-full border border-yellow-400 w-full p-4 py-1' type="text" name="username" id="user-name" />
+                        <div className='relative w-full'>
+                            <input ref={passwordRef} value={form.password} onChange={handleChange} placeholder='Enter Your Password' className='rounded-full border border-yellow-400 w-full p-4 py-1' type="password" name="password" id="user-password" />
+                            <span className='absolute right-2 top-0'><img ref={ref} className='p-1 cursor-pointer' onClick={showPassword} width={34} src="/eye.svg" alt="" /></span>
                         </div>
-
                     </div>
-                    <button onClick={savePassword} className='flex justify-center items-center gap-2 bg-green-400 hover:bg-green-300 rounded-full px-8 py-2 w-fit border border-green-900'>
-                        <lord-icon
-                            src="https://cdn.lordicon.com/jgnvfzqg.json"
-                            trigger="hover" >
-                        </lord-icon>
-                        Save</button>
+                    <div className='items-center flex flex-col'>
+                        <button onClick={savePassword} className='border-blue-600 border flex justify-center items-center rounded-full text-black px-2 py-2 gap-2 w-48 transition-all duration-300 bg-blue-300 hover:bg-blue-400'>
+                            <lord-icon
+                                src="https://cdn.lordicon.com/gzqofmcx.json"
+                                trigger="hover">
+                            </lord-icon>
+                            Save Password
+                        </button>
+                    </div>
                 </div>
 
                 <div className="passwords">
                     <h2 className='font-bold text-2xl py-4'>Your Passwords</h2>
-                    {passwordArray.length === 0 && <div> No passwords to show</div>}
-                    {passwordArray.length != 0 && <table className="table-auto w-full rounded-md overflow-hidden mb-10">
-                        <thead className='bg-green-800 text-white'>
+                    {passwordArray.length === 0 && <div>No passwords Found</div>}
+
+                    {passwordArray.length !== 0 && <table className="table-auto w-full overflow-hidden rounded-lg border border-yellow-400">
+                        <thead className='bg-yellow-400 text-black'>
                             <tr>
-                                <th className='py-2'>Site</th>
-                                <th className='py-2'>Username</th>
-                                <th className='py-2'>Password</th>
+                                <th className='py-2'>Site Name</th>
+                                <th className='py-2'>User Name</th>
+                                <th className='py-2'>User Password</th>
                                 <th className='py-2'>Actions</th>
                             </tr>
                         </thead>
-                        <tbody className='bg-green-100'>
+                        <tbody className='bg-yellow-100 text-black'>
                             {passwordArray.map((item, index) => {
                                 return <tr key={index}>
-                                    <td className='py-2 border border-white text-center'>
-                                        <div className='flex items-center justify-center '>
-                                            <a href={item.site} target='_blank'>{item.site}</a>
-                                            <div className='lordiconcopy size-7 cursor-pointer' onClick={() => { copyText(item.site) }}>
-                                                <lord-icon
-                                                    style={{ "width": "25px", "height": "25px", "paddingTop": "3px", "paddingLeft": "3px" }}
-                                                    src="https://cdn.lordicon.com/iykgtsbt.json"
-                                                    trigger="hover" >
-                                                </lord-icon>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td className='py-2 border border-white text-center'>
-                                        <div className='flex items-center justify-center '>
-                                            <span>{item.username}</span>
-                                            <div className='lordiconcopy size-7 cursor-pointer' onClick={() => { copyText(item.username) }}>
-                                                <lord-icon
-                                                    style={{ "width": "25px", "height": "25px", "paddingTop": "3px", "paddingLeft": "3px" }}
-                                                    src="https://cdn.lordicon.com/iykgtsbt.json"
-                                                    trigger="hover" >
-                                                </lord-icon>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td className='py-2 border border-white text-center'>
-                                        <div className='flex items-center justify-center '>
-                                            <span>{"*".repeat(item.password.length)}</span>
-                                            <div className='lordiconcopy size-7 cursor-pointer' onClick={() => { copyText(item.password) }}>
-                                                <lord-icon
-                                                    style={{ "width": "25px", "height": "25px", "paddingTop": "3px", "paddingLeft": "3px" }}
-                                                    src="https://cdn.lordicon.com/iykgtsbt.json"
-                                                    trigger="hover" >
-                                                </lord-icon>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td className='justify-center py-2 border border-white text-center'>
-                                        <span className='cursor-pointer mx-1' onClick={() => { editPassword(item.id) }}>
+                                    <td className='border py-2 text-center w-32'>{item.site}</td>
+                                    <td className='border py-2 text-center w-32'>{item.username}</td>
+                                    <td className='border py-2 text-center w-32'>{item.password}</td>
+                                    <td className='border py-2 text-center w-32'>
+                                        <span className='cursor-pointer mx-1' onClick={() => {
+                                            editPassword(item.id)
+                                        }}>
                                             <lord-icon
-                                                src="https://cdn.lordicon.com/gwlusjdu.json"
+                                                src="https://cdn.lordicon.com/fikcyfpp.json"
                                                 trigger="hover"
-                                                style={{ "width": "25px", "height": "25px" }}>
+                                                stroke="bold">
                                             </lord-icon>
                                         </span>
-                                        <span className='cursor-pointer mx-1' onClick={() => { deletePassword(item.id) }}>
+                                        <span className='cursor-pointer mx-1' onClick={() => {
+                                            deletePassword(item.id)
+                                        }}>
                                             <lord-icon
-                                                src="https://cdn.lordicon.com/skkahier.json"
-                                                trigger="hover"
-                                                style={{ "width": "25px", "height": "25px" }}>
+                                                src="https://cdn.lordicon.com/oqeixref.json"
+                                                trigger="hover">
                                             </lord-icon>
                                         </span>
                                     </td>
@@ -216,7 +203,6 @@ const Manager = () => {
                     </table>}
                 </div>
             </div>
-
         </>
     )
 }