127 lines
4.1 KiB
TypeScript
127 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { signup } from "@/lib/actions/auth";
|
||
import Link from "next/link";
|
||
import { useFormState, useFormStatus } from "react-dom";
|
||
import signupSvg from "@/app/signup/signup.svg";
|
||
import Image from "next/image";
|
||
|
||
export default function Page() {
|
||
const [errorMessage, dispatch] = useFormState(signup, undefined);
|
||
|
||
return (
|
||
<section className="text-gray-600 body-font">
|
||
<div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
|
||
<div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
|
||
<Image
|
||
width={600}
|
||
className="object-cover object-center rounded"
|
||
alt="signup"
|
||
src={signupSvg}
|
||
/>
|
||
</div>
|
||
<form
|
||
action={dispatch}
|
||
className="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 shadow-xl"
|
||
>
|
||
<h2 className="text-gray-900 text-lg font-medium title-font mb-5">
|
||
注册
|
||
</h2>
|
||
<div className="relative mb-4">
|
||
<label
|
||
htmlFor="username"
|
||
className="leading-7 text-sm text-gray-600"
|
||
>
|
||
账号
|
||
</label>
|
||
<input
|
||
id="username"
|
||
className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||
type="text"
|
||
required
|
||
name="username"
|
||
/>
|
||
</div>
|
||
<div className="relative mb-4">
|
||
<label
|
||
htmlFor="password"
|
||
className="leading-7 text-sm text-gray-600"
|
||
>
|
||
密码
|
||
</label>
|
||
<input
|
||
id="password"
|
||
className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||
required
|
||
type="password"
|
||
name="password"
|
||
/>
|
||
</div>
|
||
<div className="relative mb-4">
|
||
<label
|
||
htmlFor="confirm_password"
|
||
className="leading-7 text-sm text-gray-600"
|
||
>
|
||
确认密码
|
||
</label>
|
||
<input
|
||
id="confirm_password"
|
||
className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
|
||
required
|
||
type="password"
|
||
name="confirm_password"
|
||
/>
|
||
</div>
|
||
<SignupButton className="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" />
|
||
<Link href="/signin" className="btn btn-link">
|
||
已经有账号？点此直接登录。
|
||
</Link>
|
||
{errorMessage ? (
|
||
<p className="text-xs text-red-400 mt-3">{errorMessage}</p>
|
||
) : null}
|
||
</form>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// export default function Page() {
|
||
// const [errorMessage, dispatch] = useFormState(signup, undefined);
|
||
|
||
// return (
|
||
// <form action={dispatch}>
|
||
// <input name="username" required />
|
||
// <input type="password" name="password" placeholder="密码" required />
|
||
// <input
|
||
// type="password"
|
||
// name="confirm_password"
|
||
// placeholder="确认密码"
|
||
// required
|
||
// />
|
||
// <div>{errorMessage && <p>{errorMessage}</p>}</div>
|
||
// <LoginButton />
|
||
// </form>
|
||
// );
|
||
// }
|
||
|
||
function SignupButton({ className }: { className: string | undefined }) {
|
||
const { pending } = useFormStatus();
|
||
|
||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||
if (pending) {
|
||
event.preventDefault();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<button
|
||
className={className}
|
||
aria-disabled={pending}
|
||
type="submit"
|
||
onClick={handleClick}
|
||
>
|
||
注册
|
||
</button>
|
||
);
|
||
}
|