added basic modal class styling, styled success modal
This commit is contained in:
Jamal Jackson
parent
294b4200f4
commit
8b24adb53c
7 changed files with 268 additions and 197 deletions
|
|
@ -1,19 +1,26 @@
|
||||||
<div class="text-center" ng-show="!backupError">
|
<div id="backup-confirm-modal" class="popup-modal">
|
||||||
<h5 translate>Your bitcoin wallet is backed up!</h5>
|
<div class="popup-modal-header">
|
||||||
<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>
|
<div ng-class="{'popup-modal-header-success': !backupError, 'popup-modal-header-fail': backupError}"></div>
|
||||||
<button
|
</div>
|
||||||
class="button round expand"
|
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
||||||
ng-click="closePopup(true)"
|
<div class="text-center" ng-show="!backupError">
|
||||||
translate>Got it
|
<h5 translate>Your bitcoin wallet is backed up!</h5>
|
||||||
</button>
|
<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>
|
||||||
</div>
|
<button
|
||||||
<div class="text-center" ng-show="backupError">
|
class="button button-clear expand"
|
||||||
<h5 translate>uh oh...</h5>
|
ng-click="closePopup(true)"
|
||||||
<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
|
translate>Got it
|
||||||
Please review your backup and try again</p>
|
</button>
|
||||||
<button
|
</div>
|
||||||
class="button button-block button-stable"
|
<div class="text-center" ng-show="backupError">
|
||||||
ng-click="closePopup(false)"
|
<h5 translate>uh oh...</h5>
|
||||||
translate>Ok
|
<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
|
||||||
</button>
|
Please review your backup and try again</p>
|
||||||
|
<button
|
||||||
|
class="button button-block button-stable"
|
||||||
|
ng-click="closePopup(false)"
|
||||||
|
translate>Ok
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,199 +1,209 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('copayApp.controllers').controller('backupController',
|
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) {
|
function($rootScope, $scope, $timeout, $log, $state, $stateParams, $ionicPopup, $ionicModal, $ionicNavBarDelegate, uxLanguage, lodash, fingerprintService, platformInfo, configService, profileService, bwcService, walletService, ongoingProcess, storageService) {
|
||||||
var wallet = profileService.getWallet($stateParams.walletId);
|
var wallet = profileService.getWallet($stateParams.walletId);
|
||||||
$ionicNavBarDelegate.title(wallet.credentials.walletName);
|
$ionicNavBarDelegate.title(wallet.credentials.walletName);
|
||||||
$scope.n = wallet.n;
|
$scope.n = wallet.n;
|
||||||
var keys;
|
var keys;
|
||||||
|
|
||||||
$scope.credentialsEncrypted = wallet.isPrivKeyEncrypted();
|
$scope.credentialsEncrypted = wallet.isPrivKeyEncrypted();
|
||||||
|
|
||||||
var isDeletedSeed = function() {
|
var isDeletedSeed = function() {
|
||||||
if (!wallet.credentials.mnemonic && !wallet.credentials.mnemonicEncrypted)
|
if (!wallet.credentials.mnemonic && !wallet.credentials.mnemonicEncrypted)
|
||||||
return true;
|
return true;
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.init = function() {
|
$scope.init = function() {
|
||||||
$scope.deleted = isDeletedSeed();
|
$scope.deleted = isDeletedSeed();
|
||||||
if ($scope.deleted) {
|
if ($scope.deleted) {
|
||||||
$log.debug('no mnemonics');
|
$log.debug('no mnemonics');
|
||||||
return;
|
return;
|
||||||
}
|
|
||||||
|
|
||||||
walletService.getKeys(wallet, function(err, k) {
|
|
||||||
if (err || !k) {
|
|
||||||
$state.go('wallet.preferences');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$scope.credentialsEncrypted = false;
|
|
||||||
keys = k;
|
|
||||||
$scope.initFlow();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var shuffledWords = function(words) {
|
|
||||||
var sort = lodash.sortBy(words);
|
|
||||||
|
|
||||||
return lodash.map(sort, function(w) {
|
|
||||||
return {
|
|
||||||
word: w,
|
|
||||||
selected: false
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.initFlow = function() {
|
|
||||||
if (!keys) return;
|
|
||||||
$scope.viewTitle = "Backup Phrase";
|
|
||||||
var words = keys.mnemonic;
|
|
||||||
|
|
||||||
$scope.mnemonicWords = words.split(/[\u3000\s]+/);
|
|
||||||
$scope.shuffledMnemonicWords = shuffledWords($scope.mnemonicWords);
|
|
||||||
$scope.mnemonicHasPassphrase = wallet.mnemonicHasPassphrase();
|
|
||||||
$scope.useIdeograms = words.indexOf("\u3000") >= 0;
|
|
||||||
$scope.passphrase = '';
|
|
||||||
$scope.customWords = [];
|
|
||||||
$scope.step = 1;
|
|
||||||
$scope.selectComplete = false;
|
|
||||||
$scope.backupError = false;
|
|
||||||
|
|
||||||
words = lodash.repeat('x', 300);
|
|
||||||
$timeout(function() {
|
|
||||||
$scope.$apply();
|
|
||||||
}, 10);
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.goBack = function() {
|
|
||||||
if ($scope.step == 1) {
|
|
||||||
if ($stateParams.fromOnboarding) $state.go('onboarding.backupRequest');
|
|
||||||
else $state.go('wallet.preferences');
|
|
||||||
} else {
|
|
||||||
$scope.goToStep($scope.step - 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var backupError = function(err) {
|
|
||||||
ongoingProcess.set('validatingWords', false);
|
|
||||||
$log.debug('Failed to verify backup: ', err);
|
|
||||||
$scope.backupError = true;
|
|
||||||
|
|
||||||
$timeout(function() {
|
|
||||||
$scope.$apply();
|
|
||||||
}, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
var openPopup = function() {
|
|
||||||
var confirmBackupPopup = $ionicPopup.show({
|
|
||||||
templateUrl: "views/includes/confirmBackupPopup.html",
|
|
||||||
scope: $scope,
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.closePopup = function(val) {
|
|
||||||
if (val) {
|
|
||||||
confirmBackupPopup.close();
|
|
||||||
if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
|
|
||||||
else $state.go('tabs.home')
|
|
||||||
} else {
|
|
||||||
confirmBackupPopup.close();
|
|
||||||
$scope.goToStep(1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var confirm = function(cb) {
|
walletService.getKeys(wallet, function(err, k) {
|
||||||
$scope.backupError = false;
|
if (err || !k) {
|
||||||
|
$state.go('wallet.preferences');
|
||||||
var customWordList = lodash.pluck($scope.customWords, 'word');
|
return;
|
||||||
|
|
||||||
if (!lodash.isEqual($scope.mnemonicWords, customWordList)) {
|
|
||||||
return cb('Mnemonic string mismatch');
|
|
||||||
}
|
}
|
||||||
|
$scope.credentialsEncrypted = false;
|
||||||
|
keys = k;
|
||||||
|
$scope.initFlow();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
$timeout(function() {
|
var shuffledWords = function(words) {
|
||||||
if ($scope.mnemonicHasPassphrase) {
|
var sort = lodash.sortBy(words);
|
||||||
var walletClient = bwcService.getClient();
|
|
||||||
var separator = $scope.useIdeograms ? '\u3000' : ' ';
|
|
||||||
var customSentence = customWordList.join(separator);
|
|
||||||
var passphrase = $scope.passphrase || '';
|
|
||||||
|
|
||||||
try {
|
return lodash.map(sort, function(w) {
|
||||||
walletClient.seedFromMnemonic(customSentence, {
|
return {
|
||||||
network: wallet.credentials.network,
|
word: w,
|
||||||
passphrase: passphrase,
|
selected: false
|
||||||
account: wallet.credentials.account
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
walletClient.credentials.xPrivKey = lodash.repeat('x', 64);
|
|
||||||
return cb(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (walletClient.credentials.xPrivKey.substr(walletClient.credentials.xPrivKey) != keys.xPrivKey) {
|
|
||||||
delete walletClient.credentials;
|
|
||||||
return cb('Private key mismatch');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
profileService.setBackupFlag(wallet.credentials.walletId);
|
|
||||||
return cb();
|
|
||||||
}, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
var finalStep = function() {
|
|
||||||
ongoingProcess.set('validatingWords', true);
|
|
||||||
confirm(function(err) {
|
|
||||||
ongoingProcess.set('validatingWords', false);
|
|
||||||
if (err) {
|
|
||||||
backupError(err);
|
|
||||||
}
|
|
||||||
$timeout(function() {
|
|
||||||
openPopup();
|
|
||||||
return;
|
|
||||||
}, 1);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.goToStep = function(n) {
|
|
||||||
if (n == 1)
|
|
||||||
$scope.initFlow();
|
|
||||||
if (n == 2){
|
|
||||||
$scope.step = 2;
|
|
||||||
$scope.viewTitle = "Let's verify your backup phrase";
|
|
||||||
}
|
|
||||||
if (n == 3) {
|
|
||||||
if (!$scope.mnemonicHasPassphrase)
|
|
||||||
finalStep();
|
|
||||||
else
|
|
||||||
$scope.step = 3;
|
|
||||||
}
|
|
||||||
if (n == 4)
|
|
||||||
finalStep();
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.addButton = function(index, item) {
|
|
||||||
var newWord = {
|
|
||||||
word: item.word,
|
|
||||||
prevIndex: index
|
|
||||||
};
|
};
|
||||||
$scope.customWords.push(newWord);
|
});
|
||||||
$scope.shuffledMnemonicWords[index].selected = true;
|
};
|
||||||
$scope.shouldContinue();
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.removeButton = function(index, item) {
|
$scope.initFlow = function() {
|
||||||
if ($scope.loading) return;
|
if (!keys) return;
|
||||||
$scope.customWords.splice(index, 1);
|
$scope.viewTitle = "Backup Phrase";
|
||||||
$scope.shuffledMnemonicWords[item.prevIndex].selected = false;
|
var words = keys.mnemonic;
|
||||||
$scope.shouldContinue();
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.shouldContinue = function() {
|
$scope.mnemonicWords = words.split(/[\u3000\s]+/);
|
||||||
if ($scope.customWords.length == $scope.shuffledMnemonicWords.length)
|
$scope.shuffledMnemonicWords = shuffledWords($scope.mnemonicWords);
|
||||||
$scope.selectComplete = true;
|
$scope.mnemonicHasPassphrase = wallet.mnemonicHasPassphrase();
|
||||||
else
|
$scope.useIdeograms = words.indexOf("\u3000") >= 0;
|
||||||
$scope.selectComplete = false;
|
$scope.passphrase = '';
|
||||||
};
|
$scope.customWords = [];
|
||||||
|
$scope.step = 1;
|
||||||
|
$scope.selectComplete = false;
|
||||||
|
$scope.backupError = false;
|
||||||
|
|
||||||
|
words = lodash.repeat('x', 300);
|
||||||
|
$timeout(function() {
|
||||||
|
$scope.$apply();
|
||||||
|
}, 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.goBack = function() {
|
||||||
|
if ($scope.step == 1) {
|
||||||
|
if ($stateParams.fromOnboarding) $state.go('onboarding.backupRequest');
|
||||||
|
else $state.go('wallet.preferences');
|
||||||
|
} else {
|
||||||
|
$scope.goToStep($scope.step - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var backupError = function(err) {
|
||||||
|
ongoingProcess.set('validatingWords', false);
|
||||||
|
$log.debug('Failed to verify backup: ', err);
|
||||||
|
$scope.backupError = true;
|
||||||
|
|
||||||
|
$timeout(function() {
|
||||||
|
$scope.$apply();
|
||||||
|
}, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.closePopup = function(val) {
|
||||||
|
if (val) {
|
||||||
|
$scope.closeModal();
|
||||||
|
if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
|
||||||
|
else $state.go('tabs.home')
|
||||||
|
} else {
|
||||||
|
confirmBackupPopup.close();
|
||||||
|
$scope.goToStep(1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$ionicModal.fromTemplateUrl('views/includes/confirmBackupPopup.html', {
|
||||||
|
scope: $scope,
|
||||||
|
animation: 'slide-in-up'
|
||||||
|
}).then(function(modal) {
|
||||||
|
$scope.modal = modal;
|
||||||
});
|
});
|
||||||
|
$scope.openModal = function() {
|
||||||
|
$scope.modal.show();
|
||||||
|
};
|
||||||
|
$scope.closeModal = function() {
|
||||||
|
$scope.modal.hide();
|
||||||
|
};
|
||||||
|
// Cleanup the modal when we're done with it!
|
||||||
|
$scope.$on('$destroy', function() {
|
||||||
|
$scope.modal.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
var confirm = function(cb) {
|
||||||
|
$scope.backupError = false;
|
||||||
|
|
||||||
|
var customWordList = lodash.pluck($scope.customWords, 'word');
|
||||||
|
|
||||||
|
if (!lodash.isEqual($scope.mnemonicWords, customWordList)) {
|
||||||
|
return cb('Mnemonic string mismatch');
|
||||||
|
}
|
||||||
|
|
||||||
|
$timeout(function() {
|
||||||
|
if ($scope.mnemonicHasPassphrase) {
|
||||||
|
var walletClient = bwcService.getClient();
|
||||||
|
var separator = $scope.useIdeograms ? '\u3000' : ' ';
|
||||||
|
var customSentence = customWordList.join(separator);
|
||||||
|
var passphrase = $scope.passphrase || '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
walletClient.seedFromMnemonic(customSentence, {
|
||||||
|
network: wallet.credentials.network,
|
||||||
|
passphrase: passphrase,
|
||||||
|
account: wallet.credentials.account
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
walletClient.credentials.xPrivKey = lodash.repeat('x', 64);
|
||||||
|
return cb(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (walletClient.credentials.xPrivKey.substr(walletClient.credentials.xPrivKey) != keys.xPrivKey) {
|
||||||
|
delete walletClient.credentials;
|
||||||
|
return cb('Private key mismatch');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
profileService.setBackupFlag(wallet.credentials.walletId);
|
||||||
|
return cb();
|
||||||
|
}, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
var finalStep = function() {
|
||||||
|
ongoingProcess.set('validatingWords', true);
|
||||||
|
confirm(function(err) {
|
||||||
|
ongoingProcess.set('validatingWords', false);
|
||||||
|
if (err) {
|
||||||
|
backupError(err);
|
||||||
|
}
|
||||||
|
$timeout(function() {
|
||||||
|
$scope.openModal();
|
||||||
|
return;
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.goToStep = function(n) {
|
||||||
|
if (n == 1)
|
||||||
|
$scope.initFlow();
|
||||||
|
if (n == 2) {
|
||||||
|
$scope.step = 2;
|
||||||
|
$scope.viewTitle = "Let's verify your backup phrase";
|
||||||
|
}
|
||||||
|
if (n == 3) {
|
||||||
|
if (!$scope.mnemonicHasPassphrase)
|
||||||
|
finalStep();
|
||||||
|
else
|
||||||
|
$scope.step = 3;
|
||||||
|
}
|
||||||
|
if (n == 4)
|
||||||
|
finalStep();
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.addButton = function(index, item) {
|
||||||
|
var newWord = {
|
||||||
|
word: item.word,
|
||||||
|
prevIndex: index
|
||||||
|
};
|
||||||
|
$scope.customWords.push(newWord);
|
||||||
|
$scope.shuffledMnemonicWords[index].selected = true;
|
||||||
|
$scope.shouldContinue();
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.removeButton = function(index, item) {
|
||||||
|
if ($scope.loading) return;
|
||||||
|
$scope.customWords.splice(index, 1);
|
||||||
|
$scope.shuffledMnemonicWords[item.prevIndex].selected = false;
|
||||||
|
$scope.shouldContinue();
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.shouldContinue = function() {
|
||||||
|
if ($scope.customWords.length == $scope.shuffledMnemonicWords.length)
|
||||||
|
$scope.selectComplete = true;
|
||||||
|
else
|
||||||
|
$scope.selectComplete = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.button-clear{
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
@ -970,3 +970,4 @@ input[type=number] {
|
||||||
@import 'views/onboarding/onboarding';
|
@import 'views/onboarding/onboarding';
|
||||||
@import "views/includes/walletActivity";
|
@import "views/includes/walletActivity";
|
||||||
@import "views/includes/wallets";
|
@import "views/includes/wallets";
|
||||||
|
@import "views/includes/modals/modals";
|
||||||
|
|
|
||||||
3
src/sass/views/includes/modals/backup-confirm-modal.scss
Normal file
3
src/sass/views/includes/modals/backup-confirm-modal.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
#backup-confirm-modal{
|
||||||
|
|
||||||
|
}
|
||||||
47
src/sass/views/includes/modals/modals.scss
Normal file
47
src/sass/views/includes/modals/modals.scss
Normal file
|
|
@ -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, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "backup-confirm-modal";
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
background: rgba(246, 246, 246, 0.87);
|
background: rgba(246, 246, 246, 0.87);
|
||||||
padding: .5rem .5rem 1.7rem;
|
padding: .5rem .5rem 1.7rem;
|
||||||
border: 2px dashed rgb(206, 206, 206);
|
border: 2px dashed rgb(206, 206, 206);
|
||||||
width: 80%;
|
width: 90%;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
color: rgb(43, 43, 43);
|
color: rgb(43, 43, 43);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue