Merge pull request #118 from vedansh-5/authApi

Authenticated API

Author: hpdang

README.md

@@ -116,8 +116,41 @@ Scrum Helper is not limited to the [FOSSASIA](https://github.com/fossasia) organ
    * Save your changes.
    * For Chrome: Rebuild or reload the extension in your browser (`chrome://extensions` → Refresh your extension).
    * For Firefox: Reload the temporary add-on by going to `about:debugging` → "This Firefox" → Click "Reload" next to your extension.
-4. **Get Customized SCRUM Reports**
-   - The reports will now be generated using contributions from your organization.
+
+4. **How to Obtain a GitHub Personal Access Token**
+
+- To use Scrum Helper with authenticated requests (for higher rate limits and private repositories), you need a GitHub personal access token.
+
+  #### Steps to Generate a Token
+
+  1. **Go to GitHub Developer Settings:**  
+    Visit [https://github.com/settings/tokens](https://github.com/settings/tokens) while logged in to your GitHub account.
+
+  2. **Choose Token Type:**  
+    - Select **"Personal access tokens (classic)"**.
+
+  3. **Generate a New Token:**  
+    - Click **"Generate new token"**.
+    - Give your token a descriptive name (e.g., "Scrum Helper Extension").
+    - Set an expiration date if desired.
+
+  4. **Create and Copy the Token:**  
+    - Click **"Generate token"** at the bottom.
+    - **Copy the token** and save it securely. You will not be able to see it again!
+
+  5. **Paste the Token in Scrum Helper:**  
+    - Open the Scrum Helper extension popup.
+    - Paste your token into the "GitHub Token" field.
+
+  > **Keep your token secret!** Never share it or commit it to public repositories.
+
+  **Why use a token?**  
+  GitHub tokens allow the extension to make authenticated requests, increasing your API rate limit and enabling access to private repositories if you grant those permissions.
+
+  ---
+5. **Get Customized SCRUM Reports**
+    - The reports will now be generated using contributions from your organization.
+
 
 
 ## About contributing

src/index.css

@@ -253,89 +253,98 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
 }
 
 .tooltip-bubble {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    background-color: #1f2937;
-    color: white;
-    text-align: left;
-    padding: 12px;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 1.4;
+    position: fixed !important;
+    z-index: 9999;
+    background: #f9fafb;
+    color: #222;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.12), 0 1.5px 4px 0 rgba(0,0,0,0.08);
+    padding: 14px 18px;
+    font-size: 13px;
+    line-height: 1.5;
+    min-width: 220px;
+    max-width: 320px;
     white-space: normal;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    z-index: 1000;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    width: 280px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s;
 }
 
-.tooltip-bubble {
-    bottom: 125%;
-    left: 150%;
-    transform: translateX(-50%);
+.tooltip-container:hover .tooltip-bubble,
+.tooltip-container:focus-within .tooltip-bubble {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.tooltip-bubble a {
+    color: #2563eb;
+    text-decoration: underline;
 }
 
 .tooltip-bubble::after {
     content: "";
     position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
+    width: 0; height: 0;
     border-style: solid;
-    border-color: #1f2937 transparent transparent transparent;
 }
 
-.tooltip-container.tooltip-bottom .tooltip-bubble {
-    top: 125%;
-    bottom: auto;
-}
 
-.tooltip-container.tooltip-bottom .tooltip-bubble::after {
-    top: -10px;
-    border-color: transparent transparent #1f2937 transparent;
+.dark-mode .tooltip-bubble {
+    background: #f3f4f6;
+    color: #222;
+    border: 1px solid #374151;
 }
 
-.tooltip-container.tooltip-right .tooltip-bubble {
-    top: -5px;
-    left: 125%;
-    bottom: auto;
-    transform: none;
+.dark-mode .tooltip-bubble::after {
+    border-color: #374151 transparent transparent transparent;
 }
 
-.tooltip-container.tooltip-right .tooltip-bubble::after {
-    top: 15px;
-    left: -10px;
-    border-color: transparent #1f2937 transparent transparent;
+.dark-mode .tooltip-container.tooltip-bottom .tooltip-bubble::after {
+    border-color: transparent transparent #374151 transparent;
 }
 
-.tooltip-container:hover .tooltip-bubble {
-    visibility: visible;
-    opacity: 1;
+.dark-mode .tooltip-container.tooltip-right .tooltip-bubble::after {
+    border-color: transparent #374151 transparent transparent;
 }
-
-.dark-mode .question-icon {
-    color: #9ca3af;
+#toggleTokenVisibility {
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-left: 8px;
+    padding: 0;
+    line-height: 1;
 }
-
-.dark-mode .question-icon:hover {
-    color: #60a5fa;
+#tokenEyeIcon {
+    font-size: 18px;
+    vertical-align: middle;
 }
-
-.dark-mode .tooltip-bubble {
-    background-color: #374151;
-    border: 1px solid #4b5563;
+@keyframes eye-rotate {
+  0% { transform: rotate(0deg);}
+  60% { transform: rotate(180deg);}
+  100% { transform: rotate(180deg);}
+}
+.eye-animating {
+  animation: eye-rotate 0.4s cubic-bezier(0.4,0,0.2,1);
+}
+.token-animating {
+  transition: box-shadow 0.3s, background 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
+  box-shadow: 0 0 0 2px #3b82f6;
+  opacity: 0.7;
+  transform: translateX(8px) scale(1.03);
 }
 
-.dark-mode .tooltip-bubble::after {
-    border-color: #374151 transparent transparent transparent;
+.dark-mode #githubToken,
+.dark-mode .token-preview-char {
+    background: #404040 !important;
+    border-color: #505050 !important;
+    color: #fff !important;
 }
 
-.dark-mode .tooltip-container.tooltip-bottom .tooltip-bubble::after {
-    border-color: transparent transparent #374151 transparent;
+.dark-mode .token-preview-dot {
+    background: #9ca3af !important;
 }
 
-.dark-mode .tooltip-container.tooltip-right .tooltip-bubble::after {
-    border-color: transparent #374151 transparent transparent;
+.dark-mode .token-preview-char {
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
 }

src/popup.html

@@ -112,7 +112,28 @@ <h6 class="text-base font-semibold">Scrum Report</h6>
 				<div id="settingsSection" class="tab-content hidden">
 
 					<div class="">
-						<p class="text-sm font-medium">Enter cache TTL <span class="text-sm text-gray-800 font-normal">(in minutes)</span>
+						<div class="flex items-center justify-between">
+							<div class="flex">
+								<h4>Your Github Token</h4>
+								<span class="tooltip-container">
+									<i class="fa fa-question-circle question-icon"></i>
+									<span class="tooltip-bubble">
+										<b>Why is it recommended to add a GitHub token?</b><br>
+										Scrum Helper works without a GitHub token, but adding a personal access token is recommended for a better experience. It raises your API limits, allows access to private repos (if permitted), and improves accuracy and speed. Tokens are stored locally and never sent to us and used only to fetch your git data. You can add one anytime in the extension settings.<br><br>
+										<b>How to obtain:</b><br>
+										1. Go to <a href="https://github.com/settings/tokens" target="_blank" style="color:#2563eb;text-decoration:underline;">GitHub Developer Settings</a>.<br>
+										3. Click "Generate new token", select classic token<br>
+										4. Paste it here.<br>
+										<i>Keep your token secret!</i>
+									</span>
+								</span>
+							</div>
+							<button id="toggleTokenVisibility" type="button" class="focus:outline-none">
+								<i id="tokenEyeIcon" class="fa fa-eye text-gray-600"></i>
+							</button>
+						</div>
+						<input id="githubToken" type="password" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2 pr-10" placeholder="Required for making authenticated requests">
+						<p class="text-sm font-medium">Enter cache TTL <span class="text-sm font-normal">(in minutes)</span>
 							<span class="tooltip-container">
 								<i class="fa fa-question-circle question-icon"></i>
 								<span class="tooltip-bubble">

src/scripts/main.js

@@ -1,5 +1,6 @@
 let enableToggleElement = document.getElementById('enable');
 let githubUsernameElement = document.getElementById('githubUsername');
+let githubTokenElement = document.getElementById('githubToken');
 let cacheInputElement = document.getElementById('cacheInput');
 let projectNameElement = document.getElementById('projectName');
 let lastWeekContributionElement = document.getElementById('lastWeekContribution');
@@ -23,11 +24,15 @@ function handleBodyOnLoad() {
 			'lastWeekContribution',
 			'yesterdayContribution',
 			'cacheInput',
+			'githubToken',
 		],
 		(items) => {
 			if (items.githubUsername) {
 				githubUsernameElement.value = items.githubUsername;
 			}
+			if (items.githubToken) {
+				githubTokenElement.value = items.githubToken;
+			}
 			if (items.projectName) {
 				projectNameElement.value = items.projectName;
 			}
@@ -206,6 +211,10 @@ function handleGithubUsernameChange() {
 	let value = githubUsernameElement.value;
 	chrome.storage.local.set({ githubUsername: value });
 }
+function handleGithubTokenChange() {
+	let value = githubTokenElement.value;
+	chrome.storage.local.set({ githubToken: value });
+}
 function handleProjectNameChange() {
 	let value = projectNameElement.value;
 	chrome.storage.local.set({ projectName: value });
@@ -235,6 +244,7 @@ function handleUserReasonChange() {
 }
 enableToggleElement.addEventListener('change', handleEnableChange);
 githubUsernameElement.addEventListener('keyup', handleGithubUsernameChange);
+githubTokenElement.addEventListener('keyup', handleGithubTokenChange);
 cacheInputElement.addEventListener('keyup', handleCacheInputChange);
 projectNameElement.addEventListener('keyup', handleProjectNameChange);
 startingDateElement.addEventListener('change', handleStartingDateChange);

src/scripts/popup.js

@@ -47,6 +47,10 @@ document.addEventListener('DOMContentLoaded', function() {
     const darkModeToggle = document.querySelector('img[alt="Night Mode"]');
     const settingsIcon = document.getElementById('settingsIcon');
     const body = document.body;
+    const githubTokenInput = document.getElementById('githubToken');
+    const toggleTokenBtn = document.getElementById('toggleTokenVisibility');
+    const tokenEyeIcon = document.getElementById('tokenEyeIcon');
+    let tokenVisible = false;
 
     chrome.storage.local.get(['darkMode'], function(result) {
         if(result.darkMode) {
@@ -58,6 +62,18 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    toggleTokenBtn.addEventListener('click', function() {
+        tokenVisible = !tokenVisible;
+        githubTokenInput.type = tokenVisible ? 'text' : 'password';
+        
+        tokenEyeIcon.classList.add('eye-animating');
+        setTimeout(() => tokenEyeIcon.classList.remove('eye-animating'), 400);
+        tokenEyeIcon.className = tokenVisible ? 'fa fa-eye-slash text-gray-600' : 'fa fa-eye text-gray-600';
+
+        githubTokenInput.classList.add('token-animating');
+        setTimeout(() => githubTokenInput.classList.remove('token-animating'), 300);
+    });
+
     darkModeToggle.addEventListener('click', function() {
         body.classList.toggle('dark-mode');
         const isDarkMode = body.classList.contains('dark-mode');
@@ -67,8 +83,28 @@ document.addEventListener('DOMContentLoaded', function() {
         if(settingsIcon){
             settingsIcon.src = isDarkMode ? 'icons/settings-night.png' : 'icons/settings-light.png';
         }
+        renderTokenPreview();
     });
 
+    function renderTokenPreview() {
+        tokenPreview.innerHTML = '';
+        const value = githubTokenInput.value;
+        const isDark = document.body.classList.contains('dark-mode');
+        for (let i = 0; i < value.length; i++) {
+            const charBox = document.createElement('span');
+            charBox.className = 'token-preview-char' + (isDark ? ' dark-mode' : '');
+            if (tokenVisible) {
+                charBox.textContent = value[i];
+            } else {
+                const dot = document.createElement('span');
+                dot.className = 'token-preview-dot' + (isDark ? ' dark-mode' : '');
+                charBox.appendChild(dot);
+            }
+            tokenPreview.appendChild(charBox);
+            setTimeout(() => charBox.classList.add('flip'), 10 + i * 30);
+        }
+    }
+
     function updateContentState(enableToggle) {
         const elementsToToggle = [
             'startingDate',
@@ -80,6 +116,7 @@ document.addEventListener('DOMContentLoaded', function() {
             'showOpenLabel',
             'scrumReport',
             'githubUsername',
+            'githubToken',
             'projectName',
             'settingsToggle',
         ];
@@ -297,6 +334,46 @@ document.addEventListener('DOMContentLoaded', function() {
 
 });
 
+// Tooltip bubble 
+document.querySelectorAll('.tooltip-container').forEach(container => {
+    const bubble = container.querySelector('.tooltip-bubble');
+    if (!bubble) return;
+
+    function positionTooltip() {
+        const icon = container.querySelector('.question-icon') || container;
+        const rect = icon.getBoundingClientRect();
+        const bubbleRect = bubble.getBoundingClientRect();
+        const padding = 8;
+
+        let top = rect.top + window.scrollY;
+        let left = rect.right + padding + window.scrollX;
+
+        if (left + bubbleRect.width > window.innerWidth - 10) {
+            left = rect.left - bubbleRect.width - padding + window.scrollX;
+        }
+        if (left < 8) left = 8;
+        if (top + bubbleRect.height > window.innerHeight - 10) {
+            top = rect.top - bubbleRect.height - padding + window.scrollY;
+        }
+        if (top < 8) top = 8;
+
+        bubble.style.left = left + 'px';
+        bubble.style.top = top + 'px';
+    }
+
+    container.addEventListener('mouseenter', positionTooltip);
+    container.addEventListener('focusin', positionTooltip);
+    container.addEventListener('mousemove', positionTooltip);
+    container.addEventListener('mouseleave', () => {
+        bubble.style.left = '';
+        bubble.style.top = '';
+    });
+    container.addEventListener('focusout', () => {
+        bubble.style.left = '';
+        bubble.style.top = '';
+    });
+});
+
 // Radio button click handlers with toggle functionality
 document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
     radio.addEventListener('click', function() {