lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

added settings/about modal to login ui

all-modes
pbca26 8 years ago
parent
dc379b2b58
commit
507bb0f186
9 changed files with 222 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      react/change.log
  2. 8
      react/src/actions/actionCreators.js
  3. 3
      react/src/actions/storeType.js
  4. 6
      react/src/components/dashboard/settings/settings.js
  5. 227
      react/src/components/dashboard/settings/settings.render.js
  6. 24
      react/src/components/login/login.js
  7. 38
      react/src/components/login/login.render.js
  8. 26
      react/src/components/login/login.scss
  9. 8
      react/src/reducers/main.js

1
react/change.log
View File

@ -10,6 +10,7 @@ UI:
- komodod crash report modal
- values rounding (up to 6 decimals)
- add coin multi ui reflow fix
- reset app setting to default
v0.2.0.21a-beta
--------------

8
react/src/actions/actionCreators.js
View File

@ -25,6 +25,7 @@ import {
DASHBOARD_ACTIVE_COIN_CHANGE,
ACTIVE_COIN_GET_ADDRESSES,
DASHBOARD_ACTIVE_COIN_NATIVE_TXHISTORY,
DISPLAY_LOGIN_SETTINGS_MODAL,
DISPLAY_COIND_DOWN_MODAL,
START_INTERVAL,
STOP_INTERVAL
@ -358,4 +359,11 @@ export function toggleCoindDownModal(display) {
type: DISPLAY_COIND_DOWN_MODAL,
displayCoindDownModal: display,
}
}
export function toggleLoginSettingsModal(display) {
return {
type: DISPLAY_LOGIN_SETTINGS_MODAL,
displayLoginSettingsModal: display,
}
}

3
react/src/actions/storeType.js
View File

@ -44,4 +44,5 @@ export const LOAD_APP_INFO = 'LOAD_APP_INFO';
export const LOG_GUI_HTTP = 'LOG_GUI_HTTP';
export const CLI = 'CLI';
export const LOGOUT = 'LOGOUT';
export const DISPLAY_COIND_DOWN_MODAL = 'DISPLAY_COIND_DOWN_MODAL';
export const DISPLAY_COIND_DOWN_MODAL = 'DISPLAY_COIND_DOWN_MODAL';
export const DISPLAY_LOGIN_SETTINGS_MODAL = 'DISPLAY_LOGIN_SETTINGS_MODAL';

6
react/src/components/dashboard/settings/settings.js
View File

@ -62,6 +62,7 @@ class Settings extends React.Component {
updateProgressPatch: null,
wifkeysPassphrase: '',
trimPassphraseTimer: null,
disableWalletSpecificUI: null,
};
this.exportWifKeys = this.exportWifKeys.bind(this);
this.updateInput = this.updateInput.bind(this);
@ -82,7 +83,9 @@ class Settings extends React.Component {
}
componentDidMount() {
Store.dispatch(iguanaActiveHandle());
if (!this.props.disableWalletSpecificUI) {
Store.dispatch(iguanaActiveHandle());
}
Store.dispatch(getAppConfig());
Store.dispatch(getAppInfo());
}
@ -95,6 +98,7 @@ class Settings extends React.Component {
activeTab: this.state.activeTab,
activeTabHeight: _height,
tabElId: this.state.tabElId,
disableWalletSpecificUI: props.disableWalletSpecificUI,
}));
}
}

227
react/src/components/dashboard/settings/settings.render.js
View File

