finish initial backup phrase view where phrase is shown to user

This commit is contained in:
Jamal Jackson 2016-09-12 10:14:06 -04:00
commit 984c713a6d
3 changed files with 53 additions and 14 deletions

View file

@ -1,4 +1,4 @@
<ion-view>
<ion-view id="wallet-backup-phrase" title="Backup Phrase">
<ion-nav-bar class="bar-royal">
<ion-nav-back-button>
<i class="icon ion-ios-arrow-thin-left"></i>
@ -14,13 +14,14 @@
## STEP 1
-->
<div ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
<h5 translate>Backup Phrase</h5>
<div ng-class="{'enable_text_select': wallet.network == 'testnet'}">
<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">&#x3000;</span> </span>
</div>
<span translate>
Please carefully write down this phrase
</span>
<div class="row text-center">
<p class="col col-70" translate>
Please carefully write down this phrase
</p>
</div>
<div ng-show="mnemonicHasPassphrase">
<i class="ion-alert-circled"></i>
@ -28,14 +29,15 @@
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 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>
</div>
<!--

View file

@ -966,6 +966,7 @@ input[type=number] {
@import "views/tab-send";
@import "views/walletDetails";
@import "views/bitpayCard";
@import "views/wallet-backup-phrase";
@import 'views/onboarding/onboarding';
@import "views/includes/walletActivity";
@import "views/includes/wallets";

View file

@ -0,0 +1,36 @@
#wallet-backup-phrase {
&,
& ion-content,
& ion-content .scroll {
height: 100%;
}
background: #fff;
.backup-phrase {
background: rgba(246, 246, 246, 0.87);
padding: 1.5rem 1rem;
border: 2px dashed rgb(206, 206, 206);
width: 80%;
margin: 2rem auto;
color: rgb(43, 43, 43);
text-align: center;
span {
line-height: 2rem;
font-weight: bold;
max-width: 400px;
color: rgb(43, 43, 43);
}
}
p {
color: rgb(58, 58, 58);
font-weight: 200;
}
.cta-buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 80px;
button {
max-width: 400px;
}
}
}