From 48b5e53e2698b3b4830abd03b5a8ef11bc654b09 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 29 Jan 2020 17:31:07 +1100
Subject: [PATCH] fix the textscramble for sessionID on registration

---
 js/views/session_registration_view.js | 11 +++++------
 stylesheets/_session.scss             |  6 ++++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/js/views/session_registration_view.js b/js/views/session_registration_view.js
index 5d6cea7f9..41c2b24ee 100644
--- a/js/views/session_registration_view.js
+++ b/js/views/session_registration_view.js
@@ -51,12 +51,12 @@
   class TextScramble {
     constructor(el) {
       this.el = el;
-      this.chars = '0123456789qwertyuiopasdfghjklzxcvbnm';
+      this.chars = '0123456789abcdef';
       this.update = this.update.bind(this);
     }
 
     setText(newText) {
-      const oldText = this.el.innerText;
+      const oldText = this.el.value;
       const length = Math.max(oldText.length, newText.length);
       // eslint-disable-next-line no-return-assign
       const promise = new Promise(resolve => (this.resolve = resolve));
@@ -97,14 +97,13 @@
             char = this.randomChar();
             this.queue[i].char = char;
           }
-
-          output += `<span class="dud">${char}</span>`;
+          output += char;
         } else {
           output += from;
         }
       }
 
-      this.el.innerHTML = output;
+      this.el.value = output;
 
       if (complete === this.queue.length) {
         this.resolve();
@@ -123,7 +122,7 @@
   window.Session.setNewSessionID = sessionID => {
     const el = document.querySelector('.session-id-editable');
     const fx = new TextScramble(el);
-    el.innerHTML = sessionID;
+    el.value = sessionID;
     fx.setText(sessionID);
   };
 })();
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 1e7710fb9..2190342e7 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1323,6 +1323,12 @@ label {
     border-color: $session-color-white;
   }
 }
+
+.session-id-editable {
+  resize: none;
+  overflow: hidden;
+}
+
 .user-details-dialog {
   .session-id-editable {
     width: 30vh;