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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
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: '',
hidePassword: false,
});
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 className={network.hidePassword ? 'hide-password' : ''}>
Password
</label>
<textarea
id="password"
type="text"
style={{
height:
portrait && network.password.length > 40 ? '5em' : 'auto',
}}
className={network.hidePassword ? 'hide-password' : ''}
maxLength="63"
placeholder="Password"
autoComplete="off"
autoCorrect="off"
autoCapitalize="none"
spellCheck="false"
value={network.password}
onChange={(e) =>
setNetwork({ ...network, password: e.target.value })
}
/>
<input
type="checkbox"
id="hide-password-checkbox"
className="hide-password"
onChange={() =>
setNetwork({ ...network, hidePassword: !network.hidePassword })
}
/>
<label for="hide-password-checkbox" className="hide-password">
Hide password field before printing
</label>
</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>
);
};
|
