Skip to content
This repository was archived by the owner on Aug 24, 2019. It is now read-only.

Commit a69723e

Browse files
lisonglisong
committed
add accesskey
1 parent 36a05ce commit a69723e

File tree

17 files changed

+361
-3
lines changed

17 files changed

+361
-3
lines changed

‎src/actions/actionTypes.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ export const REQUEST_REMOVE_ACCESS_KEY = 'REQUEST_REMOVE_ACCESS_KEY';
99
export const RECEIVE_REMOVE_ACCESS_KEY = 'RECEIVE_REMOVE_ACCESS_KEY';
1010
export const REQUEST_PATCH_ACCESS_KEY = 'REQUEST_PATCH_ACCESS_KEY';
1111
export const RECEIVE_PATCH_ACCESS_KEY = 'RECEIVE_PATCH_ACCESS_KEY';
12+
export const REQUEST_CREATE_ACCESS_KEY = 'REQUEST_CREATE_ACCESS_KEY';
13+
export const RECEIVE_CREATE_ACCESS_KEY = 'RECEIVE_CREATE_ACCESS_KEY';
14+
export const OPEN_POP_SHOW_KEY = 'OPEN_POP_SHOW_KEY';
15+
export const CLOSE_POP_SHOW_KEY = 'CLOSE_POP_SHOW_KEY';
1216
/*========= end authActions ===========*/
1317

1418
/*========= begin usersActions ===========*/

‎src/actions/authActions.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import {
99
RECEIVE_REMOVE_ACCESS_KEY,
1010
REQUEST_PATCH_ACCESS_KEY,
1111
RECEIVE_PATCH_ACCESS_KEY,
12+
REQUEST_CREATE_ACCESS_KEY,
13+
RECEIVE_CREATE_ACCESS_KEY,
14+
CLOSE_POP_SHOW_KEY,
15+
OPEN_POP_SHOW_KEY,
1216
} from './actionTypes';
1317
import {showLogin} from './routesActions.js'
1418
import restApi from '../network/RestApi';
@@ -123,3 +127,40 @@ export function patchAccessKey(name, friendlyName=null, ttl=0) {
123127
});
124128
};
125129
}
130+
131+
export function requestCreateAccessKey() {
132+
return {
133+
type: REQUEST_CREATE_ACCESS_KEY,
134+
}
135+
}
136+
137+
export function receiveCreateAccessKey(data) {
138+
return {
139+
type: RECEIVE_CREATE_ACCESS_KEY,
140+
payload: data
141+
}
142+
}
143+
144+
export function createAccessKey() {
145+
return (dispatch) => {
146+
dispatch(requestCreateAccessKey());
147+
return restApi.createAccessKey()
148+
.then(data => {
149+
dispatch(openPopShowKey(_.get(data, 'accessKey.name')));
150+
dispatch(receiveCreateAccessKey(data));
151+
});
152+
};
153+
}
154+
155+
export function openPopShowKey(key) {
156+
return {
157+
type: OPEN_POP_SHOW_KEY,
158+
payload: key
159+
}
160+
}
161+
162+
export function closePopShowKey() {
163+
return {
164+
type: CLOSE_POP_SHOW_KEY,
165+
}
166+
}

‎src/components/AccessKeys/AccessKeys.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,58 @@ fieldset[disabled] .btnDanger.active {
130130
color: #d9534f;
131131
background-color: #fff;
132132
}
133+
134+
.btnPrimary {
135+
color: #fff;
136+
background-color: #337ab7;
137+
border-color: #2e6da4;
138+
}
139+
.btnPrimary.focus {
140+
color: #fff;
141+
background-color: #286090;
142+
border-color: #122b40;
143+
}
144+
.btnPrimary:hover {
145+
color: #fff;
146+
background-color: #286090;
147+
border-color: #204d74;
148+
}
149+
.btnPrimary:active {
150+
color: #fff;
151+
background-color: #286090;
152+
border-color: #204d74;
153+
}
154+
.btnPrimary:active:hover,
155+
.btnPrimary:active:focus {
156+
color: #fff;
157+
background-color: #204d74;
158+
border-color: #122b40;
159+
}
160+
.btnPrimary:active {
161+
background-image: none;
162+
}
163+
.btnPrimary.disabled,
164+
.btnPrimary[disabled],
165+
fieldset[disabled] .btnPrimary,
166+
.btnPrimary.disabled:hover,
167+
.btnPrimary[disabled]:hover,
168+
fieldset[disabled] .btnPrimary:hover,
169+
.btnPrimary.disabled:focus,
170+
.btnPrimary[disabled]:focus,
171+
fieldset[disabled] .btnPrimary:focus,
172+
.btnPrimary.disabled.focus,
173+
.btnPrimary[disabled].focus,
174+
fieldset[disabled] .btnPrimary.focus,
175+
.btnPrimary.disabled:active,
176+
.btnPrimary[disabled]:active,
177+
fieldset[disabled] .btnPrimary:active,
178+
.btnPrimary.disabled.active,
179+
.btnPrimary[disabled].active,
180+
fieldset[disabled] .btnPrimary.active {
181+
background-color: #337ab7;
182+
border-color: #2e6da4;
183+
}
184+
.btnPrimary .badge {
185+
color: #337ab7;
186+
background-color: #fff;
187+
}

