From 019706414c79b0d0214e40ee3d8bfb91951dec4d Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Mon, 15 Jun 2020 23:01:39 -0400
Subject: [PATCH] Improve display of generated password on mobile

---
 src/app.scss  | 11 ++++++++++-
 src/index.ejs |  6 +++---
 src/ui.js     |  3 ++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index cfc3982..01ec679 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -65,4 +65,13 @@ body {
 
 #faq .card {
   margin-bottom: $spacer;
-}
\ No newline at end of file
+}
+
+#generated-password {
+  height: auto;
+
+  &.placeholder {
+    color: $input-placeholder-color;
+    user-select: none;
+  }
+}
diff --git a/src/index.ejs b/src/index.ejs
index 43f5a9f..85d1c7d 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -40,11 +40,11 @@
     <p class="lead">This is a truly secure password generator that generates easy-to-remember passwords.</p>
     <hr class="my-4">
     <div class="input-group mb-3">
-      <input id="generated-password" class="form-control form-control-lg text-monospace" type="text"
-             placeholder="Click the Generate button to generate a new password" autocomplete="off" readonly>
+      <div id="generated-password" class="form-control form-control-lg text-monospace placeholder">
+        Click the Generate button to generate a new password</div>
       <div class="input-group-append">
         <button class="btn btn-success copy" type="button" id="copy-password"
-                data-clipboard-target="#generated-password">
+                data-clipboard-target="#generated-password" disabled>
           <%= require('octicons').clippy.toSVG({ height: 20 }) %>
         </button>
       </div>
diff --git a/src/ui.js b/src/ui.js
index 1ac0a7a..d9fe3a0 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -60,7 +60,8 @@ $(() => {
 
     $('#run-generator').click(() => {
       const options = $options.serializeObject()
-      $output.val(generate(options))
+      $output.text(generate(options)).removeClass('placeholder')
+      $('#copy-password').prop('disabled', false)
       return false
     })