FlowStack/frontend/src/pages/Login.tsx

import { useState } from 'react';
import { Rocket, Loader2, KeyRound, User } from 'lucide-react';
import { toast } from 'sonner';
import { apiClient, auth } from '@/lib/api';

const REMEMBER_KEY = 'flowstack-remember';

// 记住密码：明文存 localStorage 仅适合内网工具场景；不勾选则彻底不落盘
function readRemember(): { username: string; password: string } | null {
  try {
    const raw = localStorage.getItem(REMEMBER_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (parsed?.username && parsed?.password) return parsed;
  } catch {
    // 脏数据忽略
  }
  return null;
}

export default function Login({ onSuccess }: { onSuccess: () => void }) {
  const remembered = readRemember();
  const [username, setUsername] = useState(remembered?.username ?? '');
  const [password, setPassword] = useState(remembered?.password ?? '');
  const [remember, setRemember] = useState(!!remembered);
  const [loading, setLoading] = useState(false);

  const submit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!username.trim() || !password) {
      toast.error('请输入用户名和密码');
      return;
    }
    setLoading(true);
    try {
      const res = await apiClient.login(username.trim(), password);
      auth.setToken(res.token);
      if (remember) {
        localStorage.setItem(REMEMBER_KEY, JSON.stringify({ username: username.trim(), password }));
      } else {
        localStorage.removeItem(REMEMBER_KEY);
      }
      toast.success(`欢迎，${res.nickname || res.username}`);
      onSuccess();
    } catch (err) {
      toast.error('登录失败', { description: (err as Error).message });
    } finally {
      setLoading(false);
    }
  };

  const inputStyle = { background: 'var(--panel-bg-secondary)', borderColor: 'var(--border-color-light)', color: 'var(--text-primary)' };

  return (
    <div className="h-screen w-screen flex items-center justify-center" style={{ background: 'var(--canvas-bg)' }}>
      <div className="w-[380px] rounded-xl border shadow-lg p-8" style={{ background: 'var(--panel-bg)', borderColor: 'var(--border-color)' }}>
        <div className="flex flex-col items-center mb-6">
          <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-3" style={{ background: 'linear-gradient(135deg, #0969da, #8250df)' }}>
            <Rocket className="w-6 h-6 text-white" />
          </div>
          <h1 className="text-[18px] font-bold" style={{ color: 'var(--text-primary)' }}>FlowStack</h1>
          <p className="text-[12px] mt-1" style={{ color: 'var(--text-tertiary)' }}>发布系统 · 请登录</p>
        </div>

        <form onSubmit={submit} className="space-y-4">
          <div className="space-y-1.5">
            <label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>用户名</label>
            <div className="relative">
              <User className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--text-tertiary)' }} />
              <input
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                autoFocus
                className="w-full pl-9 pr-3 py-2 text-[13px] rounded-md border outline-none"
                style={inputStyle}
                placeholder="admin"
              />
            </div>
          </div>
          <div className="space-y-1.5">
            <label className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>密码</label>
            <div className="relative">
              <KeyRound className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--text-tertiary)' }} />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full pl-9 pr-3 py-2 text-[13px] rounded-md border outline-none"
                style={inputStyle}
                placeholder="初始密码见 data/initial-admin-password.txt"
              />
            </div>
          </div>
          <label className="flex items-center gap-1.5 cursor-pointer select-none" title="在本机记住账号与密码，公共电脑请勿勾选">
            <input
              type="checkbox"
              checked={remember}
              onChange={(e) => setRemember(e.target.checked)}
              className="w-3.5 h-3.5 accent-[var(--accent-blue)]"
            />
            <span className="text-[12px]" style={{ color: 'var(--text-secondary)' }}>记住密码</span>
          </label>
          <button
            type="submit"
            disabled={loading}
            className="w-full py-2.5 text-[13px] font-medium rounded-md text-white disabled:opacity-60 flex items-center justify-center gap-2"
            style={{ background: 'var(--accent-blue)' }}
          >
            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
            登 录
          </button>
        </form>
        <p className="text-[11px] text-center mt-4" style={{ color: 'var(--text-tertiary)' }}>
          支持本地账号与 LDAP 账号（启用后自动识别）
        </p>
      </div>
    </div>
  );
}