mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 23:16:46 +00:00
Maurice
bb515ac3cc
With "Blur booking codes" on, the bookings list and the transport details hid a code, but opening the same booking to edit it printed the code in the clear: the reservation and transport forms with every per-segment code of a flight or train, the hotel editor in the day panel and the three phone sheets. The stay's own code in the day panel, the booking strip in the place inspector and the booking lines under a stay and a stop on the phone showed it plainly as well. One shared BookingCodeInput and BlurredCode now carry the setting to all of them. A filled code field stays blurred until it is hovered or focused, so clicking, tapping or tabbing into it still reveals the code for editing, and the value is saved exactly as typed. With the setting off nothing changes, and the PDF export and the share pages stay as they were.
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import { useState, type InputHTMLAttributes, type ReactNode, type Ref } from 'react'
|
|
import { useBlurBookingCodes } from '../../hooks/useBlurBookingCodes'
|
|
|
|
/**
|
|
* The "Blur booking codes" preference (blur_booking_codes) keeps confirmation
|
|
* codes unreadable to anyone looking at the screen until the user reaches for
|
|
* them. The pieces here carry it to every place that shows or edits a code, so
|
|
* a new surface gets the same look and the same way of revealing a code
|
|
* without reading the setting on its own.
|
|
*/
|
|
|
|
// The strength the code boxes in the bookings tabs and the day sheet use.
|
|
const BLUR_CLS = 'blur-[4px] select-none'
|
|
|
|
const joinCls = (...parts: (string | false | undefined)[]) => parts.filter(Boolean).join(' ')
|
|
|
|
type BookingCodeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
ref?: Ref<HTMLInputElement>
|
|
}
|
|
|
|
/**
|
|
* The text field of a form that edits a booking code. While the preference is
|
|
* on, a filled field stays blurred until the pointer rests on it or it gets
|
|
* focus, so the code is still there to read and change the moment the user
|
|
* clicks, taps or tabs into it. An empty field keeps its placeholder readable.
|
|
*
|
|
* Only a class is added: the value, the handlers and the ref pass through
|
|
* untouched, so what gets saved is exactly what was typed, and there is no
|
|
* wrapper to upset the grid and flex rows the field sits in. It stays a text
|
|
* field on purpose; a password field would bring the browser's password
|
|
* manager and a different phone keyboard with it.
|
|
*/
|
|
export function BookingCodeInput({ className, ...props }: BookingCodeInputProps) {
|
|
const blur = useBlurBookingCodes()
|
|
const hidden = blur && props.value != null && props.value !== ''
|
|
return (
|
|
<input
|
|
type="text"
|
|
{...props}
|
|
className={hidden
|
|
? joinCls(className, 'blur-[4px] transition-[filter] duration-200 hover:blur-none focus:blur-none')
|
|
: className}
|
|
/>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* A booking code shown as text. With the preference off it renders the code
|
|
* and nothing around it, so the markup of the surface stays what it was.
|
|
*
|
|
* With the preference on, the code becomes a small toggle that lifts on hover
|
|
* and on click, Enter or Space, like the codes in the bookings list. Inside a
|
|
* row that is a button itself a second button is not allowed, so
|
|
* `interactive={false}` gives a plain blurred span there; the booking the row
|
|
* opens is where that code can be read.
|
|
*/
|
|
export function BlurredCode({ children, interactive = true, className }: {
|
|
children: ReactNode
|
|
interactive?: boolean
|
|
className?: string
|
|
}) {
|
|
const blur = useBlurBookingCodes()
|
|
const [revealed, setRevealed] = useState(false)
|
|
if (!blur) return <>{children}</>
|
|
if (!interactive) return <span className={joinCls(className, BLUR_CLS)}>{children}</span>
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-pressed={revealed}
|
|
// The code often sits on a strip that opens its booking on a click or on
|
|
// Enter; revealing the code must not open the editor as well.
|
|
onClick={e => { e.stopPropagation(); setRevealed(v => !v) }}
|
|
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') e.stopPropagation() }}
|
|
className={joinCls(className, 'cursor-pointer', !revealed && `${BLUR_CLS} hover:blur-none`)}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|