Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import { Field, TextInput } from './controls'; | |
| /** | |
| * Temporary front-end lock until the backend has real auth. The password ships | |
| * in the bundle, so this only keeps casual visitors out — it protects nothing. | |
| */ | |
| const PASSWORD = process.env.REACT_APP_ACCESS_PASSWORD || 'Taric-Kiwi-7428'; | |
| const STORAGE_KEY = 'cargoflow.unlocked'; | |
| function readUnlocked(): boolean { | |
| try { | |
| return localStorage.getItem(STORAGE_KEY) === PASSWORD; | |
| } catch { | |
| return false; | |
| } | |
| } | |
| export function PasswordGate({ children }: { children: React.ReactNode }) { | |
| const [unlocked, setUnlocked] = useState(readUnlocked); | |
| const [value, setValue] = useState(''); | |
| const [wrong, setWrong] = useState(false); | |
| if (unlocked) return <>{children}</>; | |
| const onSubmit = (event: React.FormEvent) => { | |
| event.preventDefault(); | |
| if (value !== PASSWORD) { | |
| setWrong(true); | |
| return; | |
| } | |
| try { | |
| localStorage.setItem(STORAGE_KEY, PASSWORD); | |
| } catch { | |
| // Private mode: stay unlocked for this tab only. | |
| } | |
| setUnlocked(true); | |
| }; | |
| return ( | |
| <main className="mx-auto my-[52px] max-w-[420px] px-[22px] max-[560px]:my-[30px] max-[560px]:px-4"> | |
| <div className="mb-6 text-center text-2xl font-[750] tracking-[-1px]"> | |
| Cargo<span className="text-brand-accent">Flow</span> | |
| </div> | |
| <form className="cf-card" onSubmit={onSubmit}> | |
| <Field label="Password" htmlFor="access-password"> | |
| <TextInput | |
| id="access-password" | |
| type="password" | |
| autoFocus | |
| autoComplete="current-password" | |
| value={value} | |
| aria-invalid={wrong} | |
| className={wrong ? 'border-danger' : ''} | |
| onChange={(event) => { | |
| setValue(event.target.value); | |
| setWrong(false); | |
| }} | |
| /> | |
| {wrong ? <p className="mt-2 text-xs text-danger">Wrong password.</p> : null} | |
| </Field> | |
| <button type="submit" className="cf-primary" disabled={value === ''}> | |
| Enter | |
| </button> | |
| </form> | |
| </main> | |
| ); | |
| } | |