Jakob Wennberg
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState, useCallback } from 'react'
|
|
import QRCode from 'qrcode'
|
|
|
|
interface BankIdQrCodeProps {
|
|
qrStartToken: string
|
|
qrStartSecret: string
|
|
}
|
|
|
|
/**
|
|
* Animated BankID QR code component.
|
|
* Computes HMAC-SHA256 every second per BankID spec:
|
|
* bankid.{qrStartToken}.{time}.{hmac_sha256(qrStartSecret, time)}
|
|
*/
|
|
export function BankIdQrCode({ qrStartToken, qrStartSecret }: BankIdQrCodeProps) {
|
|
const [svgData, setSvgData] = useState<string>('')
|
|
const elapsedRef = useRef(0)
|
|
const tokenRef = useRef(qrStartToken)
|
|
const secretRef = useRef(qrStartSecret)
|
|
|
|
// Update refs when tokens change (order regeneration)
|
|
useEffect(() => {
|
|
tokenRef.current = qrStartToken
|
|
secretRef.current = qrStartSecret
|
|
elapsedRef.current = 0
|
|
}, [qrStartToken, qrStartSecret])
|
|
|
|
const generateQr = useCallback(async () => {
|
|
const token = tokenRef.current
|
|
const secret = secretRef.current
|
|
const time = elapsedRef.current
|
|
|
|
try {
|
|
// Compute HMAC-SHA256 using Web Crypto API
|
|
const encoder = new TextEncoder()
|
|
const key = await crypto.subtle.importKey(
|
|
'raw',
|
|
encoder.encode(secret),
|
|
{ name: 'HMAC', hash: 'SHA-256' },
|
|
false,
|
|
['sign']
|
|
)
|
|
const signature = await crypto.subtle.sign('HMAC', key, encoder.encode(time.toString()))
|
|
const qrAuthCode = Array.from(new Uint8Array(signature))
|
|
.map((b) => b.toString(16).padStart(2, '0'))
|
|
.join('')
|
|
|
|
const qrData = `bankid.${token}.${time}.${qrAuthCode}`
|
|
|
|
const svg = await QRCode.toString(qrData, {
|
|
type: 'svg',
|
|
margin: 1,
|
|
width: 200,
|
|
color: { dark: '#141414', light: '#ffffff' },
|
|
})
|
|
setSvgData(svg)
|
|
} catch {
|
|
// Silently fail: next tick will retry
|
|
}
|
|
|
|
elapsedRef.current++
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
// Generate immediately, then every second
|
|
generateQr()
|
|
const interval = setInterval(generateQr, 1000)
|
|
return () => clearInterval(interval)
|
|
}, [generateQr])
|
|
|
|
if (!svgData) {
|
|
return (
|
|
<div className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border bg-white">
|
|
<div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="inline-flex rounded-lg border bg-white p-2"
|
|
dangerouslySetInnerHTML={{ __html: svgData }}
|
|
/>
|
|
)
|
|
}
|