添加两步验证

src/pages/login/index.less

@@ -21,13 +21,11 @@
 
 .content {
   position: absolute;
-  top: 45%;
+  top: 86px;
   left: 50%;
-  margin: -160px 0 0 -160px;
-  width: 320px;
-  height: 320px;
-  padding: 36px;
-  box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
+  margin-left: -170px;
+  width: 340px;
+  padding: 0 16px;
 }
 
 @media (min-width: @screen-md-min) {
@@ -44,16 +42,20 @@
 }
 
 .header {
-  height: 44px;
-  line-height: 44px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  flex-direction: column;
 }
 
 .logo {
-  width: 30px;
-  margin-right: 8px;
+  width: 48px;
+  display: block;
+  margin-bottom: 24px;
+}
+
+.title {
+  font-size: 20px;
+  margin-bottom: 16px;
 }
 
 .desc {
@@ -64,7 +66,11 @@
 }
 
 .main {
-  margin: 35px auto 0;
+  padding: 20px;
+  border-radius: 6px;
+  background-color: #f6f8fa;
+  border: 1px solid #ebedef;
+
   @media screen and (max-width: @screen-sm) {
     width: 95%;
     max-width: 320px;
@@ -104,3 +110,7 @@
     font-size: @font-size-base;
   }
 }
+
+.extra {
+  margin-top: 20px;
+}

src/pages/login/index.tsx

@@ -13,6 +13,7 @@ import { history, Link } from 'umi';
 import styles from './index.less';
 import { request } from '@/utils/http';
 import { useTheme } from '@/utils/hooks';
+import { MobileOutlined } from '@ant-design/icons';
 
 const FormItem = Form.Item;
 const { Countdown } = Statistic;
