Skip to content

Added organisation name button #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 2 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,41 +120,8 @@ 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. **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.

4. **Get Customized SCRUM Reports**
- The reports will now be generated using contributions from your organization.


## About contributing
Expand Down
5 changes: 3 additions & 2 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

@import "tailwindcss";
@tailwind base;
@tailwind components;
Expand Down Expand Up @@ -362,7 +363,7 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
}
.dark-mode #homeButton:active {
background: #374151;
=======
}
.dark-mode .token-preview-char {
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
}
209 changes: 126 additions & 83 deletions src/popup.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -8,71 +9,82 @@
<link rel="stylesheet" type="text/css" href="index.css">
<script src="./scripts/fontawesome.js"></script>
<style type="text/css">
html,body{
width: 375px !important;
height: 600px !important;
max-height: 600px !important;
overflow-y: scroll;
background: #eae4e4;
}
</style>
html,
body {
width: 375px !important;
height: 600px !important;
max-height: 600px !important;
overflow-y: scroll;
background: #eae4e4;
}
</style>
</head>

<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 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="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"></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>
<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>
</div>
</div>

<div class="rounded-2xl">
<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-4 mx-2 my-2">

<div id="reportSection" class="tab-content">
<div>
<h4>Your Project Name</h4>
<input id="projectName" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Enter your project name">
<input id="projectName" type="text"
class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2"
placeholder="Enter your project name">
</div>
<div>
<h4>Your Github Username</h4>
<input id="githubUsername" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Required for fetching your contributions">
<input id="githubUsername" type="text"
class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2"
placeholder="Required for fetching your contributions">
</div>

<div>
<p class="text-sm">Fetch your contributions between:</p>
<div class="flex justify-between items-center my-2 mx-4">
<div class="flex items-center gap-2">
<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio"
onclick="toggleRadio(this)">
<label for="lastWeekContribution">Last 7 days</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio"
onclick="toggleRadio(this)">
<label for="yesterdayContribution">Last 1 day</label>
</div>
</div>

<div id="customDateContainer" class="flex justify-between items-center mt-2">
<div>
<label for="startingDate">Start Date:</label>
Expand All @@ -84,38 +96,56 @@ <h4>Your Github Username</h4>
</div>
</div>
</div>

<div class="col s12">
<br />
<input type="checkbox" id="showOpenLabel" class="form-checkbox h-4 w-4 text-blue-600">
<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed Label</label>
<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed
Label</label>
</div>
<div class="my-4">
<p class="text-sm font-medium">What is blocking you from making progress?</p>
<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1" placeholder="Enter your reason">
<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1"
placeholder="Enter your reason">
<hr class="border-t-2 border-gray-700 mt-1 ">
</div>
<div>
<div>
<h6 class="text-base font-semibold">Scrum Report</h6>
<div id="scrumReport"
contenteditable="true"
class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-100 rounded-xl text-gray-800 p-2 my-2">
<div id="scrumReport" contenteditable="true"
class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-100 rounded-xl text-gray-800 p-2 my-2">
</div>
</div>
<div class="flex justify-between gap-2">
<button id="generateReport" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
<i class="fa fa-refresh"></i> Generate Report
<button id="generateReport"
class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
<i class="fa fa-refresh"></i> Generate Report
</button>
<button id="copyReport" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
<i class="fa fa-copy"></i> Copy Report
<button id="copyReport"
class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
<i class="fa fa-copy"></i> Copy Report
</button>
</div>
</div>
</div>

<div id="settingsSection" class="tab-content hidden">

