51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useActionState } from 'react'
|
|
import Logo from './Logo'
|
|
import { login } from '../_lib/actions/auth'
|
|
|
|
export default function SignupForm() {
|
|
const [state, action, pending] = useActionState(login, undefined)
|
|
|
|
return (
|
|
<div className='p-3 shadow-md rounded-lg '>
|
|
<div className='w-full flex justify-center items-center ' onClick={e => e.stopPropagation()}>
|
|
<div className='w-[200px]'>
|
|
<Logo></Logo>
|
|
|
|
</div>
|
|
<span className='text-[30px] font-bold text-[#143B52]'>后台管理平台</span>
|
|
</div>
|
|
<form action={action} className='p-2 flex flex-col gap-3 items-center '>
|
|
<div className='flex '>
|
|
<label htmlFor="account" className='w-[50px]'>账号</label>
|
|
<input id="account" name="account" className='rounded py-1 pl-2 outline-none border-slate-200 border-[1px] ' />
|
|
</div>
|
|
<div className='w-full pl-10 text-red-500 text-[13px]'>
|
|
|
|
{state?.errors?.account && <p>{state.errors.account}</p>}
|
|
</div>
|
|
|
|
<div className='flex'>
|
|
<label htmlFor="password" className='w-[50px]'>密码</label>
|
|
<input id="password" name="password" type="password" className='rounded py-1 pl-2 outline-none border-slate-200 border-[1px] ' />
|
|
</div>
|
|
<div className='w-full pl-10 text-red-500'>
|
|
|
|
|
|
{state?.errors?.password && <p>{state.errors.password}</p>}
|
|
</div>
|
|
<div>
|
|
<button disabled={pending} type="submit" className='rounded-md mt-2 bg-blue-400 text-white w-[150px] hover:opacity-90 shadow-sm py-2 text-[14px]'>
|
|
登录
|
|
</button>
|
|
</div>
|
|
|
|
<div className='w-full pl-5 text-red-500 flex justify-center'>
|
|
{state?.message && <p>{state.message}</p>}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
)
|
|
} |