3 files changed, 53 insertions, 28 deletions

diff --git a/src/App.js b/src/App.js
index ef4859c..0895668 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,29 @@
 import React from 'react';
-import Card from './components/Card';
+import { Card } from './components/Card';
 import './style.css';
 
 function App() {
   return (
     <div className="App">
-
-      <h1><span role="img" aria-label="antenna-bars">📶</span>&nbsp; WiFi Card</h1>
+      <h1>
+        <span role="img" aria-label="antenna-bars">
+          📶
+        </span>
+        &nbsp; WiFi Card
+      </h1>
 
       <p className="tag">
-        Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.
+        Print a simple card with your WiFi login details. Tape it to the fridge,
+        keep it in your wallet, etc.
       </p>
 
       <p className="tag">
-        Your WiFi information is never sent to the server.
-        No tracking, analytics, or fingerprinting are used on this website.
-        View the <a href="https://github.com/bndw/wifi-card">source code</a>.
+        Your WiFi information is never sent to the server. No tracking,
+        analytics, or fingerprinting are used on this website. View the{' '}
+        <a href="https://github.com/bndw/wifi-card">source code</a>.
       </p>
 
       <Card />
-
     </div>
   );
 }
diff --git a/src/components/Card.js b/src/components/Card.js
index 6c2c745..16f94a4 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -2,14 +2,16 @@ import React, { useState, useEffect } from 'react';
 import QRCode from 'qrcode.react';
 import './style.css';
 
-const Card = () => {
-  const [ssid, setSsid] = useState('');
-  const [password, setPassword] = useState('');
+export const Card = () => {
+  const [network, setNetwork] = useState({
+    ssid: '',
+    password: '',
+  });
   const [qrvalue, setQrvalue] = useState('');
 
   const escape = (v) => {
     const needsEscape = ['"', ';', ',', ':', '\\'];
-    
+
     let escaped = '';
     for (let i = 0; i < v.length; i++) {
       let c = v[i];
@@ -20,14 +22,13 @@ const Card = () => {
     }
 
     return escaped;
-  }
+  };
 
   useEffect(() => {
-    let _ssid = escape(ssid),
-        _password = escape(password);
-
-    setQrvalue(`WIFI:T:WPA;S:${_ssid};P:${_password};;`);
-  }, [ssid, password]);
+    const ssid = escape(network.ssid);
+    const password = escape(network.password);
+    setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
+  }, [network]);
 
   return (
     <div>
@@ -35,26 +36,45 @@ const Card = () => {
         <legend></legend>
 
         <h1>WiFi Login</h1>
-        <hr/>
+        <hr />
 
         <div className="details">
           <QRCode className="qrcode" value={qrvalue} size={175} />
 
           <div className="text">
             <label>Network name</label>
-            <input id="ssid" type="text" maxLength="32" placeholder="WiFi Network name" value={ssid} onChange={event => setSsid(event.target.value)} />
+            <input
+              id="ssid"
+              type="text"
+              maxLength="32"
+              placeholder="WiFi Network name"
+              value={network.ssid}
+              onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
+            />
             <label>Password</label>
-            <input id="password" type="text" maxLength="63" placeholder="Password" value={password} onChange={event => setPassword(event.target.value)} />
+            <input
+              id="password"
+              type="text"
+              maxLength="63"
+              placeholder="Password"
+              value={network.password}
+              onChange={(e) =>
+                setNetwork({ ...network, password: e.target.value })
+              }
+            />
           </div>
         </div>
 
-        <p><span role="img" aria-label="mobile-phone">📸📱</span>Point your phone's camera at the QR Code to connect automatically</p>
+        <p>
+          <span role="img" aria-label="mobile-phone">
+            📸📱
+          </span>
+          Point your phone's camera at the QR Code to connect automatically
+        </p>
       </fieldset>
       <div className="print-btn">
         <button onClick={window.print}>Print</button>
       </div>
     </div>
-  )
-}
-
-export default Card;
+  );
+};
diff --git a/src/components/style.css b/src/components/style.css
index 0f98052..d1440e2 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -8,7 +8,7 @@
   display: flex;
   padding: 1em;
 }
-.details .text{
+.details .text {
   margin: 0;
 }
 .details .text * {
@@ -36,7 +36,8 @@
   body * {
     visibility: hidden;
   }
-  #print-area, #print-area * {
+  #print-area,
+  #print-area * {
     visibility: visible;
   }
   #print-area input {