From 1e4d6646c6a9ef34d83a0e38ea5bf42f81939e50 Mon Sep 17 00:00:00 2001
From: Erica Wright <ericaewright@gmail.com>
Date: Mon, 23 Oct 2017 10:36:07 -0400
Subject: [PATCH 1/6] style password checkbox

---
 app/templates/uploadPassword.js |  8 +++---
 assets/check-16-blue.svg        |  1 +
 assets/main.css                 | 44 +++++++++++++++++++++++++++++++++
 public/locales/en-US/send.ftl   |  4 +--
 4 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 assets/check-16-blue.svg

diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js
index fe589aff..a63eb42e 100644
--- a/app/templates/uploadPassword.js
+++ b/app/templates/uploadPassword.js
@@ -4,11 +4,11 @@ module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
   const div = html`
   <div class="selectPassword">
-    <div>
+    <div id="addPasswordWrapper">
       <input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/>
-      <label for="addPassword">${state.translate(
-        'requirePasswordCheckbox'
-      )}</label>
+      <label for="addPassword">
+        <img src="/assets/check-16-blue.svg"/>
+        ${state.translate('requirePasswordCheckbox')}</label>
     </div>
     <form class="setPassword hidden" onsubmit=${setPassword}>
       <input id="unlock-input"
diff --git a/assets/check-16-blue.svg b/assets/check-16-blue.svg
new file mode 100644
index 00000000..a2633292
--- /dev/null
+++ b/assets/check-16-blue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#0A84FF " d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>
\ No newline at end of file
diff --git a/assets/main.css b/assets/main.css
index 90068de3..f2f52880 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -896,6 +896,50 @@ tbody {
   margin-bottom: -5px;
 }
 
+#addPasswordWrapper {
+  height: 24px;
+}
+
+#addPassword {
+  position: absolute;
+  visibility: collapse;
+}
+
+#addPasswordWrapper label {
+  line-height: 20px;
+  cursor: pointer;
+  position: relative;
+  opacity: 0.6;
+}
+
+#addPassword:checked + label {
+  opacity: 1;
+}
+
+#addPasswordWrapper label::after {
+  content: '';
+  height: 20px;
+  width: 20px;
+  margin-right: 10px;
+  margin-left: 5px;
+  float: left;
+  border: 1px solid rgba(12, 12, 13, 0.3);
+  border-radius: 2px;
+}
+
+#addPassword:not(:checked) + label > img {
+  height: 0;
+  width: 0;
+}
+
+#addPassword:checked + label > img {
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  left: -29px;
+  top: 2px;
+}
+
 @media (max-device-width: 992px), (max-width: 992px) {
   .popup .popuptext {
     left: auto;
diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl
index 74548bc1..f85ae79e 100644
--- a/public/locales/en-US/send.ftl
+++ b/public/locales/en-US/send.ftl
@@ -85,5 +85,5 @@ footerLinkPrivacy = Privacy
 footerLinkTerms = Terms
 footerLinkCookies = Cookies
 requirePasswordCheckbox = Require a password to download this file
-addPasswordButton = Add Password
-incorrectPassword = Incorrect password. Try again?
+addPasswordButton = Add password
+passwordTryAgain = Incorrect password. Try again.

From 82e206bccf4c11d0bdc6e65ae09f21e3309a6cc6 Mon Sep 17 00:00:00 2001
From: Erica Wright <ericaewright@gmail.com>
Date: Tue, 24 Oct 2017 11:19:08 -0400
Subject: [PATCH 2/6] password input at smaller screens

---
 app/templates/downloadPassword.js |  2 +-
 app/templates/uploadPassword.js   |  1 -
 assets/main.css                   | 45 ++++++++++++++++++-------------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/app/templates/downloadPassword.js b/app/templates/downloadPassword.js
index 92ded723..47356f04 100644
--- a/app/templates/downloadPassword.js
+++ b/app/templates/downloadPassword.js
@@ -6,7 +6,7 @@ module.exports = function(state, emit) {
     fileInfo.password === null
       ? html`
           <label class="red"
