Hide password before printing (#42)

* feat: add possiblity to hide password fiel before priting

* HidePassword as a property of network and additional print styles

- Moves hidePassword into the network object
- Adds missing CSS for hiding password

Co-authored-by: orenaksakal <orenaksakal@gmail.com>

2 files changed, 20 insertions, 1 deletions

diff --git a/src/components/Card.js b/src/components/Card.js
index 05fd09e..ffdd097 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -8,6 +8,7 @@ export const Card = () => {
   const [network, setNetwork] = useState({
     ssid: '',
     password: '',
+    hidePassword: false,
   });
   const [portrait, setPortrait] = useState(false);
 
@@ -78,7 +79,9 @@ export const Card = () => {
               value={network.ssid}
               onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
             />
-            <label>Password</label>
+            <label className={network.hidePassword ? 'hide-password' : ''}>
+              Password
+            </label>
             <textarea
               id="password"
               type="text"
@@ -86,6 +89,7 @@ export const Card = () => {
                 height:
                   portrait && network.password.length > 40 ? '5em' : 'auto',
               }}
+              className={network.hidePassword ? 'hide-password' : ''}
               maxLength="63"
               placeholder="Password"
               autoComplete="off"
@@ -97,6 +101,18 @@ export const Card = () => {
                 setNetwork({ ...network, password: e.target.value })
               }
             />
+
+            <input
+              type="checkbox"
+              id="hide-password-checkbox"
+              className="hide-password"
+              onChange={() =>
+                setNetwork({ ...network, hidePassword: !network.hidePassword })
+              }
+            />
+            <label for="hide-password-checkbox" className="hide-password">
+              Hide password field before printing
+            </label>
           </div>
         </div>
 
diff --git a/src/components/style.css b/src/components/style.css
index c1b78be..6887d59 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -56,6 +56,9 @@ button#rotate {
   #print-area textarea {
     border: none;
   }
+  .hide-password {
+    display: none;
+  }
   #print-area {
     position: absolute;
     left: 0;