1 files changed, 56 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;