feat: login view

src/client/hooks/useEvent.ts

@@ -0,0 +1,35 @@
+import { useMemo, useRef } from 'react';
+
+// From https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useMemoizedFn/index.ts
+
+type Noop = (this: any, ...args: any[]) => any;
+
+type PickFunction<T extends Noop> = (
+  this: ThisParameterType<T>,
+  ...args: Parameters<T>
+) => ReturnType<T>;
+
+export function useEvent<T extends Noop>(fn: T) {
+  if (process.env.NODE_ENV === 'development') {
+    if (typeof fn !== 'function') {
+      console.error(
+        `useMemoizedFn expected parameter is a function, got ${typeof fn}`
+      );
+    }
+  }
+
+  const fnRef = useRef<T>(fn);
+
+  // why not write `fnRef.current = fn`?
+  // https://github.com/alibaba/hooks/issues/728
+  fnRef.current = useMemo(() => fn, [fn]);
+
+  const memoizedFn = useRef<PickFunction<T>>();
+  if (!memoizedFn.current) {
+    memoizedFn.current = function (this, ...args) {
+      return fnRef.current.apply(this, args);
+    };
+  }
+
+  return memoizedFn.current as T;
+}

src/client/pages/Login.tsx

@@ -1,6 +1,43 @@
+import { Button, Form, Input, Typography } from 'antd';
 import React from 'react';
+import { useEvent } from '../hooks/useEvent';
+import axios from 'axios';
 
 export const Login: React.FC = React.memo(() => {
-  return <div>Login</div>;
+  const handleLogin = useEvent(async (values: any) => {
+    await axios.post('/api/user/login', {
+      username: values.username,
+      password: values.password,
+    });
+  });
+
+  return (
+    <div className="w-full h-full flex justify-center items-center">
+      <div className="w-80 -translate-y-1/4">
+        <Typography.Title level={2}>Tianji</Typography.Title>
+        <Form layout="vertical" onFinish={handleLogin}>
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[{ required: true }]}
+          >
+            <Input size="large" />
+          </Form.Item>
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[{ required: true }]}
+          >
+            <Input size="large" />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" size="large" htmlType="submit" block={true}>
+              Login
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
 });
 Login.displayName = 'Login';