Merge pull request #86 from AJAYK-01/logged-out-indicator

Add Logged out indicator after checking for missing user session

backgroundScript.js

@@ -31,3 +31,43 @@ chrome.runtime.onInstalled.addListener(() => {
 			.then((data) => dataFromAPI = data); // Store the response data in the dataFromAPI variable.
 	})
 })
+
+/**
+ * Checks Logged in status for showing indicator on supported pages like github and bitbucket.
+ * @param {string} websiteUrl
+ * @param {string} provider
+ * @returns {Promise<boolean>}
+ */
+async function checkLoginStatus(websiteUrl, provider) {
+	let result = false;
+	try {
+		const res = await fetch(`${websiteUrl}/api/auth/session`, { cache: 'no-store' });
+		const json = await res.json();
+
+		if (json.user && json.user.auth_info && json.user.auth_info[provider]) {
+			result = true;
+		}
+	} catch (err) {
+		console.error(err);
+	}
+	return result;
+}
+
+
+/**
+ * Listener to handle login status check request.
+ * The api session request only works via extension background script due to the need of auth cookies in request.
+ */
+chrome.runtime.onMessage.addListener(
+	function (request, _, sendResponse) {
+		const message = JSON.parse(request.message);
+		if (message.action === "check_login_status") {
+			const websiteUrl = message.websiteUrl;
+			const provider = message.provider
+			checkLoginStatus(websiteUrl, provider).then(loggedIn => {
+				sendResponse({ status: loggedIn });
+			});
+		}
+		return true;  // Will respond asynchronously.
+	}
+);

manifest.json

@@ -38,6 +38,7 @@
                 "scripts/api.js",
                 "scripts/highlighting.js",
                 "scripts/repoHandlers.js",
+                "scripts/signedOutIndicator.js",
                 "scripts/orchestrator.js",
                 "scripts/init.js"
             ]

scripts/main.css

@@ -28,5 +28,4 @@ tr[data-hunk="9ab7f36934cf29a090a7f1f7f432ab43eda8cf806712acde424581fcf2a221ca"]
     background-color: rgb(122, 126, 0);
     background-color: rgb(164, 167, 0);
 }
- */
-
+ */

scripts/orchestrator.js

