2 files changed, 103 insertions, 0 deletions

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;
+  }
+}