mirror of
https://github.com/lbr77/SideImpactor.git
synced 2026-05-06 11:14:01 -04:00
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:
106
frontend/src/components/LoginModal.tsx
Normal file
106
frontend/src/components/LoginModal.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user