Style totp input fields so that they work better on mobile

2 files changed, 27 insertions, 0 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index b7cb1964..8fe105a7 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -90,6 +90,15 @@ $(document).ready(function () {
     initialize_revision_diff_picker.initialize();
   }
 
+  if (document.querySelector('.otp_code')) {
+    document.querySelectorAll('.otp_code').forEach(function (field) {
+      field.addEventListener('input', function () {
+        var digits = field.value.replace(/\D/g, '').slice(0, 6);
+        if (field.value !== digits) { field.value = digits; }
+      });
+    });
+  }
+
   var metadata_details = document.getElementById('metadata_details');
   if (metadata_details) {
     var desktop_mq = window.matchMedia('(min-width: 1016px)');
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 9d96acd0..0dc1a048 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -2245,6 +2245,24 @@ form.otp_form input[type=text] {
   margin-bottom: 0.5rem;
 }
 
+input[type=text].otp_code {
+  font-family: monospace;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  font-size: 2rem;
+  letter-spacing: 0.75em;
+  text-align: left;
+
+  padding: 0.75rem 0 0.75rem 1.75rem;
+  box-sizing: border-box;
+  max-width: 18.5rem;
+  background-color: var(--surface);
+  background-image: repeating-linear-gradient(to right, var(--surface) 0 1ch, var(--surface-tint) 1ch calc(1ch + 0.75em));
+  background-repeat: no-repeat;
+  background-position: 0.45rem;
+  background-size: calc(6ch + 4.5em) calc(100% - 1.25rem);
+}
+
 .otp_qr svg {
   width: 220px;
   height: auto;