@ -156,57 +156,59 @@ export const SettingsRender = function() {
<div
className="panel-group"
id="SettingsAccordion">
<div
id="WalletInfo"
onClick={ () => this.openTab('WalletInfo', 0) }
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
<div className="panel-heading">
<a className={ 'panel-title' + (this.state.activeTab === 0 ? '' : ' collapsed') }>
<i className="icon md-balance-wallet"></i>{ translate('INDEX.WALLET_INFO') }
</a>
</div>
{ !this.props.disableWalletSpecificUI &&
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
style={{ height: this.state.activeTab === 0 ? `${this.state.activeTabHeight}px` : '0' }}>
<div className="panel-body">
<table className="table">
<thead>
<tr>
<th width="10%">{ translate('INDEX.KEY') }</th>
<th>{ translate('INDEX.VALUE') }</th>
</tr>
</thead>
<tbody>
<tr>
<td className="wallet-info-key">pubkey</td>
<td>{ this.props.Main.activeHandle.pubkey }</td>
</tr>
<tr>
<td className="wallet-info-key">btcpubkey</td>
<td>{ this.props.Main.activeHandle.btcpubkey }</td>
</tr>
<tr>
<td className="wallet-info-key">rmd160</td>
<td>{ this.props.Main.activeHandle.rmd160 }</td>
</tr>
<tr>
<td className="wallet-info-key">NXT</td>
<td>{ this.props.Main.activeHandle.NXT }</td>
</tr>
<tr>
<td className="wallet-info-key">notary</td>
<td>{ this.props.Main.activeHandle.notary }</td>
</tr>
<tr>
<td className="wallet-info-key">status</td>
<td>{ this.props.Main.activeHandle.status }</td>
</tr>
</tbody>
</table>
id="WalletInfo"
onClick={ () => this.openTab('WalletInfo', 0) }
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }>
<div className="panel-heading">
<a className={ 'panel-title' + (this.state.activeTab === 0 ? '' : ' collapsed') }>
<i className="icon md-balance-wallet"></i>{ translate('INDEX.WALLET_INFO') }
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
style={{ height: this.state.activeTab === 0 ? `${this.state.activeTabHeight}px` : '0' }}>
<div className="panel-body">
<table className="table">
<thead>
<tr>
<th width="10%">{ translate('INDEX.KEY') }</th>
<th>{ translate('INDEX.VALUE') }</th>
</tr>
</thead>
<tbody>
<tr>
<td className="wallet-info-key">pubkey</td>
<td>{ this.props.Main.activeHandle.pubkey }</td>
</tr>
<tr>
<td className="wallet-info-key">btcpubkey</td>
<td>{ this.props.Main.activeHandle.btcpubkey }</td>
</tr>
<tr>
<td className="wallet-info-key">rmd160</td>
<td>{ this.props.Main.activeHandle.rmd160 }</td>
</tr>
<tr>
<td className="wallet-info-key">NXT</td>
<td>{ this.props.Main.activeHandle.NXT }</td>
</tr>
<tr>
<td className="wallet-info-key">notary</td>
<td>{ this.props.Main.activeHandle.notary }</td>
</tr>
<tr>
<td className="wallet-info-key">status</td>
<td>{ this.props.Main.activeHandle.status }</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
}
{ !this.props.disableWalletSpecificUI &&
<div
id="AddNodeforCoin"
onClick={ () => this.openTab('AddNodeforCoin', 1) }
@ -292,7 +294,8 @@ export const SettingsRender = function() {
</div>
</div>
</div>
}
{ !this.props.disableWalletSpecificUI &&
<div
id="DumpWallet"
onClick={ () => this.openTab('DumpWallet', 2) }
@ -308,7 +311,8 @@ export const SettingsRender = function() {
<div className="panel-body">Wallet Backup section to be updated soon.</div>
</div>
</div>
}
{ !this.props.disableWalletSpecificUI &&
<div
id="FiatCurrencySettings"
onClick={ () => this.openTab('FiatCurrencySettings', 3) }
@ -324,7 +328,8 @@ export const SettingsRender = function() {
<div className="panel-body">Fiat currency settings section to be updated soon.</div>
</div>
</div>
}
{ !this.props.disableWalletSpecificUI &&
<div
id="ExportKeys"
onClick={ () => this.openTab('ExportKeys', 4) }
@ -401,7 +406,8 @@ export const SettingsRender = function() {
</div>
</div>
</div>
}
{ !this.props.disableWalletSpecificUI &&
<div
id="ImportKeys"
onClick={ () => this.openTab('ImportKeys', 5) }
@ -450,6 +456,7 @@ export const SettingsRender = function() {
</div>
</div>
</div>
}
<div
className="panel"
@ -548,67 +555,69 @@ export const SettingsRender = function() {
</div>
{ this.renderAppInfoTab() }
<div
id="Cli"
onClick={ () => this.openTab('Cli', 9) }
className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }>
<div className="panel-heading">
<a className={ 'panel-title' + (this.state.activeTab === 9 ? '' : ' collapsed') }>
<i className="icon fa-code"></i> CLI
</a>
</div>
{ this.props.Main && this.props.Main.coins.native &&
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
style={{ height: this.state.activeTab === 9 ? `${this.state.activeTabHeight}px` : '0' }}>
<div className="panel-body">
<p>{ translate('INDEX.CLI_SELECT_A_COIN') }</p>
<div className="col-sm-12"></div>
<form
className="execute-cli-cmd-form"
method="post"
action="javascript:"
autoComplete="off">
<div className="form-group form-material floating">
<select
className="form-control form-material"
name="cliCoin"
id="settingsCliOptions"
onChange={ this.updateInput }>
<option>{ translate('INDEX.CLI_NATIVE_COIN') }</option>
{ this.renderActiveCoinsList('native') }
</select>
<label
className="floating-label"
htmlFor="settingsDelectDebugLogOptions">{ translate('INDEX.COIN') }</label>
</div>
<div className="form-group form-material floating">
<textarea
type="text"
className="form-control"
name="cliCmd"
id="cliCmd"
value={ this.state.cliCmdString }
onChange={ this.updateInput }></textarea>
<label
className="floating-label"
htmlFor="readDebugLogLines">{ translate('INDEX.TYPE_CLI_CMD') }</label>
</div>
<div className="col-sm-12 col-xs-12 text-align-center">
<button
type="button"
className="btn btn-primary waves-effect waves-light"
disabled={ !this.state.cliCoin || !this.state.cliCmd }
onClick={ () => this.execCliCmd() }>{ translate('INDEX.EXECUTE') }</button>
</div>
<div className="col-sm-12 col-xs-12 text-align-left">
<div className="padding-top-40 padding-bottom-20 horizontal-padding-0">
{ this.renderCliResponse() }
id="Cli"
onClick={ () => this.openTab('Cli', 9) }
className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }>
<div className="panel-heading">
<a className={ 'panel-title' + (this.state.activeTab === 9 ? '' : ' collapsed') }>
<i className="icon fa-code"></i> CLI
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
style={{ height: this.state.activeTab === 9 ? `${this.state.activeTabHeight}px` : '0' }}>
<div className="panel-body">
<p>{ translate('INDEX.CLI_SELECT_A_COIN') }</p>
<div className="col-sm-12"></div>
<form
className="execute-cli-cmd-form"
method="post"
action="javascript:"
autoComplete="off">
<div className="form-group form-material floating">
<select
className="form-control form-material"
name="cliCoin"
id="settingsCliOptions"
onChange={ this.updateInput }>
<option>{ translate('INDEX.CLI_NATIVE_COIN') }</option>
{ this.renderActiveCoinsList('native') }
</select>
<label
className="floating-label"
htmlFor="settingsDelectDebugLogOptions">{ translate('INDEX.COIN') }</label>
</div>
</div>
</form>
<div className="form-group form-material floating">
<textarea
type="text"
className="form-control"
name="cliCmd"
id="cliCmd"
value={ this.state.cliCmdString }
onChange={ this.updateInput }></textarea>
<label
className="floating-label"
htmlFor="readDebugLogLines">{ translate('INDEX.TYPE_CLI_CMD') }</label>
</div>
<div className="col-sm-12 col-xs-12 text-align-center">
<button
type="button"
className="btn btn-primary waves-effect waves-light"
disabled={ !this.state.cliCoin || !this.state.cliCmd }
onClick={ () => this.execCliCmd() }>{ translate('INDEX.EXECUTE') }</button>
</div>
<div className="col-sm-12 col-xs-12 text-align-left">
<div className="padding-top-40 padding-bottom-20 horizontal-padding-0">
{ this.renderCliResponse() }
</div>
</div>
</form>
</div>
</div>
</div>
</div>
}
{ this.renderAppUpdateTab() }
</div>

24
react/src/components/login/login.js
View File

@ -8,7 +8,8 @@ import {
toggleSyncOnlyModal,
getSyncOnlyForks,
createNewWallet,
triggerToaster
triggerToaster,
toggleLoginSettingsModal
} from '../../actions/actionCreators';
import Config from '../../config';
import Store from '../../store';
@ -39,6 +40,8 @@ class Login extends React.Component {
isCustomSeedWeak: false,
nativeOnly: Config.iguanaLessMode,
trimPassphraseTimer: null,
displayLoginSettingsDropdown: false,
displayLoginSettingsDropdownSection: null,
};
this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
this.updateRegisterConfirmPassPhraseInput = this.updateRegisterConfirmPassPhraseInput.bind(this);
@ -51,11 +54,21 @@ class Login extends React.Component {
this.copyPassPhraseToClipboard = this.copyPassPhraseToClipboard.bind(this);
this.execWalletCreate = this.execWalletCreate.bind(this);
this.resizeLoginTextarea = this.resizeLoginTextarea.bind(this);
this.toggleLoginSettingsDropdown = this.toggleLoginSettingsDropdown.bind(this);
}
// the setInterval handler for 'activeCoins'
_iguanaActiveCoins = null;
toggleLoginSettingsDropdownSection(sectionName) {
Store.dispatch(toggleLoginSettingsModal(true));
this.setState({
displayLoginSettingsDropdown: false,
displayLoginSettingsDropdownSection: sectionName,
});
}
isCustomWalletSeed() {
return this.state.customWalletSeed;
}
@ -95,6 +108,9 @@ class Login extends React.Component {
);
Store.dispatch(toggleSyncOnlyModal(true));
this.setState({
displayLoginSettingsDropdown: false,
});
}
componentDidMount() {
@ -117,6 +133,12 @@ class Login extends React.Component {
}));
}
toggleLoginSettingsDropdown() {
this.setState(Object.assign({}, this.state, {
displayLoginSettingsDropdown: !this.state.displayLoginSettingsDropdown,
}));
}
componentWillReceiveProps(props) {
if (props &&
props.Main &&

38
react/src/components/login/login.render.js
View File

@ -1,9 +1,13 @@
import React from 'react';
import { translate } from '../../translate/translate';
import LoginSettingsModal from '../dashboard/loginSettingsModal/loginSettingsModal';
const LoginRender = function () {
return (
<div>
<LoginSettingsModal
{...this.props}
section={ this.state.displayLoginSettingsDropdownSection } />
{ this.renderSwallModal() }
<div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle col-xs-12 col-sm-6 col-sm-offset-3">
@ -16,12 +20,34 @@ const LoginRender = function () {
alt="SuperNET Iguana" />
</div>
<div className={ this.state.nativeOnly ? 'hide' : 'vertical-padding-20 horizontal-padding-0' }>
<span
className="display-sync-only-coins-toggle"
onClick={ this.openSyncOnlyModal }>
<i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
</span>
<div className="login-settings-dropdown margin-bottom-30">
<div>
<span
className="login-settings-dropdown-trigger"
onClick={ this.toggleLoginSettingsDropdown }>
<i className="icon fa-cogs"></i>&nbsp;
<span className="login-settings-dropdown-label">Settings</span>
</span>
</div>
<div>
<ul className={ this.state.displayLoginSettingsDropdown ? 'dropdown-menu show' : 'hide' }>
<li>
<a onClick={ () => this.toggleLoginSettingsDropdownSection('settings') }>
<i className="icon md-settings"></i> { translate('INDEX.SETTINGS') }
</a>
</li>
<li className={ this.state.nativeOnly ? 'hide' : '' }>
<a onClick={ this.openSyncOnlyModal }>
<i className="icon fa-cubes"></i> { translate('ADD_COIN.SYNC_ONLY') }
</a>
</li>
<li>
<a onClick={ () => this.toggleLoginSettingsDropdownSection('about') }>
<i className="icon fa-users"></i> { translate('INDEX.ABOUT_IGUANA') }
</a>
</li>
</ul>
</div>
</div>
<div className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>

26
react/src/components/login/login.scss
View File

@ -126,4 +126,30 @@ input[type="password"] {
.floating-label {
font-size: 13px;
}
}
.login-settings-dropdown {
font-size: 16px;
.dropdown-menu {
left: 42%;
top: inherit;
}
}
.login-settings-dropdown-trigger {
cursor: pointer;
}
.login-settings-modal {
.modal-body {
overflow-y: scroll;
color: #757575;
}
.panel-title {
color: #757575;
}
a {
color: #fb8c00;
}
}

8
react/src/reducers/main.js
View File

@ -1,12 +1,14 @@
import {
GET_ACTIVE_COINS,
LOGIN,
ACTIVE_HANDLE
ACTIVE_HANDLE,
DISPLAY_LOGIN_SETTINGS_MODAL
} from '../actions/storeType';
export function Main(state = {
isLoggedIn: false,
activeCoins: [],
displayLoginSettingsModal: false,
}, action) {
switch (action.type) {
case GET_ACTIVE_COINS:
@ -23,6 +25,10 @@ export function Main(state = {
isLoggedIn: action.isLoggedIn,
activeHandle: action.handle,
});
case DISPLAY_LOGIN_SETTINGS_MODAL:
return Object.assign({}, state, {
displayLoginSettingsModal: action.displayLoginSettingsModal,
});
default:
return state;
}

Write Preview
Loading…
Cancel
Save