File size: 4,296 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | "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,
};
|