refactor: migrate frontend to React + Tailwind, add Docker + tests

Replace the vanilla-TS innerHTML frontend with a type-checked React
component tree (React 19 + Tailwind v4 + Vite).

Frontend:
- 14 components: Header, Stepper, LoginPage, LoginModal, SignPage,
  DropZone, DevicePicker, ProgressCard, SavedAccountsList, TrustModal,
  TwoFactorModal, Button, Field, Chip, Modal
- lib/ extracts: storage (10 localStorage keys preserved), pair-record,
  account-session, log-parser, ids, use-log hook
- flows/ encapsulate async pair/login/sign/install with dependency injection
- Accounts page as main view with Add Account modal
- Fullscreen progress overlay during sign/install
- Account selector + device picker on Sign page
- Security notice in login modal (server trust warning)
- All addLog calls mirrored to console.log for devtools debugging

Build:
- bun run dev: submodule init + install + wasm dist + vite + wrangler
- bun run setup: one-shot project bootstrap
- Docker: multi-stage bun build → nginx on :3000
- build:wasm:dist copies pre-built src→dist (no Rust/Emscripten needed)
- jszip/node-forge/fflate pre-bundled for CJS→ESM conversion

Tests:
- 163 vitest tests (happy-dom): all lib, components, App integration,
  WASM dist artifact checks, libcurl Apple connectivity, anisette init
  error handling

Cleanup:
- Delete yarn.lock (bun.lock canonical), expand .gitignore
- Remove README.zh.md, rewrite README.md + AGENTS.md
- Update libcurl.js submodule to f65d440 (CI build artifacts)
This commit is contained in:
Lakr
2026-04-13 17:02:45 +08:00
parent 3ed8ddc5dc
commit afec333aa0
79 changed files with 6543 additions and 6392 deletions

View File

@@ -0,0 +1,106 @@
import type { ChangeEvent } from 'react';
import { Button } from './ui/Button';
import { Field } from './ui/Field';
interface LoginModalProps {
open: boolean;
onClose: () => void;
appleId: string;
password: string;
busyLoginSign: boolean;
canSubmit: boolean;
onAppleIdChange: (value: string) => void;
onAppleIdBlur: () => void;
onPasswordChange: (value: string) => void;
onSubmit: () => void;
}
export function LoginModal({
open,
onClose,
appleId,
password,
busyLoginSign,
canSubmit,
onAppleIdChange,
onAppleIdBlur,
onPasswordChange,
onSubmit,
}: LoginModalProps) {
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/30 backdrop-blur-sm p-4 pt-[8vh]">
<div className="w-full max-w-[440px] rounded-2xl border border-border bg-bg p-6 shadow-2xl anim-in">
<div className="mb-5 flex items-center justify-between">
<h2 className="text-[18px] font-semibold tracking-tight text-ink">Add Account</h2>
<button
type="button"
onClick={onClose}
disabled={busyLoginSign}
className="flex h-7 w-7 items-center justify-center rounded-full text-muted transition-colors hover:bg-surface hover:text-ink disabled:opacity-40"
>
<svg
className="h-4 w-4"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
>
<path d="M4 4l8 8M12 4l-8 8" />
</svg>
</button>
</div>
<div className="space-y-4">
<Field
label="Apple ID"
type="email"
autoComplete="username"
placeholder="you@icloud.com"
value={appleId}
onChange={(e: ChangeEvent<HTMLInputElement>) => onAppleIdChange(e.target.value)}
onBlur={onAppleIdBlur}
/>
<Field
label="Password"
type="password"
autoComplete="current-password"
placeholder="Apple ID password"
value={password}
onChange={(e: ChangeEvent<HTMLInputElement>) => onPasswordChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && canSubmit && !busyLoginSign) {
e.preventDefault();
onSubmit();
}
}}
/>
</div>
<div className="mt-4 space-y-1">
<p className="text-[11.5px] text-muted">
Your credentials are stored locally in this browser and are sent directly to Apple.
</p>
<p className="text-[11.5px] text-[var(--color-danger)] underline underline-offset-2 decoration-[var(--color-danger)]/40">
Verify that you trust the server hosting this page. A compromised server can intercept your credentials.
</p>
</div>
<div className="mt-5 flex justify-end">
<Button
variant="primary"
busy={busyLoginSign}
busyLabel="Signing In…"
disabled={!canSubmit}
onClick={onSubmit}
className="min-w-[140px]"
>
Sign In
</Button>
</div>
</div>
</div>
);
}