From 16a52bfdc7cf29a5a9728d9e554d619682fa27eb Mon Sep 17 00:00:00 2001
From: Kevin Gibbons <bakkot@gmail.com>
Date: Sat, 11 Feb 2023 16:36:13 -0800
Subject: [PATCH] surface errors to user in popup.js

---
 extension/background.js | 10 +++++++++-
 extension/index.html    |  1 +
 extension/popup.js      | 23 ++++++++++++++++++++++-
 extension/style.css     |  6 +++++-
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/extension/background.js b/extension/background.js
index a41d4b1..9ee6dbd 100644
--- a/extension/background.js
+++ b/extension/background.js
@@ -210,7 +210,15 @@ function handleMessage(request, sender, sendResponse) {
     }
   })()
     .then(value => sendResponse({ success: true, value }))
-    .catch(e => sendResponse({ success: false, value: e.message }));
+    .catch(e => {
+      console.error(e);
+      let message = e?.message ?? e;
+      if (message === 'Failed to fetch') {
+        // chrome's error message for failed `fetch` is not very user-friendly
+        message = 'Could not connect to server';
+      }
+      sendResponse({ success: false, value: message });
+    });
   return true;
 }
 
diff --git a/extension/index.html b/extension/index.html
index f3f52dd..5dea72a 100644
--- a/extension/index.html
+++ b/extension/index.html
@@ -26,6 +26,7 @@
         <div class="submit">
             <button id="save-login">Save</button><span id="status-icon">&#9744;</span>
         </div>
+        <div id="error-out"></div>
         <hr>
         <p>Options:</p>
         <div class="options">
diff --git a/extension/popup.js b/extension/popup.js
index c2f19cd..2956cec 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -28,6 +28,16 @@ async function sendMessage(message) {
   return value;
 }
 
+let errorOut = document.getElementById('error-out');
+function setError(message) {
+  errorOut.style.display = 'initial';
+  errorOut.innerText = message;
+}
+
+function clearError() {
+  errorOut.style.display = 'none';
+}
+
 // store access details
 document.getElementById('save-login').addEventListener('click', function () {
   let url = document.getElementById('full-url').value;
@@ -60,6 +70,7 @@ document.getElementById('sendCookies').addEventListener('click', function () {
 
 function sendCookie() {
   console.log('popup send cookie');
+  clearError();
 
   function handleResponse(message) {
     console.log('handle cookie response: ' + JSON.stringify(message));
@@ -69,6 +80,7 @@ function sendCookie() {
 
   function handleError(error) {
     console.log(`Error: ${error}`);
+    setError(error);
   }
 
   let checked = document.getElementById('sendCookies').checked;
@@ -89,16 +101,23 @@ function sendCookie() {
 
 // send ping message to TA backend
 function pingBackend() {
+  clearError();
   function handleResponse(message) {
-    if (message.response === 'pong') {
+    // TODO move this check into background.js
+    if (message?.response === 'pong') {
       setStatusIcon(true);
       console.log('connection validated');
+    } else if (message?.detail) {
+      handleError(message.detail);
+    } else {
+      handleError(`got unknown message ${JSON.stringify(message)}`);
     }
   }
 
   function handleError(error) {
     console.log(`Verify got error: ${error}`);
     setStatusIcon(false);
+    setError(error);
   }
 
   console.log('ping TA server');
@@ -113,6 +132,7 @@ function addUrl(access) {
 }
 
 function setCookieState() {
+  clearError();
   function handleResponse(message) {
     console.log(message);
     document.getElementById('sendCookies').checked = message.cookie_enabled;
@@ -123,6 +143,7 @@ function setCookieState() {
 
   function handleError(error) {
     console.log(`Error: ${error}`);
+    setError(error);
   }
 
   console.log('set cookie state');
diff --git a/extension/style.css b/extension/style.css
index 5616465..72dcdac 100644
--- a/extension/style.css
+++ b/extension/style.css
@@ -76,4 +76,8 @@ hr {
 }
 .icons img {
     width: 25px;
-}
\ No newline at end of file
+}
+#error-out {
+    color: red;
+    display: none; /* will be made visible when an error occurs */
+}