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";

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 () => {
    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])

  return (
    <div className="navbar bg-base-100 shadow-xl rounded-box justify-center min-h-4 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-[1] w-52 p-2 shadow">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </div>
      {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-open" onCancel={event => event.preventDefault()}>
              <div className="modal-box">
                <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>
  )
}