Bug 1933585 - Fix TOTP form layout on Account Verification page

mozilla-bteam · Nov 26, 2024 · b9a8837 · b9a8837
1 parent 7f4edf6
commit b9a8837
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/skins/standard/login.css b/skins/standard/login.css
@@ -74,14 +74,19 @@ button[type="submit"] {
   font-size: var(--font-size-h3);
 }
 
-#verify-totp-form div {
-  margin-bottom: 15px;
+#verify-totp-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#verify-totp-input input[type="submit"] {
+  width: auto;
 }
 
 #verify-totp-error {
-  padding: 5px;
+  margin-top: 8px;
   color: var(--error-message-foreground-color);
-  background-color: var(--error-message-background-color);
 }
 
 @media screen and (768px <= width) {

diff --git a/template/en/default/mfa/totp/verify.html.tmpl b/template/en/default/mfa/totp/verify.html.tmpl
@@ -22,18 +22,16 @@
 </p>
 <div class="verify-totp">
   <form id="verify-totp-form" method="POST" action="[% postback.action FILTER none %]">
-    <div>
-      <span id="verify-totp-input">
-        [% FOREACH field IN postback.fields.keys %]
-          <input type="hidden" name="[% field FILTER html %]" value="[% postback.fields.item(field) FILTER html %]">
-        [% END %]
-        <input type="text" name="code" id="code" data-token="[% token FILTER html %]"
-               placeholder="123456" maxlength="9" pattern="\d{6,9}" size="10"
-               autocomplete="off" inputmode="numeric" required autofocus>
-      </span>
-      <span id="verify-totp-error" class="bz_default_hidden"></span>
+    <div id="verify-totp-input">
+      [% FOREACH field IN postback.fields.keys %]
+        <input type="hidden" name="[% field FILTER html %]" value="[% postback.fields.item(field) FILTER html %]">
+      [% END %]
+      <input type="text" name="code" id="code" data-token="[% token FILTER html %]"
+             placeholder="123456" maxlength="9" pattern="\d{6,9}" size="10"
+             autocomplete="off" inputmode="numeric" required autofocus>
+      <input type="submit" value="Submit">
     </div>
-    <input type="submit" value="Submit">
+    <div id="verify-totp-error" class="bz_default_hidden"></div>
   </form>
 </div>