From 8e4d241014bed6036fbbc0b6a0f0d78d8fe50fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E4=BA=9A=E6=98=95?= <1549469775@qq.com>
Date: Mon, 25 Nov 2024 16:03:24 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=A2=9E=E5=8A=A0=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts             |  2 +-
 src/layout/base.tsx          |  8 ++++++
 src/ui/Login/Login.tsx       | 26 +++++++++++++++++++
 src/ui/Register/Register.tsx | 12 +++++----
 src/views/Home/index.tsx     | 62 ++++++++++++--------------------------------
 5 files changed, 59 insertions(+), 51 deletions(-)
 create mode 100644 src/ui/Login/Login.tsx

diff --git a/src/api/index.ts b/src/api/index.ts
index a768f2a..5693482 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -4,7 +4,7 @@ const client = new Client()
 
 client.setProject(import.meta.env.VUE_APPWRITE_PROJECT_ID)
 
-export async function register(opts: { email: string; password: string }, errText: string) {
+export async function apiRegister(opts: { email: string; password: string }, errText: string) {
     const account = new Account(client)
     try {
         await account.create(ID.unique(), opts.email, opts.password)
diff --git a/src/layout/base.tsx b/src/layout/base.tsx
index d9e0e88..0cb898d 100644
--- a/src/layout/base.tsx
+++ b/src/layout/base.tsx
@@ -6,6 +6,7 @@ import { GlobalStyles } from "./GlobalStyles"
 import { Notice } from "@/ui/Notice"
 import { Markdown } from "@/ui/Markdown"
 import { Register } from "@/ui/Register/Register"
+import { Login } from "@/ui/Login/Login"
 
 interface PageProps {
     children: ReactNode
@@ -28,6 +29,7 @@ function BaseLayout(props: PageProps) {
     const [isOpen, setIsOpen] = useState(false)
     const [isOpenAbout, setIsOpenAbout] = useState(false)
     const [isOpenRegister, setIsOpenRegister] = useState(false)
+    const [isOpenLogin, setIsOpenLogin] = useState(false)
 
     const router = useHistory()
 
@@ -79,6 +81,7 @@ function BaseLayout(props: PageProps) {
                     <Notice />
                 </Navbar.Group>
                 <Navbar.Group align={Alignment.RIGHT}>
+                    <Button icon="person" className="bp5-minimal" text="登录" onClick={() => setIsOpenLogin(true)} />
                     <Button icon="person" className="bp5-minimal" text="注册" onClick={() => setIsOpenRegister(true)} />
                     <Navbar.Divider />
                     {/* <NavLink to={"/about"}> */}
@@ -111,6 +114,11 @@ function BaseLayout(props: PageProps) {
                     }}
                 </Register>
             </Dialog>
+            <Dialog isOpen={isOpenLogin} title="注册" icon="info-sign" onClose={() => setIsOpenLogin(false)}>
+                <div style={{padding: "20px"}}>
+                    <Login></Login>
+                </div>
+            </Dialog>
         </PageWrapper>
     )
 }
diff --git a/src/ui/Login/Login.tsx b/src/ui/Login/Login.tsx
new file mode 100644
index 0000000..7e682dc
--- /dev/null
+++ b/src/ui/Login/Login.tsx
@@ -0,0 +1,26 @@
+
+import { SubmitHandler, useForm } from "react-hook-form";
+
+interface IProps {
+
+}
+
+type Inputs = {
+    email: string,
+};
+
+
+export function Login(props: IProps) {
+    const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
+    const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
+
+    console.log(watch("email"));
+    
+    return <>
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <input {...register("email", { required: true })} />
+            {errors.email && <span>This field is required</span>}
+            <input type="submit" />
+        </form>
+    </>
+}
\ No newline at end of file
diff --git a/src/ui/Register/Register.tsx b/src/ui/Register/Register.tsx
index 682e0c1..ec9db3b 100644
--- a/src/ui/Register/Register.tsx
+++ b/src/ui/Register/Register.tsx
@@ -1,8 +1,9 @@
 // import { Tag } from "@blueprintjs/core";
 
-import { register } from "@/api"
+import { apiRegister } from "@/api"
 import { Button, FormGroup, InputGroup, Intent, Tooltip } from "@blueprintjs/core"
-import { FC, ReactNode, useCallback, useEffect, useRef, useState } from "react"
+import { FC, FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from "react"
+import { useForm } from "react-hook-form"
 import { toast } from "react-toastify"
 
 interface IProps {
@@ -20,7 +21,8 @@ export function Register({ onSuccess, children }: IProps) {
     const [password, setPassword] = useState("")
     const [repeatPassword, setRepeatPassword] = useState("")
 
-    const clickRegister = useCallback(async () => {
+    const clickRegister = useCallback(async (e: FormEvent) => {
+        e.preventDefault()
         if (isLoading) {
             toast.info("正在请求中")
             return
@@ -31,7 +33,7 @@ export function Register({ onSuccess, children }: IProps) {
         if (repeatPassword !== password) return toast.error("两次输入的密码不一致")
         setIsLoading(true)
         try {
-            await toast.promise(register({ email, password }, "注册失败"), {
+            await toast.promise(apiRegister({ email, password }, "注册失败"), {
                 pending: '注册中',
                 success: '注册成功',
                 error: '注册失败'
@@ -61,7 +63,7 @@ export function Register({ onSuccess, children }: IProps) {
 
     return (
         <>
-            <form onSubmit={() => false} onSubmitCapture={clickRegister}>
+            <form onSubmitCapture={clickRegister}>
                 <WrapperComp>
                     <FormGroup helperText="请输入一个可用的邮箱" label="邮箱" labelFor="text-input" labelInfo="(必须)">
                         <InputGroup
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index 0c1cc1f..6a0b248 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -2,59 +2,31 @@ import withPage from "@/base/withPage"
 import { Hero } from "@/ui/Hero"
 import { Button } from "@blueprintjs/core"
 import { ReactNode, useCallback } from "react"
-import { Fly } from "@/plugins/request"
+// import { Fly } from "@/plugins/request"
 import { toast } from "react-toastify"
-import { useForm, SubmitHandler } from "react-hook-form";
 
 interface IProps {
     children: ReactNode
 }
 
-type Inputs = {
-    example: string,
-    exampleRequired: string,
-};
-
-// export default withPage(function Project({ }: IProps) {
-
-//     const onClick = useCallback(() => {
-//         toast.success("Wow so easy !")
-//         // Fly.invoke().request<{a: number}>({
-//         //     method: "get",
-//         //     url: "http://api.juheapi.com/japi/toh",
-//         //     global: false
-//         // }).then((res) => console.log(res.data)).catch(console.log)
-//     }, [])
-
-//     return (
-//         <>
-//             <Hero></Hero>
-
-//             <div className="container">
-//                 <Button onClick={onClick}>请求</Button>
-//             </div>
-//         </>
-//     )
-// })
-
 export default withPage(function Project({ }: IProps) {
-    const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
-    const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
 
-    console.log(watch("example")) // watch input value by passing the name of it
+    const onClick = useCallback(() => {
+        toast.success("Wow so easy !")
+        // Fly.invoke().request<{a: number}>({
+        //     method: "get",
+        //     url: "http://api.juheapi.com/japi/toh",
+        //     global: false
+        // }).then((res) => console.log(res.data)).catch(console.log)
+    }, [])
 
     return (
-        /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
-        <form onSubmit={handleSubmit(onSubmit)}>
-            {/* register your input into the hook by invoking the "register" function */}
-            <input defaultValue="test" {...register("example")} />
-
-            {/* include validation with required or other standard HTML validation rules */}
-            <input {...register("exampleRequired", { required: true })} />
-            {/* errors will return when field validation fails  */}
-            {errors.exampleRequired && <span>This field is required</span>}
-
-            <input type="submit" />
-        </form>
-    );
+        <>
+            <Hero></Hero>
+
+            <div className="container">
+                <Button onClick={onClick}>请求</Button>
+            </div>
+        </>
+    )
 })