feat: prevent the user from entering the knowledge base if he is not logged in (#45)

web/src/pages/login/index.tsx

@@ -1,19 +1,18 @@
-import { connect, Icon, Dispatch } from 'umi';
-import { Input, Form, Button, Checkbox } from 'antd';
+import { rsaPsw } from '@/utils';
+import { Button, Checkbox, Form, Input } from 'antd';
+import { FC, useEffect, useState } from 'react';
+import { Dispatch, Icon, connect, useNavigate } from 'umi';
 import styles from './index.less';
-import { rsaPsw } from '@/utils'
-import { useState, useEffect, FC } from 'react';
 
 interface LoginProps {
   dispatch: Dispatch;
 }
-const View: FC<LoginProps> = ({
-  dispatch,
-}) => {
-  const [title, setTitle] = useState('login')
+const View: FC<LoginProps> = ({ dispatch }) => {
+  let navigate = useNavigate();
+  const [title, setTitle] = useState('login');
   const changeTitle = () => {
-    setTitle((title) => title === 'login' ? 'register' : 'login')
-  }
+    setTitle((title) => (title === 'login' ? 'register' : 'login'));
+  };
   const [form] = Form.useForm();
   const [checkNick, setCheckNick] = useState(false);
 
@@ -25,15 +24,17 @@ const View: FC<LoginProps> = ({
     try {
       const params = await form.validateFields();
 
-      var rsaPassWord = rsaPsw(params.password)
+      var rsaPassWord = rsaPsw(params.password);
       if (title === 'login') {
-        dispatch({
+        const ret = await dispatch({
           type: 'loginModel/login',
           payload: {
             email: params.email,
-            password: rsaPassWord
-          }
+            password: rsaPassWord,
+          },
         });
+        console.info(ret);
+        navigate('/knowledge');
       } else {
         dispatch({
           type: 'loginModel/register',
@@ -43,8 +44,8 @@ const View: FC<LoginProps> = ({
             password: rsaPassWord,
           },
           callback() {
-            setTitle('login')
-          }
+            setTitle('login');
+          },
         });
       }
     } catch (errorInfo) {
@@ -56,103 +57,124 @@ const View: FC<LoginProps> = ({
     // wrapperCol: { span: 8 },
   };
 
-
   const toGoogle = () => {
-    window.location.href = "https://github.com/login/oauth/authorize?scope=user:email&client_id=302129228f0d96055bee"
-  }
+    window.location.href =
+      'https://github.com/login/oauth/authorize?scope=user:email&client_id=302129228f0d96055bee';
+  };
   return (
     <div className={styles.loginPage}>
-
       <div className={styles.loginLeft}>
         <div className={styles.modal}>
           <div className={styles.loginTitle}>
-            <div>
-              {title === 'login' ? 'Sign in' : 'Create an account'}
-            </div>
-            <span >
-              {title === 'login' ? 'We’re so excited to see you again!' : 'Glad to have you on board!'}
+            <div>{title === 'login' ? 'Sign in' : 'Create an account'}</div>
+            <span>
+              {title === 'login'
+                ? 'We’re so excited to see you again!'
+                : 'Glad to have you on board!'}
             </span>
           </div>
 
-          <Form form={form} layout="vertical" name="dynamic_rule" style={{ maxWidth: 600 }}>
+          <Form
+            form={form}
+            layout="vertical"
+            name="dynamic_rule"
+            style={{ maxWidth: 600 }}
+          >
             <Form.Item
               {...formItemLayout}
               name="email"
               label="Email"
               rules={[{ required: true, message: 'Please input value' }]}
             >
-              <Input size='large' placeholder="Please input value" />
+              <Input size="large" placeholder="Please input value" />
             </Form.Item>
-            {
-              title === 'register' && <Form.Item
+            {title === 'register' && (
+              <Form.Item
                 {...formItemLayout}
                 name="nickname"
                 label="Nickname"
-                rules={[{ required: true, message: 'Please input your nickname' }]}
+                rules={[
+                  { required: true, message: 'Please input your nickname' },
+                ]}
               >
-                <Input size='large' placeholder="Please input your nickname" />
+                <Input size="large" placeholder="Please input your nickname" />
               </Form.Item>
-            }
+            )}
             <Form.Item
               {...formItemLayout}
               name="password"
               label="Password"
               rules={[{ required: true, message: 'Please input value' }]}
             >
-              <Input size='large' placeholder="Please input value" />
+              <Input size="large" placeholder="Please input value" />
             </Form.Item>
-            {
-              title === 'login' && <Form.Item
-                name="remember"
-                valuePropName="checked"
-
-              >
+            {title === 'login' && (
+              <Form.Item name="remember" valuePropName="checked">
                 <Checkbox> Remember me</Checkbox>
               </Form.Item>
-            }
-            <div>   {
-              title === 'login' && (<div>
-                Don’t have an account?
-                <Button type="link" onClick={changeTitle}>
-                  Sign up
-                </Button>
-              </div>)
-            }
-              {
-                title === 'register' && (<div>
+            )}
+            <div>
+              {' '}
+              {title === 'login' && (
+                <div>
+                  Don’t have an account?
+                  <Button type="link" onClick={changeTitle}>
+                    Sign up
+                  </Button>
+                </div>
+              )}
+              {title === 'register' && (
+                <div>
                   Already have an account?
                   <Button type="link" onClick={changeTitle}>
                     Sign in
                   </Button>
-                </div>)
-              }
+                </div>
+              )}
             </div>
-            <Button type="primary" block size='large' onClick={onCheck}>
+            <Button type="primary" block size="large" onClick={onCheck}>
               {title === 'login' ? 'Sign in' : 'Continue'}
             </Button>
-            {
-              title === 'login' && (<><Button block size='large' onClick={toGoogle} style={{ marginTop: 15 }}>
-                <div >
-                  <Icon icon="local:google" style={{ verticalAlign: 'middle', marginRight: 5 }} />
-                  Sign in with Google
-                </div>
-              </Button>
-                <Button block size='large' onClick={toGoogle} style={{ marginTop: 15 }}>
-                  <div >
-                    <Icon icon="local:github" style={{ verticalAlign: 'middle', marginRight: 5 }} />
+            {title === 'login' && (
+              <>
+                <Button
+                  block
+                  size="large"
+                  onClick={toGoogle}
+                  style={{ marginTop: 15 }}
+                >
+                  <div>
+                    <Icon
+                      icon="local:google"
+                      style={{ verticalAlign: 'middle', marginRight: 5 }}
+                    />
+                    Sign in with Google
+                  </div>
+                </Button>
+                <Button
+                  block
+                  size="large"
+                  onClick={toGoogle}
+                  style={{ marginTop: 15 }}
+                >
+                  <div>
+                    <Icon
+                      icon="local:github"
+                      style={{ verticalAlign: 'middle', marginRight: 5 }}
+                    />
                     Sign in with Github
                   </div>
-                </Button></>)
-            }
-
+                </Button>
+              </>
+            )}
           </Form>
         </div>
       </div>
-      <div className={styles.loginRight}>
-
-      </div>
+      <div className={styles.loginRight}></div>
     </div>
   );
 };
 
-export default connect(({ loginModel, loading }) => ({ loginModel, loading }))(View);
+export default connect(({ loginModel, loading }) => ({ loginModel, loading }))(
+  View,
+);