Removed oauth flow for mobile support, kept in web (#9)

* Removed oauth flow for mobile support, kept in web * added comment back
TomCasavant · Aug 28, 2024 · b321ea3 · b321ea3
1 parent 228d9da
commit b321ea3
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git a/background.js b/background.js
@@ -1,37 +1,39 @@
-// Message listener for various actions
 browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.action === 'searchMastodon') {
         // Load saved settings from browser.storage.local
-        browser.storage.local.get(['client_id', 'client_secret', 'access_token', 'domain', 'numPosts'])
-            .then(({ client_id, client_secret, access_token, domain, numPosts = 5 }) => {
-				console.log(access_token);
-				console.log(domain);
-                if (!access_token || !domain) {
-                    sendResponse({ success: false, error: 'Missing access token or domain.' });
+       browser.storage.local.get(['client_id', 'client_secret', 'access_token', 'apiKey', 'domain', 'numPosts'])
+            .then(({ client_id, client_secret, access_token, apiKey, domain, numPosts = 5 }) => {
+                if ((!access_token && !apiKey) || !domain) {
+                    sendResponse({ success: false, error: 'Missing access token, API key, or domain.' });
                     return;
                 }
 
                 const searchTerm = message.searchTerm;
+                const authorization = access_token ? `Bearer ${access_token}` : `Bearer ${apiKey}`;
+
+				console.log(authorization);
+
                 fetch(`https://${domain}/api/v2/search?q=${encodeURIComponent(searchTerm)}&resolve=true&limit=${numPosts}`, {
                     headers: {
-                        'Authorization': `Bearer ${access_token}`
+                        'Authorization': authorization
                     }
                 })
                 .then(response => response.json())
                 .then(data => {
-					console.log(data.statuses); //TODO: For some reason this sendResponse does not work unless I log data.statuses. I have no idea why. Best guess is there's some sort of race condition going on? Though I'm not familiar enough with javascript to know if that's true
+                    console.log(data.statuses);  //TODO: For some reason this sendResponse does not work unless I log data.statuses. I have no idea why. Best guess is there's some sort of race condition going on? Though I'm not familiar enough with javascript to know if that's true
                     sendResponse({ success: true, results: data.statuses });
                 })
                 .catch(error => {
                     sendResponse({ success: false, error: error.message });
                 });
 
-                return true;
+                return true; 
             })
             .catch(error => {
                 sendResponse({ success: false, error: 'Failed to retrieve saved settings.' });
             });
-			return true;
+
+        return true; 
     } else if (message.action === 'getSettings') {
         browser.storage.local.get(['domain', 'numPosts'])
             .then(({ domain, numPosts = 5 }) => {

diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
 	"manifest_version": 2,
 	"name": "DuckDuckSocial",
-	"version": "0.0.3",
-	"description": "Adds a scrollable list of posts from the social web that match your DuckDuckGo search. Requires API key from mastodon compatible server",
+	"version": "0.0.4",
+	"description": "Adds a scrollable list of posts from the social web that match your DuckDuckGo search. Mobile support requires API key",
 	"icons": {
 		"512": "icons/border-512.png"
 	},

diff --git a/options.js b/options.js
@@ -2,7 +2,10 @@ document.addEventListener('DOMContentLoaded', function() {
     const form = document.getElementById('settingsForm');
     const domainInput = document.getElementById('domain');
     const numPostsInput = document.getElementById('numPosts');
+	const apiKeyInput = document.getElementById('apiKey');
     const messageElement = document.querySelector('.message');
+	const toggleButton = document.getElementById('toggleAdvancedSettings');
+	const advancedSettings = document.querySelector('.advanced-settings');
 
     // Load saved settings
     loadSettings();
@@ -11,6 +14,12 @@ document.addEventListener('DOMContentLoaded', function() {
         event.preventDefault();
         saveSettings();
     });
+
+    toggleButton.addEventListener('click', function() {
+        const isVisible = advancedSettings.style.display === 'block';
+        advancedSettings.style.display = isVisible ? 'none' : 'block';
+        toggleButton.textContent = isVisible ? 'Show Advanced Settings' : 'Hide Advanced Settings';
+    });
 
     document.getElementById('connectMastodon').addEventListener('click', function(event) {
         const domain = domainInput.value;
@@ -38,23 +47,29 @@ document.addEventListener('DOMContentLoaded', function() {
     function saveSettings() {
         const domain = domainInput.value;
         const numPosts = numPostsInput.value;
+        const apiKey = apiKeyInput.value;
 
         browser.storage.local.set({
             domain: domain,
-            numPosts: numPosts
+            numPosts: numPosts,
+            apiKey: apiKey  // Save the API key as well
         }).then(() => {
             updateMessage('Settings saved successfully!');
         }).catch(error => {
             console.error('Failed to save settings:', error);
             updateMessage('Failed to save settings.');
         });
     }
-
+	
     function loadSettings() {
-        browser.storage.local.get(['domain', 'numPosts'])
-            .then(({ domain, numPosts = 5 }) => {
+        browser.storage.local.get(['domain', 'numPosts', 'apiKey'])
+            .then(({ domain, numPosts = 5, apiKey }) => {
                 if (domain) domainInput.value = domain;
                 if (numPosts) numPostsInput.value = numPosts;
+                if (apiKey) {
+					apiKeyInput.value = apiKey;
+					advancedSettingsDiv.style.display = 'block';
+				}
             })
             .catch(error => {
                 console.error('Failed to load settings:', error);
@@ -66,3 +81,5 @@ document.addEventListener('DOMContentLoaded', function() {
         messageElement.style.color = 'red';
 	}
 });
+
+
diff --git a/settings.html b/settings.html
@@ -17,6 +17,9 @@
             box-sizing: border-box;
             margin-bottom: 20px;
         }
+        .advanced-settings {
+            display: none;
+        }
     </style>
 </head>
 <body>
@@ -27,11 +30,18 @@ <h1>DuckDuckSocial</h1>
 
         <label for="numPosts">Number of posts to display:</label>
         <input type="number" id="numPosts" name="numPosts" min="1" value="5" />
-
+
+
+        <div class="advanced-settings">
+            <label for="apiKey">API Key:</label>
+            <input type="password" id="apiKey" name="apiKey" placeholder="Enter your API key">
+        </div>
+
         <button type="submit">Save Settings</button>
         <button id="connectMastodon">Reconnect Mastodon</button>
+		<button type="button" id="toggleAdvancedSettings" class="toggle-button">Show Advanced Settings</button>
     </form>
-	<p class="message"></p>
+    <p class="message"></p>
     <script src="options.js"></script>
 </body>
 </html>