cssnr · smashedr · Aug 22, 2024 · Aug 21, 2024 · Aug 21, 2024 · Aug 21, 2024
diff --git a/README.md b/README.md
@@ -78,7 +78,12 @@ Long-term Goals for Improved Security:
 ### Known Issues
 
 * Only allows saving 1 set of credentials per host
-* Most browsers will offer to save passwords on login and edit 
+* Most browsers will offer to save passwords on login and edit
+* A 401 response from a Service Worker is not properly intercepted:
+  - Firefox: Shows a generic 401 page, use `Ctrl+F5`
+    * Once credentials are saved, requests will work as normal.
+  - Chrome: Shows a default credentials prompt, Cancel and press `Ctrl+F5`
+    * This behavior may continue after saving credentials.
 
 > [!TIP]
 > **Don't see your issue here?**
@@ -126,13 +131,13 @@ If there is enough popularity/requests for these features, there are a couple op
 
 ## Support
 
-For help using the web extension, utilize any these resources:
+For help using the web extension, see:
 
 - Documentation: https://auto-auth.cssnr.com/docs/
 - Q&A Discussion: https://github.com/cssnr/auto-auth/discussions/categories/q-a
 - Request a Feature: https://github.com/cssnr/auto-auth/discussions/categories/feature-requests
 
-If you are experiencing an issue/bug or getting unexpected results, use:
+If you are experiencing an issue/bug or getting unexpected results, you can:
 
 - Report an Issue: https://github.com/cssnr/auto-auth/issues
 - Chat with us on Discord: https://discord.gg/wXy6m2X8wY

diff --git a/manifest.json b/manifest.json
@@ -29,7 +29,7 @@
       "suggested_key": {
         "default": "Alt+Shift+A"
       },
