Add Logged out indicator after checking for missing user session

AJAYK-01 commented 12 months ago

What this PR is about:

Add an indicator div element on top of github.com and bitbucket.org webpages to show user has not logged in the vibinex extension.
Linked epic

screenshot_2023-11-20_at_9 26 43_pm screenshot_2023-11-20_at_9 22 41_pm

Summary by CodeRabbit

New Features
- Implemented a visual indicator to show when users are signed out on specific websites.
- Added functionality to check user login status on GitHub and Bitbucket.
Enhancements
- Improved UI elements for login status indication, including new styles for GitHub and Bitbucket.
Bug Fixes
- Fixed an issue where the login status indicator was not displaying correctly.
Style
- Updated CSS for the new visual indicator element to ensure proper display and aesthetics.
Chores
- Removed unnecessary comment block from CSS file for cleaner code maintenance.

coderabbitai[bot] commented 12 months ago

[!WARNING]

Rate Limit Exceeded

@AJAYK-01 has exceeded the limit for the number of files or commits that can be reviewed per hour. Please wait 4 minutes and 42 seconds before requesting another review.

How to resolve this issue?
After the wait time has elapsed, a review can be triggered using the @coderabbitai review command. Alternatively, push new commits to this PR. We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?
CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our [FAQ](https://coderabbit.ai/docs/faq) for further information.

Commits
Files that changed from the base of the PR and between e51bed6b99699386a05a790a0c594fd2ce86076f and b7e74d1ceb6a6c7745e6cc1cbe2115f3f50a19be.

Walkthrough

The changes involve the introduction of a new feature in a browser extension that checks the login status of a user on GitHub and Bitbucket. When the user is not logged in, a visual indicator is added to the interface. This is achieved through new functions for checking login status, message handling in the background script, and UI updates in the orchestrator script. The utilities are updated to create and destroy new UI elements, and the main CSS is updated to style the new indicator.

Changes

File Path	Change Summary
backgroundScript.js	Added `checkLoginStatus` function and message listener for login status checks, with error handling.
scripts/orchestrator.js	Updated to call `addSignedOutIndicator` for GitHub and Bitbucket URLs, with minor conditional and formatting changes.
scripts/signedOutIndicator.js	Introduced `addSignedOutIndicator` function to send messages and handle responses for login status.
scripts/utilities.js	Modified `createElement` and `destroyElement` functions to support new "github", "bitbucket", and "login" UI elements.
scripts/main.css	Added styles for `#vibinex-indicator` and its child `img`, and removed a comment block.

Tips

### Chat with CodeRabbit Bot (`@coderabbitai`) - If you reply to a *review comment* from CodeRabbit, the bot will automatically respond. - To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment - Note: Review comments are made on code diffs or files, not on the PR overview. - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Note: For conversation with the bot, please use the review comments on code diffs or files. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json`

AJAYK-01 commented 12 months ago

e0c8b25 adds the enhancement over the initial commits to check for the correct auth provider which is logged in. For eg, if user is logged in to Vibinex via Github but is currently on a Bitbucket repo page, then the indicator will still be present due to this check.

However, whilst working on this enhancement, I found that the backend api has a bug, which returns multiple logged in auth tokens if I had previously logged into another provider. For eg, consider the below condition:

I logged into Github.
Next I logged in to Bitbucket.
Next I use the extension to log out of Vibinex.
Now I log in via Github only.
But the api responds with both Github and Bitbucket in its response as shown below.