onboarding
This commit is contained in:
Gabriel Bazán
parent
ad7f04a272
commit
aacfe0a326
47 changed files with 699 additions and 332 deletions
|
|
@ -1,205 +1,83 @@
|
|||
<ion-view ng-controller="backupController" cache-view="false" ng-init="init()">
|
||||
<ion-view ng-controller="backupController" ng-init="init()">
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-nav-title>Backup Flow</ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button" href ui-sref="wallet.preferences">
|
||||
<i class="ion-arrow-left-c"></i> Back
|
||||
<button class="button no-border" ng-click="goBack()">
|
||||
<i class="icon ion-chevron-left"></i>Back
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content ng-controller="backupController" cache-view="false" ng-init="init()">
|
||||
<div class="box-notification" ng-show="error">
|
||||
<span class="text-warning">
|
||||
{{error|translate}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
## STEP 1
|
||||
-->
|
||||
|
||||
<div class="text-center">
|
||||
<div ng-show="step == 1">
|
||||
<div ng-show="mnemonicWords || (!credentialsEncrypted && !deleted)" class="row">
|
||||
<h5 class="text-center" translate>Write your wallet recovery phrase</h5>
|
||||
<div class="size-14 text-gray columns" ng-show="(wallet.n>1 && wallet.m != wallet.n )">
|
||||
<span translate>
|
||||
To restore this {{wallet.m}}-{{wallet.n}} <b>shared</b> wallet you will need
|
||||
</span>:
|
||||
<div class="m10t columns size-14 text-gray">
|
||||
<span translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{wallet.m}} keys to spend.</span>
|
||||
<span translate><b>OR</b> the wallet recovery phrase of <b>all</b> copayers in the wallet</span>
|
||||
<span translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet recovery phrases (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet recovery phrases of any of the other copayers).</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="size-14 text-gray columns" ng-show="(wallet.n>1 && wallet.m == wallet.n )">
|
||||
<span translate>
|
||||
To restore this {{wallet.m}}-{{wallet.n}} <b>shared</b> wallet you will need
|
||||
</span>:
|
||||
<div class="m10t columns size-14 text-gray">
|
||||
<span translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{wallet.m}} keys to spend.</span>
|
||||
<span translate><b>OR</b> the wallet recovery phrases of <b>all</b> copayers in the wallet</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t" ng-show="deleted">
|
||||
<div class="columns size-14 text-gray text-center" translate>
|
||||
Wallet recovery phrase not available. You can still export it from Advanced > Export.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="mnemonicWords || (!credentialsEncrypted && !deleted)">
|
||||
<p class="text-center columns text-gray" ng-show="wallet.n==1 && step == 1">
|
||||
<span translate>
|
||||
You need the wallet recovery phrase to restore this personal wallet. Write it down and keep them somewhere safe.
|
||||
</span>
|
||||
</p>
|
||||
<div class="row" ng-show="!credentialsEncrypted">
|
||||
<div class="columns">
|
||||
<div class="panel" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns extra-padding-bottom" ng-show="!credentialsEncrypted">
|
||||
<div class="line-t p10 size-10 text-gray text-center" ng-show="mnemonicHasPassphrase">
|
||||
<i class="fi-alert"></i>
|
||||
<span translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-box">
|
||||
<button
|
||||
ng-show="!deleted"
|
||||
ng-disabled="credentialsEncrypted || error"
|
||||
class="button button-block button-stable"
|
||||
ng-click="goToStep(2);"
|
||||
translate>Continue
|
||||
</button>
|
||||
</div>
|
||||
<ion-content>
|
||||
<!--
|
||||
## STEP 1
|
||||
-->
|
||||
<div ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<h5 translate>Backup Phrase</h5>
|
||||
<div 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>
|
||||
<span translate>
|
||||
Please carefully write down this phrase
|
||||
</span>
|
||||
|
||||
<div ng-show="mnemonicHasPassphrase">
|
||||
<i class="ion-alert-circled"></i>
|
||||
<span translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!--
|
||||
## STEP 2
|
||||
-->
|
||||
|
||||
<div ng-show="step == 2">
|
||||
<div class="columns text-center extra-padding-bottom">
|
||||
<h5 translate>Confirm your wallet recovery phrase</h5>
|
||||
<p class="text-gray m0" translate>
|
||||
Please tap the words in order to confirm your backup phrase is correctly written.
|
||||
</p>
|
||||
<div class="panel words text-left">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button radius tiny words" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button radius tiny words" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-box">
|
||||
<button
|
||||
ng-disabled="!selectComplete"
|
||||
class="button button-block button-stable"
|
||||
ng-click="goToStep(3);"
|
||||
translate>Continue
|
||||
<div ng-show="step == 2">
|
||||
<h5 translate>Let's verify your backup phrase</h5>
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
<p translate>
|
||||
Please tap the words in order to confirm your backup phrase is correctly written.
|
||||
</p>
|
||||
<span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<button
|
||||
ng-show="selectComplete"
|
||||
class="button button-block button-positive"
|
||||
ng-click="goToStep(3);"
|
||||
translate>Confirm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
## STEP 3
|
||||
-->
|
||||
|
||||
<div 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="passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<div class="button-box">
|
||||
<button
|
||||
ng-disabled="!passphrase"
|
||||
class="button button-block button-stable"
|
||||
ng-click="goToStep(4);"
|
||||
translate>Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div 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="passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button
|
||||
ng-disabled="!passphrase"
|
||||
class="button button-block button-positive"
|
||||
ng-click="goToStep(4);"
|
||||
translate>Confirm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
## STEP 4
|
||||
-->
|
||||
|
||||
<div ng-show="step == 4">
|
||||
<div class="row m10t m10b text-center" ng-show="!backupError">
|
||||
<div class="circle-icon">
|
||||
<i class="fi-like size-48"></i>
|
||||
</div>
|
||||
<h5 translate>Congratulations!</h5>
|
||||
<p class="text-gray columns" translate>
|
||||
You backed up your wallet. You can now restore this wallet at any time.
|
||||
</p>
|
||||
|
||||
<div class="columns text-center m20t">
|
||||
<button
|
||||
|
||||
class="button round expand"
|
||||
href ui-sref="tabs.home"
|
||||
translate>Finish
|
||||
</button>
|
||||
<!-- hide this in multisig just to show less text -->
|
||||
<div class="row m20t" ng-show="n==1">
|
||||
<div class="columns size-10 text-gray">
|
||||
<div class="p10t line-t">
|
||||
<span translate>You can safely install your wallet on another device and use it from multiple devices at the same time.</span>
|
||||
<a href="#" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/blob/master/README.md#copay-backups-and-recovery')" translate>
|
||||
Learn more about Copay backups
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m10t m10b text-center" ng-show="backupError">
|
||||
<div class="circle-icon">
|
||||
<i class="fi-dislike size-48"></i>
|
||||
</div>
|
||||
<h5 translate>Backup failed</h5>
|
||||
<p class="text-gray columns" translate>
|
||||
Failed to verify backup. Please check your information
|
||||
</p>
|
||||
<div class="columns size-10 text-gray extra-padding-bottom" ng-show="n==1">
|
||||
<div class="p10t line-t">
|
||||
<span translate>You can safely install your wallet on another device and use it from multiple devices at the same time.</span>
|
||||
<a href="#" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/blob/master/README.md#copay-backups-and-recovery')" translate>
|
||||
Learn more about Copay backups
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-box">
|
||||
<button
|
||||
|
||||
class="button button-block button-stable"
|
||||
ng-click="goToStep(1);"
|
||||
translate>Try again
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue