Skip to content
This repository has been archived by the owner on Sep 5, 2020. It is now read-only.

Changes to onboarding screen #786

Merged
merged 10 commits into from
Jun 8, 2016
2 changes: 1 addition & 1 deletion interface/client/styles/onboardingScreen.import.less
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@

input {
background-color: transparent;
border-bottom: dashed 1px @colorLinkActive;
border-bottom: dashed 1px;
}

input.name {
Expand Down
39 changes: 25 additions & 14 deletions interface/client/templates/popupWindows/onboardingScreen.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,20 @@ <h1>{{i18n "mist.popupWindows.onboarding.accountTitle"}} </h1>
</div>

<div class="col col-6 col-deposit">
{{> dapp_identicon identity=(TemplateVar.get "newAccount")}}
<div class="you"> {{i18n "mist.popupWindows.onboarding.you"}} </div>
<input type="text" value="{{i18n 'mist.popupWindows.onboarding.etherbase'}}" class="name" disabled>
<h6 class="address"> {{TemplateVar.get "newAccount"}} </h6>

{{#unless TemplateVar.get "testnet"}}
<a href="https://shapeshift.io/shifty.html?destination={{newAccountLowerCase}}&amp;output=ETH&amp;apiKey=ef8312d8c9b9dda64fb852e8683eac6c33123f8743ff11383fb3bab29a364c01c27343fced4e628db8d5d66d763565763f8699c0fc903ec23db31cb908a944c8&amp;amount=1" class="button dapp-block-button dapp-small shapeshift" target="_popup"> {{i18n "mist.popupWindows.onboarding.depositBitcoin"}} </a>
{{/unless}}
{{#if TemplateVar.get "newAccount"}}
{{> dapp_identicon identity=(TemplateVar.get "newAccount")}}
<div class="you"> {{i18n "mist.popupWindows.onboarding.you"}} </div>
<input type="text" value="{{i18n 'mist.popupWindows.onboarding.etherbase'}}" class="name" disabled>
<h6 class="address"> {{TemplateVar.get "newAccount"}} </h6>

{{#unless TemplateVar.get "testnet"}}
<a href="https://shapeshift.io/shifty.html?destination={{newAccountLowerCase}}&amp;output=ETH&amp;apiKey=ef8312d8c9b9dda64fb852e8683eac6c33123f8743ff11383fb3bab29a364c01c27343fced4e628db8d5d66d763565763f8699c0fc903ec23db31cb908a944c8" class="button dapp-block-button dapp-small shapeshift" target="_popup"> {{i18n "mist.popupWindows.onboarding.depositBitcoin"}} </a>
<h6> {{{i18n "mist.popupWindows.onboarding.viaShapeshift"}}} </h6>
{{/unless}}
{{/if}}
</div>
<div class="col col-12 footer-buttons">
<button class="goto-password"> {{i18n "buttons.back"}} </button>
<button class="goto-start"> {{i18n "buttons.back"}} </button>
<button class="goto-tutorial-1 right-align"> {{i18n "buttons.next"}} </button>
</div>
</div>
Expand All @@ -76,7 +79,7 @@ <h1> {{i18n "mist.popupWindows.onboarding.learnIt"}} </h1>
</div>
<div class="col col-6 tutorial-token"></div>
<div class="col col-12 footer-buttons">
<button class="goto-account"> {{i18n "buttons.back"}} </button>
<button class="goto-start"> {{i18n "buttons.back"}} </button>
<button class="goto-tutorial-2 right-align"> {{i18n "buttons.next"}} </button>
</div>
</div>
Expand Down Expand Up @@ -108,11 +111,15 @@ <h1> {{i18n "mist.popupWindows.onboarding.learnIt"}} </h1>
</div>

<footer>
<progress value="{{#with TemplateVar.get "syncing"}}{{progress}}{{/with}}" max="100"></progress>
<progress value="{{#with TemplateVar.get 'syncing'}}{{progress}}{{/with}}" max="100"></progress>

{{#with TemplateVar.get "syncing"}}
<div class="status"> {{i18n "mist.popupWindows.onboarding.downloadingBlocks"}} ({{TemplateVar.get "peerCount"}} {{i18n 'mist.nodeInfo.peers'}})</div>
<div class="blocks"> {{i18n "mist.popupWindows.onboarding.block"}} {{dapp_formatNumber currentBlock}} of {{dapp_formatNumber highestBlock}}</div>
<div class="blocks">

{{ syncStatus }}

</div>
{{else}}
{{#if TemplateVar.get 'readyToLaunch'}}
<button class="launch-app"> {{i18n "mist.popupWindows.onboarding.buttons.launchApp"}} </button>
Expand Down Expand Up @@ -170,14 +177,18 @@ <h1> {{i18n "mist.popupWindows.onboarding.protectTitle"}} </h1>
<span class="dapp-identicon dapp-icon-loading"></span>
<h2 style="display: block; text-align: center;">{{i18n "mist.popupWindows.onboarding.creating"}}</h2>
{{else}}
<input type="password" placeholder="{{i18n 'mist.popupWindows.requestAccount.enterPassword'}}" class="password">
<input type="password" placeholder="{{i18n 'mist.popupWindows.requestAccount.repeatPassword'}}" class='password-repeat'>
<input type="password" placeholder="{{i18n 'mist.popupWindows.requestAccount.enterPassword'}}" class="password {{#if TemplateVar.get 'passwordsMismatch'}}dapp-error{{/if}}">
<input type="password" placeholder="{{i18n 'mist.popupWindows.requestAccount.repeatPassword'}}" class="password-repeat {{#if TemplateVar.get 'passwordsMismatch'}}dapp-error{{/if}}">
{{/if}}
</div>

<div class="col col-12 footer-buttons">
<button class="goto-start" type="button"> {{i18n "buttons.back"}} </button>
{{#if TemplateVar.get "passwordsNotEmpty"}}
<button class="create-account right-align" type="submit"> {{i18n "buttons.next"}} </button>
{{else}}
<button class="goto-tutorial-1 right-align"> {{i18n "buttons.skip"}} </button>
{{/if}}
</div>
</form>
</template>
66 changes: 53 additions & 13 deletions interface/client/templates/popupWindows/onboardingScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ var getPeerCount = function(template) {
Template['popupWindows_onboardingScreen'].onCreated(function(){
var template = this;
TemplateVar.set('readyToLaunch', false);

TemplateVar.set('newAccount', false);

// check for block status
this.syncFilter = web3.eth.isSyncing(function(error, syncing) {
Expand All @@ -40,11 +40,9 @@ Template['popupWindows_onboardingScreen'].onCreated(function(){
web3.reset(true);

} else if(_.isObject(syncing)) {

syncing.progress = Math.floor(((syncing.currentBlock - syncing.startingBlock) / (syncing.highestBlock - syncing.startingBlock)) * 100);
syncing.blockDiff = numeral(syncing.highestBlock - syncing.currentBlock).format('0,0');

TemplateVar.set(template, 'syncing', syncing);
// loads syncing data and adds it to old by using 'extend'
var oldData = TemplateVar.get(template, 'syncing');
TemplateVar.set(template, 'syncing', _.extend(oldData||{}, syncing||{}));

} else {
TemplateVar.set(template, 'syncing', false);
Expand Down Expand Up @@ -78,6 +76,35 @@ Template['popupWindows_onboardingScreen'].helpers({
'newAccountLowerCase': function(){
var account = TemplateVar.get('newAccount');
return (account) ? account.toLowerCase() : '';
},
/**
Updates the Sync Message live

@method syncStatus
*/
'syncStatus' : function() {

// This functions loops trhough numbers while waiting for the node to respond
var template = Template.instance();
Meteor.clearInterval(template._intervalId);

// Create an interval to quickly iterate trough the numbers
template._intervalId = Meteor.setInterval(function(){
// load the sync information
var syncing = TemplateVar.get(template, 'syncing');
// Calculates a block t display that is always getting 1% closer to target
syncing._displayBlock = ( syncing._displayBlock + (syncing.currentBlock - syncing._displayBlock) / 100 )|| syncing.currentBlock;
syncing.progress = Math.floor(((syncing._displayBlock - syncing.startingBlock) / (syncing.highestBlock - syncing.startingBlock)) * 100);
syncing.blockDiff = numeral(syncing.highestBlock - syncing.currentBlock).format('0,0');
syncing.highestBlockString = numeral(syncing.highestBlock).format('0,0');
syncing.displayBlock = numeral(Math.floor(syncing._displayBlock)).format('0,0');
// saves data back
TemplateVar.set(template, 'syncing', syncing);
TemplateVar.set(template, "syncStatusMessageLive", TAPi18n.__('mist.popupWindows.onboarding.syncMessage', syncing));

}, 50);

return TemplateVar.get(template, "syncStatusMessageLive");
}
});

Expand Down Expand Up @@ -278,10 +305,6 @@ The onboardingScreen password template
@constructor
*/

Template['popupWindows_onboardingScreen_password'].onRendered(function(){
});


Template['popupWindows_onboardingScreen_password'].events({
/**
Clear the form
Expand All @@ -293,6 +316,19 @@ Template['popupWindows_onboardingScreen_password'].events({
template.find('input.password-repeat').value = '';
},
/**
Password checks

@event click button[type="button"]
*/
'input input, change input': function(e, template){
var pw = template.find('input.password').value,
pwRepeat = template.find('input.password-repeat').value;

TemplateVar.set(template, 'passwordsNotEmpty', pw != '' || pwRepeat != '');
TemplateVar.set(template, 'passwordsMismatch', pwRepeat && pw != pwRepeat);

},
/**
Checks the password match and creates a new account

@event submit form
Expand All @@ -301,13 +337,17 @@ Template['popupWindows_onboardingScreen_password'].events({
var pw = template.find('input.password').value,
pwRepeat = template.find('input.password-repeat').value;

if(!pw || pw !== pwRepeat) {
if( pw !== pwRepeat) {
GlobalNotification.warning({
content: TAPi18n.__('mist.popupWindows.requestAccount.errors.passwordMismatch'),
duration: 3
});

} else {
} else if (pw && pw.length > 1 && pw.length < 9) {
GlobalNotification.warning({
content: TAPi18n.__('mist.popupWindows.requestAccount.errors.passwordTooShort'),
duration: 3
});
} else if (pw && pw.length >= 9) {
TemplateVar.set('creatingPassword', true);
web3.personal.newAccount(pw, function(e, res){
TemplateVar.set(template, 'creatingPassword', false);
Expand Down
12 changes: 6 additions & 6 deletions interface/client/templates/popupWindows/splashScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,17 +190,17 @@ Template['popupWindows_splashScreen'].helpers({

} else {
// Increment each them slowly to match target number
syncData._displayBlock = Math.floor(syncData._displayBlock + (Number(syncData.currentBlock) - syncData._displayBlock) / 10);
syncData._displayBlock = syncData._displayBlock + (Number(syncData.currentBlock) - syncData._displayBlock) / 10;

syncData._displayState = Math.floor(syncData._displayState + (Number(syncData.pulledStates) - syncData._displayState) / 10);
syncData._displayState = syncData._displayState + (Number(syncData.pulledStates) - syncData._displayState) / 10;

syncData._displayKnownStates = Math.floor(syncData._displayKnownStates + (Number(syncData.knownStates) - syncData._displayKnownStates) / 10);
syncData._displayKnownStates = syncData._displayKnownStates + (Number(syncData.knownStates) - syncData._displayKnownStates) / 10;
};

// Create the fancy strings
lastSyncData.displayBlock = numeral(lastSyncData._displayBlock).format('0,0');
lastSyncData.displayState = numeral(lastSyncData._displayState).format('0,0');
lastSyncData.displayKnownStates = numeral(lastSyncData._displayKnownStates).format('0,0');
lastSyncData.displayBlock = numeral(Math.floor(lastSyncData._displayBlock)).format('0,0');
lastSyncData.displayState = numeral(Math.floor(lastSyncData._displayState)).format('0,0');
lastSyncData.displayKnownStates = numeral(Math.floor(lastSyncData._displayKnownStates)).format('0,0');

// Translate it
var translatedMessage = TAPi18n.__(translationString, syncData);
Expand Down
8 changes: 5 additions & 3 deletions interface/i18n/mist.en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,8 @@
"repeatPassword": "Repeat password",
"creating": "Generating account...",
"errors": {
"passwordMismatch": "Your passwords don't match."
"passwordMismatch": "Your passwords don't match.",
"passwordTooShort": "Make a longer password"
}
},
"unlockMasterPassword": {
Expand Down Expand Up @@ -191,10 +192,11 @@
"mineItDescription": "<strong>On the testnet you can mine ether yourself by going to the <em>Develop</em> menu and choosing <em>Start Mining</em>. </strong> <br> <strong> DO NOT ATTEMPT TO SEND REAL ETHER TO THIS ADDRESS </strong>",
"you" : "YOU",
"etherbase" : "Main account (etherbase)",
"depositBitcoin" : "Deposit Bitcoin",
"depositBitcoin" : "Deposit using Bitcoin",
"viaShapeshift" : "Instant conversion via <a href='https://shapeshift.io/' target='_blank'>Shapeshift</a>",
"learnIt" : "Learn while you wait",
"downloadingBlocks": "Downloading blocks",
"block": "Block",
"syncMessage": "Block __displayBlock__ of __highestBlockString__",
"tutorial1Description" : "<p> Now the only thing left to do is wait for the download to finish. Here's some reading suggestions: </p> <h4>Make your own money </h4> <p> Make a cryptocurrency with a fixed market supply, tokens representing real world assets, etc </p>",
"tutorial2Description" : "<h4> Create a crowdsale </h4> <p> Raise funds for a common goal, fully trustable without a third party. Sidestep the hurdle of traditional funding system and go directly to the source by funding an organization via the blockchain.</p>",
"tutorial3Description" : "<h4> Blockchain Organization </h4> <p> Create an autonomous organization with unbreakable rules on how money can be spent and who can make the decisions. Let your backers take an active role on how the money is spent</p>",
Expand Down
6 changes: 3 additions & 3 deletions modules/ethereumNode.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@ class EthereumNode extends EventEmitter {
}

get isEth () {
return this.type === 'eth';
return this._type === 'eth';
}

get isGeth () {
return this.type === 'geth';
return this._type === 'geth';
}

get isMainNetwork () {
Expand Down Expand Up @@ -193,7 +193,7 @@ class EthereumNode extends EventEmitter {

this.state = STATES.STOPPING;

log.info(`Stopping existing node: ${this.type} ${this.network}`);
log.info(`Stopping existing node: ${this._type} ${this._network}`);

this._node.stderr.removeAllListeners('data');
this._node.stdout.removeAllListeners('data');
Expand Down