mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #103 from jamal-jackson/feature/onboarding_backup_phrase
Added design and styling needed for backup phrase view
This commit is contained in:
commit
1e0424ad29
|
@ -1,86 +1,76 @@
|
|||
<ion-view>
|
||||
<ion-view id="wallet-backup-phrase" title="{{viewTitle}}" ng-controller="backupController" ng-init="init()">
|
||||
<ion-nav-bar class="bar-royal">
|
||||
<ion-nav-back-button>
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
|
||||
<ion-content ng-controller="backupController" ng-init="init()">
|
||||
<ion-content>
|
||||
<div ng-show="deleted">
|
||||
<span translate>Wallet recovery phrase not available. You can still export it from Advanced > Export.</span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
## 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 class="row text-center">
|
||||
<h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
|
||||
</div>
|
||||
<span translate>
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75 center-block">
|
||||
You can still export it from Advanced > Export.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
## STEP 1
|
||||
-->
|
||||
<div ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<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>
|
||||
<div class="row text-center">
|
||||
<p class="col col-70" translate>
|
||||
Please carefully write down this phrase
|
||||
</span>
|
||||
|
||||
<div ng-show="mnemonicHasPassphrase">
|
||||
<i class="ion-alert-circled"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center" ng-show="mnemonicHasPassphrase">
|
||||
<p class="bold-text col col-80 center-block">
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
## STEP 2
|
||||
-->
|
||||
|
||||
<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>
|
||||
</span>
|
||||
|
||||
<button
|
||||
ng-show="selectComplete"
|
||||
class="button button-block button-positive"
|
||||
ng-click="goToStep(3);"
|
||||
translate>Confirm
|
||||
<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>
|
||||
<!--
|
||||
## STEP 2
|
||||
-->
|
||||
<div ng-show="step == 2">
|
||||
<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>
|
||||
<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 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/>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button
|
||||
ng-disabled="!passphrase"
|
||||
class="button button-block button-positive"
|
||||
ng-click="goToStep(4);"
|
||||
translate>Confirm
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
@ -1,9 +1,26 @@
|
|||
<div class="text-center">
|
||||
<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 coont be recovered with out it.</p>
|
||||
<button
|
||||
class="button round expand"
|
||||
ng-click="closePopup()"
|
||||
translate>Got it
|
||||
</button>
|
||||
<div id="backup-confirm-modal" class="popup-modal">
|
||||
<div class="popup-modal-header">
|
||||
<div ng-class="{'popup-modal-header-success': !backupError, 'popup-modal-header-fail': backupError}"></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="text-center" ng-show="backupError">
|
||||
<h5 translate>uh oh...</h5>
|
||||
<p translate>It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money
|
||||
Please review your backup and try again</p>
|
||||
<button
|
||||
class="button button-block button-stable"
|
||||
ng-click="closeBackupResultModal()">
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('backupController',
|
||||
function($rootScope, $scope, $timeout, $log, $state, $stateParams, $ionicPopup, $ionicNavBarDelegate, uxLanguage, lodash, fingerprintService, platformInfo, configService, profileService, bwcService, walletService, ongoingProcess, storageService, popupService, gettextCatalog) {
|
||||
function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, lodash, profileService, bwcService, walletService, ongoingProcess, popupService, gettextCatalog, $ionicModal) {
|
||||
var wallet = profileService.getWallet($stateParams.walletId);
|
||||
$ionicNavBarDelegate.title(wallet.credentials.walletName);
|
||||
$scope.viewTitle = wallet.name || wallet.credentials.walletName;
|
||||
$scope.n = wallet.n;
|
||||
var keys;
|
||||
|
||||
|
@ -50,12 +50,13 @@ angular.module('copayApp.controllers').controller('backupController',
|
|||
if (!keys) return;
|
||||
|
||||
var words = keys.mnemonic;
|
||||
$scope.data = {};
|
||||
|
||||
$scope.mnemonicWords = words.split(/[\u3000\s]+/);
|
||||
$scope.shuffledMnemonicWords = shuffledWords($scope.mnemonicWords);
|
||||
$scope.mnemonicHasPassphrase = wallet.mnemonicHasPassphrase();
|
||||
$scope.useIdeograms = words.indexOf("\u3000") >= 0;
|
||||
$scope.passphrase = '';
|
||||
$scope.data.passphrase = null;
|
||||
$scope.customWords = [];
|
||||
$scope.step = 1;
|
||||
$scope.selectComplete = false;
|
||||
|
@ -86,31 +87,39 @@ angular.module('copayApp.controllers').controller('backupController',
|
|||
}, 1);
|
||||
};
|
||||
|
||||
var openPopup = function() {
|
||||
function openConfirmBackupModal() {
|
||||
$ionicModal.fromTemplateUrl('views/includes/confirmBackupPopup.html', {
|
||||
scope: $scope,
|
||||
backdropClickToClose: false,
|
||||
hardwareBackButtonClose: false
|
||||
}).then(function(modal) {
|
||||
$scope.confirmBackupModal = modal;
|
||||
$scope.confirmBackupModal.show();
|
||||
});
|
||||
};
|
||||
|
||||
var showBackupResult = function() {
|
||||
if ($scope.backupError) {
|
||||
var title = gettextCatalog.getString('uh oh...');
|
||||
var message = gettextCatalog.getString("It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money Please review your backup and try again");
|
||||
popupService.showAlert(title, message, function() {
|
||||
$scope.goToStep(1);
|
||||
})
|
||||
} else {
|
||||
openConfirmBackupModal();
|
||||
}
|
||||
else {
|
||||
var confirmBackupPopup = $ionicPopup.show({
|
||||
templateUrl: "views/includes/confirmBackupPopup.html",
|
||||
scope: $scope,
|
||||
});
|
||||
};
|
||||
|
||||
$scope.closePopup = function() {
|
||||
confirmBackupPopup.close();
|
||||
if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
|
||||
else {
|
||||
$ionicHistory.clearHistory();
|
||||
$state.go('tabs.home')
|
||||
}
|
||||
};
|
||||
$scope.closeBackupResultModal = function() {
|
||||
$scope.confirmBackupModal.hide();
|
||||
|
||||
if ($stateParams.fromOnboarding) {
|
||||
$state.go('onboarding.disclaimer');
|
||||
} else {
|
||||
$ionicHistory.clearHistory();
|
||||
$state.go('tabs.home');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var confirm = function(cb) {
|
||||
$scope.backupError = false;
|
||||
|
@ -126,7 +135,7 @@ angular.module('copayApp.controllers').controller('backupController',
|
|||
var walletClient = bwcService.getClient();
|
||||
var separator = $scope.useIdeograms ? '\u3000' : ' ';
|
||||
var customSentence = customWordList.join(separator);
|
||||
var passphrase = $scope.passphrase || '';
|
||||
var passphrase = $scope.data.passphrase || '';
|
||||
|
||||
try {
|
||||
walletClient.seedFromMnemonic(customSentence, {
|
||||
|
@ -158,7 +167,7 @@ angular.module('copayApp.controllers').controller('backupController',
|
|||
backupError(err);
|
||||
}
|
||||
$timeout(function() {
|
||||
openPopup();
|
||||
showBackupResult();
|
||||
return;
|
||||
}, 1);
|
||||
});
|
||||
|
|
|
@ -80,3 +80,7 @@ ion-header-bar{
|
|||
.border-top{
|
||||
border-top:1px solid rgb(228,228,228);
|
||||
}
|
||||
|
||||
.bold-text{
|
||||
font-weight: bold !important;
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
.button-clear{
|
||||
background: none !important;
|
||||
}
|
|
@ -988,6 +988,8 @@ 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";
|
||||
@import "views/includes/modals/modals";
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
#backup-confirm-modal{
|
||||
|
||||
}
|
|
@ -0,0 +1,47 @@
|
|||
.popup-modal {
|
||||
background: #fff;
|
||||
top: 20%;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
border-radius: .25rem;
|
||||
&-header {
|
||||
background: rgb(1, 209, 162);
|
||||
padding: 1rem;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
min-height: 120px;
|
||||
&-success {
|
||||
background: url('../img/onboarding-success.svg') no-repeat center;
|
||||
height: 6rem;
|
||||
background-size: contain;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
padding: .5rem .8rem;
|
||||
h5,p{
|
||||
margin:0 0 1rem;
|
||||
}
|
||||
h5 {
|
||||
color: rgb(74, 74, 74);
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
p{
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
&-content-success{
|
||||
button{
|
||||
color:rgb(23, 174, 140) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.active {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
@import "backup-confirm-modal";
|
|
@ -0,0 +1,128 @@
|
|||
#wallet-backup-phrase {
|
||||
&,
|
||||
& ion-content,
|
||||
& ion-content .scroll {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.bar.bar-royal {
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
background: #fff;
|
||||
.backup-phrase {
|
||||
background: rgba(246, 246, 246, 0.87);
|
||||
padding: .5rem .5rem 1.7rem;
|
||||
border: 2px dashed rgb(206, 206, 206);
|
||||
width: 95%;
|
||||
margin: 1rem 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: 90px;
|
||||
button {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
.select-word {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
|
||||
margin: .25rem 0 .25rem;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
#select-phrase {
|
||||
background: rgba(246, 246, 246, 0.87);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 43px;
|
||||
padding-bottom: 20px;
|
||||
p {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
padding-top: .7rem;
|
||||
margin-bottom: 0.3rem;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.select-word {
|
||||
&.button[disabled] {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: transparent;
|
||||
border: 1px solid rgb(211, 211, 211);
|
||||
}
|
||||
}
|
||||
#confirm-phrase {
|
||||
margin: 5px auto 0;
|
||||
}
|
||||
}
|
||||
ion-content.has-header {
|
||||
#select-phrase {
|
||||
bottom: 75px;
|
||||
}
|
||||
.backup-phrase {
|
||||
padding: .5rem .5rem .9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#wallet-backup-phrase {
|
||||
ion-content {
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
max-width: 600px !important;
|
||||
}
|
||||
button {
|
||||
max-width: 400px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 560px) {
|
||||
#wallet-backup-phrase {
|
||||
&,
|
||||
& ion-content,
|
||||
& ion-content .scroll {
|
||||
overflow-y:visible;
|
||||
}
|
||||
#select-phrase {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.backup-phrase {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-height: 379px) {
|
||||
#wallet-backup-phrase {
|
||||
.cta-buttons {
|
||||
float: left;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue