From: Zhiting Lin Date: Wed, 27 Jun 2018 06:05:21 +0000 (+0800) Subject: redesign backup page. X-Git-Url: http://git.sourceforge.jp/view?a=commitdiff_plain;h=7af57f7aaecfbfbe4fc7b0aaa3281d85b4972cfd;p=bytom%2Fbytom-dashboard.git redesign backup page. --- diff --git a/src/actions.js b/src/actions.js index 9c2906f..6065186 100644 --- a/src/actions.js +++ b/src/actions.js @@ -2,6 +2,7 @@ import accessControl from 'features/accessControl/actions' import { actions as account } from 'features/accounts' import { actions as app } from 'features/app' import { actions as asset } from 'features/assets' +import { actions as backUp } from 'features/backup' import { actions as balance } from 'features/balances' import { actions as configuration } from 'features/configuration' import { actions as core } from 'features/core' @@ -17,6 +18,7 @@ const actions = { account, app, asset, + backUp, balance, configuration, core, diff --git a/src/features/backup/actions.js b/src/features/backup/actions.js new file mode 100644 index 0000000..fb43c44 --- /dev/null +++ b/src/features/backup/actions.js @@ -0,0 +1,34 @@ +import { chainClient } from 'utility/environment' + +let actions = { + rescan: () => { + return (dispatch) => { + return chainClient().backUp.rescan() + .then((resp) => { + if (resp.status === 'fail') { + dispatch({type: 'ERROR', payload: { 'message': resp.msg}}) + }else { + dispatch({type: 'START_RESCAN'}) + } + }) + .catch(err => { throw {_error: err} }) + } + }, + + restore: (backupData) => { + return (dispatch) => { + return chainClient().backUp.restore(backupData) + .then(resp => { + if (resp.status === 'fail') { + dispatch({type: 'ERROR', payload: { 'message': resp.msg}}) + }else { + dispatch({type: 'RESTORE_SUCCESS'}) + } + }) + .catch(err => { throw {_error: err} }) + } + }, + +} + +export default actions diff --git a/src/features/backup/components/Backup.jsx b/src/features/backup/components/Backup.jsx index 3b00b7b..e201306 100644 --- a/src/features/backup/components/Backup.jsx +++ b/src/features/backup/components/Backup.jsx @@ -4,31 +4,42 @@ import {PageContent, PageTitle} from 'features/shared/components' import styles from './Backup.scss' import {connect} from 'react-redux' import {chainClient} from 'utility/environment' +import actions from 'actions' class Backup extends React.Component { constructor(props) { super(props) - this.connection = chainClient().connection + this.state = { + value: null + } } - backup() { - this.connection.request('/backup-wallet').then(resp => { - const date = new Date() - const dateStr = date.toLocaleDateString().split(' ')[0] - const timestamp = date.getTime() - const fileName = ['bytom-wallet-backup-', dateStr, timestamp].join('-') - - var element = document.createElement('a') - element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(resp.data))) - element.setAttribute('download', fileName) - element.style.display = 'none' - document.body.appendChild(element) - element.click() - - document.body.removeChild(element) + setValue(event) { + this.setState({ + value:event.target.value }) } + backup() { + chainClient().backUp.backup() + .then(resp => { + const date = new Date() + const dateStr = date.toLocaleDateString().split(' ')[0] + const timestamp = date.getTime() + const fileName = ['bytom-wallet-backup-', dateStr, timestamp].join('-') + + let element = document.createElement('a') + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(resp.data))) + element.setAttribute('download', fileName) + element.style.display = 'none' + document.body.appendChild(element) + element.click() + + document.body.removeChild(element) + }) + .catch(err => { throw {_error: err} }) + } + handleFileChange(event) { const files = event.target.files if (files.length <= 0) { @@ -39,13 +50,7 @@ class Backup extends React.Component { const fileReader = new FileReader() fileReader.onload = fileLoadedEvent => { const backupData = JSON.parse(fileLoadedEvent.target.result) - this.connection.request('/restore-wallet', backupData).then(resp => { - if (resp.status === 'fail') { - this.props.showError(new Error(resp.msg)) - return - } - this.props.showRestoreSuccess() - }) + this.props.restoreFile(backupData) } fileReader.readAsText(files[0], 'UTF-8') @@ -60,22 +65,103 @@ class Backup extends React.Component { render() { const lang = this.props.core.lang - const newButton = - const restoreButton = + const rescanButton = return ( -
+
- {newButton} -
- {restoreButton} - + +
this.setValue(e)}> +
+
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+
+ { + this.state.value === 'backup' + &&{newButton} + } +
+ +
+ { + this.state.value === 'restore' + && + {restoreButton} + } + +
+
+ { + this.state.value === 'rescan' + && + {rescanButton} + } +
+
+
+
) @@ -88,10 +174,9 @@ const mapStateToProps = (state) => ({ }) const mapDispatchToProps = (dispatch) => ({ - showError: (err) => { - dispatch({type: 'ERROR', payload: err}) - }, - showRestoreSuccess: () => dispatch({type: 'RESTORE_SUCCESS'}) + backup: () => dispatch(actions.backUp.backup()), + rescan: () => dispatch(actions.backUp.rescan()), + restoreFile: (backUpFile) => dispatch(actions.backUp.restore(backUpFile)), }) export default connect( diff --git a/src/features/backup/components/Backup.scss b/src/features/backup/components/Backup.scss index b83ce21..e902b39 100644 --- a/src/features/backup/components/Backup.scss +++ b/src/features/backup/components/Backup.scss @@ -1,144 +1,152 @@ -.page_header h1 { - margin-bottom: 0; +.mainContainer { + background-color: $background-color; +} + +code { + padding-left: 0; + font-size: $font-size-code; } -.table { - margin-bottom: $grid-gutter-width; +.choices { + display: flex; + flex-wrap: wrap; + justify-content: space-between; - td { - vertical-align: top; + > div { + width: 30%; + min-height: 100%; } } -.row_label { - padding-right: $grid-gutter-width; - text-transform: capitalize; - font-weight: 500; - white-space: pre; -} +.choice_wrapper { + display: flex; + min-height: 100%; -.row_value { - white-space: pre; - text-align: right; + > label { + display: flex; + min-height:100%; + font-weight: normal; + } } -.block_hash { - display: block; - word-wrap: break-word; - word-break: break-all; +.choice_radio_button { + position: absolute; + visibility: hidden; } -.flex { - display: flex; - //overflow:hidden; -} +.choice { + border: 1px solid $table-border-color; + border-radius: $border-radius-base; + cursor: pointer; + min-height: 100%; + padding: 20px $grid-gutter-width; + padding-top: 110px; + text-align: center; -.col { - display: flex; - width: 50%; - padding: $grid-gutter-width; - h4 { - margin-top: 0; + background-color: $background-color; + background-repeat: no-repeat; + background-position: center 25px; + background-size: 90px 90px; + + &:hover { + background-color: $background-emphasis-color; } -} -.sub-row { - padding: $grid-gutter-width $grid-gutter-width 0; -} + &.disabled { + cursor: default; + background-color: $background-emphasis-color; + opacity: 0.75; -.top { - border-bottom: 1px solid $border-color; -} + .choice_title { + color: $text-light-color; + } + } -.left { - padding-left: 0; - width: 67%; -} + p { + line-height: 1.4; + } -.right { - border-left: 1px solid $border-color; - width: 33%; -} + svg { + display: block; + margin: 0 auto; + width: 80px; + height: 80px; + } -.replication_lag { - display: inline-block; - float: right; - border-radius: $border-radius-base; - color: white; - padding: 0 8px; - line-height: 1.5; - margin-top: 2px; - margin-left: -8px; + .choice_title{ + display: block; + font-size: $font-size-section-title; + margin: 12px 0; + color: $text-strong-color; + font-weight: 600; + } } -.green { - background: $highlight-secondary; +.new { + background-image: url('images/config/new.png') } -.yellow { - background: $brand-warning; +.join { + background-image: url('images/config/join.png') } -.red { - background: darken($highlight-danger-background, 20%); +.testnet { + background-image: url('images/config/testnet.png') } -.mainContainer { - background-color: $background-color; -} +input[type=radio]:checked ~ .choice { + strong { + color: $text-danger; + } -code { - padding-left: 0; - font-size: $font-size-code; -} + &:hover { + background-color: $background-color; + } -.switch { - position: relative; - display: inline-block; - width: 44px; - height: 22px; + &.new { + background-image: url('images/config/new-active.png') + } - /* Hide default HTML checkbox */ - input {display:none;} + &.join { + background-image: url('images/config/join-active.png') + } - input:checked + .slider { - background-color: $highlight-default; + &.testnet { + background-image: url('images/config/testnet-active.png') } - input:focus + .slider { - box-shadow: 0 0 1px $highlight-default; + + .choice_title { + color: $brand-primary; } - input:checked + .slider:before { - -webkit-transform: translateX(22px); - -ms-transform: translateX(22px); - transform: translateX(22px); + svg { + polygon { + stroke: $brand-primary; + fill: transparentize($brand-primary, 0.85); + } + + rect, path { + fill: $brand-primary + } } } -/* The slider */ -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; - border-radius: 34px; +.submitWrapper { + display: block; + margin-top: 30px; +} + +.submit { + display: block; + width: 100%; + margin-top: $gutter-size; +} + +.infoLink { + position: relative; + left: 4px; + top: 1px; + color:$text-light-color; } -.slider:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - left: 2px; - bottom: 2px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; - border-radius: 50%; -} \ No newline at end of file diff --git a/src/features/backup/index.js b/src/features/backup/index.js index be538be..b133bca 100644 --- a/src/features/backup/index.js +++ b/src/features/backup/index.js @@ -1,5 +1,7 @@ +import actions from './actions' import routes from './routes' export { + actions, routes, } diff --git a/src/sdk/api/backUp.js b/src/sdk/api/backUp.js new file mode 100644 index 0000000..9f0164b --- /dev/null +++ b/src/sdk/api/backUp.js @@ -0,0 +1,22 @@ +const shared = require('../shared') + +const backUp = (client) => { + return { + backup: (cb) => shared.tryCallback( + client.request('/backup-wallet'), + cb + ), + + restore: (opts = {}, cb) => shared.tryCallback( + client.request('/restore-wallet', opts), + cb + ), + + rescan: (cb) => shared.tryCallback( + client.request('/rescan-wallet'), + cb + ), + } +} + +module.exports = backUp diff --git a/src/sdk/client.js b/src/sdk/client.js index 697a14d..bb39011 100644 --- a/src/sdk/client.js +++ b/src/sdk/client.js @@ -3,6 +3,7 @@ const authorizationGrantsAPI = require('./api/authorizationGrants') const accessTokensAPI = require('./api/accessTokens') const accountsAPI = require('./api/accounts') const assetsAPI = require('./api/assets') +const backUpAPI = require('./api/backUp') const balancesAPI = require('./api/balances') const bytomCLI = require('./api/bytomCLI') const configAPI = require('./api/config') @@ -34,6 +35,8 @@ class Client { this.assets = assetsAPI(this) + this.backUp = backUpAPI(this) + this.balances = balancesAPI(this) this.bytomCli = bytomCLI(this)