<div class="">
<div class="flex items-center mt-4">
<h4>Organisation Name</h4>
<span class="tooltip-container ml-2">
<i class="fa fa-question-circle question-icon"></i>
<span class="tooltip-bubble">
<b>Which organisation's GitHub activity?</b><br>
Enter the GitHub organisation name to fetch activites for. Default is <b>fossasia</b>.
Organisation name is not case-sensitive.
</span>
</span>
</div>
<input id="orgInput" type="text"
class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2"
placeholder="Enter organisation name (default: fossasia)">
</div>
<div class="">
<div class="flex items-center justify-between">
<div class="flex">
Expand All @@ -124,9 +154,13 @@ <h4>Your Github Token</h4>
<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>
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>
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>
Expand All @@ -137,19 +171,26 @@ <h4>Your Github Token</h4>
<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">
<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">
We are caching the data to avoid redundant calls. By default the cache expires after 10 minutes, you can change it here to your desired time. We have given a refresh cache button in case you want to fetch fresh data right now.
We are caching the data to avoid redundant calls. By default the cache expires after 10 minutes, you
can change it here to your desired time. We have given a refresh cache button in case you want to
fetch fresh data right now.
</span>
</span>
</p>
<input type="text" id="cacheInput" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Write Cache TTL in minutes (Default 10 minutes)">
</p>
<input type="text" id="cacheInput"
class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2"
placeholder="Write Cache TTL in minutes (Default 10 minutes)">
</div>
<div class="">
<button id="refreshCache" class="w-full mt-3 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded flex items-center justify-center gap-2 transition-colors duration-200">
<button id="refreshCache"
class="w-full mt-3 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded flex items-center justify-center gap-2 transition-colors duration-200">
<i class="fa fa-refresh"></i>
<span>Refresh Data (bypass cache)</span>
</button>
Expand All @@ -158,53 +199,55 @@ <h4>Your Github Token</h4>
Use this button to fetch fresh data immediately.
</p>
</div>

</div>

<!-- asdfghjklkjhgfdsasdfghjkjhgfdsasdfghjk -->
<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
<div>
<h4 class="font-semibold text-xl">Note:</h4>
<ul class="text-xs list-disc list-inside">
<li>The PRs fetched are based on the most recent review by any contributor. If you reviewed a PR 10 days ago and someone else reviewed it 2 days ago, it will still appear in your activity for the past week. (<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">See this issue</a>.)
<li>The PRs fetched are based on the most recent review by any contributor. If you reviewed a PR 10 days
ago and someone else reviewed it 2 days ago, it will still appear in your activity for the past week.
(<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">See this issue</a>.)
</li>
<li>Please note that some discrepancies may occur in the generated SCRUM. We recommend manually reviewing and editing the report to ensure accuracy before sharing
<li>Please note that some discrepancies may occur in the generated SCRUM. We recommend manually reviewing
and editing the report to ensure accuracy before sharing
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="mt-6 border-t border-gray-300">
<div class="bg-white rounded-3xl mx-2 mt-4 mb-2 p-4 border border-gray-100 shadow-sm">
<div class="flex items-center justify-center space-x-3">
<a target="_blank"
href="https://github.com/fossasia/scrum_helper"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
<i class="fa fa-code text-sm"></i>
<span class="text-sm font-medium">View Code</span>
</a>
<a target="_blank"
href="https://github.com/fossasia/scrum_helper/issues"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
<i class="fa fa-bug text-sm"></i>
<span class="text-sm font-medium">Report Issue</span>
</a>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-200 flex justify-center items-center py-5">
<p class="text-xs text-gray-600 text-center">
Made with ❤️ by <strong>FOSSASIA</strong> •
<span class="text-gray-500 dark:text-gray-300">v2.0</span>
</p>
<div class="mt-6 border-t border-gray-300">
<div class="bg-white rounded-3xl mx-2 mt-4 mb-2 p-4 border border-gray-100 shadow-sm">
<div class="flex items-center justify-center space-x-3">
<a target="_blank" href="https://github.com/fossasia/scrum_helper"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
<i class="fa fa-code text-sm"></i>
<span class="text-sm font-medium">View Code</span>
</a>
<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
<i class="fa fa-bug text-sm"></i>
<span class="text-sm font-medium">Report Issue</span>
</a>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-200 flex justify-center items-center py-5">
<p class="text-xs text-gray-600 text-center">
Made with ❤️ by <strong>FOSSASIA</strong> •
<span class="text-gray-500 dark:text-gray-300">v2.0</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/scrumHelper.js"></script>
<script src="scripts/popup.js"></script>
</body>

</html>
Loading