@ant-design/icons#ReloadOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#ReloadOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From the-eye-knows-the-garbage with MIT License | 6 votes |
|
getButtonText = function getButtonText(_ref) {
var intl = _ref.intl;
return {
fullScreen: {
text: intl.getMessage('tableToolBar.fullScreen', '全屏'),
icon: React.createElement(FullScreenIcon, null)
},
reload: {
text: intl.getMessage('tableToolBar.reload', '刷新'),
icon: React.createElement(ReloadOutlined, null)
},
setting: {
text: intl.getMessage('tableToolBar.columnSetting', '列设置'),
icon: React.createElement(SettingOutlined, null)
},
density: {
text: intl.getMessage('tableToolBar.density', '表格密度'),
icon: React.createElement(DensityIcon, null)
}
};
}
Example #2
| Source File: Backup.js From network-rc with Apache License 2.0 | 5 votes |
|
export default function Backup({
serverConfig,
resetServerConfig,
saveServerConfig,
updateVersion,
updateStaus,
}) {
const save = () => {
var blob = new Blob([JSON.stringify(serverConfig)], {
type: "text/plain;charset=utf-8",
});
saveAs(
blob,
`network-rc-config-backgup-${dayjs().format("YYYYMMDDTHHmmss")}.json`
);
};
const load = (file) => {
var reader = new FileReader();
reader.onload = function (e) {
if (reader.result) {
saveServerConfig(JSON.parse(reader.result));
}
};
reader.onerror = function (e) {
console.error(e);
message.error("读取备份错误");
};
reader.readAsText(file);
return false;
};
return (
<Form {...layout}>
<Form.Item>
<Space>
<Button icon={<DownloadOutlined />} type="primary" onClick={save}>
备份当前设置
</Button>
<Upload accept=".json" beforeUpload={load} showUploadList={false}>
<Button icon={<UploadOutlined />}>恢复已保存的设置</Button>
</Upload>
<Button icon={<ReloadOutlined />} danger onClick={resetServerConfig}>
恢复默认设置（所有设置）
</Button>
</Space>
</Form.Item>
<Form.Item >
<Button
onClick={(e) => {
e.preventDefault();
updateVersion();
}}
loading={updateStaus ? true : false}
>
{updateStaus || "更新版本"}
</Button>
</Form.Item>
</Form>
);
}
Example #3
| Source File: index.js From quick_redis_blog with MIT License | 5 votes |
|
render() {
return (
<div>
<Form initialValues={{ ...this.initValues }} ref="form">
<Row gutter={8}>
<Col span={14}>
<Form.Item
name="redisKey"
rules={[
{
required: true,
},
]}
style={{ marginBottom: "1px" }}
>
<Search
prefix="key :"
enterButton={
<Button
icon={<EditOutlined />}
></Button>
}
size="middle"
onSearch={this.renameKey.bind(this)}
/>
</Form.Item>
</Col>
<Col span={5}>
<Form.Item
name="ttl"
rules={[
{
required: true,
},
]}
style={{ marginBottom: "1px" }}
>
<Search
prefix="ttl :"
enterButton={
<Button
icon={<EditOutlined />}
></Button>
}
size="middle"
onSearch={this.updateTtl.bind(this)}
/>
</Form.Item>
</Col>
<Col span={5}>
<Space>
<Form.Item style={{ marginBottom: "1px" }}>
<Popconfirm
title={intl.get(
"HostKey.header.key.delete.notice"
)}
onConfirm={() => {
this.deleteKey();
}}
>
<Button
icon={<DeleteOutlined />}
></Button>
</Popconfirm>
</Form.Item>
<Form.Item style={{ marginBottom: "1px" }}>
<Button
icon={<ReloadOutlined />}
onClick={this.refreshAll.bind(this)}
></Button>
</Form.Item>
</Space>
</Col>
</Row>
</Form>
</div>
);
}
Example #4
| Source File: InstanceDetail.jsx From juno with Apache License 2.0 | 4 votes |
|
function InstanceDetail(props) {
const { currentInstance, dispatch, config, appName, env } = props;
const [visibleRestartModal, setVisibleRestartModal] = useState(false);
const [loading, setLoading] = useState(false);
const [content, setContent] = useState('');
if (!currentInstance) {
return <div />;
}
const {
config_file_used,
config_file_synced,
config_file_take_effect,
config_file_path,
sync_at,
version,
change_log,
host_name,
} = currentInstance;
let info = [
{
title: '接入状态',
help: '当前应用是否在该实例上接入配置中心',
content: config_file_used ? '已接入' : '未接入',
},
{
title: '发布状态',
help: '配置是否下发到机器上',
content: config_file_synced ? '已下发' : '未下发',
},
{
title: '生效状态',
help: '配置是否在应用上生效（依赖Go框架支持）',
content: config_file_take_effect ? '已生效' : '未生效',
},
{
title: '文件路径',
content: config_file_path
? config_file_path.split(';').map((item, idx) => {
return (
<div key={idx} className={styles.configPathItem}>
<span>{item}</span>
<CopyOutlined
onClick={() => {
copyToClipBoard(item);
message.success('已复制到剪切板');
}}
className={styles.configPathCopyBtn}
/>
</div>
);
})
: '---',
},
{
title: '配置版本',
content: version ? (
<span>
<Tag>{version}</Tag> {change_log}
</span>
) : (
'---'
),
},
{
title: '同步时间',
content: sync_at,
},
];
let showConfirm = (action, zoneCode, hostname, usedTyp) => {
const descMap = {
start: {
title: '确定启动应用进程吗？',
content: `应用进程会被执行 start 命令`,
},
restart: {
title: '确定重启应用进程吗？',
content: '应用进程会被执行 restart 命令',
},
stop: {
title: '确定停止应用进程吗？',
content: '应用进程会被执行 stop 命令',
},
};
const desc = descMap[action] || {};
confirm({
title: desc.title,
content: (
<div>
<p>{desc.content}</p>
<h4>操作实例：</h4>
<p>{hostname}</p>
</div>
),
onOk() {
setVisibleRestartModal(true);
doAction(action, zoneCode, hostname, usedTyp);
},
onCancel() {},
okText: '确定',
cancelText: '取消',
});
};
let doAction = (action, zoneCode, hostname, usedTyp) => {
if (usedTyp === 0) {
setContent('配置文件未接入，无法进行重启操作');
setLoading(false);
return;
}
setLoading(true);
ServiceAppAction({
action: action,
zone_code: zoneCode,
node_name: hostname,
typ: usedTyp,
app_name: appName,
env: env,
}).then((res) => {
if (res.code !== 0) {
setContent(res.data);
setLoading(false);
} else {
let result = [];
for (const itemListKey in res.data) {
let itemList = res.data[itemListKey];
if (itemList['code'] !== 0) {
result.push(<p>状态：重启失败</p>);
} else {
result.push(<p>状态：重启成功</p>);
}
for (const item in itemList) {
result.push(<p>{item + ':' + itemList[item]}</p>);
}
}
setContent(result);
setLoading(false);
}
});
};
return (
<div className={styles.instanceDetail}>
<div className={styles.topHeader}>
<div style={{ fontSize: '48px', textAlign: 'center', padding: '10px' }}>
<DatabaseOutlined />
</div>
<div style={{ padding: '10px' }}>
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>{currentInstance.host_name}</div>
<div>
{currentInstance.region_name} {currentInstance.zone_name} {currentInstance.ip}
</div>
<div style={{ marginTop: '10px' }}>
<Space>
<Button
size={'small'}
type={'primary'}
icon={<ReloadOutlined />}
onClick={() => {
showConfirm(
'restart',
currentInstance.zone_code,
currentInstance.host_name,
currentInstance.config_file_used,
);
}}
>
重启
</Button>
<Button
size={'small'}
icon={<EyeOutlined />}
onClick={() => {
dispatch({
type: 'config/fetchInstanceConfig',
payload: {
id: config.id,
hostName: host_name,
},
});
}}
>
实时配置
</Button>
</Space>
</div>
</div>
</div>
<ul className={styles.instanceInfoList}>
{info.map((item, index) => (
<li key={index}>
<div className={styles.instanceInfoName}>
<div className={styles.instanceInfoTitle}>{item.title}</div>
<div className={styles.instanceInfoHelp}>{item.help}</div>
</div>
<div className={styles.instanceInfoContent}>{item.content}</div>
</li>
))}
</ul>
<Modal
title="操作面板"
visible={visibleRestartModal}
onOk={() => setVisibleRestartModal(false)}
onCancel={() => setVisibleRestartModal(false)}
>
<div>
<Spin spinning={loading} />
</div>
<div style={{ backgroundColor: 'black', borderRadius: '5px' }}>
<p style={{ color: 'green' }}>{content}</p>
</div>
</Modal>
<ModalRealtimeConfig />
</div>
);
}
Example #5
| Source File: ParticipantsOptions.js From react-portal with MIT License | 4 votes |
|
ParticipantsOptions = props => {
const [events, setEvents] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [branch, setBranch] = useState();
const [year, setYear] = useState();
useEffect(() => {
(async () => {
setIsLoading(true);
try {
const { data } = await getEventsService();
setEvents(data);
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
})();
}, []);
const handleChange = val => {
if (val === "All") {
setBranch();
setYear();
}
props.onEventChange(val);
};
const handleQuery = val => {
props.onQuery(val);
};
const handleBranchChange = val => {
setBranch(val);
props.onBranchChange(val);
};
const handleYearChange = val => {
setYear(val);
props.onYearChange(val);
};
return (
<div style={{ marginBottom: 12 }}>
<Row justify="space-between">
<Col span={12}>
<TreeSelect
style={{ minWidth: 180 }}
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="Please select"
onChange={handleChange}
>
<TreeNode value="All" title="All" />
<TreeNode
value="Upcoming"
title="Upcoming Events"
selectable={false}
>
{events.length !== 0
? events["upcomingEvents"].map(
({ _id, title }) => {
return (
<TreeNode
key={_id}
value={_id}
title={title}
/>
);
}
)
: null}
</TreeNode>
<TreeNode
value="Past"
title="Past Events"
selectable={false}
>
{events.length !== 0
? events["previousEvents"].map(
({ _id, title }) => {
return (
<TreeNode
key={_id}
value={_id}
title={title}
/>
);
}
)
: null}
</TreeNode>
<TreeNode
value="Running"
title="Running Events"
selectable={false}
>
{events.length !== 0
? events["runningEvents"].map(
({ _id, title }) => {
return (
<TreeNode
key={_id}
value={_id}
title={title}
/>
);
}
)
: null}
</TreeNode>
</TreeSelect>
<Divider type="vertical" />
<Input.Search
type="text"
style={{ width: 200 }}
loading={isLoading}
placeholder="Search"
onSearch={value => handleQuery(value)}
allowClear
/>
</Col>
<Col span={4} style={{ display: "flex", alignItems: "center" }}>
<ReloadOutlined
onClick={() => props.toggleRefresh(!props.refresh)}
/>
</Col>
<Col span={8}>
<Container>
<Select
placeholder="Branch"
style={{ width: 100 }}
onChange={handleBranchChange}
value={branch}
allowClear
>
<Option value="CSE">CSE</Option>
<Option value="IT">IT</Option>
<Option value="ME">ME</Option>
<Option value="CO">CO</Option>
<Option value="CSI">CSI</Option>
<Option value="ECE">ECE</Option>
<Option value="CI">CI</Option>
<Option value="EN">EN</Option>
<Option value="EI">EI</Option>
<Option value="MCA">MCA</Option>
<Option value="B.PHARMA">B.PHARMA</Option>
<Option value="M.PHARMA">M.PHARMA</Option>
<Option value="MBA">MBA</Option>
</Select>
<Divider type="vertical" />
<Select
placeholder="Year"
style={{ width: 80 }}
onChange={handleYearChange}
value={year}
allowClear
>
<Option value="1">1st</Option>
<Option value="2">2nd</Option>
<Option value="3">3rd</Option>
<Option value="4">4th</Option>
</Select>
</Container>
</Col>
</Row>
</div>
);
}
Example #6
| Source File: FileSystem.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
render: (value, item) => {
let icon;
if (item['isDir']) {
icon = <FolderTwoTone/>;
} else {
if (item['isLink']) {
icon = <LinkOutlined/>;
} else {
const fileExtension = item['name'].split('.').pop().toLowerCase();
switch (fileExtension) {
case "doc":
case "docx":
icon = <FileWordOutlined/>;
break;
case "xls":
case "xlsx":
icon = <FileExcelOutlined/>;
break;
case "bmp":
case "jpg":
case "jpeg":
case "png":
case "tif":
case "gif":
case "pcx":
case "tga":
case "exif":
case "svg":
case "psd":
case "ai":
case "webp":
icon = <FileImageOutlined/>;
break;
case "md":
icon = <FileMarkdownOutlined/>;
break;
case "pdf":
icon = <FilePdfOutlined/>;
break;
case "txt":
icon = <FileTextOutlined/>;
break;
case "zip":
case "gz":
case "tar":
case "tgz":
icon = <FileZipOutlined/>;
break;
default:
icon = <FileOutlined/>;
break;
}
}
}
return <span className={'dode'}>{icon} {item['name']}</span>;
},
sorter: (a, b) => {
if (a['key'] === '..') {
return 0;
}
if (b['key'] === '..') {
return 0;
}
return a.name.localeCompare(b.name);
},
sortDirections: ['descend', 'ascend'],
},
{
title: '大小',
dataIndex: 'size',
key: 'size',
render: (value, item) => {
if (!item['isDir'] && !item['isLink']) {
return <span className={'dode'}>{renderSize(value)}</span>;
}
return <span className={'dode'}/>;
},
sorter: (a, b) => {
if (a['key'] === '..') {
return 0;
}
if (b['key'] === '..') {
return 0;
}
return a.size - b.size;
},
}, {
title: '修改日期',
dataIndex: 'modTime',
key: 'modTime',
sorter: (a, b) => {
if (a['key'] === '..') {
return 0;
}
if (b['key'] === '..') {
return 0;
}
return a.modTime.localeCompare(b.modTime);
},
sortDirections: ['descend', 'ascend'],
render: (value, item) => {
return <span className={'dode'}>{value}</span>;
},
}, {
title: '属性',
dataIndex: 'mode',
key: 'mode',
render: (value, item) => {
return <span className={'dode'}>{value}</span>;
},
}, {
title: '操作',
dataIndex: 'action',
key: 'action',
width: 210,
render: (value, item) => {
if (item['key'] === '..') {
return undefined;
}
let disableDownload = !this.state.download;
let disableEdit = !this.state.edit;
if (item['isDir'] || item['isLink']) {
disableDownload = true;
disableEdit = true
}
return (
<>
<Button type="link" size='small' disabled={disableEdit}
onClick={() => this.showEditor(item['name'], item['key'])}>
编辑
</Button>
<Button type="link" size='small' disabled={disableDownload} onClick={async () => {
download(`${server}/${this.state.storageType}/${this.state.storageId}/download?file=${window.encodeURIComponent(item['key'])}&X-Auth-Token=${getToken()}&t=${new Date().getTime()}`);
}}>
下载
</Button>
<Button type={'link'} size={'small'} disabled={!this.state.rename} onClick={() => {
this.setState({
renameVisible: true,
currentFileKey: item['key']
})
}}>重命名</Button>
<Popconfirm
title="您确认要删除此文件吗?"
onConfirm={async () => {
await this.delete(item['key']);
await this.refresh();
}}
okText="是"
cancelText="否"
>
<Button type={'link'} size={'small'} disabled={!this.state.delete} danger>删除</Button>
</Popconfirm>
</>
);
},
}
];
const {selectedRowKeys} = this.state;
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
this.setState({selectedRowKeys});
},
getCheckboxProps: (record) => ({
disabled: record['disabled'],
}),
};
let hasSelected = selectedRowKeys.length > 0;
if (hasSelected) {
if (!this.state.delete) {
hasSelected = false;
}
}
const title = (
<div className='fs-header'>
<div className='fs-header-left'>
<Input value={this.state.currentDirectoryInput} onChange={this.handleCurrentDirectoryInputChange}
onPressEnter={this.handleCurrentDirectoryInputPressEnter}/>
</div>
<div className='fs-header-right'>
<Space>
<div className='fs-header-right-item'>
<Tooltip title="创建文件夹">
<Button type="primary" size="small"
disabled={!this.state.upload}
icon={<FolderAddOutlined/>}
onClick={() => {
this.setState({
mkdirVisible: true
})
}} ghost/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="上传文件">
<Button type="primary" size="small"
icon={<CloudUploadOutlined/>}
disabled={!this.state.upload}
onClick={() => {
window.document.getElementById('file-upload').click();
}} ghost/>
<input type="file" id="file-upload" style={{display: 'none'}}
onChange={this.handleUploadFile} multiple/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="上传文件夹">
<Button type="primary" size="small"
icon={<UploadOutlined/>}
disabled={!this.state.upload}
onClick={() => {
window.document.getElementById('dir-upload').click();
}} ghost/>
<input type="file" id="dir-upload" style={{display: 'none'}}
onChange={this.handleUploadDir} webkitdirectory='' multiple/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="刷新">
<Button type="primary" size="small"
icon={<ReloadOutlined/>}
onClick={this.refresh}
ghost/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="批量删除">
<Button type="primary" size="small" ghost danger disabled={!hasSelected}
icon={<DeleteOutlined/>}
loading={this.state.delBtnLoading}
onClick={() => {
let rowKeys = this.state.selectedRowKeys;
const content = <div>
您确定要删除选中的<Text style={{color: '#1890FF'}}
strong>{rowKeys.length}</Text>条记录吗？
</div>;
confirm({
icon: <ExclamationCircleOutlined/>,
content: content,
onOk: async () => {
for (let i = 0; i < rowKeys.length; i++) {
if (rowKeys[i] === '..') {
continue;
}
await this.delete(rowKeys[i]);
}
this.refresh();
},
onCancel() {
},
});
}}>
</Button>
</Tooltip>
</div>
</Space>
</div>
</div>
);
return (
<div>
<Card title={title} bordered={true} size="small" style={{minHeight: this.state.minHeight}}>
<Table columns={columns}
rowSelection={rowSelection}
dataSource={this.state.files}
size={'small'}
pagination={false}
loading={this.state.loading}
onRow={record => {
return {
onDoubleClick: event => {
if (record['isDir'] || record['isLink']) {
if (record['path'] === '..') {
// 获取当前目录的上级目录
let currentDirectory = this.state.currentDirectory;
let parentDirectory = currentDirectory.substring(0, currentDirectory.lastIndexOf('/'));
this.loadFiles(parentDirectory);
} else {
this.loadFiles(record['path']);
}
} else {
}
},
};
}}
/>
</Card>
{
this.state.mkdirVisible ?
<Modal
title="创建文件夹"
visible={this.state.mkdirVisible}
okButtonProps={{form: 'mkdir-form', key: 'submit', htmlType: 'submit'}}
onOk={() => {
this.mkdirFormRef.current
.validateFields()
.then(async values => {
this.mkdirFormRef.current.resetFields();
let params = {
'dir': this.state.currentDirectory + '/' + values['dir']
}
let paramStr = qs.stringify(params);
this.setState({
confirmLoading: true
})
let result = await request.post(`/${this.state.storageType}/${this.state.storageId}/mkdir?${paramStr}`);
if (result.code === 1) {
message.success('创建成功');
this.loadFiles(this.state.currentDirectory);
} else {
message.error(result.message);
}
this.setState({
confirmLoading: false,
mkdirVisible: false
})
})
.catch(info => {
});
}}
confirmLoading={this.state.confirmLoading}
onCancel={() => {
this.setState({
mkdirVisible: false
})
}}
>
<Form ref={this.mkdirFormRef} id={'mkdir-form'}>
<Form.Item name='dir' rules={[{required: true, message: '请输入文件夹名称'}]}>
<Input autoComplete="off" placeholder="请输入文件夹名称"/>
</Form.Item>
</Form>
</Modal> : undefined
}
{
this.state.renameVisible ?
<Modal
title="重命名"
visible={this.state.renameVisible}
okButtonProps={{form: 'rename-form', key: 'submit', htmlType: 'submit'}}
onOk={() => {
this.renameFormRef.current
.validateFields()
.then(async values => {
this.renameFormRef.current.resetFields();
try {
let currentDirectory = this.state.currentDirectory;
if (!currentDirectory.endsWith("/")) {
currentDirectory += '/';
}
let params = {
'oldName': this.state.currentFileKey,
'newName': currentDirectory + values['newName'],
}
if (params['oldName'] === params['newName']) {
message.success('重命名成功');
return;
}
let paramStr = qs.stringify(params);
this.setState({
confirmLoading: true
})
let result = await request.post(`/${this.state.storageType}/${this.state.storageId}/rename?${paramStr}`);
if (result['code'] === 1) {
message.success('重命名成功');
this.refresh();
} else {
message.error(result.message);
}
} finally {
this.setState({
confirmLoading: false,
renameVisible: false
})
}
})
.catch(info => {
});
}}
confirmLoading={this.state.confirmLoading}
onCancel={() => {
this.setState({
renameVisible: false
})
}}
>
<Form id={'rename-form'}
ref={this.renameFormRef}
initialValues={{newName: getFileName(this.state.currentFileKey)}}>
<Form.Item name='newName' rules={[{required: true, message: '请输入新的名称'}]}>
<Input autoComplete="off" placeholder="新的名称"/>
</Form.Item>
</Form>
</Modal> : undefined
}
<Modal
title={"编辑 " + this.state.fileName}
className='modal-no-padding'
visible={this.state.editorVisible}
destroyOnClose={true}
width={window.innerWidth * 0.8}
centered={true}
okButtonProps={{form: 'rename-form', key: 'submit', htmlType: 'submit'}}
onOk={this.edit}
confirmLoading={this.state.confirmLoading}
onCancel={this.hideEditor}
>
<MonacoEditor
language="javascript"
height={window.innerHeight * 0.8}
theme="vs-dark"
value={this.state.fileContent}
options={{
selectOnLineNumbers: true
}}
editorDidMount={(editor, monaco) => {
console.log('editorDidMount', editor);
editor.focus();
}}
onChange={(newValue, e) => {
console.log('onChange', newValue, e);
this.setState(
{
fileContent: newValue
}
)
}}
/>
</Modal>
</div>
);
}
Example #7
| Source File: Info.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
let contentClassName = isAdmin() ? 'page-content' : 'page-content-user';
return (
<>
<Content className={["site-layout-background", contentClassName]}>
<Row>
<Col span={12}>
<Title level={3}>修改密码</Title>
<Form ref={this.passwordFormRef} name="password" onFinish={this.changePassword}>
<input type='password' hidden={true} autoComplete='new-password'/>
<Form.Item
{...formItemLayout}
name="oldPassword"
label="原始密码"
rules={[
{
required: true,
message: '原始密码',
},
]}
>
<Input type='password' placeholder="请输入原始密码" style={{width: 240}}/>
</Form.Item>
<Form.Item
{...formItemLayout}
name="newPassword"
label="新的密码"
rules={[
{
required: true,
message: '请输入新的密码',
},
]}
>
<Input type='password' placeholder="新的密码"
onChange={(value) => this.onNewPasswordChange(value)} style={{width: 240}}/>
</Form.Item>
<Form.Item
{...formItemLayout}
name="newPassword2"
label="确认密码"
rules={[
{
required: true,
message: '请和上面输入新的密码保持一致',
},
]}
validateStatus={this.state.validateStatus}
help={this.state.errorMsg || ' '}
>
<Input type='password' placeholder="请和上面输入新的密码保持一致"
onChange={(value) => this.onNewPassword2Change(value)} style={{width: 240}}/>
</Form.Item>
<Form.Item {...formTailLayout}>
<Button disabled={this.state.errorMsg || !this.state.validateStatus} type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
<Divider/>
</Col>
<Col span={12}>
<Title level={3}>授权信息</Title>
<Descriptions column={1}>
<Descriptions.Item label="授权令牌">
<Text strong copyable>{this.state.accessToken.token}</Text>
</Descriptions.Item>
<Descriptions.Item label="生成时间">
<Text strong>{this.state.accessToken.created}</Text>
</Descriptions.Item>
</Descriptions>
<Space>
<Button type="primary" onClick={this.genAccessToken}>
重新生成
</Button>
</Space>
</Col>
</Row>
<Title level={3}>双因素认证</Title>
<Form hidden={this.state.qr}>
<Form.Item {...formItemLayout}>
{
this.state.user.enableTotp ?
<Result
status="success"
title="您已成功开启双因素认证!"
subTitle="多因素认证-MFA二次认证-登录身份鉴别,访问控制更安全。"
extra={[
<Button type="primary" key="console" danger onClick={() => {
confirm({
title: '您确认要解除双因素认证吗？',
icon: <ExclamationCircleOutlined/>,
content: '解除之后可能存在系统账号被暴力破解的风险。',
okText: '确认',
okType: 'danger',
cancelText: '取消',
onOk: async () => {
let result = await request.post('/account/reset-totp');
if (result.code === 1) {
message.success('双因素认证解除成功');
await this.loadInfo();
} else {
message.error(result.message);
}
},
onCancel() {
console.log('Cancel');
},
})
}}>
解除绑定
</Button>,
<Button key="re-bind" onClick={this.resetTOTP}>重新绑定</Button>,
]}
/> :
<Result
status="warning"
title="您还未开启双因素认证！"
subTitle="系统账号存在被暴力破解的风险。"
extra={
<Button type="primary" key="bind" onClick={this.resetTOTP}>
去开启
</Button>
}
/>
}
</Form.Item>
</Form>
<Form hidden={!this.state.qr} onFinish={this.confirmTOTP}>
<Form.Item {...formItemLayout} label="二维码">
<Space size={12}>
<Card
hoverable
style={{width: 280}}
cover={<Image
style={{padding: 20}}
width={280}
src={"data:image/png;base64, " + this.state.qr}
/>
}
>
<Meta title="双因素认证二维码"
description="有效期30秒，在扫描后请尽快输入。推荐使用Google Authenticator, Authy 或者 Microsoft Authenticator。"/>
</Card>
<Button
type="primary"
icon={<ReloadOutlined/>}
onClick={this.resetTOTP}
>
重新加载
</Button>
</Space>
</Form.Item>
<Form.Item
{...formItemLayout}
name="totp"
label="TOTP"
rules={[
{
required: true,
message: '请输入双因素认证APP中显示的授权码',
},
]}
>
<Input placeholder="请输入双因素认证APP中显示的授权码"/>
</Form.Item>
<Form.Item {...formTailLayout}>
<Button type="primary" htmlType="submit">
确认
</Button>
</Form.Item>
</Form>
</Content>
</>
);
}
Example #8
| Source File: tasks.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
const { taskKey, task } = this.state;
return (
<>
<PageHeader
title="Tasks"
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={16} className="height-100 tree-height-100">
<Col className="max-height-100" span={5}>
<Tree
showIcon
blockNode
treeData={this.state.data}
onSelect={this.onSelect}
selectedKeys={[taskKey]}
style={{
height: '100%',
paddingRight: '.5rem',
overflow: 'auto',
background: '#0a0a0a',
border: '1px solid #303030'
}}
/>
</Col>
<Col className="max-height-100" span={19}>
{task ? (
<Row gutter={[16, 14]} className="height-100" style={{ flexDirection: "column", flexWrap: "nowrap" }}>
<Col flex="0 0 auto">
<Row gutter={[16, 14]}>
<Col span={24}>
<PageHeader
title={task.id}
tags={
task.stats.hasOwnProperty("status") ? (
HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Tag color="warning">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Tag color="processing">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Tag color="error">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Tag color="success">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Tag color="pink">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Tag color="yellow">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : (
<Tag color="default">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
)
) : null
}
style={{ padding: 0 }}
extra={
<Form layout="inline">
<Form.Item
label="Priority"
>
<InputNumber
min={-1}
max={999}
value={task.priority}
onChange={this.onChangePriority}
readOnly={this.state.isReadOnlyPriority}
bordered={false}
/>
</Form.Item>
<Button
icon={<ControlOutlined />}
onClick={this.onClickArguments}
style={{ marginRight: '1rem' }}
>
Arguments
</Button>
<Popconfirm
placement="topRight"
title="Are you sure you want to delete this task?"
onConfirm={this.onClickDelete}
okText="Yes"
cancelText="No"
>
<Button
type="danger"
icon={<DeleteOutlined />}
loading={this.state.isLoadingDelete}
>
Delete
</Button>
</Popconfirm>
</Form>
}
/>
</Col>
<Col span={24}>
{task.stats.hasOwnProperty("progress") ? (
<Progress type="line" percent={Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100)} />
) : (
<Progress type="line" percent={0} />
)}
</Col>
<Col span={24}>
<Row gutter={[12, 10]}>
<Col>
<Button
type="primary"
icon={<PlayCircleOutlined />}
onClick={this.onClickStart}
loading={this.state.isLoadingStart}
>
Start
</Button>
</Col>
<Col>
<Button
icon={<ReloadOutlined />}
onClick={this.onClickRefresh}
loading={this.state.isLoadingRefresh}
>
Refresh
</Button>
</Col>
<Col>
<Button
icon={<PauseOutlined />}
onClick={this.onClickPause}
loading={this.state.isLoadingPause}
>
Pause
</Button>
</Col>
<Col>
<Button
icon={<CaretRightOutlined />}
onClick={this.onClickResume}
loading={this.state.isLoadingResume}
>
Resume
</Button>
</Col>
<Col>
<Button
icon={<EnvironmentOutlined />}
onClick={this.onClickCheckpoint}
loading={this.state.isLoadingCheckpoint}
>
Checkpoint
</Button>
</Col>
<Col>
<Button
icon={<StepForwardOutlined />}
onClick={this.onClickSkip}
loading={this.state.isLoadingSkip}
>
Skip
</Button>
</Col>
<Col>
<Popconfirm
placement="topRight"
title="Are you sure you want to quit this task?"
onConfirm={this.onClickQuit}
okText="Yes"
cancelText="No"
>
<Button
type="danger"
icon={<CloseOutlined />}
loading={this.state.isLoadingQuit}
>
Quit
</Button>
</Popconfirm>
</Col>
</Row>
</Col>
</Row>
</Col>
<Col flex="1 1 auto">
<Row gutter={[16, 14]} className="height-100">
<Col className="max-height-100" span={16}>
<Descriptions
column={2}
layout="horizontal"
bordered
>
{task.stats.hasOwnProperty("status") && (
<Descriptions.Item label="Status" span={2}>
{HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="warning" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="processing" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Badge status="error" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Badge status="success" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Badge color="pink" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Badge color="yellow" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : (
<Badge status="default" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
)}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("target") && (
<Descriptions.Item label="Target" span={2}>
{task.stats["target"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("progress") && (
<Descriptions.Item label="Progress" span={2}>
{task.stats["progress"][0] + " / " + task.stats["progress"][1] + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"}
{task.stats.hasOwnProperty("guess") && (
<Tooltip title={
<Descriptions bordered size="small" column={1} layout="horizontal">
{task.stats.guess.guess_base !== null ? (
<Descriptions.Item label="Guess Base">{task.stats.guess.guess_base} ({task.stats.guess.guess_base_offset}/{task.stats.guess.guess_base_count})</Descriptions.Item>
) : (
<Descriptions.Item label="Guess Base">-</Descriptions.Item>
)}
{task.stats.guess.guess_mod !== null ? (
<Descriptions.Item label="Guess Mod">{task.stats.guess.guess_mod} ({task.stats.guess.guess_mod_offset}/{task.stats.guess.guess_mod_count})</Descriptions.Item>
) : (
<Descriptions.Item label="Guess Mod">-</Descriptions.Item>
)}
</Descriptions>
}>
<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
</Tooltip>
)}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("rejected") && (
<Descriptions.Item label="Rejected" span={1}>
{task.stats["rejected"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("restore_point") && (
<Descriptions.Item label="Restore point" span={1}>
{task.stats["restore_point"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("recovered_hashes") && (
<Descriptions.Item label="Recovered hashes" span={1}>
{task.stats["recovered_hashes"][0] + " / " + task.stats["recovered_hashes"][1] + " (" + Math.trunc((task.stats["recovered_hashes"][0] / task.stats["recovered_hashes"][1])*100) + "%)"}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("recovered_salts") && (
<Descriptions.Item label="Recovered salts" span={1}>
{task.stats["recovered_salts"][0] + " / " + task.stats["recovered_salts"][1] + " (" + Math.trunc((task.stats["recovered_salts"][0] / task.stats["recovered_salts"][1])*100) + "%)"}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("devices") && (
<Descriptions.Item label="Speed" span={2}>
{humanizeSpeed(totalSpeed(task.stats["devices"]))}
<Tooltip title={
<Table
columns={[
{
title: 'ID',
dataIndex: 'id',
key: 'ID'
},
{
title: 'Speed',
dataIndex: 'speed',
key: 'Speed'
},
{
title: 'Temp',
dataIndex: 'temp',
key: 'Temp'
},
{
title: 'Util',
dataIndex: 'util',
key: 'Util'
}
]}
dataSource={task.stats["devices"].map(device =>
({
key: device.device_id,
id: device.device_id,
speed: humanizeSpeed(device.speed),
temp: device.hasOwnProperty("temp") ? device.temp + " °C": "-",
util: device.util + "%",
})
)}
size="small"
pagination={false}
style={{ overflow: 'auto' }}
/>
}>
<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
</Tooltip>
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("time_start") && (
<Descriptions.Item label="Started" span={1}>
<Tooltip title={moment.unix(task.stats["time_start"]).format("MMMM Do YYYY, HH:mm")}>
{moment.unix(task.stats["time_start"]).fromNow()}
</Tooltip>
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("estimated_stop") && (
<Descriptions.Item label="ETA" span={1}>
<Tooltip title={moment.unix(task.stats["estimated_stop"]).format("MMMM Do YYYY, HH:mm")}>
{moment.unix(task.stats["estimated_stop"]).fromNow()}
</Tooltip>
</Descriptions.Item>
)}
</Descriptions>
</Col>
<Col className="max-height-100" span={8}>
<div className="height-100" style={{ display: "flex", flexDirection: "column" }}>
<span><CodeOutlined /> Terminal</span>
<pre style={{
flex: 'auto',
overflow: 'auto',
padding: '.5rem',
margin: '0',
border: '1px solid #303030'
}}>
{task.journal.map(j => j.message + "\n")}
</pre>
</div>
</Col>
</Row>
</Col>
</Row>
) : (
"No selected task."
)}
</Col>
</Row>
</Content>
</>
)
}
