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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import QRCode from 'qrcode.react';
import { useEffect, useRef, useState } from 'react';
import './style.css';
export const Card = () => {
const firstLoad = useRef(true);
const [qrvalue, setQrvalue] = useState('');
const [network, setNetwork] = useState({
ssid: '',
password: '',
});
const [portrait, setPortrait] = useState(false);
const escape = (v) => {
const needsEscape = ['"', ';', ',', ':', '\\'];
let escaped = '';
for (let i = 0; i < v.length; i++) {
let c = v[i];
if (needsEscape.includes(c)) {
c = '\\' + c;
}
escaped += c;
}
return escaped;
};
const onPrint = () => {
if (network.password.length < 8) {
alert('Password must be at least 8 characters');
} else {
window.print();
}
};
useEffect(() => {
if (firstLoad.current && window.innerWidth < 500) {
firstLoad.current = false;
setPortrait(true);
}
const ssid = escape(network.ssid);
const password = escape(network.password);
setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
}, [network]);
return (
<div>
<fieldset
id="print-area"
style={{ maxWidth: portrait ? '350px' : '100%' }}
>
<h1 style={{ textAlign: portrait ? 'center' : 'left' }}>WiFi Login</h1>
<div
className="details"
style={{ flexDirection: portrait ? 'column' : 'row' }}
>
<QRCode
className="qrcode"
style={{ paddingRight: portrait ? '' : '1em' }}
value={qrvalue}
size={175}
/>
<div className="inputs">
<label>Network name</label>
<textarea
id="ssid"
type="text"
maxLength="32"
placeholder="WiFi Network name"
autoComplete="off"
autoCorrect="off"
autoCapitalize="none"
spellCheck="false"
value={network.ssid}
onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
/>
<label>Password</label>
<textarea
id="password"
type="text"
style={{
height:
portrait && network.password.length > 40 ? '5em' : 'auto',
}}
maxLength="63"
placeholder="Password"
autoComplete="off"
autoCorrect="off"
autoCapitalize="none"
spellCheck="false"
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>
</fieldset>
<div className="buttons">
<button id="rotate" onClick={() => setPortrait(!portrait)}>
Rotate
</button>
<button id="print" onClick={onPrint}>
Print
</button>
</div>
</div>
);
};
|