‎src/components/AccessKeys/AccessKeys.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,31 @@ import _ from 'lodash';
77
import Link from '../Link';
88
import moment from 'moment';
99
import MyEditor from '../MyEditor';
10+
import PopShowKey from './PopShowKey';
1011

1112
class AccessKeys extends Component {
1213
static propTypes = {
1314
isFetching: PropTypes.bool,
1415
rs: PropTypes.array,
1516
removeKey: PropTypes.func,
1617
patchKey: PropTypes.func,
18+
isCreating: PropTypes.bool,
19+
createKey: PropTypes.func,
20+
isShowKey: PropTypes.bool,
21+
close: PropTypes.func,
22+
token: PropTypes.string,
1723
};
1824

1925
static defaultProps = {
2026
isFetching: true,
2127
rs: [],
2228
removeKey: (name)=>{},
2329
patchKey: (name, friendlyName=null, ttl=0)=>{},
30+
isCreating: false,
31+
createKey: ()=>{},
32+
isShowKey: false,
33+
close: ()=>{},
34+
token: '',
2435
};
2536

2637
constructor(){
@@ -66,7 +77,25 @@ class AccessKeys extends Component {
6677
}
6778
return (
6879
<div className={s.root}>
80+
{
81+
this.props.isShowKey ?
82+
<PopShowKey
83+
value={this.props.token}
84+
close={this.props.close}
85+
/>
86+
: null
87+
}
6988
<div className={s.container}>
89+
<h1>accessKey列表</h1>
90+
<span style={{ float:'right', marginBottom:'20px', marginRight:'20px' }}>
91+
<button
92+
onClick={()=>{
93+
self.props.createKey();
94+
}}
95+
className={cx(s.btn,s.btnPrimary)} disabled={this.props.isCreating ? true:false } >
96+
创建key
97+
</button>
98+
</span>
7099
<table>
71100
<tbody>
72101
<tr>

‎src/components/AccessKeys/PopShowKey/PopShowKey.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.root {
2+
width: 500px;
3+
padding: 20px 0;
4+
color: #fff;
5+
text-align: center;
6+
position: absolute;
7+
top: 50%;
8+
left: 50%;
9+
margin: -165px 0 0 -238px;
10+
background: #008080;
11+
}
12+
13+
.close {
14+
display: inline-block;
15+
width: 32px;
16+
height: 37px;
17+
position: absolute;
18+
background: url(./close.png) 0 0 no-repeat;
19+
top: 0;
20+
right: 0;
21+
text-indent: -9999px;
22+
}
23+
24+
p input {
25+
width: 300px;
26+
height: 30px;
27+
font-size: 1.2em;
28+
border: 0px solid #ccc;
29+
margin-bottom: 3px;
30+
padding-left: 8px;
31+
background-color: #D3D3D3;
32+
}

‎src/components/AccessKeys/PopShowKey/PopShowKey.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
import React, { PropTypes, Component } from 'react';
3+
import withStyles from 'isomorphic-style-loader/lib/withStyles';
4+
import s from './PopShowKey.css';
5+
import cx from 'classnames';
6+
import _ from 'lodash';
7+
import Modal from '../../Modal';
8+
9+
class PopShowKey extends Component {
10+
static propTypes = {
11+
value: PropTypes.string,
12+
close: PropTypes.func,
13+
};
14+
15+
static defaultProps = {
16+
value: '',
17+
close: ()=>{},
18+
};
19+
20+
constructor() {
21+
super();
22+
this.close = this.close.bind(this);
23+
}
24+
25+
close() {
26+
this.props.close();
27+
}
28+
29+
render() {
30+
return (
31+
<Modal>
32+
<div className={s.root}>
33+
<a href="javascript:;" onClick={this.close} className={s.close}>x</a>
34+
<h3>复制下面的密钥, 然后关闭弹框</h3>
35+
<p>
36+
<input
37+
value={this.props.value}
38+
onFocus={(event)=>{
39+
event.target.select();
40+
}}
41+
onClick={(event)=>{
42+
event.target.select();
43+
}}
44+
onMouseOver={(event)=>{
45+
event.target.select();
46+
}}
47+
readOnly
48+
/>
49+
</p>
50+
<p><button onClick={this.close} >关闭</button></p>
51+
</div>
52+
</Modal>
53+
)
54+
}
55+
}
56+
export default withStyles(s)(PopShowKey);

‎src/components/AccessKeys/PopShowKey/close.png

1.16 KB
Loading

‎src/components/AccessKeys/PopShowKey/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "PopShowKey",
3+
"version": "0.0.0",
4+
"private": true,
5+
"main": "./PopShowKey.js"
6+
}

‎src/components/Modal/Modal.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.modal {
2+
overflow-y: hidden;
3+
z-index: 9999;
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
right: 0;
8+
bottom: 0;
9+
background-color: rgba(0,0,0,0.5);
10+
}

‎src/components/Modal/Modal.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, {Component, PropTypes} from 'react';
2+
import withStyles from 'isomorphic-style-loader/lib/withStyles';
3+
import s from './Modal.css';
4+
class Modal extends Component{
5+
render(){
6+
return(
7+
<div className={s.modal}>
8+
{this.props.children}
9+
</div>
10+
)
11+
}
12+
}
13+
export default withStyles(s)(Modal);

0 commit comments

Comments
 (0)