wyxrouter 0.4.71

package/src/shared/components/HeaderMenu.js

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { useTheme } from "@/shared/hooks/useTheme";
+import ChangelogModal from "./ChangelogModal";
+import { ConfirmModal } from "./Modal";
+
+function MenuItem({ icon, label, onClick, trailing, danger }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`flex items-center gap-3 w-full px-4 py-2.5 text-sm transition-colors ${
+        danger
+          ? "text-red-500 hover:bg-red-500/10"
+          : "text-text-main hover:bg-black/5 dark:hover:bg-white/5"
+      }`}
+    >
+      <span className={`material-symbols-outlined text-[20px] ${danger ? "" : "text-text-muted"}`}>
+        {icon}
+      </span>
+      <span className="flex-1 text-left">{label}</span>
+      {trailing && <span className="text-base">{trailing}</span>}
+    </button>
+  );
+}
+
+MenuItem.propTypes = {
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  trailing: PropTypes.node,
+  danger: PropTypes.bool,
+};
+
+export default function HeaderMenu({ onLogout }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [changelogOpen, setChangelogOpen] = useState(false);
+  const [shutdownOpen, setShutdownOpen] = useState(false);
+  const [isShuttingDown, setIsShuttingDown] = useState(false);
+  const { toggleTheme, isDark } = useTheme();
+  const menuRef = useRef(null);
+
+  const handleShutdown = async () => {
+    setIsShuttingDown(true);
+    try {
+      await fetch("/api/version/shutdown", { method: "POST" });
+    } catch (e) {
+      // Expected to fail as server shuts down; ignore error
+    }
+    setIsShuttingDown(false);
+    setShutdownOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const close = () => setIsOpen(false);
+
+  return (
+    <>
+      <div className="relative" ref={menuRef}>
+        <button
+          onClick={() => setIsOpen((v) => !v)}
+          className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-all"
+          title="Menu"
+        >
+          <span className="material-symbols-outlined">grid_view</span>
+        </button>
+
+        {isOpen && (
+          <div className="absolute right-0 top-full mt-2 w-60 bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl z-50 animate-in fade-in zoom-in-95 duration-150 overflow-hidden py-1">
+            <MenuItem
+              icon="history"
+              label="Change Log"
+              onClick={() => { close(); setChangelogOpen(true); }}
+            />
+            <MenuItem
+              icon={isDark ? "light_mode" : "dark_mode"}
+              label="Theme"
+              onClick={() => { toggleTheme(); close(); }}
+            />
+            <MenuItem
+              icon="power_settings_new"
+              label="Shutdown"
+              danger
+              onClick={() => { close(); setShutdownOpen(true); }}
+            />
+            <MenuItem
+              icon="logout"
+              label="Logout"
+              danger
+              onClick={() => { close(); onLogout(); }}
+            />
+          </div>
+        )}
+      </div>
+
+      <ChangelogModal isOpen={changelogOpen} onClose={() => setChangelogOpen(false)} />
+      <ConfirmModal
+        isOpen={shutdownOpen}
+        onClose={() => setShutdownOpen(false)}
+        onConfirm={handleShutdown}
+        title="Close Proxy"
+        message="Are you sure you want to close the proxy server?"
+        confirmText="Close"
+        cancelText="Cancel"
+        variant="danger"
+        loading={isShuttingDown}
+      />
+    </>
+  );
+}
+
+HeaderMenu.propTypes = {
+  onLogout: PropTypes.func.isRequired,
+};

package/src/shared/components/IFlowCookieModal.js

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Modal, Button, Input } from "@/shared/components";
+
+/**
+ * iFlow Cookie Authentication Modal
+ * User pastes browser cookie to get fresh API key
+ */
+export default function IFlowCookieModal({ isOpen, onSuccess, onClose }) {
+  const [cookie, setCookie] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!cookie.trim()) {
+      setError("Please paste your cookie");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/oauth/iflow/cookie", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cookie: cookie.trim() }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Authentication failed");
+      }
+
+      setSuccess(true);
+      setTimeout(() => {
+        onSuccess?.();
+        handleClose();
+      }, 1500);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setCookie("");
+    setError(null);
+    setSuccess(false);
+    onClose?.();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="iFlow Cookie Authentication">
+      <div className="space-y-4">
+        {success ? (
+          <div className="text-center py-8">
+            <div className="text-6xl mb-4">✅</div>
+            <p className="text-lg font-medium text-text-primary">Authentication Successful!</p>
+            <p className="text-sm text-text-muted mt-2">Fresh API key obtained</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2">
+              <p className="text-sm text-text-muted">
+                To get a fresh API key, paste your browser cookie from{" "}
+                <a
+                  href="https://platform.iflow.cn"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline"
+                >
+                  platform.iflow.cn
+                </a>
+              </p>
+              <div className="bg-surface-secondary p-3 rounded-lg text-xs space-y-2">
+                <p className="font-medium text-text-primary">How to get cookie:</p>
+                <ol className="list-decimal list-inside space-y-1 text-text-muted">
+                  <li>Open platform.iflow.cn in your browser</li>
+                  <li>Login to your account</li>
+                  <li>Open DevTools (F12) → Application/Storage → Cookies</li>
+                  <li>Copy the entire cookie string (must include BXAuth)</li>
+                  <li>Paste it below</li>
+                </ol>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-text-primary">
+                Cookie String
+              </label>
+              <textarea
+                value={cookie}
+                onChange={(e) => setCookie(e.target.value)}
+                placeholder="BXAuth=xxx; ..."
+                className="w-full px-3 py-2 bg-surface-secondary border border-border rounded-lg text-sm text-text-primary placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                rows={4}
+                disabled={loading}
+              />
+            </div>
+
+            {error && (
+              <div className="p-3 bg-error/10 border border-error/20 rounded-lg">
+                <p className="text-sm text-error">{error}</p>
+              </div>
+            )}
+
+            <div className="flex gap-3 pt-2">
+              <Button variant="secondary" onClick={handleClose} disabled={loading} fullWidth>
+                Cancel
+              </Button>
+              <Button onClick={handleSubmit} loading={loading} fullWidth>
+                Authenticate
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+IFlowCookieModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onSuccess: PropTypes.func,
+  onClose: PropTypes.func,
+};

package/src/shared/components/Input.js

@@ -0,0 +1,65 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+
+export default function Input({
+  label,
+  type = "text",
+  placeholder,
+  value,
+  onChange,
+  error,
+  hint,
+  icon,
+  disabled = false,
+  required = false,
+  className,
+  inputClassName,
+  ...props
+}) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && (
+        <label className="text-sm font-medium text-text-main">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div className="relative">
+        {icon && (
+          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-text-muted">
+            <span className="material-symbols-outlined text-[20px]">{icon}</span>
+          </div>
+        )}
+        <input
+          type={type}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          className={cn(
+            "w-full py-2.5 px-3 text-sm text-text-main bg-surface-2 rounded-[10px]",
+            "border border-transparent placeholder-text-muted/70",
+            "focus:outline-none focus:ring-2 focus:ring-brand-500/30 focus:border-brand-500/40",
+            "transition-all duration-150 ease-out disabled:opacity-50 disabled:cursor-not-allowed",
+            // iOS zoom fix
+            "text-[16px] sm:text-sm",
+            icon && "pl-10",
+            error && "ring-1 ring-red-500 focus:ring-2 focus:ring-red-500/40 border-red-500/40",
+            inputClassName
+          )}
+          {...props}
+        />
+      </div>
+      {error && (
+        <p className="text-xs text-red-500 flex items-center gap-1">
+          <span className="material-symbols-outlined text-[14px]">error</span>
+          {error}
+        </p>
+      )}
+      {hint && !error && (
+        <p className="text-xs text-text-muted">{hint}</p>
+      )}
+    </div>
+  );
+}