65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
import React from "react";
|
||
import { Button, Form, Schema } from "rsuite";
|
||
import Header from "./header";
|
||
|
||
const loginModel = Schema.Model({
|
||
email: Schema.Types.StringType().isEmail("请输入正确的格式"),
|
||
password: Schema.Types.StringType()
|
||
.rangeLength(6, 20, "密码长度为6-20位")
|
||
.isRequired("密码不能为空"),
|
||
});
|
||
|
||
function Login() {
|
||
const formRef = React.useRef();
|
||
const [formValue, setFormValue] = React.useState({});
|
||
|
||
let login = () => {
|
||
console.log(formValue);
|
||
if (formRef.current.check()) {
|
||
console.log("验证通过");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={"grid place-items-center pt-10 w-screen"}>
|
||
<div className={"w-10/12"}>
|
||
<Header title={"登录账号"} />
|
||
<div className={"flex flex-col gap-5"}>
|
||
<Form
|
||
fluid
|
||
model={loginModel}
|
||
checkTrigger="none"
|
||
onChange={setFormValue}
|
||
ref={formRef}
|
||
>
|
||
<Form.Group controlId="email">
|
||
<Form.Control placeholder={"请输入电子邮箱"} name="email" />
|
||
</Form.Group>
|
||
<Form.Group controlId="password">
|
||
<Form.Control
|
||
placeholder={"请输入密码"}
|
||
name="password"
|
||
type="password"
|
||
/>
|
||
</Form.Group>
|
||
</Form>
|
||
<a className={"cursor-pointer w-fit select-none"}>忘记密码</a>
|
||
<Button appearance={"primary"} onClick={login}>
|
||
登录
|
||
</Button>
|
||
<div className={"text-center"}>
|
||
<a
|
||
href={"/register"}
|
||
className={"cursor-pointer w-fit select-none"}
|
||
>
|
||
还没有fileset.io账号？
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Login;
|