update: add feature of SMS push fallback logic and login error prompt. login logic optimized

frontend/src/components/LoginModal.tsx

@@ -9,6 +9,7 @@ interface LoginModalProps {
   password: string;
   busyLoginSign: boolean;
   canSubmit: boolean;
+  error?: string | null;
   onAppleIdChange: (value: string) => void;
   onAppleIdBlur: () => void;
   onPasswordChange: (value: string) => void;
@@ -22,6 +23,7 @@ export function LoginModal({
   password,
   busyLoginSign,
   canSubmit,
+  error,
   onAppleIdChange,
   onAppleIdBlur,
   onPasswordChange,
@@ -31,7 +33,7 @@ export function LoginModal({
 
   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="w-full max-w-110 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
@@ -83,22 +85,29 @@ export function LoginModal({
           <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">
+          <p className="text-[11.5px] text-danger underline underline-offset-2 decoration-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 className="mt-5 flex flex-col gap-3">
+          {error && (
+            <p className="rounded-lg border border-danger/30 bg-danger-soft px-3 py-2 text-[12.5px] text-danger">
+              {error}
+            </p>
+          )}
+          <div className="flex justify-end">
+            <Button
+              variant="primary"
+              busy={busyLoginSign}
+              busyLabel="Signing In…"
+              disabled={!canSubmit}
+              onClick={onSubmit}
+              className="min-w-35"
+            >
+              Sign In
+            </Button>
+          </div>
         </div>
       </div>
     </div>