Bläddra i källkod

add LoginForm

visuddhinanda 1 månad sedan
förälder
incheckning
a1ac52f9c9
1 ändrade filer med 93 tillägg och 4 borttagningar
  1. 93 4
      dashboard-v6/src/pages/users/sign-in.tsx

+ 93 - 4
dashboard-v6/src/pages/users/sign-in.tsx

@@ -1,6 +1,95 @@
-const Widget = () => {
-  // TODO
-  return <>user sign-in</>;
+import React, { useState } from "react";
+import { LoginForm, ProFormText } from "@ant-design/pro-components";
+import { message } from "antd";
+import { UserOutlined, LockOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+
+interface loginRequest {
+  username: string;
+  password: string;
+}
+const fakeLogin = async (values: loginRequest) => {
+  return new Promise<boolean>((resolve) => {
+    setTimeout(() => {
+      if (values.username === "admin" && values.password === "123456") {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
+    }, 1200);
+  });
+};
+
+const Login: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const handleSubmit = async (values: loginRequest) => {
+    setLoading(true);
+    const ok = await fakeLogin(values);
+    setLoading(false);
+
+    if (ok) {
+      message.success("登录成功");
+      navigate("/dashboard");
+    } else {
+      message.error("用户名或密码错误");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background:
+          "linear-gradient(135deg,#f0f5ff 0%, #ffffff 50%, #f0f5ff 100%)",
+      }}
+    >
+      <LoginForm
+        title="登陆"
+        subTitle="wikipali 巴利语文献编辑平台"
+        onFinish={handleSubmit}
+        submitter={{
+          searchConfig: {
+            submitText: "登录",
+          },
+          submitButtonProps: {
+            loading,
+            style: { width: "100%" },
+          },
+        }}
+        style={{
+          width: 320,
+          borderRadius: 12,
+          boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
+          background: "#fff",
+          padding: 24,
+        }}
+      >
+        <ProFormText
+          name="username"
+          fieldProps={{
+            size: "large",
+            prefix: <UserOutlined />,
+          }}
+          placeholder="用户名/邮箱"
+          rules={[{ required: true, message: "请输入用户名/邮箱" }]}
+        />
+
+        <ProFormText.Password
+          name="password"
+          fieldProps={{
+            size: "large",
+            prefix: <LockOutlined />,
+          }}
+          placeholder="密码"
+          rules={[{ required: true, message: "请输入密码" }]}
+        />
+      </LoginForm>
+    </div>
+  );
 };
 
-export default Widget;
+export default Login;