From 083cccea2830290bac3601d82c9ef1fd5ca7652f Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Sat, 2 Jun 2018 11:47:16 -0400
Subject: [PATCH] better protected/unprotected note indicator, fixes #110

---
 src/public/images/icons/shield-off.png        | Bin 0 -> 462 bytes
 src/public/images/icons/shield.png            | Bin 0 -> 388 bytes
 .../javascripts/services/note_detail.js       |  10 +++++----
 .../javascripts/services/protected_session.js |   8 ++++++++
 src/public/stylesheets/style.css              |   9 +++------
 src/views/index.ejs                           |  19 ++++++++++--------
 6 files changed, 28 insertions(+), 18 deletions(-)
 create mode 100644 src/public/images/icons/shield-off.png
 create mode 100644 src/public/images/icons/shield.png

diff --git a/src/public/images/icons/shield-off.png b/src/public/images/icons/shield-off.png
new file mode 100644
index 0000000000000000000000000000000000000000..31c0ab9217c80f7c1ed42b42880779144a3b232f
GIT binary patch
literal 462
zcmV;<0WtoGP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY4c7nw4c7reD4Tcy000McNliru;syc_12MzCImQ400b5B#
zK~y-)ozyW)9YGYu@t?jZf|5csZ7c#}BjgLDPnRMPFomQGB%eSFN$JN3ZV^c#$g3kr
z3Og$mi+~mhA!s280i)S8C$K*E?c3*tVP-G){%4pyXW#$@9_SwrGg?J~5}Q5HQ9Mun
zcgCmWI!(Y%1^O9d$-hbN24Ap)zsY^aIu@Fs-4q`M`UvmwxKcNVHGE5Li9IaVK|fTA
zswb_B5j@Kkl-Y!yJ1aAH@iOZr{HXz!*u@!MWrI7w|FMD#ydD6pjXK~Bma`rj+E07;
zhBk@$UeGG=Ec46|(Al2eTfn2tPxA-cK<Dy(TzA^Z>~!46T6K<^iTL|!b}bF7Eo{1t
z@j*Xn0{gheiw5Y|K=%hY3OvCNT;+l2jd!`%%a%3;^EgSv2Bt8LkI5b8(I|$2PGc(#
zr}&w5w<4|1u+R~_#W{XOE_GVo476zL`KgR1gA_RU2Q67<S?8VP1^@s607*qoM6N<$
Eg0_RdT>t<8

literal 0
HcmV?d00001

diff --git a/src/public/images/icons/shield.png b/src/public/images/icons/shield.png
new file mode 100644
index 0000000000000000000000000000000000000000..4892e57c78e891a84993489676aa370ccb2924d3
GIT binary patch
literal 388
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VTavfC3&Vd9T(EcfWS|IVfk$L9
zP{(x;W^~e+T>%tiFY)wsWq-uR#Lq00c++DG0|TR=r;B5V#p$P)_j)l0im*J;Kjvh@
z)%DGh#Z&nO^Nrh`y;~z*SbK2X_$d>W^IVxDY~_|<7p9FJy&J_`HkqjlB;R?HWyRjc
z{QS(BzYpU+B`W?<pR%!;CI6sG)l(%$(>V*9MQmeOt1rH8SvE~{OJkZu(3T4hr4GTp
zaoG;ndET3wI88{9UfOfid!gr{%P;tswYwB_?KZqV>5)|I8-6{z)I&d>H{M-wn)Q!%
zV7wdaJ@>mh0y|8f{B7EK<Eitx^`Xa--{gH$5By&^{|U#M_HFZ2XC2hF+c10KZSJ$a
z6-FD|()T=0IP%9JO?J(*y>CjlJob3LB0*04Vs`s7foTPjjQ$5rs=D{rE?1R#Y+7Nm
fl0Sg6@2L82U5A_Xf?rnx!;8Vw)z4*}Q$iB}YB--|

literal 0
HcmV?d00001

diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js
index fa287b599..3d2dcc21d 100644
--- a/src/public/javascripts/services/note_detail.js
+++ b/src/public/javascripts/services/note_detail.js
@@ -22,6 +22,7 @@ const $noteDetailComponents = $(".note-detail-component");
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
 const $noteDetailWrapper = $("#note-detail-wrapper");
+const $noteDetailComponentWrapper = $("#note-detail-component-wrapper");
 const $noteIdDisplay = $("#note-id-display");
 const $labelList = $("#label-list");
 const $labelListInner = $("#label-list-inner");
@@ -116,9 +117,9 @@ async function saveNoteIfChanged() {
 function setNoteBackgroundIfProtected(note) {
     const isProtected = !!note.isProtected;
 
-    $noteDetailWrapper.toggleClass("protected", isProtected);
-    $protectButton.toggle(!isProtected);
-    $unprotectButton.toggle(isProtected);
+    $noteDetailComponentWrapper.toggleClass("protected", isProtected);
+    $protectButton.toggleClass("active", isProtected);
+    $unprotectButton.toggleClass("active", !isProtected);
 }
 
 let isNewNoteCreated = false;
@@ -150,6 +151,8 @@ async function loadNoteDetail(noteId) {
 
     $noteIdDisplay.html(noteId);
 
+    setNoteBackgroundIfProtected(currentNote);
+
     await handleProtectedSession();
 
     $noteDetailWrapper.show();
@@ -170,7 +173,6 @@ async function loadNoteDetail(noteId) {
         noteChangeDisabled = false;
     }
 
-    setNoteBackgroundIfProtected(currentNote);
     treeService.setBranchBackgroundBasedOnProtectedStatus(noteId);
 
     // after loading new note make sure editor is scrolled to the top
diff --git a/src/public/javascripts/services/protected_session.js b/src/public/javascripts/services/protected_session.js
index b31695347..2f6fba0d9 100644
--- a/src/public/javascripts/services/protected_session.js
+++ b/src/public/javascripts/services/protected_session.js
@@ -105,6 +105,10 @@ async function enterProtectedSessionOnServer(password) {
 }
 
 async function protectNoteAndSendToServer() {
+    if (noteDetailService.getCurrentNote().isProtected) {
+        return;
+    }
+
     await ensureProtectedSession(true, true);
 
     const note = noteDetailService.getCurrentNote();
@@ -118,6 +122,10 @@ async function protectNoteAndSendToServer() {
 }
 
 async function unprotectNoteAndSendToServer() {
+    if (!noteDetailService.getCurrentNote().isProtected) {
+        return;
+    }
+
     await ensureProtectedSession(true, true);
 
     const note = noteDetailService.getCurrentNote();
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 4ce0b0cd3..a18d68425 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -51,7 +51,7 @@
     overflow: auto;
 }
 
-#note-detail-wrapper.protected, #note-detail-wrapper.protected .CodeMirror {
+#note-detail-component-wrapper.protected, #note-detail-component-wrapper.protected .CodeMirror {
     background-color: #eee;
 }
 
@@ -138,10 +138,6 @@ span.fancytree-active:not(.fancytree-focused) .fancytree-title {
     width: 24px;
 }
 
-#protect-button, #unprotect-button {
-    display: none;
-}
-
 .ui-widget-content a:not(.ui-tabs-anchor) {
     color: #337ab7 !important;
 }
@@ -361,10 +357,11 @@ div.ui-tooltip {
 
 .btn {
     border-color: #ddd;
+    background-color: #eee;
 }
 
 .btn.active {
-    background-color: #ddd;
+    background-color: #ccc;
 }
 
 #note-path-list .current a {
diff --git a/src/views/index.ejs b/src/views/index.ejs
index a781c1df5..e22f59013 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -105,15 +105,18 @@
 
           <span id="note-id-display" title="Note ID"></span>
 
-          <a title="Protect the note so that password will be required to view the note"
-             class="icon-action"
-             id="protect-button"
-             style="display: none; background: url('images/icons/lock.png')"></a>
+          <div>
+            <span style="font-size: smaller">Protected:</span>
 
-          <a title="Unprotect note so that password will not be required to access this note in the future"
-             class="icon-action"
-             id="unprotect-button"
-             style="display: none; background: url('images/icons/unlock.png')"></a>
+            <div class="btn-group btn-group-xs">
+              <button type="button" class="btn" id="protect-button" title="Protected note can be viewed and edited only after entering password">
+                <img src="images/icons/shield.png"/>
+              </button>
+              <button type="button" class="btn" id="unprotect-button" title="Not protected note can be viewed without entering password">
+                <img src="images/icons/shield-off.png"/>
+              </button>
+            </div>
+          </div>
 
           &nbsp; &nbsp;