-      "description": "Show Main Popup Action"
+      "description": "Show Popup Action"
     },
     "openOptions": {
       "suggested_key": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/css/auth.css b/src/css/auth.css
@@ -15,6 +15,13 @@ video {
     backdrop-filter: blur(6px);
 }
 
+kbd.host {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 [data-bs-theme='dark'] #auth-outer {
     background-color: rgba(var(--bs-black-rgb), 0.5);
     border: 1px solid rgba(var(--bs-white-rgb), 0.2);

diff --git a/src/css/options.css b/src/css/options.css
@@ -1,6 +1,11 @@
 /* CSS for options.html */
 
+body {
+    min-width: 340px;
+    width: 100%;
+    max-width: 100vw;
+}
+
 .card {
-    min-width: 300px;
     max-width: 900px;
 }
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -3,9 +3,13 @@
 body {
     min-width: 340px;
     width: 100%;
+    max-width: 100vw;
     overflow-x: hidden;
 }
 
-input::placeholder {
-    text-align: center;
+#hostname {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
diff --git a/src/html/auth.html b/src/html/auth.html
@@ -13,20 +13,18 @@
 </head>
 <body>
 
-<video id="bgvid" class="d-none" playsinline autoplay muted loop></video>
+<video class="d-none" playsinline autoplay muted loop></video>
 
 <div class="container-fluid pt-3 px-0 px-sm-4">
 <div id="auth-outer" class="rounded rounded-4 w-100 mx-auto mb-4 p-3">
 
-    <p class="text-center fs-4 mb-1">
-        <kbd class="ms-2 host clip" role="button" data-clipboard-target=".host" data-toast="Host Copied"></kbd>
-    </p>
-    <p class="text-center mb-1">
-        <i class="fa-regular fa-copy clip me-2" role="button" data-clipboard-target="#link" data-toast="URL Copied">
+    <div class="text-center fs-4"><kbd class="d-inline-block host" role="button" data-clipboard-target=".host" data-toast="Host Copied"></kbd></div>
+    <div class="text-center mb-2">
+        <i class="fa-regular fa-copy me-2" role="button" data-clipboard-target="#link" data-toast="URL Copied">
         </i><a id="link" href="" target="_blank" rel="noopener">url</a>
-    </p>
+    </div>
 
-    <div id="fail" class="alert alert-warning text-center my-2 d-none" role="alert">
+    <div id="fail" class="alert alert-warning text-center p-2 mb-2 d-none" role="alert">
         <b>Authentication Failed.</b> Please Try Again...
     </div>
 
@@ -93,35 +91,36 @@
     </form> <!-- auth-form -->
 
     <hr>
+
     <div class="text-center">
         <a class="link-body-emphasis text-decoration-none d-inline-block" href="../html/options.html">Open Options</a>
         <span class="mx-2">&bull;</span>
         <a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
-           href="https://github.com/cssnr/auto-auth?tab=readme-ov-file#readme">Get Support</a>
+           href="https://github.com/cssnr/auto-auth?tab=readme-ov-file#support">Get Support</a>
     </div>
 
 </div> <!-- auth-outer -->
-</div> <!-- container -->
+</div> <!-- container-fluid -->
 
 <div class="modal fade" id="ignore-modal" tabindex="-1" aria-labelledby="ignore-modal-label" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h1 class="modal-title fs-5" id="ignore-modal-label">Confirm Ignore Host</h1>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" tabindex="-1"></button>
-            </div>
-            <div class="modal-body">
-                <p>Ignore host and remove any saved credentials?</p>
-                <p class="text-center"><kbd class="ms-2 host"></kbd></p>
-                <p class="mb-0">Ignored hosts can be removed from the <a href="../html/options.html">Options Page</a>.</p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-warning me-auto" id="ignore-host">Confirm Ignore</button>
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-            </div>
-        </div>
+<div class="modal-dialog modal-dialog-centered">
+<div class="modal-content">
+    <div class="modal-header">
+        <h1 class="modal-title fs-5" id="ignore-modal-label">Confirm Ignore Host</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" tabindex="-1"></button>
+    </div>
+    <div class="modal-body">
+        <p>Ignore host and remove any saved credentials?</p>
+        <p class="text-center"><kbd class="ms-2 host"></kbd></p>
+        <p class="mb-0">Ignored hosts can be removed from the <a href="../html/options.html">Options Page</a>.</p>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-warning me-auto" id="ignore-host">Confirm Ignore</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
     </div>
-</div><!-- ignore-modal -->
+</div> <!-- modal-content -->
+</div> <!-- modal-dialog -->
+</div> <!-- ignore-modal -->
 
 <button type="button" class="btn btn-outline-primary" id="back-to-top">
     <i class="fa-regular fa-square-caret-up"></i>

diff --git a/src/html/options.html b/src/html/options.html
@@ -16,14 +16,14 @@
 <div class="container-fluid py-3 px-1 px-sm-3 ">
 <div class="card w-100 mx-auto">
 <div class="card-body">
-    <div class="d-flex justify-content-center align-items-center">
-        <img src="../images/logo48.png" class="me-2" height="48" width="48"
-             alt="Auto Auth" title="Auto Auth">
-        <h1 class="text-center">Auto Auth</h1>
+    <div class="d-flex flex-row justify-content-center">
+        <img src="../images/logo48.png" class="me-2" height="48" width="48" alt="Auto Auth" title="Auto Auth">
+        <div>
+            <span class="fs-1 me-1">Auto Auth</span>
+            v<span class="version"></span>
+        </div>
     </div>
-    <div class="clearfix"></div>
-    <p class="text-center lead">v<span class="version"></span></p>
-    <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover">
+    <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover d-none">
         <caption class="visually-hidden">Keyboard Shortcuts</caption>
         <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
         <tbody></tbody>
@@ -59,10 +59,10 @@ <h1 class="text-center">Auto Auth</h1>
                    data-warning="text-danger-emphasis" data-related="disableWarning">
             <label class="form-check-label" for="tempDisabled" aria-describedby="tempDisabledHelp">
                 Temporarily Disable
-                <span data-bs-toggle="tooltip" data-bs-title="Temporarily Disable the Extension for Debugging.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
             </label>
+            <span data-bs-toggle="tooltip" data-bs-title="Temporarily Disable the Extension for Debugging.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
         </div>
         <div id="disableWarning" class="alert alert-warning text-center mt-2" role="alert" style="display: none;">
             Extension is currently disabled!
@@ -71,46 +71,46 @@ <h1 class="text-center">Auto Auth</h1>
             <input class="form-check-input" id="ignoreProxy" type="checkbox" role="switch">
             <label class="form-check-label" for="ignoreProxy" aria-describedby="ignoreProxyHelp">
                 Ignore Proxy Authentication
-                <span data-bs-toggle="tooltip" data-bs-title="Ignore HTTP 407 Proxy Auth Required Responses.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
             </label>
+            <span data-bs-toggle="tooltip" data-bs-title="Ignore HTTP 407 Proxy Auth Required Responses.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" id="defaultSave" type="checkbox" role="switch">
             <label class="form-check-label" for="defaultSave" aria-describedby="defaultSaveHelp">
                 Save Authentication by Default
-                <span data-bs-toggle="tooltip" data-bs-title="Save Login Enabled by Default.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
             </label>
+            <span data-bs-toggle="tooltip" data-bs-title="Save Login Enabled by Default.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" id="confirmDelete" type="checkbox" role="switch">
             <label class="form-check-label" for="confirmDelete" aria-describedby="confirmDeleteHelp">
                 Show Confirmation on Delete
-                <span data-bs-toggle="tooltip" data-bs-title="Show Confirmation Dialog on Delete.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
             </label>
+            <span data-bs-toggle="tooltip" data-bs-title="Show Confirmation Dialog on Delete.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
                 Enable Right Click Menu
-                <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
             </label>
+            <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" id="showUpdate" type="checkbox" role="switch">
             <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
                 Show Release Notes on Update
-                <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
             </label>
+            <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
+                <i class="fa-solid fa-circle-info ms-1"></i>
+            </span>
         </div>
 
         <h5 class="mt-3">

diff --git a/src/html/permissions.html b/src/html/permissions.html
@@ -38,7 +38,7 @@ <h1>Auto Auth</h1>
            href="homepage_url">Home Page</a>
         <span class="mx-2">&bull;</span>
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
-           href="https://github.com/cssnr/auto-auth?tab=readme-ov-file#readme">Get Support</a>
+           href="https://github.com/cssnr/auto-auth?tab=readme-ov-file#support">Get Support</a>
     </div>
 </div> <!-- card -->
 </div> <!-- col -->