design(backup): polish backup flow (via onboarding process)
This commit is contained in:
Jason Dreyzehner
parent
6dcf78256e
commit
926e80fcea
22 changed files with 237 additions and 260 deletions
|
|
@ -6,73 +6,68 @@
|
|||
<ion-nav-back-button>
|
||||
</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
<ion-content>
|
||||
<ion-content scroll="false">
|
||||
<div class="ng-hide" ng-show="deleted">
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75 center-block">
|
||||
You can still export it from Advanced > Export.
|
||||
</p>
|
||||
</div>
|
||||
<div class="phrase-unavailable" translate>Wallet recovery phrase not available.</div>
|
||||
<div class="phrase-unavailable-instructions" translate>You can still export it from Advanced > Export.</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 1
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<div id="wallet-backup-phrase-step-1" class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<div class="initial-prompt" translate>Please carefully write down this phrase.</div>
|
||||
<div class="backup-phrase" ng-class="{'enable_text_select': wallet.network == 'testnet'}">
|
||||
<span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">　</span> </span>
|
||||
<div class="backup-phrase-content">
|
||||
<span class="backup-phrase-content-word-readonly" ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">　</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-70" translate>
|
||||
Please carefully write down this phrase
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center" ng-show="mnemonicHasPassphrase">
|
||||
<p class="bold-text col col-80 center-block">
|
||||
<span translate>
|
||||
<div class="password-required" ng-show="mnemonicHasPassphrase" translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-block button-positive" ng-click="goToStep(2);" translate>I've written it down
|
||||
</button>
|
||||
<div class="tldr-prompt" translate>We'll confirm on the next screen.</div>
|
||||
<button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-standard button-primary" ng-click="goToStep(2);" translate>I've written it down</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 2
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 2">
|
||||
<div id="wallet-backup-phrase-step-2" class="ng-hide" ng-show="step == 2">
|
||||
<div class="confirmation-prompt" translate>Let's verify your backup phrase.</div>
|
||||
<div class="backup-phrase">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
<div class="backup-phrase-content">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="select-phrase" class="cta-buttons">
|
||||
<div id="select-phrase-content">
|
||||
<div ng-show="!selectComplete" class="tldr-prompt" translate>Please tap each word in the correct order.</div>
|
||||
<div ng-show="selectComplete" class="tldr-prompt" translate>Is this correct?</div>
|
||||
<span ng-show="!selectComplete" ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button select-word" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
<button ng-show="selectComplete" class="button button-standard button-primary" ng-click="goToStep(3);" translate>Confirm</button>
|
||||
<!-- TODO: implement -->
|
||||
<button ng-show="selectComplete" class="button button-standard button-secondary button-clear" ng-click="clearAll();" translate>Clear</button>
|
||||
</div>
|
||||
<div id="select-phrase">
|
||||
<p translate>
|
||||
Please tap each word in the correct order.
|
||||
</p>
|
||||
<span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button select-word" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
<button ng-show="selectComplete" id="confirm-phrase" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 3
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 3">
|
||||
<h5 translate>Enter your password</h5>
|
||||
<label class="item item-input item-stacked-label">
|
||||
<span class="input-label" transalate>In order to verify your wallet backup, please type your password:</span>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
<div id="wallet-backup-phrase-step-3" class="ng-hide" ng-show="step == 3">
|
||||
<div class="password-prompt" translate>Enter your password</h5>
|
||||
<label class="item item-input item-stacked-label">
|
||||
<div class="input-label" translate>In order to verify your wallet backup, please type your password.</div>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="onboarding-illustration-backup-warning"></div>
|
||||
<div id="cta-buttons">
|
||||
<div class="onboarding-tldr">Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||
<button class="button button-block button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
<button class="button button-standard button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<div id="backup-confirm-modal" class="popup-modal">
|
||||
<div class="popup-modal-header">
|
||||
<div ng-class="{'popup-modal-header-img-success': !backupError, 'popup-modal-header-img-fail': backupError}" class="popup-modal-header-img"></div>
|
||||
<div class="popup-modal-header popup-modal-header-success">
|
||||
<div class="popup-modal-header-img-success popup-modal-header-img"></div>
|
||||
</div>
|
||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
||||
<div class="text-center" ng-show="!backupError">
|
||||
<h5 translate>Your bitcoin wallet is backed up!</h5>
|
||||
<p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money cannot be recoved with out it.</p>
|
||||
<button
|
||||
class="button button-clear expand"
|
||||
ng-click="closeBackupResultModal()"
|
||||
translate>I Understand
|
||||
</button>
|
||||
</div>
|
||||
<div class="popup-modal-content popup-modal-content-success">
|
||||
<div class="popup-modal-heading" translate>Your bitcoin wallet is backed up!</div>
|
||||
<div class="popup-modal-message" translate>Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recoved without it.</div>
|
||||
<button class="button button-clear" ng-click="closeBackupResultModal()" translate>Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@
|
|||
<div class="popup-modal-content popup-modal-content-warning">
|
||||
<div>
|
||||
<div class="popup-modal-heading" translate>Screenshots are not secure</div>
|
||||
<div class="popup-modal-message"> If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</div>
|
||||
<button class="button button-clear" ng-click="close()" translate>I understand
|
||||
</button>
|
||||
<div class="popup-modal-message" translate>If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</div>
|
||||
<button class="button button-clear" ng-click="close()" translate>I understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<div class="cta-buttons">
|
||||
<i class="ion-ios-arrow-thin-down" id="arrow-down"></i>
|
||||
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
|
||||
<button class="button button-block button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
<button class="button button-block button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
<button class="button button-standard button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
<button class="button button-standard button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<input type="email" name="email" ng-model="email" placeholder="email address" required></input>
|
||||
</label>
|
||||
<ion-checkbox ng-model="data.accept"><span translate>Get news and updates from BitPay</span></ion-checkbox>
|
||||
<button class="button button-block button-primary" disabled>
|
||||
<button class="button button-standard button-primary" disabled>
|
||||
Continue →
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="onboarding-description" translate>Would you like to receive push notifications about payments?</div>
|
||||
<div class="onboarding-illustration-notifications"></div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-block button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-block button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
<button class="button button-standard button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-standard button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="onboarding-illustration-secure"></div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>Just scan the code to pay.</div>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||
Got it →
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>The exchange rate changes with the market.</div>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||
Makes sense →
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<div class="onboarding-illustration-control"></div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>Not even BitPay can access it.</div>
|
||||
<button class="button button-block button-primary" ng-click="createDefaultWallet()">
|
||||
<button class="button button-standard button-primary" ng-click="createDefaultWallet()">
|
||||
Create bitcoin wallet
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<p id="lead" translate>Take control of your money,<br />get started with bitcoin.</p>
|
||||
</div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-block button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||
<button class="button button-standard button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
<button class="button button-standard button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue