80 lines
2 KiB
JavaScript
80 lines
2 KiB
JavaScript
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { useEffect, useState } from 'react'
|
|
import styles from './wifi-qrcode.module.scss'
|
|
import { QRCodeSVG } from 'qrcode.react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
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)};;`
|
|
}
|
|
|
|
export default function WifiQRCode() {
|
|
const [details, setDetails] = useState(null)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
let {
|
|
eventName,
|
|
ssid,
|
|
psk,
|
|
hidden,
|
|
} = router.query
|
|
|
|
eventName = eventName || ''
|
|
ssid = ssid || ''
|
|
psk = psk || ''
|
|
hidden = hidden || false
|
|
|
|
setDetails({
|
|
eventName,
|
|
ssid,
|
|
psk,
|
|
hidden,
|
|
})
|
|
}, [router.query])
|
|
|
|
if (details === null || !details.eventName) return (<div />)
|
|
|
|
const hasLogo = details.eventName.match(/^http[s]?:/)
|
|
|
|
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} />
|
|
{details.psk ? <div className={styles.passwordContainer}>Password: <tt className={styles.password}>{details.psk}</tt></div> : null}
|
|
<img src={"../../assets/wifi.png"} className={styles.wifiLogo} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|