Changes to onboarding screen (#786)

* Fix bug that was preventing onboarding to start * allows account creation to be skipped and checks passwords * skip account page * Added number animation to blocknumbers * speed down to prevent hanging * removes log and adds comments to code * only math.floor the display block not the actual number * adds shapeshift reference
ethereum · Jun 8, 2016 · ee26bea · ee26bea
1 parent a423ca3
commit ee26bea
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 40 deletions.
diff --git a/interface/client/styles/onboardingScreen.import.less b/interface/client/styles/onboardingScreen.import.less
@@ -76,7 +76,7 @@
 
  input {
  background-color: transparent;
- border-bottom: dashed 1px @colorLinkActive;
+ border-bottom: dashed 1px;
  }
 
  input.name {

diff --git a/interface/client/templates/popupWindows/onboardingScreen.html b/interface/client/templates/popupWindows/onboardingScreen.html
@@ -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>
@@ -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>
@@ -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>
@@ -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>
diff --git a/interface/client/templates/popupWindows/onboardingScreen.js b/interface/client/templates/popupWindows/onboardingScreen.js
@@ -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) {
@@ -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);
@@ -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");
  }
 });
 
@@ -278,10 +305,6 @@ The onboardingScreen password template
 @constructor
 */
 
-Template['popupWindows_onboardingScreen_password'].onRendered(function(){
-});
-
-
 Template['popupWindows_onboardingScreen_password'].events({
  /**
  Clear the form
@@ -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
@@ -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);

diff --git a/interface/client/templates/popupWindows/splashScreen.js b/interface/client/templates/popupWindows/splashScreen.js
@@ -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);

diff --git a/interface/i18n/mist.en.i18n.json b/interface/i18n/mist.en.i18n.json
@@ -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": {
@@ -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>",

diff --git a/modules/ethereumNode.js b/modules/ethereumNode.js
@@ -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 () {
@@ -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');