refactor: 登录输入验证

web/package.json

@@ -23,7 +23,8 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "socket.io-client": "^4.1.2",
-    "tailwindcss": "^2.2.4"
+    "tailwindcss": "^2.2.4",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@types/mini-css-extract-plugin": "^1.4.3",

web/src/routes/Entry/LoginView.tsx

@@ -3,6 +3,7 @@ import { Divider } from 'antd';
 import { useAsyncFn } from 'pawchat-shared';
 import React, { useState } from 'react';
 import { Spinner } from '../../components/Spinner';
+import { string } from 'yup';
 
 /**
  * 第三方登录
@@ -25,17 +26,28 @@ OAuthLoginView.displayName = 'OAuthLoginView';
  * 登录视图
  */
 export const LoginView: React.FC = React.memo(() => {
-  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
-  const [{ value, loading }, handleLogin] = useAsyncFn(async () => {
+  const [{ loading, error }, handleLogin] = useAsyncFn(async () => {
+    console.log({ email, password });
+
+    await string()
+      .email('邮箱格式不正确')
+      .required('邮箱不能为空')
+      .validate(email);
+
+    await string()
+      .min(6, '密码不能低于6位')
+      .required('密码不能为空')
+      .validate(password);
+
     await new Promise((resolve) => {
       setTimeout(() => {
         resolve('');
       }, 2000);
     });
-    console.log({ username, password });
+  }, [email, password]);
-  }, [username, password]);
 
   return (
     <div className="w-96 text-white">
@@ -49,11 +61,11 @@ export const LoginView: React.FC = React.memo(() => {
             className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
             placeholder="name@example.com"
             type="text"
-            value={username}
+            value={email}
-            onChange={(e) => setUsername(e.target.value)}
+            onChange={(e) => setEmail(e.target.value)}
           />
         </div>
-        <div className="mb-8">
+        <div className="mb-4">
           <div className="mb-2">密码</div>
           <input
             id="password"
@@ -65,8 +77,11 @@ export const LoginView: React.FC = React.memo(() => {
           />
         </div>
 
+        {error && <p className="text-red-500 text-sm mb-4">{error.message}</p>}
+
         <button
-          className="group relative w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          className="group relative w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+          disabled={loading}
           onClick={handleLogin}
         >
           {loading && <Spinner />}

web/tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
   },
   variants: {
     extend: {
+      opacity: ['disabled'],
       borderRadius: ['hover'],
     },
   },