feat: login and register page

web/src/app/login/page.tsx

@@ -1,59 +1,75 @@
 'use client';
-import { Button, Input, Form, Checkbox, Divider } from 'antd';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
 import {
-  GoogleOutlined,
-  LockOutlined,
-  UserOutlined,
-  QqOutlined,
-} from '@ant-design/icons';
-import styles from './login.module.css';
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { useEffect, useState } from 'react';
-
 import { httpClient } from '@/app/infra/http/HttpClient';
-import '@ant-design/v5-patch-for-react-19';
 import { useRouter } from 'next/navigation';
+import { Mail, Lock } from "lucide-react";
+import langbotIcon from '@/app/assets/langbot-logo.webp';
 
-export default function Home() {
+const formSchema = z.object({
+  email: z.string().email("请输入有效的邮箱地址"),
+  password: z.string().min(1, "请输入密码"),
+});
+
+export default function Login() {
   const router = useRouter();
-  const [form] = Form.useForm<LoginField>();
-  const [rememberMe, setRememberMe] = useState(false);
-  const [isRegisterMode, setIsRegisterMode] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
 
   useEffect(() => {
     getIsInitialized();
+    checkIfAlreadyLoggedIn();
   }, []);
 
-  // 检查是否为首次启动项目，只为首次启动的用户提供注册资格
   function getIsInitialized() {
     httpClient
       .checkIfInited()
       .then((res) => {
-        setIsInitialized(res.initialized);
+        if (!res.initialized) {
+          router.push('/register');
+        }
       })
       .catch((err) => {
         console.log('error at getIsInitialized: ', err);
       });
   }
 
-  function handleFormSubmit(formField: LoginField) {
-    if (isRegisterMode) {
-      handleRegister(formField.email, formField.password);
-    } else {
-      handleLogin(formField.email, formField.password);
-    }
-  }
-
-  function handleRegister(username: string, password: string) {
-    httpClient
-      .initUser(username, password)
+  function checkIfAlreadyLoggedIn() {
+    httpClient.checkUserToken()
       .then((res) => {
-        console.log('init user success: ', res);
+        if (res.token) {
+          localStorage.setItem('token', res.token);
+          router.push('/home');
+        }
       })
       .catch((err) => {
-        console.log('init user error: ', err);
+        console.log('error at checkIfAlreadyLoggedIn: ', err);
       });
   }
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    handleLogin(values.email, values.password);
+  }
 
   function handleLogin(username: string, password: string) {
     httpClient
@@ -69,136 +85,73 @@ export default function Home() {
   }
 
   return (
-    // 使用 Ant Design 的组件库，使用 antd 的样式
-    // 仅前端样式，无交互功能。
-
-    <div className={styles.container}>
-      {/* login 类是整个 container，使用 flex 左右布局 */}
-      <div className={styles.login}>
-        {/* left 为注册的表单，需要填入的内容有：邮箱，密码 */}
-        <div className={styles.left}>
-          <div className={styles.loginForm}>
-            {isRegisterMode && (
-              <h1 className={styles.title}>注册 LangBot 账号</h1>
-            )}
-            {!isRegisterMode && (
-              <h1 className={styles.title}>欢迎回到 LangBot</h1>
-            )}
-            <Form
-              form={form}
-              layout="vertical"
-              onFinish={(values) => {
-                handleFormSubmit(values);
-              }}
-            >
-              <Form.Item
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Card className="w-[360px]">
+        <CardHeader>
+          <img src={langbotIcon.src} alt="LangBot" className="w-16 h-16 mb-4 mx-auto" />
+          <CardTitle className="text-2xl text-center">
+            欢迎回到 LangBot 👋
+          </CardTitle>
+          <CardDescription className="text-center">
+            登录以继续
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <FormField
+                control={form.control}
                 name="email"
-                rules={[
-                  { required: true, message: '请输入邮箱!' },
-                  { type: 'email', message: '请输入有效的邮箱地址!' },
-                ]}
-              >
-                <Input
-                  placeholder="输入邮箱地址"
-                  size="large"
-                  prefix={<UserOutlined />}
-                />
-              </Form.Item>
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>邮箱</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                        <Input
+                          placeholder="输入邮箱地址"
+                          className="pl-10"
+                          {...field}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-              <Form.Item
+              <FormField
+                control={form.control}
                 name="password"
-                rules={[{ required: true, message: '请输入密码!' }]}
-              >
-                <Input.Password
-                  placeholder="输入密码"
-                  size="large"
-                  prefix={<LockOutlined />}
-                />
-              </Form.Item>
-
-              <div className={styles.rememberMe}>
-                <Checkbox
-                  checked={rememberMe}
-                  onChange={(e) => setRememberMe(e.target.checked)}
-                >
-                  30天内自动登录
-                </Checkbox>
-                <span>
-                  <a href="#" className={`${styles.forgetPassword}`}>
-                    忘记密码?
-                  </a>
-                  {!isRegisterMode && (
-                    <a
-                      href=""
-                      onClick={(event) => {
-                        setIsRegisterMode(true);
-                        event.preventDefault();
-                      }}
-                    >
-                      去注册？
-                    </a>
-                  )}
-                  {isRegisterMode && (
-                    <a
-                      href=""
-                      onClick={(event) => {
-                        setIsRegisterMode(false);
-                        event.preventDefault();
-                      }}
-                    >
-                      去登录
-                    </a>
-                  )}
-                </span>
-              </div>
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>密码</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                        <Input
+                          type="password"
+                          placeholder="输入密码"
+                          className="pl-10"
+                          {...field}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
               <Button
-                type="primary"
-                size="large"
-                className={styles.loginButton}
-                block
-                htmlType="submit"
-                disabled={isRegisterMode && isInitialized}
+                type="submit"
+                className="w-full mt-4 cursor-pointer"
               >
-                {isRegisterMode
-                  ? isInitialized
-                    ? '暂不提供注册'
-                    : '注册'
-                  : '登录'}
+                登录
               </Button>
-
-              <Divider className={styles.divider}>或</Divider>
-
-              <div className={styles.socialLogin}>
-                <Button
-                  className={styles.socialButton}
-                  icon={<GoogleOutlined />}
-                  size="large"
-                  disabled={true}
-                >
-                  使用谷歌账号登录
-                </Button>
-              </div>
-              <div style={{ height: '10px' }}></div>
-              <div className={styles.socialLogin}>
-                <Button
-                  className={styles.socialButton}
-                  icon={<QqOutlined />}
-                  size="large"
-                  disabled={true}
-                >
-                  使用QQ账号登录
-                </Button>
-              </div>
-            </Form>
-          </div>
-        </div>
-      </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
     </div>
   );
 }
-
-interface LoginField {
-  email: string;
-  password: string;
-}