diff --git a/web/lukegbcom/pages/tools/wifi-qrcode.js b/web/lukegbcom/pages/tools/wifi-qrcode.js new file mode 100644 index 0000000000..41cf24d459 --- /dev/null +++ b/web/lukegbcom/pages/tools/wifi-qrcode.js @@ -0,0 +1,72 @@ +import Head from 'next/head' +import Link from 'next/link' +import styles from './wifi-qrcode.module.scss' +import { QRCodeSVG } from 'qrcode.react' + +function generateQRString(details) { + const bits = { + S: details.ssid, + } + if (details.psk) { + bits.P = details.psk + bits.T = "WPA" + } else { + bits.T = "nopass" + } + if (details.hidden) { + bits.H = "true" + } + const escapeStr = (s) => { + if (s.match(/^[0-9A-Fa-f]+$/)) { + return `"${s}"` + } + return s + } + const generateWifiFromBits = (bits) => { + let o = []; + for (const b in bits) { + if (!bits.hasOwnProperty(b)) continue + o.push(`${b}:${escapeStr(bits[b])}`) + } + return o.join(';') + } + return `WIFI:${generateWifiFromBits(bits)};;` +} + +function WifiQRCode({ details }) { + const hasLogo = details.eventName.match(/^http[s]?:/) + + console.log(generateQRString(details)) + + return ( +
+
+ {hasLogo ? + : +

{details.eventName}

} +

SSID: {details.ssid}

+ +
Password: {details.psk}
+ +
+
+ ) +} + +WifiQRCode.getInitialProps = async (ctx) => { + const { + eventName, + ssid, + psk, + hidden, + } = ctx.query + + return {details: { + eventName, + ssid, + psk, + hidden, + }} +} + +export default WifiQRCode diff --git a/web/lukegbcom/pages/tools/wifi-qrcode.module.scss b/web/lukegbcom/pages/tools/wifi-qrcode.module.scss new file mode 100644 index 0000000000..3c8bb8920e --- /dev/null +++ b/web/lukegbcom/pages/tools/wifi-qrcode.module.scss @@ -0,0 +1,61 @@ +@media screen { + .background { + background: #ddd; + margin: 0; + padding: 0; + + display: flex; + justify-content: center; + + min-height: 100vh; + } + .page { + background: #fff; + width: 210mm; + height: 297mm; + } +} + +@media print { + .page { + width: 100vw; + height: 100vh; + } +} + +.page * { + margin: 0; + padding: 0; +} + +.page { + text-align: center; + padding: 0 1rem; + + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.event, .eventLogo { + font-size: 36pt; +} + +.network { + font-size: 42pt; +} + +.qrcode { + width: 50%; + height: auto; +} + +.passwordContainer { + font-size: 32pt; +} + +.wifiLogo { + width: 20%; + height: auto; +} diff --git a/web/lukegbcom/public/assets/wifi.png b/web/lukegbcom/public/assets/wifi.png new file mode 100644 index 0000000000..02c3a7f18d Binary files /dev/null and b/web/lukegbcom/public/assets/wifi.png differ