From 5691744543bd012f8e97d74163cc341c64ac6dd8 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Thu, 1 Nov 2018 20:19:09 -0600
Subject: [PATCH] Improve manual OTP UX

---
 www/js/otp.js      |  6 ++---
 www/pages/otp.html | 64 ++++++++++++++++++++++++----------------------
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/www/js/otp.js b/www/js/otp.js
index 601b997..d547bc0 100644
--- a/www/js/otp.js
+++ b/www/js/otp.js
@@ -181,8 +181,8 @@ function scanOTPCode() {
 }
 
 function addManualOTP() {
-    var label = $("#addotppopup #label").val();
-    var secret = $("#addotppopup #secret").val().replace(/\s+/g, '');
-    app.popup.close("#addotppopup");
+    var label = $("#addotp_sheetmodal #label").val();
+    var secret = $("#addotp_sheetmodal #secret").val().replace(/\s+/g, '');
+    app.sheet.close("#addotp_sheetmodal");
     addOTPCode(secret, label, "");
 }
\ No newline at end of file
diff --git a/www/pages/otp.html b/www/pages/otp.html
index e4f4b90..00353a9 100644
--- a/www/pages/otp.html
+++ b/www/pages/otp.html
@@ -14,40 +14,44 @@
         </div>
     </div>
 
-    <div class="popup" id="addotppopup">
-        <div class="view">
-            <div class="page">
-                <div class="page-content">
-                    <div class="block">
-                        <div class="list">
-                            <ul>
-                                <li class="item-content item-input">
-                                    <div class="item-inner">
-                                        <div class="item-input-wrap">
-                                            <input type="text" id="label" placeholder="Label" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
-                                            <span class="input-clear-button"></span>
-                                        </div>
-                                    </div>
-                                </li>
+    <div class="sheet-modal" id="addotp_sheetmodal">
 
-                                <li class="item-content item-input">
-                                    <div class="item-inner">
-                                        <div class="item-input-wrap">
-                                            <input type="text" id="secret" placeholder="Secret" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
-                                            <span class="input-clear-button"></span>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
+        <div class="toolbar">
+            <div class="toolbar-inner">
+                <div class="left">
+                    <a href="#" class="link sheet-close">Cancel</a>
+                </div>
+                <div class="right">
+                    <a href="#" class="link" onclick="addManualOTP()">Save</a>
+                </div>
+            </div>
+        </div>
 
-                        <div class="button button-fill" onclick="addManualOTP()">
-                            Save
+        <div class="sheet-modal-inner">
+
+            <div class="list no-hairlines">
+                <ul>
+                    <li class="item-content item-input">
+                        <div class="item-inner">
+                            <div class="item-input-wrap">
+                                <input type="text" id="label" placeholder="Label" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+                                <span class="input-clear-button"></span>
+                            </div>
                         </div>
-                    </div>
-                </div>
+                    </li>
+                    <li class="item-content item-input">
+                        <div class="item-inner">
+                            <div class="item-input-wrap">
+                                <input type="text" id="secret" placeholder="Secret" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+                                <span class="input-clear-button"></span>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
             </div>
+
         </div>
+
     </div>
 
     <div class="fab fab-right-bottom">
@@ -59,7 +63,7 @@
         </a>
         <!-- Speed Dial action buttons -->
         <div class="fab-buttons fab-buttons-top">
-            <a href="#" data-popup="#addotppopup" class="fab-label-button popup-open">
+            <a href="#" data-sheet="#addotp_sheetmodal" class="fab-label-button sheet-open">
                 <span><i class="fas fa-edit"></i></span>
                 <span class="fab-label">Manual</span>
             </a>