Initial commit

src/views/Authentication/SignIn/SignInBasic.js

@@ -0,0 +1,160 @@
+/*!
+
+=========================================================
+* 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 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>
+  );
+}