script.js

function maskPassword(pass){
    let str = "";
    for (let i = 0; i < pass.length; i++){
        str += "•";
    }
    return str;
}

function showToast(message, type){

    let toast = document.getElementById("toast");
    toast.innerText = message;
    toast.className = "";
    toast.classList.add(type);
    toast.classList.add("show");

    setTimeout(()=>{
        toast.classList.remove("show");
    },2500);
}

function copyText(txt){
    navigator.clipboard.writeText(txt).then(()=>{
        showToast("📋 Password copied successfully!","info");
    }).catch(()=>{
        showToast("❌ Failed to copy password.","error");
    });
}

function togglePassword(index, password){

    let passwordCell = document.getElementById("password" + index);
    let eye = document.getElementById("eye" + index);

    if(passwordCell.innerText == maskPassword(password)){

        passwordCell.innerText = password;
        eye.classList.remove("fa-eye");
        eye.classList.add("fa-eye-slash");
    }
    else{

        passwordCell.innerText = maskPassword(password);
        eye.classList.remove("fa-eye-slash");
        eye.classList.add("fa-eye");
    }

}

const deletePassword = (website)=>{

    let data = localStorage.getItem("passwords");
    let arr = JSON.parse(data);

    let arrUpdated = arr.filter((e)=>{
        return e.website != website;
    });

    localStorage.setItem("passwords", JSON.stringify(arrUpdated));

    showToast("🗑 Password deleted successfully!","error");

    showPasswords();
}


// Display Passwords
const showPasswords = ()=>{

    let tb = document.querySelector("table");
    let data = localStorage.getItem("passwords");

    if (data == null || JSON.parse(data).length == 0){

        tb.innerHTML = `
        <tr>
            <th>Website</th>
            <th>Username</th>
            <th>Password</th>
            <th>Actions</th>
        </tr>

        <tr>
            <td colspan="4" class="empty">
                🔐 No passwords saved yet.
            </td>
        </tr>
        `;

    } 
    else{

        tb.innerHTML = `
        <tr>
            <th>Website</th>
            <th>Username</th>
            <th>Password</th>
            <th>Actions</th>
        </tr>`;

        let arr = JSON.parse(data);

        let str = "";

        for (let i = 0; i < arr.length; i++){

            const element = arr[i];

            str += `
            <tr>

                <td>${element.website}</td>
                <td>${element.username}</td>
                <td id="password${i}">${maskPassword(element.password)}</td>

                <td>

                    <button class="btnsm"
                        onclick="togglePassword(${i},'${element.password}')"
                        title="Show Password">
                        <i id="eye${i}" class="fa-regular fa-eye"></i>
                    </button>

                    <button class="btnsm"
                        onclick="copyText('${element.password}')"
                        title="Copy Password">
                        <i class="fa-solid fa-copy"></i>
                    </button>

                    <button class="btnsm"
                        onclick="deletePassword('${element.website}')"
                        title="Delete Password">
                        <i class="fa-solid fa-trash-can"></i>
                    </button>

                </td>

            </tr>
            `;
        }

        tb.innerHTML += str;
    }

    website.value = "";
    username.value = "";
    password.value = "";
};

showPasswords();


// Save Password
document.querySelector(".btn").addEventListener("click",(e)=>{

    e.preventDefault();

    if(
        website.value.trim() === "" ||
        username.value.trim() === "" ||
        password.value.trim() === ""
    ) 
    {
        showToast("⚠ Please fill all the fields.","error");
        return;
    }

    let passwords = localStorage.getItem("passwords");

    if (passwords == null){

        let json = [];

        json.push({
            website: website.value,
            username: username.value,
            password: password.value
        });

        localStorage.setItem("passwords", JSON.stringify(json));

    } 
    else{

        let json = JSON.parse(passwords);

        json.push({
            website: website.value,
            username: username.value,
            password: password.value
        });

        localStorage.setItem("passwords", JSON.stringify(json));
    }
    showToast("✅ Password saved successfully!","success");
    showPasswords();
});