[Issue #44] Hide password when using "None" encryption (#56)

* Changes behavior of password textarea when None encryption is selected

* prettier

* password text area hides on checking hide password tikbox

* className re-structuring, changed Hide Password

2 files changed, 23 insertions, 7 deletions

diff --git a/src/components/Card.js b/src/components/Card.js
index c301bbe..7409d6c 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -89,13 +89,21 @@ export const Card = () => {
               value={network.ssid}
               onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
             />
-            <label className={network.hidePassword ? 'no-print' : ''}>
+            <label
+              className={`
+                ${network.hidePassword && 'no-print hidden'}
+                ${network.encryptionMode === 'nopass' && 'hidden'}
+              `}
+            >
               Password
             </label>
             <textarea
               id="password"
               type="text"
-              className={network.hidePassword ? 'no-print' : ''}
+              className={`
+                ${network.hidePassword && 'no-print hidden'}
+                ${network.encryptionMode === 'nopass' && 'hidden'}
+              `}
               style={{
                 height:
                   portrait && network.password.length > 40 ? '5em' : 'auto',
@@ -116,6 +124,7 @@ export const Card = () => {
               <input
                 type="checkbox"
                 id="hide-password-checkbox"
+                className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
                 onChange={() =>
                   setNetwork({
                     ...network,
@@ -123,8 +132,11 @@ export const Card = () => {
                   })
                 }
               />
-              <label for="hide-password-checkbox">
-                Hide password field before printing
+              <label
+                for="hide-password-checkbox"
+                className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
+              >
+                Hide password
               </label>
             </div>
 
@@ -135,9 +147,9 @@ export const Card = () => {
                 name="encrypt-select"
                 id="encrypt-none"
                 value="nopass"
-                onChange={(e) => {
-                  setNetwork({ ...network, encryptionMode: e.target.value });
-                }}
+                onChange={(e) =>
+                  setNetwork({ ...network, encryptionMode: e.target.value })
+                }
               />
               <label for="encrypt-none">None</label>
               <input
diff --git a/src/components/style.css b/src/components/style.css
index b874a57..e6973f0 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -17,6 +17,10 @@
   margin-bottom: 1em;
 }
 
+.hidden {
+  display: none;
+}
+
 textarea {
   background-color: #fff;
   border: solid 1px #ddd;