aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Card.js
diff options
context:
space:
mode:
authorBen Woodward <ben@bdw.to>2021-08-05 12:12:17 -0700
committerGitHub <noreply@github.com>2021-08-05 12:12:17 -0700
commit093f025de3e97339750dc3df5be626a0315507dc (patch)
tree9b740790ae1f4fb6f5ad2b675c01f37acd2f0914 /src/components/Card.js
parent5a03a61de7ac4e8f58060ae19a309dd40eea13bc (diff)
Style and code refactor (#166)
* Move all settings below card * refactor components; lifting state up * background color * Evergreen components for everything * password error * Tighten card size * Simply hide password to basic toggle, never disable * Hide password label, too * Maximize mobile portrait width * Make wifi tip smaller * Small style tweaks * Copy: update password length error text to include helpful instructions This will need a backfill for other translations * Remove unused css * Use empty string for EncryptionMode=None value * Remove light.min.css * Include logo on wificard * Cleanup after rebase * Clean-up comments on state * Padding for mobile
Diffstat (limited to 'src/components/Card.js')
-rw-r--r--src/components/Card.js225
1 files changed, 0 insertions, 225 deletions
diff --git a/src/components/Card.js b/src/components/Card.js
deleted file mode 100644
index 601b760..0000000
--- a/src/components/Card.js
+++ /dev/null
@@ -1,225 +0,0 @@
1import QRCode from 'qrcode.react';
2import { useEffect, useRef, useState } from 'react';
3import { useTranslation } from 'react-i18next';
4import './style.css';
5
6export const Card = ({ direction = 'ltr' }) => {
7 const firstLoad = useRef(true);
8 const [qrvalue, setQrvalue] = useState('');
9 const [network, setNetwork] = useState({
10 ssid: '',
11 encryptionMode: 'WPA',
12 password: '',
13 hidePassword: false,
14 });
15 const [portrait, setPortrait] = useState(false);
16 const { t } = useTranslation();
17 const escape = (v) => {
18 const needsEscape = ['"', ';', ',', ':', '\\'];
19
20 let escaped = '';
21 for (const c of v) {
22 if (needsEscape.includes(c)) {
23 escaped += `\\${c}`;
24 } else {
25 escaped += c;
26 }
27 }
28 return escaped;
29 };
30
31 const onPrint = () => {
32 if (network.ssid.length > 0) {
33 if (network.password.length < 8 && network.encryptionMode === 'WPA') {
34 alert(t('wifi.alert.password.length.8'));
35 } else if (
36 network.password.length < 5 &&
37 network.encryptionMode === 'WEP'
38 ) {
39 alert(t('wifi.alert.password.length.5'));
40 } else {
41 document.title = 'WiFi Card - ' + network.ssid;
42 window.print();
43 }
44 } else {
45 alert(t('wifi.alert.name'));
46 }
47 };
48
49 const disableHidePassword = () => {
50 const isWEPWithPasswordLengthShorterThat5Characters = () => {
51 return network.encryptionMode === 'WEP' && network.password.length < 5
52 ? true
53 : false;
54 };
55
56 return network.encryptionMode === 'WPA' && network.password.length < 8
57 ? true
58 : isWEPWithPasswordLengthShorterThat5Characters();
59 };
60
61 useEffect(() => {
62 if (firstLoad.current && window.innerWidth < 500) {
63 firstLoad.current = false;
64 setPortrait(true);
65 }
66
67 const ssid = escape(network.ssid);
68 const password =
69 network.encryptionMode === 'nopass' ? '' : escape(network.password);
70 setQrvalue(`WIFI:T:${network.encryptionMode};S:${ssid};P:${password};;`);
71 }, [network]);
72
73 const setEncryptionMode = (e) =>
74 setNetwork({
75 ...network,
76 encryptionMode: e.target.value,
77 });
78
79 const checkDirectionAndSetPadding =
80 direction === 'ltr' ? { paddingRight: '1em' } : { paddingLeft: '1em' };
81
82 return (
83 <div>
84 <fieldset
85 id="print-area"
86 style={{ maxWidth: portrait ? '350px' : '100%' }}
87 >
88 <h1 style={{ textAlign: portrait ? 'center' : 'unset' }}>
89 {t('wifi.login')}
90 </h1>
91
92 <div
93 className="details"
94 style={{ flexDirection: portrait ? 'column' : 'row' }}
95 >
96 <QRCode
97 className="qrcode"
98 style={!portrait && checkDirectionAndSetPadding}
99 value={qrvalue}
100 size={175}
101 />
102
103 <div className="inputs">
104 <label>{t('wifi.name')}</label>
105 <textarea
106 id="ssid"
107 type="text"
108 maxLength="32"
109 placeholder={t('wifi.name.placeholder')}
110 autoComplete="off"
111 autoCorrect="off"
112 autoCapitalize="none"
113 spellCheck="false"
114 value={network.ssid}
115 onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
116 />
117 <label
118 className={`
119 ${network.hidePassword && 'no-print hidden'}
120 ${network.encryptionMode === 'nopass' && 'hidden'}
121 `}
122 >
123 {t('wifi.password')}
124 </label>
125 <textarea
126 id="password"
127 type="text"
128 className={`
129 ${network.hidePassword && 'no-print hidden'}
130 ${network.encryptionMode === 'nopass' && 'hidden'}
131 `}
132 style={{
133 height:
134 portrait && network.password.length > 40 ? '5em' : 'auto',
135 }}
136 maxLength="63"
137 placeholder={t('wifi.password.placeholder')}
138 autoComplete="off"
139 autoCorrect="off"
140 autoCapitalize="none"
141 spellCheck="false"
142 value={network.password}
143 onChange={(e) => {
144 setNetwork({ ...network, password: e.target.value });
145 }}
146 />
147
148 <div className="no-print">
149 <input
150 type="checkbox"
151 id="hide-password-checkbox"
152 checked={network.hidePassword}
153 disabled={disableHidePassword()}
154 className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
155 onChange={() =>
156 setNetwork({
157 ...network,
158 hidePassword: !network.hidePassword,
159 })
160 }
161 />
162 <label
163 htmlFor="hide-password-checkbox"
164 className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
165 >
166 {t('wifi.password.hide')}
167 </label>
168 </div>
169
170 <div className="no-print">
171 <label>
172 {t('wifi.password.encryption')}:{direction === 'rtl' ? ' ' : ''}
173 </label>
174 <span dir="ltr">
175 <input
176 type="radio"
177 name="encrypt-select"
178 id="encrypt-none"
179 value="nopass"
180 onChange={setEncryptionMode}
181 />
182 <label htmlFor="encrypt-none">
183 {t('wifi.password.encryption.none')}
184 </label>
185 <input
186 type="radio"
187 name="encrypt-select"
188 id="encrypt-wpa-wpa2-wpa3"
189 value="WPA"
190 onChange={setEncryptionMode}
191 defaultChecked
192 />
193 <label htmlFor="encrypt-wpa-wpa2-wpa3">WPA/WPA2/WPA3</label>
194 <input
195 type="radio"
196 name="encrypt-select"
197 id="encrypt-wep"
198 value="WEP"
199 onChange={setEncryptionMode}
200 />
201 <label htmlFor="encrypt-wep">WEP</label>
202 </span>
203 </div>
204 </div>
205 </div>
206 <hr />
207 <p>
208 <span role="img" aria-label="mobile-phone">
209 πŸ“ΈπŸ“±
210 </span>
211 {t('wifi.tip')}
212 </p>
213 </fieldset>
214
215 <div className="buttons">
216 <button id="rotate" onClick={() => setPortrait(!portrait)}>
217 {t('button.rotate')}
218 </button>
219 <button id="print" onClick={onPrint}>
220 {t('button.print')}
221 </button>
222 </div>
223 </div>
224 );
225};
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-18 21:08:53 +0000