Merge branch 'master' into name-rog

Author: Preeti9764

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

@@ -287,93 +287,103 @@ hr,
 }
 
 .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;
 }
 
+
 /* Custom Toast Styles for Materialize */
 .toast {
     color: #fff !important;
@@ -427,4 +437,23 @@ hr,
 .dark-mode .toast.toast-error {
     background: #b71c1c !important;
     color: #fff !important;
+
+#homeButton {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+}
+#homeButton:active {
+    background: #e5e7eb;
+}
+.dark-mode #homeButton:active {
+    background: #374151;
+
+.dark-mode .token-preview-char {
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+
 }

src/popup.html

@@ -23,27 +23,32 @@
 <body>
 	<div class="pl-1 py-4 rounded-2xl">
 		<div class="bg-white px-4 py-4 mx-2 mb-2 rounded-3xl">
-			<div class="flex justify-between py-2">
-				<h3 class="text-3xl font-semibold ">Scrum Helper</h3>
-				<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
-			</div>
-			<div>
-				<p class="">Report your development progress by auto-fetching your Git activity for a selected period</p>
-			</div>
 
+				<div class="flex justify-between py-2">
+					<h3 id="scrumHelperHeading" class="text-3xl font-semibold cursor-pointer">Scrum Helper</h3>
+					<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
+				</div>
+				<div>
+					<p class="">Report your development progress by auto-fetching your Git activity for a selected period</p>
+				</div>
+				
 			<div class="center mt-2 flex justify-between">
-				<label class="flex items-center justify-center gap-2 ">
-					Disable
-					<input type="checkbox" value="" id="enable" class="sr-only peer">
-					<div
-						class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600">
+					<label class="flex items-center justify-center gap-2 ">
+						Disable
+						<input type="checkbox" value="" id="enable" class="sr-only peer" >
+						<div class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+						<span class=""></span>
+						Enable
+					</label>
+					<div class="flex">
+						<button id="homeButton" title="Go to Report" class="ml-1 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition">
+							<i class="fa fa-home text-2xl text-gray-600 dark:text-gray-300"></i>
+						</button>
+						<button id="settingsToggle">
+							<img id="settingsIcon" src="icons/settings-light.png" alt="Settings" class="w-6 h-6 mx-3 cursor-pointer">
+						</button>
 					</div>
-					<span class=""></span>
-					Enable
-				</label>
-				<button id="settingsToggle">
-					<img id="settingsIcon" src="icons/settings-light.png" alt="Settings" class="w-7 h-7 mx-3 cursor-pointer">
-				</button>
+
 			</div>
 		</div>
 
@@ -134,8 +139,31 @@ <h6 class="text-base font-semibold">Scrum Report</h6>
 					</div>
 
 					<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);