logout button on click capturer

background.js

@@ -45,8 +45,9 @@ var getUserDetails = null
             imageNumber = imgNum?imgNum:0
             let rec = await getData('recording')
             recording = rec?rec:false
-            loggedIn = true
             userDetails = data
+            loggedIn = (userDetails.email || userDetails.uid)?true:false;
+             
         }
     })
 
@@ -267,6 +268,28 @@ var getUserDetails = null
             setData("recording", false)
             setData("imageNumber", 0)
             setData("tutorShotId", tutorShotId)
+            imageNumber = 0;
+            return
+        }
+        if (request.action === 'logout') {
+            loggedIn = false;
+            recording = false;
+            userDetails = {};
+            tutorShotId = null;
+            imageNumber = 0;
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: "stopped"
+            });
+            sendMessageToActiveTab("recordingStopped")
+            setData("recording", false)
+            setData("imageNumber", 0)
+            setData("tutorShotId", null)
+            setData("userDetails", {})
+            setData("loggedIn", false)
+            // setData()
             return
         }
         if (loggedIn && request.action === 'restartRecording') {

content.js

@@ -304,10 +304,8 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
     if (message.action == 'tabChanged') {
         // console.log('tabChanged', message)
     }
-    if (message.status) {
-    }
-    if (message.action == 'SSCaptured') {
-        // let data = await api.post("/tutor-shot/screen-shot", message)
+    if (message.action == 'loggedOut') {
+        reRenderFloatingBar(data)
     }
     let data = await getCaptureData()
     reRenderFloatingBar(data)

popup.html

@@ -127,6 +127,8 @@
             <div style="display: flex;align-items: center;">
               <button id="my-captures-btn" type="button"  style="background-color: #f36418;background-image: linear-gradient(150deg,#f36418 19%, #fc9c2a 75%);border: none;cursor: pointer;border-radius:6px;font-size: 14px;font-weight: 600;height:30px;padding: 8px 12px;align-items: center;justify-content: center;color: #fff;display: flex; text-decoration: none; margin-left: 40px; margin-top: 10px;">My Captures
               </button>
+              <button id="logout-btn" type="button"  style="background-color: #f36418;background-image: linear-gradient(150deg,#f36418 19%, #fc9c2a 75%);border: none;cursor: pointer;border-radius:6px;font-size: 14px;font-weight: 600;height:30px;padding: 8px 12px;align-items: center;justify-content: center;color: #fff;display: flex; text-decoration: none; margin-left: 40px; margin-top: 10px;">Logout
+              </button>
             </div>
           </div>
         </div>

popup.js

@@ -18,10 +18,20 @@
     let userName = document.getElementById('user-name')
     let userEmail = document.getElementById('user-email')
     let myCapturesBtn = document.getElementById('my-captures-btn')
+    let logoutBtn = document.getElementById('logout-btn')
     myCapturesBtn.addEventListener('click',(e)=>{ window.open(origin+'/tutor-shot-list') })
     let userDetails = {};
     let inProgress = false;
 
+    logoutBtn.addEventListener('click', ()=>{
+        chrome.runtime.sendMessage({ action: "logout" }, async function (response) {
+            loggedIn = false
+            userDetails.email = ""
+            userDetails.uid = ""
+            modifyPopupUI()
+        })
+    })
+
     let loginBtn = document.getElementById('login-btn')
     loginBtn.addEventListener('click', () => { window.open(origin) })