97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
import { useMemo, useState } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { betaAccessStorageKey } from "../components/BetaGate";
|
||
|
||
const ACCESS_CODE = "jodygavemeaccess123";
|
||
|
||
export default function BetaAccessPage() {
|
||
const navigate = useNavigate();
|
||
const [code, setCode] = useState("");
|
||
const [touched, setTouched] = useState(false);
|
||
|
||
const isValid = useMemo(() => code.trim() === ACCESS_CODE, [code]);
|
||
const isUnlocked = useMemo(
|
||
() => localStorage.getItem(betaAccessStorageKey) === "true",
|
||
[]
|
||
);
|
||
|
||
const handleSubmit = (event: React.FormEvent) => {
|
||
event.preventDefault();
|
||
setTouched(true);
|
||
if (!isValid) return;
|
||
localStorage.setItem(betaAccessStorageKey, "true");
|
||
navigate("/login", { replace: true });
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[--color-bg] flex items-center justify-center px-4 py-10">
|
||
<div className="w-full max-w-xl card p-8 sm:p-10">
|
||
<div className="space-y-3">
|
||
<div className="text-xs uppercase tracking-[0.2em] muted">
|
||
Private beta
|
||
</div>
|
||
<h1 className="text-3xl sm:text-4xl font-semibold">
|
||
Welcome to SkyMoney
|
||
</h1>
|
||
<p className="muted">
|
||
This build is private. If you’ve been given access, enter your code
|
||
below. If not, reach out to{" "}
|
||
<a
|
||
href="https://jodyholt.com"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-[--color-accent] font-medium hover:underline"
|
||
>
|
||
Jody
|
||
</a>{" "}
|
||
for access.
|
||
</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||
<label className="block text-sm font-medium">
|
||
Access code
|
||
<div className="mt-2">
|
||
<input
|
||
type="text"
|
||
className="input w-full"
|
||
value={code}
|
||
onChange={(event) => {
|
||
setTouched(true);
|
||
setCode(event.target.value);
|
||
}}
|
||
placeholder="Enter your code"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
</label>
|
||
|
||
{touched && code.length > 0 && !isValid && (
|
||
<div className="text-sm text-red-500">
|
||
That code doesn’t match. Please try again.
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
className="btn primary w-full"
|
||
disabled={!isValid}
|
||
>
|
||
Continue
|
||
</button>
|
||
|
||
{isUnlocked && (
|
||
<button
|
||
type="button"
|
||
className="btn w-full"
|
||
onClick={() => navigate("/login")}
|
||
>
|
||
I already have access
|
||
</button>
|
||
)}
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|