@@ -21,9 +22,13 @@ const Login = () => {
   const [loading, setLoading] = useState(false);
   const [waitTime, setWaitTime] = useState<any>();
   const { theme } = useTheme();
+  const [twoFactor, setTwoFactor] = useState(false);
+  const [loginInfo, setLoginInfo] = useState<any>();
+  const [verifing, setVerifing] = useState(false);
 
   const handleOk = (values: any) => {
     setLoading(true);
+    setTwoFactor(false);
     setWaitTime(null);
     request
       .post(`${config.apiPrefix}login`, {
@@ -33,31 +38,14 @@ const Login = () => {
         },
       })
       .then((data) => {
-        if (data.code === 200) {
-          const { token, lastip, lastaddr, lastlogon } = data.data;
-          localStorage.setItem(config.authKey, token);
-          notification.success({
-            message: '登录成功！',
-            description: (
-              <>
-                <div>
-                  上次登录时间：
-                  {lastlogon ? new Date(lastlogon).toLocaleString() : '-'}
-                </div>
-                <div>上次登录地点：{lastaddr || '-'}</div>
-                <div>上次登录IP：{lastip || '-'}</div>
-              </>
-            ),
-            duration: 5,
+        if (data.code === 420) {
+          setLoginInfo({
+            username: values.username,
+            password: values.password,
           });
-          history.push('/crontab');
-        } else if (data.code === 100) {
-          message.warn(data.message);
-        } else if (data.code === 410) {
-          message.error(data.message);
-          setWaitTime(data.data);
+          setTwoFactor(true);
         } else {
-          message.error(data.message);
+          checkResponse(data);
         }
         setLoading(false);
       })
@@ -67,6 +55,55 @@ const Login = () => {
       });
   };
 
+  const completeTowFactor = (values: any) => {
+    setVerifing(true);
+    request
+      .put(`${config.apiPrefix}user/two-factor/login`, {
+        data: { ...loginInfo, code: values.code },
+      })
+      .then((data: any) => {
+        if (data.code === 430) {
+          message.error(data.message);
+        } else {
+          checkResponse(data);
+        }
+        setVerifing(false);
+      })
+      .catch((error: any) => {
+        console.log(error);
+        setVerifing(false);
+      });
+  };
+
+  const checkResponse = (data: any) => {
+    if (data.code === 200) {
+      const { token, lastip, lastaddr, lastlogon } = data.data;
+      localStorage.setItem(config.authKey, token);
+      notification.success({
+        message: '登录成功！',
+        description: (
+          <>
+            <div>
+              上次登录时间：
+              {lastlogon ? new Date(lastlogon).toLocaleString() : '-'}
+            </div>
+            <div>上次登录地点：{lastaddr || '-'}</div>
+            <div>上次登录IP：{lastip || '-'}</div>
+          </>
+        ),
+        duration: 5,
+      });
+      history.push('/crontab');
+    } else if (data.code === 100) {
+      message.warn(data.message);
+    } else if (data.code === 410) {
+      message.error(data.message);
+      setWaitTime(data.data);
+    } else {
+      message.error(data.message);
+    }
+  };
+
   useEffect(() => {
     const isAuth = localStorage.getItem(config.authKey);
     if (isAuth) {
@@ -84,55 +121,88 @@ const Login = () => {
               className={styles.logo}
               src="/images/qinglong.png"
             />
-            <span className={styles.title}>{config.siteName}</span>
+            <span className={styles.title}>
+              {twoFactor ? '两步验证' : config.siteName}
+            </span>
           </div>
         </div>
         <div className={styles.main}>
-          <Form onFinish={handleOk}>
-            <FormItem
-              name="username"
-              rules={[{ required: true, message: '请输入用户名' }]}
-              hasFeedback
-            >
-              <Input placeholder="用户名" autoFocus />
-            </FormItem>
-            <FormItem
-              name="password"
-              rules={[{ required: true, message: '请输入密码' }]}
-              hasFeedback
-            >
-              <Input type="password" placeholder="密码" />
-            </FormItem>
-            <Row>
-              {waitTime ? (
-                <Button type="primary" style={{ width: '100%' }} disabled>
-                  请
-                  <Countdown
-                    valueStyle={{
-                      color:
-                        theme === 'vs'
-                          ? 'rgba(0,0,0,.25)'
-                          : 'rgba(232, 230, 227, 0.25)',
-                    }}
-                    className="inline-countdown"
-                    onFinish={() => setWaitTime(null)}
-                    format="ss"
-                    value={Date.now() + 1000 * waitTime}
-                  />
-                  秒后重试
-                </Button>
-              ) : (
-                <Button
-                  type="primary"
-                  htmlType="submit"
-                  style={{ width: '100%' }}
-                  loading={loading}
-                >
-                  登录
-                </Button>
-              )}
-            </Row>
-          </Form>
+          {twoFactor ? (
+            <Form layout="vertical" onFinish={completeTowFactor}>
+              <FormItem
+                name="code"
+                label="验证码"
+                rules={[
+                  {
+                    pattern: /^[0-9]{6}$/,
+                    message: '验证码为6位数字',
+                    validateTrigger: 'onBlur',
+                  },
+                ]}
+                hasFeedback
+              >
+                <Input placeholder="6位数字" autoComplete="off" />
+              </FormItem>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{ width: '100%' }}
+                loading={verifing}
+              >
+                验证
+              </Button>
+            </Form>
+          ) : (
+            <Form layout="vertical" onFinish={handleOk}>
+              <FormItem name="username" label="用户名" hasFeedback>
+                <Input placeholder="用户名" autoFocus />
+              </FormItem>
+              <FormItem name="password" label="密码" hasFeedback>
+                <Input type="password" placeholder="密码" />
+              </FormItem>
+              <Row>
+                {waitTime ? (
+                  <Button type="primary" style={{ width: '100%' }} disabled>
+                    请
+                    <Countdown
+                      valueStyle={{
+                        color:
+                          theme === 'vs'
+                            ? 'rgba(0,0,0,.25)'
+                            : 'rgba(232, 230, 227, 0.25)',
+                      }}
+                      className="inline-countdown"
+                      onFinish={() => setWaitTime(null)}
+                      format="ss"
+                      value={Date.now() + 1000 * waitTime}
+                    />
+                    秒后重试
+                  </Button>
+                ) : (
+                  <Button
+                    type="primary"
+                    htmlType="submit"
+                    style={{ width: '100%' }}
+                    loading={loading}
+                  >
+                    登录
+                  </Button>
+                )}
+              </Row>
+            </Form>
+          )}
+        </div>
+        <div className={styles.extra}>
+          {twoFactor ? (
+            <div style={{ paddingLeft: 20, position: 'relative' }}>
+              <MobileOutlined
+                style={{ position: 'absolute', left: 0, top: 4 }}
+              />
+              在您的设备上打开两步验证应用程序以查看您的身份验证代码并验证您的身份。
+            </div>
+          ) : (
+            ''
+          )}
         </div>
       </div>
     </div>

src/pages/setting/index.tsx

@@ -22,13 +22,13 @@ import {
   auto as followSystemColorScheme,
   setFetchMethod,
 } from 'darkreader';
-import { history } from 'umi';
 import AppModal from './appModal';
 import {
   EditOutlined,
   DeleteOutlined,
   ReloadOutlined,
 } from '@ant-design/icons';
+import SecuritySettings from './security';
 
 const { Text } = Typography;
 const optionsWithDisabled = [
@@ -37,7 +37,7 @@ const optionsWithDisabled = [
   { label: '跟随系统', value: 'auto' },
 ];
 
-const Setting = ({ headerStyle, isPhone }: any) => {
+const Setting = ({ headerStyle, isPhone, user }: any) => {
   const columns = [
     {
       title: '名称',
@@ -109,24 +109,7 @@ const Setting = ({ headerStyle, isPhone }: any) => {
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [editedApp, setEditedApp] = useState();
-  const [tabActiveKey, setTabActiveKey] = useState('person');
-
-  const handleOk = (values: any) => {
-    request
-      .post(`${config.apiPrefix}user`, {
-        data: {
-          username: values.username,
-          password: values.password,
-        },
-      })
-      .then((data: any) => {
-        localStorage.removeItem(config.authKey);
-        history.push('/login');
-      })
-      .catch((error: any) => {
-        console.log(error);
-      });
-  };
+  const [tabActiveKey, setTabActiveKey] = useState('security');
 
   const themeChange = (e: any) => {
     setTheme(e.target.value);
@@ -272,35 +255,13 @@ const Setting = ({ headerStyle, isPhone }: any) => {
       }
     >
       <Tabs
-        defaultActiveKey="person"
+        defaultActiveKey="security"
         size="small"
         tabPosition="top"
         onChange={tabChange}
       >
-        <Tabs.TabPane tab="个人设置" key="person">
-          <Form onFinish={handleOk} layout="vertical">
-            <Form.Item
-              label="用户名"
-              name="username"
-              rules={[{ required: true }]}
-              hasFeedback
-              style={{ maxWidth: 300 }}
-            >
-              <Input placeholder="用户名" />
-            </Form.Item>
-            <Form.Item
-              label="密码"
-              name="password"
-              rules={[{ required: true }]}
-              hasFeedback
-              style={{ maxWidth: 300 }}
-            >
-              <Input type="password" placeholder="密码" />
-            </Form.Item>
-            <Button type="primary" htmlType="submit">
-              保存
-            </Button>
-          </Form>
+        <Tabs.TabPane tab="安全设置" key="security">
+          <SecuritySettings user={user} />
         </Tabs.TabPane>
         <Tabs.TabPane tab="应用设置" key="app">
           <Table

src/pages/setting/security.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Input, Form, Button, Spin, message } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import { history } from 'umi';
+import QRCode from 'qrcode.react';
+
+const { Title, Link } = Typography;
+
+const SecuritySettings = ({ user }: any) => {
+  const [loading, setLoading] = useState(false);
+  const [twoFactorActived, setTwoFactorActived] = useState<boolean>();
+  const [twoFactoring, setTwoFactoring] = useState(false);
+  const [twoFactorInfo, setTwoFactorInfo] = useState<any>();
+  const [code, setCode] = useState<string>();
+
+  const handleOk = (values: any) => {
+    request
+      .post(`${config.apiPrefix}user`, {
+        data: {
+          username: values.username,
+          password: values.password,
+        },
+      })
+      .then((data: any) => {
+        localStorage.removeItem(config.authKey);
+        history.push('/login');
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
+  const activeOrDeactiveTwoFactor = () => {
+    if (twoFactorActived) {
+      deactiveTowFactor();
+    } else {
+      getTwoFactorInfo();
+      setTwoFactoring(true);
+    }
+  };
+
+  const deactiveTowFactor = () => {
+    request
+      .put(`${config.apiPrefix}user/two-factor/deactive`)
+      .then((data: any) => {
+        if (data.data) {
+          setTwoFactorActived(false);
+        }
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
+  const completeTowFactor = () => {
+    request
+      .put(`${config.apiPrefix}user/two-factor/active`, { data: { code } })
+      .then((data: any) => {
+        if (data.data) {
+          message.success('激活成功');
+          setTwoFactoring(false);
+          setTwoFactorActived(true);
+        }
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
+  const getTwoFactorInfo = () => {
+    request
+      .get(`${config.apiPrefix}user/two-factor/init`)
+      .then((data: any) => {
+        setTwoFactorInfo(data.data);
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
+  useEffect(() => {
+    setTwoFactorActived(user && user.twoFactorActived);
+  }, [user]);
+
+  return twoFactoring ? (
+    <>
+      {twoFactorInfo ? (
+        <div>
+          <Title level={5}>第一步</Title>
+          下载两步验证手机应用，比如 Google Authenticator 、
+          <Link
+            href="https://www.microsoft.com/en-us/security/mobile-authenticator-app"
+            target="_blank"
+          >
+            Microsoft Authenticator
+          </Link>
+          、
+          <Link href="https://authy.com/download/" target="_blank">
+            Authy
+          </Link>
+          、
+          <Link
+            href="https://support.1password.com/one-time-passwords/"
+            target="_blank"
+          >
+            1Password
+          </Link>
+          、
+          <Link
+            href="https://support.logmeininc.com/lastpass/help/lastpass-authenticator-lp030014"
+            target="_blank"
+          >
+            LastPass Authenticator
+          </Link>
+          <Title style={{ marginTop: 5 }} level={5}>
+            第二步
+          </Title>
+          使用手机应用扫描二维码，或者输入秘钥 {twoFactorInfo?.secret}
+          <div style={{ marginTop: 10 }}>
+            <QRCode value={twoFactorInfo?.url} />
+          </div>
+          <Title style={{ marginTop: 5 }} level={5}>
+            第三步
+          </Title>
+          输入手机应用上的6位数字
+          <Input
+            style={{ margin: '10px 0 10px 0', display: 'block', maxWidth: 200 }}
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="123456"
+          />
+          <Button type="primary" onClick={completeTowFactor}>
+            完成设置
+          </Button>
+        </div>
+      ) : (
+        <Spin />
+      )}
+    </>
+  ) : (
+    <>
+      <div
+        style={{
+          fontSize: 18,
+          borderBottom: '1px solid #f0f0f0',
+          marginBottom: 8,
+          paddingBottom: 4,
+        }}
+      >
+        修改用户名密码
+      </div>
+      <Form onFinish={handleOk} layout="vertical">
+        <Form.Item
+          label="用户名"
+          name="username"
+          rules={[{ required: true }]}
+          hasFeedback
+          style={{ maxWidth: 300 }}
+        >
+          <Input placeholder="用户名" />
+        </Form.Item>
+        <Form.Item
+          label="密码"
+          name="password"
+          rules={[{ required: true }]}
+          hasFeedback
+          style={{ maxWidth: 300 }}
+        >
+          <Input type="password" placeholder="密码" />
+        </Form.Item>
+        <Button type="primary" htmlType="submit">
+          保存
+        </Button>
+      </Form>
+
+      <div
+        style={{
+          fontSize: 18,
+          borderBottom: '1px solid #f0f0f0',
+          marginBottom: 8,
+          paddingBottom: 4,
+          marginTop: 16,
+        }}
+      >
+        两步验证
+      </div>
+      <Button
+        type="primary"
+        danger={twoFactorActived}
+        onClick={activeOrDeactiveTwoFactor}
+      >
+        {twoFactorActived ? '禁用' : '启用'}
+      </Button>
+    </>
+  );
+};
+
+export default SecuritySettings;