From 1778eaa3801dc1470031bc3fae75eaeebd550392 Mon Sep 17 00:00:00 2001
From: Merlijn <32853531+ToxicMushroom@users.noreply.github.com>
Date: Thu, 3 Oct 2024 06:50:38 +0200
Subject: [PATCH] [htmx] Make it harder to miss the save button on the cred
 update page (#3013)

---
 server/core/static/style.css                  | 12 ++++--
 ...credential_update_add_passkey_partial.html |  5 ++-
 .../credential_update_add_totp_partial.html   |  2 +-
 .../templates/credentials_update_partial.html | 39 +++++++++++--------
 .../templates/credentials_update_primary.html |  6 +--
 5 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/server/core/static/style.css b/server/core/static/style.css
index c2c71faf2..0b6666321 100644
--- a/server/core/static/style.css
+++ b/server/core/static/style.css
@@ -268,7 +268,11 @@ body {
   height: fit-content;
 }
 
-
-
-
-
+#cred-update-commit-bar {
+  display: block;
+  position: fixed;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+}
diff --git a/server/core/templates/credential_update_add_passkey_partial.html b/server/core/templates/credential_update_add_passkey_partial.html
index 90aac6309..c887f28d7 100644
--- a/server/core/templates/credential_update_add_passkey_partial.html
+++ b/server/core/templates/credential_update_add_passkey_partial.html
@@ -6,6 +6,7 @@
         <button id="passkeyNamingSafariBtn" class="btn btn-primary">Begin Passkey Enrolment</button>
 
         <form id="passkeyNamingForm" class="g-2 d-none">
+            <b>Adding a new passkey</b>
             <label for="passkey-label" class="form-label">Please name this Passkey</label>
             <input type="text" name="name" id="passkey-label" autofocus required class="form-control">
 
@@ -19,8 +20,8 @@
                         hx-post="/ui/api/finish_passkey"
                         hx-vals='{"class": "(( class ))"}'
                         id="passkeyNamingSubmitBtn"
-                        class="btn btn-success d-none ms-2" disabled
-                >Submit</button>
+                        class="btn btn-primary d-none ms-2" disabled
+                >Add</button>
             </div>
         </form>
     </div>
diff --git a/server/core/templates/credential_update_add_totp_partial.html b/server/core/templates/credential_update_add_totp_partial.html
index 4585c74a9..e107c2bdc 100644
--- a/server/core/templates/credential_update_add_totp_partial.html
+++ b/server/core/templates/credential_update_add_totp_partial.html
@@ -91,7 +91,7 @@
                     hx-select="#newTotpForm > *"
                     hx-vals='{"ignoreBrokenApp": false}'
                     hx-include="#newTotpForm"
-            >Submit</button>
+            >Add</button>
         (% endif %)
     </div>
 </div>
diff --git a/server/core/templates/credentials_update_partial.html b/server/core/templates/credentials_update_partial.html
index 81f8acfc8..741c824f7 100644
--- a/server/core/templates/credentials_update_partial.html
+++ b/server/core/templates/credentials_update_partial.html
@@ -2,7 +2,7 @@
 <script src="/pkg/external/base64.js" async></script>
 
 <div class="row g-3" id="credentialUpdateDynamicSection" hx-on::before-swap="stillSwapFailureResponse(event)">
-    <form class="needs-validation" novalidate>
+    <form class="needs-validation mb-5 pb-5" novalidate>
         (% match ext_cred_portal %)
             (% when CUExtPortal::None %)
             (% when CUExtPortal::Hidden %)
@@ -94,21 +94,28 @@
         (% let primary_state = primary_state %)
         (% include "credentials_update_primary.html" %)
 
-        <hr class="my-4"/>
-
-        <div class="d-flex flex-row flex-wrap justify-content-between">
-            <button class="btn btn-danger btn-lg" hx-post="/ui/api/cu_cancel" hx-target="body">Cancel</button>
-            <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Resolve the warnings at the top.">
-                <button
-                        class="btn btn-success btn-lg"
-                        type="submit"
-                        hx-post="/ui/api/cu_commit"
-                        hx-boost="false"
-                        (% if !warnings.is_empty() %)
-                        disabled
-                        (% endif %)
-                >Submit Changes</button>
-            </span>
+        <div id="cred-update-commit-bar" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-body">
+                <span class="d-flex align-items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-floppy2-fill" viewBox="0 0 16 16">
+                        <path d="M12 2h-2v3h2z"/>
+                        <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1"/>
+                    </svg>
+                    <b class="px-1">Careful</b>- save when you're done:
+                </span>
+                <div class="mt-2 pt-2 border-top">
+                    <button class="btn btn-danger" hx-post="/ui/api/cu_cancel" hx-target="body">Cancel</button>
+                    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Resolve the warnings at the top.">
+                        <button
+                                class="btn btn-success"
+                                type="submit"
+                                hx-post="/ui/api/cu_commit"
+                                hx-boost="false"
+                                (% if !warnings.is_empty() %)disabled(% endif %)
+                        >Save Changes</button>
+                    </span>
+                </div>
+            </div>
         </div>
     </form>
 </div>
diff --git a/server/core/templates/credentials_update_primary.html b/server/core/templates/credentials_update_primary.html
index 07b16113e..f02a5b103 100644
--- a/server/core/templates/credentials_update_primary.html
+++ b/server/core/templates/credentials_update_primary.html
@@ -28,7 +28,7 @@
                 <h6><b>Time-based One Time Password (TOTP)</b></h6>
                 <p>TOTPs are 6 digit codes generated on-demand as a second authentication factor.</p>
                 <p>
-                    <button type="button" class="btn btn-success" hx-post="/ui/reset/add_totp">
+                    <button type="button" class="btn btn-primary" hx-post="/ui/reset/add_totp">
                         Add TOTP
                     </button>
                 </p>
@@ -48,13 +48,13 @@
                 <h6><b>Time-based One Time Password (TOTP)</b></h6>
                 <p>TOTPs are 6 digit codes generated on-demand as a second authentication factor.</p>
                 (% for totp in totp_set %)
-                    <button type="button" class="btn btn-warning" hx-post="/ui/api/remove_totp" hx-vals='{"name": "(( totp ))"}'>
+                    <button type="button" class="btn btn-warning mb-2" hx-post="/ui/api/remove_totp" hx-vals='{"name": "(( totp ))"}'>
                         Remove totp (( totp ))
                     </button>
                 (% endfor %)
 
                 <p>
-                    <button type="button" class="btn btn-success" hx-post="/ui/reset/add_totp">
+                    <button type="button" class="btn btn-primary" hx-post="/ui/reset/add_totp">
                         Add TOTP
                     </button>
                 </p>