-            for="unlock-input">${state.translate('incorrectPassword')}</label>`
+            for="unlock-input">${state.translate('passwordTryAgain')}</label>`
       : html`
           <label for="unlock-input">
             ${state.translate('unlockInputLabel')}
diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js
index a63eb42e..7deb46b5 100644
--- a/app/templates/uploadPassword.js
+++ b/app/templates/uploadPassword.js
@@ -7,7 +7,6 @@ module.exports = function(state, emit) {
     <div id="addPasswordWrapper">
       <input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/>
       <label for="addPassword">
-        <img src="/assets/check-16-blue.svg"/>
         ${state.translate('requirePasswordCheckbox')}</label>
     </div>
     <form class="setPassword hidden" onsubmit=${setPassword}>
diff --git a/assets/main.css b/assets/main.css
index f2f52880..78af51f1 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -590,7 +590,6 @@ tbody {
   color: white;
   cursor: pointer;
   font-size: 15px;
-  height: 60px;
   padding-left: 10px;
   padding-right: 10px;
   white-space: nowrap;
@@ -645,6 +644,7 @@ tbody {
 .selectPassword {
   padding: 10px 0;
   align-self: left;
+  max-width: 100%;
 }
 
 .setPassword {
@@ -822,7 +822,6 @@ tbody {
   color: white;
   cursor: pointer;
   font-size: 15px;
-  height: 50px;
   padding-left: 10px;
   padding-right: 10px;
   white-space: nowrap;
@@ -897,7 +896,7 @@ tbody {
 }
 
 #addPasswordWrapper {
-  height: 24px;
+  min-height: 24px;
 }
 
 #addPassword {
@@ -916,7 +915,7 @@ tbody {
   opacity: 1;
 }
 
-#addPasswordWrapper label::after {
+#addPasswordWrapper label::before {
   content: '';
   height: 20px;
   width: 20px;
@@ -927,17 +926,9 @@ tbody {
   border-radius: 2px;
 }
 
-#addPassword:not(:checked) + label > img {
-  height: 0;
-  width: 0;
-}
-
-#addPassword:checked + label > img {
-  height: 20px;
-  width: 20px;
-  position: absolute;
-  left: -29px;
-  top: 2px;
+#addPassword:checked + label::before {
+  background-image: url('/assets/check-16-blue.svg');
+  background-position: 2px 1px;
 }
 
 @media (max-device-width: 992px), (max-width: 992px) {
@@ -1010,22 +1001,40 @@ tbody {
     padding: 5px 5px 5px 20px;
   }
 
-  #copy {
+  #copy,
+  .setPassword,
+  #unlock {
     width: 100%;
     flex-direction: column;
+    padding-left: 0;
   }
 
-  #link {
+  .selectPassword {
+    align-self: center;
+    min-width: 95%;
+  }
+
+  #addPasswordWrapper label::before {
+    margin-left: 0;
+  }
+
+  #link,
+  #unlock-input {
     font-size: 22px;
     padding: 15px 10px;
     border-radius: 6px 6px 0 0;
   }
 
-  #copy-btn {
+  #copy-btn,
+  #unlock-btn {
     border-radius: 0 0 6px 6px;
     flex: 0 1 65px;
   }
 
+  #copy-text {
+    text-align: center;
+  }
+
   th {
     font-size: 14px;
     padding: 0 5px;

From 82a8283b6e7ce8d03c669e39101e357b290cc119 Mon Sep 17 00:00:00 2001
From: Erica Wright <ericaewright@gmail.com>
Date: Tue, 24 Oct 2017 15:08:57 -0400
Subject: [PATCH 3/6] remove unsightly auto-applied margin from safari buttons

---
 assets/main.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/main.css b/assets/main.css
index 78af51f1..8e839a99 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -142,6 +142,7 @@ select,
 textarea,
 button {
   font-family: inherit;
+  margin: 0;
 }
 
 a {

From 6e7ed3cea324304006827dc16c6234f7053003e5 Mon Sep 17 00:00:00 2001
From: Erica Wright <ericaewright@gmail.com>
Date: Wed, 25 Oct 2017 10:50:37 -0400
Subject: [PATCH 4/6] password maxlength and wrapping

---
 app/templates/downloadPassword.js | 1 +
 app/templates/uploadPassword.js   | 1 +
 assets/main.css                   | 1 +
 3 files changed, 3 insertions(+)

diff --git a/app/templates/downloadPassword.js b/app/templates/downloadPassword.js
index 47356f04..74da26dc 100644
--- a/app/templates/downloadPassword.js
+++ b/app/templates/downloadPassword.js
@@ -16,6 +16,7 @@ module.exports = function(state, emit) {
       ${label}
       <form id="unlock" onsubmit=${checkPassword}>
         <input id="unlock-input"
+          maxlength="64"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
           type="password"/>
diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js
index 7deb46b5..d2b16ce0 100644
--- a/app/templates/uploadPassword.js
+++ b/app/templates/uploadPassword.js
@@ -11,6 +11,7 @@ module.exports = function(state, emit) {
     </div>
     <form class="setPassword hidden" onsubmit=${setPassword}>
       <input id="unlock-input"
+        maxlength="64"
         autocomplete="off"
         placeholder="${state.translate('unlockInputPlaceholder')}"/>
       <input type="submit"
diff --git a/assets/main.css b/assets/main.css
index 8e839a99..ea7925c4 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -646,6 +646,7 @@ tbody {
   padding: 10px 0;
   align-self: left;
   max-width: 100%;
+  overflow-wrap: break-word;
 }
 
 .setPassword {

From 202e4284129ef652084764a61b5156f3f6c0ba33 Mon Sep 17 00:00:00 2001
From: Erica Wright <ericaewright@gmail.com>
Date: Wed, 25 Oct 2017 15:48:01 -0400
Subject: [PATCH 5/6] display spaces as they were originally in the password

---
 app/templates/share.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/templates/share.js b/app/templates/share.js
index 2fe1a741..249b432a 100644
--- a/app/templates/share.js
+++ b/app/templates/share.js
@@ -9,10 +9,11 @@ module.exports = function(state, emit) {
   if (!file) {
     return notFound(state, emit);
   }
-  const passwordComplete = html`
-  <div class="selectPassword">
-    Password: ${file.password}
-  </div>`;
+
+  file.password = file.password || '';
+  const passwordComplete = html`<div class="selectPassword"></div>`;
+  passwordComplete.innerHTML = file.password.replace(/ /g, '&nbsp;');
+
   const passwordSection = file.password
     ? passwordComplete
     : uploadPassword(state, emit);

From dfb271410c89fd83210d12385e4450cd164d7bbd Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Mon, 30 Oct 2017 12:54:59 -0700
Subject: [PATCH 6/6] use relative path for the url() in css so webpack can
 substitute the hashed asset name

---
 assets/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/main.css b/assets/main.css
index ea7925c4..172ece92 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -929,7 +929,7 @@ tbody {
 }
 
 #addPassword:checked + label::before {
-  background-image: url('/assets/check-16-blue.svg');
+  background-image: url('./check-16-blue.svg');
   background-position: 2px 1px;
 }