blob: 2373b2630e6b1c4b79f9e4dc4a3740b4be457003 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import React, { useState, useEffect } from 'react';
import QRCode from 'qrcode.react';
import './style.css';
const Card = () => {
const [ssid, setSsid] = useState('');
const [password, setPassword] = useState('');
const [qrvalue, setQrvalue] = useState('');
useEffect(() => {
setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
}, [ssid, password]);
return (
<div>
<fieldset id="print-area">
<legend></legend>
<h1>WiFi Login</h1>
<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)} />
<label>Password</label>
<input id="password" type="text" maxlength="64" placeholder="Password" value={password} onChange={event => setPassword(event.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>
</fieldset>
<div className="print-btn">
<button onClick={window.print}>Print</button>
</div>
</div>
)
}
export default Card;
|
