Todo sign In

index.js

let isAuth = cookies.get('auth-token') ? true :  false;
const fullMain = document.querySelector(".full-main");
setAuth(isAuth);

// when auth got changed make the main clickable and non clickble

function handler(e) {
    e.stopPropagation();
    e.preventDefault();
  }

function makeBodyClickable(bool){

    if(bool){
        console.log("main clickable")
        fullMain.removeEventListener("click",handler);
    }
    else{
        console.log("main unclickable")
        fullMain.addEventListener("click",handler,true);
    }
}
auth.onAuthStateChanged((user) => {
  
    if (user) {
        console.log("Auth run- true");
        const pfp = document.querySelector(".pfp");
      const userPfp = auth.currentUser.photoURL || defaultpfp;
      const userName = document.querySelector('.username');
      pfp.style.backgroundImage = `url(${userPfp})`;
      pfp.classList.add("bg-cover");
      userName.textContent = auth.currentUser.displayName;
      makeBodyClickable(true);
      
    }
    else{
        console.log("Auth run false");
        makeBodyClickable(false);
    }
  });

function setAuth(val){
    isAuth=val;
    const signInDiv = document.querySelector(".sign-in-div");
    const userHeader = document.querySelector(".user-data");
   
    const signOutBtn = document.querySelector('.sign-out');

   
    if(isAuth){
        console.log("setauth -true run")
        signOutBtn.addEventListener("click",()=>{
      
                  let shouldSignOut = confirm("Are you sure to sign Out ? ");
                  if(shouldSignOut)  signUserOut();
          });
         

        signInDiv.classList.add('hidden');
        signInDiv.classList.remove('flex');
        userHeader.classList.remove('hidden');
        userHeader.classList.add('flex');
        fullMain.classList.remove("blur-sm");
        
       

    }
        
    else{
        console.log("set-auth false run")
        signInDiv.classList.remove('hidden');
        userHeader.classList.add('hidden');
        userHeader.classList.remove('flex');
        signInDiv.classList.add('flex');
        fullMain.classList.add("blur-sm");
        
        const userName = document.querySelector('.username');
        userName.textContent = "";
        

    }
}