Luke Granger-Brown
e32a2520e8
This is a (undocumented) tool for generating printable A4/Letter-sized Wifi QR code sheets. It takes URL parameters: * eventName: this is either the name of an event or a URL to a logo for it * ssid: network SSID * psk: network password; if not set, the network is assumed to have no password * hidden: if present, the network is assumed to be hidden
72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
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 (
|
|
<div className={styles.background}>
|
|
<div className={styles.page}>
|
|
{hasLogo ?
|
|
<img className={styles.eventLogo} src={details.eventName} /> :
|
|
<h1 className={styles.event}>{details.eventName}</h1>}
|
|
<h2 className={styles.network}>SSID: {details.ssid}</h2>
|
|
<QRCodeSVG value={generateQRString(details)} level={"M"} includeMargin={false} size={128} className={styles.qrcode} />
|
|
<div className={styles.passwordContainer}>Password: <tt className={styles.password}>{details.psk}</tt></div>
|
|
<img src={"../../assets/wifi.png"} className={styles.wifiLogo} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
WifiQRCode.getInitialProps = async (ctx) => {
|
|
const {
|
|
eventName,
|
|
ssid,
|
|
psk,
|
|
hidden,
|
|
} = ctx.query
|
|
|
|
return {details: {
|
|
eventName,
|
|
ssid,
|
|
psk,
|
|
hidden,
|
|
}}
|
|
}
|
|
|
|
export default WifiQRCode
|