extension audo logut issue resolved

background.js

 var getUserDetails = null
 
 !function () {
-    var origin = "https://begenieus.online"
+    var origin = "http://localhost:3039"
     var tutorShotId = null
     var imageNumber = 0;
     var recording = false;

content.js

@@ -5,7 +5,7 @@ var loggedIn = false;
 var floatingBar = null;
 var startingOverlay = null;
 var overlayInterval = null;
-const origin = "https://begenieus.online"
+const origin = "http://localhost:3039"
 var userDetails = {};
 var btn = {};
 var tutorShotOid = null;

manifest.json

 {
     "manifest_version": 3,
     "name": "Tutor Shot Local",
-    "version": "1.7",
-    "description": "Capture web-page screenshots instantly with a single click. They're saved to your account at https://begenieus.online.",
+    "version": "1.8",
+    "description": "Capture web-page screenshots instantly with a single click. They're saved to your account at http://localhost:3039.",
     "permissions": [
         "activeTab",
         "storage"

popup.js

 !function () {
-    const origin = "https://begenieus.online"
+    const origin = "http://localhost:3039"
 
     const api = axios.create({
         baseURL: `${origin}/api`, // the base URL for nodeserver is okay but NGINX is giving error
@@ -10,6 +10,7 @@
     });
     
 
+    var loginCount = 0;
     let recording = false;
     let loggedIn = false;
     let startBtn = document.getElementById('start-btn')
@@ -89,14 +90,23 @@
     function domLoadHandler() {
         chrome.runtime.sendMessage({ action: "checkStatus" }, function (response) {
             userDetails = response.userDetails;
-            loggedIn = response.loggedIn,
-                recording = response.recording
+            loggedIn = response.loggedIn, recording = response.recording
             modifyPopupUI()
+            if(!Object.keys(userDetails).length && loginCount++<2){
+                let extLoader = document.getElementById('ext-loader')
+                extLoader.style.display = 'flex'
+                let loginContainer = document.getElementById('login-btn')?.parentNode
+                if (loginContainer) loginContainer.style.display = 'none'
+                setTimeout( ()=>{
+                    if (loginContainer) loginContainer.style.display = 'flex'
+                    extLoader.style.display = 'none'
+                    domLoadHandler()
+                }, 500 )
+            }
         })
     }
     // this code should run everytime the popup is opened
     document.addEventListener("DOMContentLoaded", domLoadHandler);
-    console.log('pop-up loaded again')
 
 
 

style.css

+.typing {
+    display: block;
+    width: 60px;
+    height: 30px;
+    border-radius: 20px;
+    margin-top: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.circle {
+    display: block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    background-color: #fb8c07;
+    margin: 3px;
+}
+
+.circle.bouncing {
+    animation: bounce 1000ms ease-in-out infinite;
+    animation-delay: 3600ms;
+}
+
+.circle:nth-child(1) {
+    animation-delay: 0ms;
+}
+
+.circle:nth-child(2) {
+    animation-delay: 333ms;
+}
+
+.circle:nth-child(3) {
+    animation-delay: 666ms;
+}
+
+.para {
+    padding: 20px;
+    color: #252525;
+    font-size: 1rem;
+    text-align: center;
+    margin: 0;
+}
+
+.btn-container {
+    display: flex;
+    padding: 30px;
+    padding-top: 0;
+}
+
+.btn-primary {
+    background-color: #f36418;
+    background-image: linear-gradient(150deg, #f36418 19%, #fc9c2a 75%);
+    border: none;
+    cursor: pointer;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    height: 40px;
+    text-align: center;
+    padding: 8px 16px;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    flex: 1;
+    margin: 0.25rem;
+    display: flex;
+    color: #fff;
+}
+
+.btn-secondary {
+    background-color: #eeeeee;
+    border: none;
+    cursor: pointer;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    height: 40px;
+    border-radius: 8px;
+    text-align: center;
+    padding: 8px 16px;
+    align-items: center;
+    line-height: 1.5;
+    justify-content: center;
+    text-decoration: none;
+    flex: 1;
+    margin: .25rem;
+    display: flex;
+    color: #1e3039;
+}
+
+.btn-primary-sm {
+    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;
+}
+
+.info-text {
+    max-width: 265px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.profile-container {
+    text-decoration: none;
+    color: #1c1c1c;
+    font-size: 12px;
+    line-height: 14px;
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-img {
+    border: 2px solid #fff;
+    border-radius: 50%;
+    height: 32px;
+    margin-right: 8px;
+    max-width: 50px;
+    overflow: hidden;
+    width: 32px;
+}
+
+@keyframes typing {
+    0% {
+        transform: scale(1);
+    }
+
+    33% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.4);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bounce {
+    0% {
+        transform: translateY(0);
+    }
+
+    33% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
\ No newline at end of file