evan/next-terminal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: totp close #9

Browse Source
This commit is contained in:
naiba
2021-01-04 21:46:18 +08:00
committed by dushixiang
parent 2d160c70f9
commit 3bf8fe6684
11 changed files with 213 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/components/Login.js
View File

@ -1,14 +1,12 @@
import React, {Component} from 'react';
import {Button, Card, Checkbox, Form, Input, Typography} from "antd";
import React, { Component } from 'react';
import { Button, Card, Checkbox, Form, Input, Typography } from "antd";
import './Login.css'
import request from "../common/request";
import {message} from "antd/es";
import {withRouter} from "react-router-dom";
import {LockOutlined, UserOutlined} from '@ant-design/icons';
const {Title} = Typography;
import { message } from "antd/es";
import { withRouter } from "react-router-dom";
import { OneToOneOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
const { Title } = Typography;
class LoginForm extends Component {
state = {
@ -62,26 +60,27 @@ class LoginForm extends Component {
render() {
return (
<div className='login-bg'
style={{width: this.state.width, height: this.state.height, backgroundColor: '#F0F2F5'}}>
style={{ width: this.state.width, height: this.state.height, backgroundColor: '#F0F2F5' }}>
<Card className='login-card' title={null}>
<div style={{textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff'}}>
<div style={{ textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff' }}>
<Title level={1}>Next Terminal</Title>
</div>
<Form onFinish={this.handleSubmit} className="login-form">
<Form.Item name='username' rules={[{required: true, message: '请输入登录账号！'}]}>
<Input prefix={<UserOutlined/>} placeholder="登录账号"/>
<Form.Item name='username' rules={[{ required: true, message: '请输入登录账号！' }]}>
<Input prefix={<UserOutlined />} placeholder="登录账号" />
</Form.Item>
<Form.Item name='password' rules={[{required: true, message: '请输入登录密码！'}]}>
<Input.Password prefix={<LockOutlined/>} placeholder="登录密码"/>
<Form.Item name='password' rules={[{ required: true, message: '请输入登录密码！' }]}>
<Input.Password prefix={<LockOutlined />} placeholder="登录密码" />
</Form.Item>
<Form.Item name='totp' rules={[]}>
<Input prefix={<OneToOneOutlined />} placeholder="TOTP" />
</Form.Item>
<Form.Item name='remember' valuePropName='checked' initialValue={false}>
<Checkbox>记住登录</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button"
loading={this.state.inLogin}>
loading={this.state.inLogin}>
登录
</Button>
</Form.Item>

89
web/src/components/user/Info.js
View File

@ -1,11 +1,11 @@
import React, {Component} from 'react';
import {Button, Form, Input, Layout, PageHeader} from "antd";
import {itemRender} from '../../utils/utils'
import React, { Component } from 'react';
import { Button, Form, Input, Layout, PageHeader, Image } from "antd";
import { itemRender } from '../../utils/utils'
import request from "../../common/request";
import {message} from "antd/es";
import { message } from "antd/es";
import Logout from "./Logout";
const {Content} = Layout;
const { Content } = Layout;
const routes = [
{
@ -19,12 +19,12 @@ const routes = [
];
const formItemLayout = {
labelCol: {span: 3},
wrapperCol: {span: 6},
labelCol: { span: 3 },
wrapperCol: { span: 6 },
};
const formTailLayout = {
labelCol: {span: 3},
wrapperCol: {span: 6, offset: 3},
labelCol: { span: 3 },
wrapperCol: { span: 6, offset: 3 },
};
class Info extends Component {
@ -69,6 +69,32 @@ class Info extends Component {
}
}
confirmTOTP = async (values) => {
values['secret'] = this.state.secret
let result = await request.post('/confirm-totp', values);
if (result.code === 1) {
message.success('TOTP启用成功');
this.setState({
qr: "",
secret: ""
})
} else {
message.error(result.message);
}
}
resetTOTP = async () => {
let result = await request.post('/reset-totp');
if (result.code === 1) {
this.setState({
qr: result.data.qr,
secret: result.data.secret,
})
} else {
message.error(result.message);
}
}
render() {
return (
<>
@ -80,14 +106,12 @@ class Info extends Component {
itemRender: itemRender
}}
extra={[
<Logout key='logout'/>
<Logout key='logout' />
]}
subTitle="个人中心"
>
</PageHeader>
/>
<Content className="site-layout-background page-content">
<h1>修改密码</h1>
<Form ref={this.passwordFormRef} name="password" onFinish={this.changePassword}>
<Form.Item
@ -101,7 +125,7 @@ class Info extends Component {
},
]}
>
<Input type='password' placeholder="请输入原始密码"/>
<Input type='password' placeholder="请输入原始密码" />
</Form.Item>
<Form.Item
{...formItemLayout}
@ -115,9 +139,8 @@ class Info extends Component {
]}
>
<Input type='password' placeholder="新的密码"
onChange={(value) => this.onNewPasswordChange(value)}/>
onChange={(value) => this.onNewPasswordChange(value)} />
</Form.Item>
<Form.Item
{...formItemLayout}
name="newPassword2"
@ -132,9 +155,8 @@ class Info extends Component {
help={this.state.errorMsg || ''}
>
<Input type='password' placeholder="请和上面输入新的密码保持一致"
onChange={(value) => this.onNewPassword2Change(value)}/>
onChange={(value) => this.onNewPassword2Change(value)} />
</Form.Item>
<Form.Item {...formTailLayout}>
<Button type="primary" htmlType="submit">
提交
@ -142,6 +164,37 @@ class Info extends Component {
</Form.Item>
</Form>
</Content>
<Content className="site-layout-background page-content">
<h1>双因素认证</h1>
<Form hidden={this.state.qr} onFinish={this.resetTOTP}>
<Form.Item {...formTailLayout}>
<Button type="primary" htmlType="submit">
重置 TOTP
</Button>
</Form.Item>
</Form>
<Form hidden={!this.state.qr} onFinish={this.confirmTOTP}>
<Form.Item {...formItemLayout} label="使用TOTP应用扫码">
<Image
width={200}
src={"data:image/png;base64, " + this.state.qr}
/>
</Form.Item>
<Form.Item
{...formItemLayout}
name="totp"
label="TOTP"
rules={[]}
>
<Input placeholder="请输入显示的数字" />
</Form.Item>
<Form.Item {...formTailLayout}>
<Button type="primary" htmlType="submit">
确认
</Button>
</Form.Item>
</Form>
</Content>
</>
);
}