8 files changed, 133 insertions, 68 deletions

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index ce9cbd2..6ba42f0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,24 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Card from './components/Card';
+import './style.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+
+      <h1>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.
+      </p>
+
+      <p className="tag">
+        Your information is never sent to the server.
+        View the <a href="https://github.com/bndw/wifi-details">source code</a>.
+      </p>
+
+      <Card />
+
     </div>
   );
 }
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 0000000..c555a25
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import QRCode from 'qrcode.react';
+import './style.css';
+
+class Card extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {ssid: '', password: '', qrvalue: ''};
+    this.handleSSIDChange = this.handleSSIDChange.bind(this);
+    this.handlePasswordChange= this.handlePasswordChange.bind(this);
+  }
+
+  handleSSIDChange(event) {
+    this.setState({ssid: event.target.value}, () => this.generateqr());
+  }
+
+  handlePasswordChange(event) {
+    this.setState({password: event.target.value}, () => this.generateqr());
+  }
+
+  generateqr() {
+    const qrcode = `WIFI:T:WPA;S:${this.state.ssid};P:${this.state.password};;`
+    this.setState({qrvalue: qrcode});
+  }
+
+  render() {
+    return (
+      <div>
+        <fieldset id="print-area">
+          <legend></legend>
+
+          <h1>WiFi Login</h1>
+          <hr/>
+
+          <div className="details">
+            <QRCode className="qrcode" value={this.state.qrvalue} size={175} />
+
+            <div className="text">
+              <label>Network name</label>
+              <input id="ssid" type="text" placeholder="Enter your WiFi Network" value={this.state.ssid} onChange={this.handleSSIDChange}/>
+              <label>Password</label>
+              <input id="password" type="text" placeholder="password" value={this.state.password} onChange={this.handlePasswordChange}/>
+            </div>
+          </div>
+
+          <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
new file mode 100644
index 0000000..e5b01e3
--- /dev/null
+++ b/src/components/style.css
@@ -0,0 +1,47 @@
+#print-area {
+  margin-top: 2em;
+  padding: 1em;
+}
+.details {
+  display: flex;
+  padding: 1em;
+}
+.details .text{
+  margin: 0;
+}
+.details .text * {
+  margin: 0 1em;
+}
+.details .text input {
+  background-color: #fff;
+  border: solid 1px #ddd;
+  font-size: 1.4em;
+  font-weight: bold;
+  line-height: 2;
+}
+.print-btn {
+  padding-top: 2em;
+}
+.print-btn button {
+  color: #fff;
+  height: 50px;
+  width: 180px;
+  background-color: #0074d9;
+}
+
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  #print-area, #print-area * {
+    visibility: visible;
+  }
+  #print-area input {
+    border: none;
+  }
+  #print-area {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index f5185c1..be3b97a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './light.min.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
diff --git a/src/light.min.css b/src/light.min.css
new file mode 100644
index 0000000..8ce73eb
--- /dev/null
+++ b/src/light.min.css
@@ -0,0 +1,2 @@
+@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
+/*# sourceMappingURL=light.min.css.map */
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..3e55788
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,11 @@
+body {
+  max-width: 650px;
+}
+.tag {
+  line-height: 1.6;
+}
+
+iframe {
+  float: right;
+  margin: -2em;
+}