Skip to content

Commit

Permalink
feat: consent page (firefox only)
Browse files Browse the repository at this point in the history
  • Loading branch information
@driedpampas
driedpampas authored Sep 19, 2023
1 parent 3b9ce1a commit 5684450
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 254 deletions.
145 changes: 59 additions & 86 deletions src/html/consent.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>FastForward</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="base.js"></script>
<style>
/* Add your custom CSS styles here */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 20px;
}
.container {
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
p {
color: #555;
font-size: 16px;
line-height: 1.5;
}
button {
background-color: #0073e6;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005bbd;
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
</style>
</head>
<body>
<nav class="uk-navbar-container uk-light" style="background:#1e87f0" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">FastForward</a>
<ul class="uk-navbar-nav">
<li><a href="https://fastforward.team/changelog" target="_blank" data-message="changelog"></a></li>
<li><a href="https://fastforward.team/faq" target="_blank" data-message="faq"></a></li>
<li><a href="https://fastforward.team/contributors" target="_blank" data-message="contributors"></a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Welcome to Your FastForward</h1>
<p>
warning!! are you sure you want this extension to do what it says it does? here at fastforward we care about your privacy and want to make sure you don't accidentally use this extension because that could be disastrous. are you sure you want this button that you don't have to press to function when you press it?
</p>
<p>
this message was brought to you because of mozilla"
</p>
<button id="consentButton">I Agree</button>
<button id="declineButton">I Decline</button>

<div id="popup" class="popup">
<p>You have declined consent. This extension cannot work.</p>
<button id="uninstallPopupButton">Uninstall Extension</button>
</div>

</div>

<script src="consent.js"></script>
<head>
<title>FastForward</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="base.js"></script>
<link rel="stylesheet" href="style.css" />
<style>
.container {
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 80%;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
p {
color: #ffffff;
font-size: 28px;
line-height: 1.5;
}
.buttons {
border: none; /* Increase border width for better visibility */
border-image: linear-gradient(
135deg,
var(--ff-aqua) 0%,
var(--ff-blue) 50%,
var(--ff-purple) 100%
) 1;
background-color: transparent;
border: none;
padding: 18px 36px; /* Increase padding for a larger button */
font-size: 24px; /* Use a font size of 24px for better readability */
cursor: pointer;
border-radius: 8px; /* Increase border radius for a softer look */
transition: background-color 0.3s ease;
}

</body>
</style>
</head>
<body>
<nav>
<ul>
<div class="logo-wrapper"><img class="logo" src="../icon/branding.png" alt="FastForward"></div>
</ul>
</nav>
<div class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right">
<div class="container">
<h2>Thank you for installing FastForward</h2>
<p>
This extension collects the tab url when you choose to add a website to the whitelist.
</p>
<p>
If you consent to this data collection hit "Agree" to continue. Otherwise hit "Refuse" and the extension will be uninstalled.
</p>
<button id="agree" class="buttons">Agree</button>
<button id="refuse" class="buttons">Refuse</button>
</div>
<script src="consent.js"></script>
</body>
</html>
42 changes: 20 additions & 22 deletions src/html/consent.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
// Check if the user has already given or declined consent
const consentStatus = localStorage.getItem('consentStatus');
// Function to save consent status
async function saveConsentStatus(consentStatus) {
return browser.storage.local.set({ consentStatus: consentStatus });
}

// Handle the "I Agree" button click event
document.getElementById("consentButton").addEventListener("click", function () {
// Save consent in localStorage
localStorage.setItem('consentStatus', 'granted');
// Function to get consent status
async function getConsentStatus() {
return new Promise((resolve) => {
browser.storage.local.get('consentStatus').then((result) => {
resolve(result.consentStatus);
});
});
}

// You can add additional logic here, such as performing actions that require consent.

// Example: Redirect to another page after consent
// Event listener for "Agree" button
document.querySelector('#agree').addEventListener('click', async function () {
console.log("Agree button clicked.");
await saveConsentStatus('consent-granted');
window.location.href = 'options.html';
});

document.getElementById("declineButton").addEventListener("click", function () {
// Save decline status in localStorage
localStorage.setItem('consentStatus', 'declined');
console.log("Decline button clicked");

// Show the popup
document.getElementById("popup").style.display = "block";
});

// Handle the "Uninstall" button click event within the popup
document.getElementById("uninstallPopupButton").addEventListener("click", function () {
// Uninstall the extension
// Event listener for "Refuse" button
document.querySelector('#refuse').addEventListener('click', async function () {
console.log("Uninstalling extension.");
browser.management.uninstallSelf();
});
});
Loading

0 comments on commit 5684450

Please sign in to comment.