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>
+ </>
+ )
})