coco-app-platform/app/run-agent-flow/components/Header.tsx

'use client'
import { BsCaretDownFill } from "react-icons/bs";
import { useSession, signIn, signOut } from "next-auth/react"
import { createRef, useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { trpc } from "@/lib/trpc";
import Cookies from 'js-cookie';
import { useAtomValue } from "jotai";
import { instantDataAtom, stepsNodesAtom } from "../store";
import { exportFlowToDocx } from "../export";
import { BsCloudDownload } from "react-icons/bs";


export default function Header() {
  const { data: session, status } = useSession()

  const [org, setOrg] = useState('')
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [isLogInFail, setIsLogInFail] = useState(false)

  const orgQuery = trpc.org.bySlug.useQuery({ mode: org })

  const logOut = async () => {
    const res = await fetch(" beta.api.cocorobo.cn/api/logout", {
      method: "GET",
      headers: {
        Origin: "https://edu.cocorobo.cn"
      },
    });
    await signOut({ redirect: false })
  }
  const logIn = async () => {
    const loginUsername = orgQuery.data?.mail ? `${username}@${orgQuery.data?.mail}` : `${username}@cocorobo.cc`
    const loginPassword = btoa(password)
    const res = await signIn('credentials', { redirect: false, loginUsername, loginPassword })
    console.log(res)
    if (!res.ok) {
      setIsLogInFail(true)
    }
  }

  // useEffect(() => {
  //   setIsLogInFail(false)
  // }, [username, password, org])


  /*
  用户登陆判断
*/
  useEffect(() => {
    const checkLoginStatus = async (intervalId) => {
      // 检查名为 'authToken' 的 cookie 是否存在
      const authToken = Cookies.get('cocorobo');
      console.log(authToken)
      const tf = authToken ? true : false;
      if (status !== 'authenticated') {//tf &&
        const cookie = await fetch("https://beta.api.cocorobo.cn/api/getcookieuserid", {
          method: "GET",
          credentials: 'include',
        });
        try {
          const cookiejson = await cookie.json();
          console.log(cookiejson);
          const user = cookiejson?.[0]?.[0];
          if (cookie.ok && user) {
            const res = await signIn('credentials', { redirect: false, userid: user.userid })
            setIsLogInFail(true);
            clearInterval(intervalId);
          }
        }
        catch (e) {
          setIsLogInFail(false)
        }
      }
      setIsLogInFail(authToken); // 如果存在 authToken，则用户已登录
    };
    const intervalId = setInterval(async () => {
      await checkLoginStatus(intervalId);
    }, 5000);
    return () => {
      clearInterval(intervalId)
    }
  }, []);

  const instantData = useAtomValue(instantDataAtom)
  const stepsNodes = useAtomValue(stepsNodesAtom)

  const onExport = () => {
    const stepsInstantData = stepsNodes.map(node => instantData[node.id])
    exportFlowToDocx(stepsInstantData)
  }

  return (
    <div className="navbar shrink-0 bg-base-100 shadow-xl rounded-box justify-center relative">
      {/* <div className="dropdown">
        <div tabIndex={0} role="button" className="btn btn-sm btn-wide btn-ghost">选择对话<BsCaretDownFill /></div>
        <ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-[2] w-52 p-2 shadow">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </div> */}
      <div className="absolute right-4 flex items-center">
        <button className='btn btn-neutral' onClick={onExport}><BsCloudDownload />导出</button>
        {status === 'authenticated'
          ? (
            <div className="absolute right-4 flex gap-2">
              <div>
                <p>Hi, {session.user?.name}</p>
              </div>
              <button className='btn btn-sm' onClick={logOut}>退出登录</button>
            </div>
          ) : (
            <>
              <dialog className="modal modal-close" onCancel={event => event.preventDefault()}>
                <div className="modal-box">
                  <iframe src="https://edu.cocorobo.cn/course/login?type=2"
                    style={{ border: "0px", width: "450px", height: "480px" }}></iframe>
                </div>
                <div className="modal-box" style={{ display: "none" }} >
                  <h3 className="font-bold text-lg" >您需要先登录</h3>
                  <div className="w-full flex flex-col items-center gap-2 py-2">
                    {isLogInFail && <div role="alert" className="alert alert-error">
                      <span>账号或密码错误</span>
                    </div>}
                    <label className="form-control w-full max-w-xs">
                      <div className="label">
                        <span className="label-text">组织(选填)</span>
                        {orgQuery?.data?.name && <span className="label-text-alt text-indigo-400">{orgQuery.data.name}</span>}
                      </div>
                      <input type="text" placeholder="" className="input input-bordered w-full max-w-xs" onChange={e => setOrg(e.target.value)} />
                    </label>
                    <label className="form-control w-full max-w-xs">
                      <div className="label">
                        <span className="label-text">用户名</span>
                      </div>
                      <input type="text" placeholder="" className="input input-bordered w-full max-w-xs" onChange={e => setUsername(e.target.value)} />
                    </label>
                    <label className="form-control w-full max-w-xs">
                      <div className="label">
                        <span className="label-text">密码</span>
                      </div>
                      <input type="password" placeholder="" className="input input-bordered w-full max-w-xs" onChange={e => setPassword(e.target.value)} />
                    </label>
                    <button className='btn btn-wide' disabled={!username || !password} onClick={logIn}>登录</button>
                  </div>
                </div>
              </dialog>
            </>
          )
        }
      </div>
    </div >
  )
}