@@ -1,21 +1,21 @@
 /**
  * The `orchestrator` function is responsible for orchestrating various actions based on the current URL of the tab.
- * 
+ *
  * Functionality:
  * 1. Logs the updated tab URL for debugging purposes.
  * 2. Checks if the user is logged in when on GitHub or Bitbucket. If not, a warning is displayed.
  * 3. Retrieves the 'backendUrl' from Chrome local storage.
- * 
+ *
  * For GitHub:
  * - If on a specific repository page (e.g., https://github.com/mui/mui-toolpad), it displays a floating action button.
  * - If on a repository's pull requests page, it highlights relevant PRs.
  * - If viewing files of a specific pull request, it highlights important files and specific code hunks.
  * - If on a user or organization's main page or repositories page, it updates the display of tracked repositories.
- * 
+ *
  * For Bitbucket:
  * - If on a workspace's repositories page, it updates the display of tracked repositories.
  * - If on a repository's pull requests page, it highlights relevant PRs or specific files and code hunks in a PR.
- * 
+ *
  * Note: This function assumes it's running in the context of a browser extension, given its use of the 'chrome.storage' API and specific URL patterns for GitHub and Bitbucket.
  */
 const orchestrator = async (tabUrl, websiteUrl, userId) => {
@@ -29,9 +29,9 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 
 	if (!userId && (urlObj[2] === 'github.com' || urlObj[2] === 'bitbucket.org')) {
 		console.warn(`[Vibinex] You are not logged in. Head to ${websiteUrl} to log in`);
-		// TODO: create a UI element on the screen with CTA to login to Vibinex
 	}
 	if (urlObj[2] == 'github.com') {
+		addSignedOutIndicator(websiteUrl, 'github')
 		if (urlObj[3] && (urlObj[3] !== 'orgs') && urlObj[4]) {
 			// for showing fav button if org repo is not added, eg : https://github.com/mui/mui-toolpad
 			const ownerName = urlObj[3];
@@ -88,6 +88,7 @@ const orchestrator = async (tabUrl, websiteUrl, userId) => {
 	}
 
 	if (urlObj[2] === 'bitbucket.org') {
+		addSignedOutIndicator(websiteUrl, 'bitbucket')
 		// for showing tracked repo of a organization 
 		if (urlObj[4] === 'workspace' && urlObj[5] === 'repositories') {
 			const workspaceSlug = urlObj[3];

scripts/signedOutIndicator.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if user is logged out and call addIndicator
+ * @param {string} provider
+ * @param {string} websiteUrl
+ */
+function addSignedOutIndicator(websiteUrl, provider) {
+    const message = {
+        action: "check_login_status",
+        websiteUrl: websiteUrl,
+        provider: provider
+    }
+    chrome.runtime.sendMessage({
+        message: JSON.stringify(message)
+    }, async function (response) {
+        if (response.status === false) {
+            createElement(provider)
+        }
+    });
+}

scripts/utilities.js

@@ -1,7 +1,7 @@
 /**
  * Creates and appends a floating UI element to the page based on the specified type.
  * 
- * @param {string} type - The type of element to create ("loading", "add", or "error").
+ * @param {string} type - The type of element to create ("loading", "add", "error", "github" or "bitbucket").
  * @param {string} websiteUrl - The base URL for Vibinex (default: "https://vibinex.com").
  */
 function createElement(type = "add", websiteUrl = "https://vibinex.com") {
@@ -25,6 +25,16 @@ function createElement(type = "add", websiteUrl = "https://vibinex.com") {
 			imgUrl = "https://cdn-icons-png.flaticon.com/512/1243/1243911.png?w=740&t=st=1680153899~exp=1680154499~hmac=be129e6a5a3dd4b9a362138086907f3330050f0a300473c5ed0e7e9541ece2de"
 			bannerMessage = "Something went wrong";
 			break;
+		case "github":
+			loadingIconID = "vibinexLoginIcon";
+			imgUrl = "https://img.icons8.com/external-tal-revivo-bold-tal-revivo/24/FFFFFF/external-github-with-cat-logo-an-online-community-for-software-development-logo-bold-tal-revivo.png";
+			bannerMessage = "Log in with GitHub";
+			break;
+		case "bitbucket":
+			loadingIconID = "vibinexLoginIcon";
+			imgUrl = "https://img.icons8.com/external-tal-revivo-bold-tal-revivo/24/FFFFFF/external-bitbucket-is-a-web-based-version-control-repository-hosting-service-logo-bold-tal-revivo.png";
+			bannerMessage = "Log in with Bitbucket";
+			break;
 		default:
 			break;
 	}
@@ -59,6 +69,10 @@ function createElement(type = "add", websiteUrl = "https://vibinex.com") {
 	if (type === "add") {
 		redirectLink.href = `${websiteUrl}/docs`;
 	}
+	else if (type === "github" || type === "bitbucket") {
+		redirectLink.href = `${websiteUrl}/api/auth/signin`
+		redirectLink.target = '_blank'
+	}
 	redirectLink.appendChild(loadingGif);
 	redirectLink.appendChild(img);
 
@@ -81,9 +95,35 @@ function createElement(type = "add", websiteUrl = "https://vibinex.com") {
 	}
 	redirectLink.addEventListener('mouseover', () => changeCss(true));
 	redirectLink.addEventListener('mouseout', () => changeCss(false));
-    // Append the created elements to the document body.
+	// Append the created elements to the document body.
 	document.body.appendChild(redirectLink);
 	document.body.appendChild(infoBanner);
+
+	if (loadingIconID === "vibinexLoginIcon") {
+		// Create and style the login indicator.
+		const loginButton = document.createElement('button');
+		loginButton.style.borderRadius = '39px';
+		loginButton.style.paddingLeft = '44px';
+		loginButton.style.paddingRight = '15px';
+		loginButton.style.border = 'none';
+		loginButton.style.backgroundColor = 'black';
+		loginButton.style.color = 'white';
+		loginButton.style.cursor = 'pointer';
+		loginButton.style.position = 'fixed';
+		loginButton.style.left = '26px';
+		loginButton.style.bottom = '48px';
+		loginButton.style.height = '39px';
+		loginButton.style.zIndex = '199'
+		loginButton.style.alignItems = 'center';
+
+		// Append the login text to the login button.
+		loginButton.appendChild(document.createTextNode(bannerMessage));
+
+		// Replace the loading icon with the login button.
+		redirectLink.replaceChild(loginButton, loadingGif);
+		infoBanner.remove();
+	}
+
 }
 
 /**
@@ -100,6 +140,9 @@ function destroyElement(type) {
 		document.getElementById('vibinexPlusIcon').remove();
 	else if (type === "error")
 		document.getElementById('vibinexErrorIcon').remove();
+	else if (type === "login") {
+		document.getElementById('vibinexLoginIcon').remove();
+	}
 }
 
 /**