161 lines
4.6 KiB
JavaScript
Executable File
161 lines
4.6 KiB
JavaScript
Executable File
/*!
|
|
|
|
=========================================================
|
|
* Argon Dashboard Chakra PRO - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
|
|
* Designed and Coded by Simmmple & Creative Tim
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
|
|
*/
|
|
|
|
// Chakra imports
|
|
import React, { useState } from "react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
FormControl,
|
|
FormLabel,
|
|
Heading,
|
|
Input,
|
|
Stack,
|
|
useColorModeValue,
|
|
Text,
|
|
Link,
|
|
InputGroup,
|
|
InputRightElement,
|
|
IconButton,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useAuth } from "../../../contexts/AuthContext";
|
|
|
|
export default function SignInBasic() {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
email: "",
|
|
password: "",
|
|
});
|
|
|
|
const navigate = useNavigate();
|
|
const toast = useToast();
|
|
const { login, isLoading } = useAuth();
|
|
|
|
const handleInputChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.email || !formData.password) {
|
|
toast({
|
|
title: "请填写完整信息",
|
|
description: "邮箱和密码都是必填项",
|
|
status: "warning",
|
|
duration: 3000,
|
|
isClosable: true,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const result = await login(formData.email, formData.password, 'email');
|
|
|
|
if (result.success) {
|
|
// 登录成功，跳转到首页
|
|
navigate("/home");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Flex minH="100vh" align="center" justify="center" bg={useColorModeValue("gray.50", "gray.900")}>
|
|
<Stack spacing={8} mx="auto" maxW="lg" py={12} px={6}>
|
|
<Stack align="center">
|
|
<Heading style={{minWidth: '140px'}} fontSize="4xl" color="blue.600">
|
|
价小前投研
|
|
</Heading>
|
|
<Text fontSize="lg" color="gray.600">
|
|
登录您的账户
|
|
</Text>
|
|
</Stack>
|
|
<Box
|
|
rounded="lg"
|
|
bg={useColorModeValue("white", "gray.700")}
|
|
boxShadow="lg"
|
|
p={8}
|
|
>
|
|
<form onSubmit={handleSubmit}>
|
|
<Stack spacing={4}>
|
|
<FormControl id="email" isRequired>
|
|
<FormLabel>邮箱地址</FormLabel>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder="请输入您的邮箱"
|
|
/>
|
|
</FormControl>
|
|
<FormControl id="password" isRequired>
|
|
<FormLabel>密码</FormLabel>
|
|
<InputGroup>
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
name="password"
|
|
value={formData.password}
|
|
onChange={handleInputChange}
|
|
placeholder="请输入您的密码"
|
|
/>
|
|
<InputRightElement>
|
|
<IconButton
|
|
aria-label={showPassword ? "隐藏密码" : "显示密码"}
|
|
icon={showPassword ? <ViewOffIcon /> : <ViewIcon />}
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
variant="ghost"
|
|
size="sm"
|
|
/>
|
|
</InputRightElement>
|
|
</InputGroup>
|
|
</FormControl>
|
|
<Stack spacing={10}>
|
|
<Button
|
|
type="submit"
|
|
bg="blue.600"
|
|
color="white"
|
|
_hover={{
|
|
bg: "blue.700",
|
|
}}
|
|
isLoading={isLoading}
|
|
loadingText="登录中..."
|
|
>
|
|
登录
|
|
</Button>
|
|
</Stack>
|
|
<Stack pt={6}>
|
|
<Text align="center">
|
|
还没有账户?{" "}
|
|
<Link color="blue.600" onClick={() => navigate("/auth/signup")}>
|
|
立即注册
|
|
</Link>
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</form>
|
|
</Box>
|
|
</Stack>
|
|
</Flex>
|
|
);
|
|
}
|