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">
|
||||
<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(true)"
|
||||
translate>Got it
|
||||
</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="closePopup(false)"
|
||||
translate>Ok
|
||||
</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="closePopup(true)"
|
||||
translate>Got it
|
||||
</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="closePopup(false)"
|
||||
translate>Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,199 +1,209 @@
|
|||
'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) {
|
||||
var wallet = profileService.getWallet($stateParams.walletId);
|
||||
$ionicNavBarDelegate.title(wallet.credentials.walletName);
|
||||
$scope.n = wallet.n;
|
||||
var keys;
|
||||
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);
|
||||
$ionicNavBarDelegate.title(wallet.credentials.walletName);
|
||||
$scope.n = wallet.n;
|
||||
var keys;
|
||||
|
||||
$scope.credentialsEncrypted = wallet.isPrivKeyEncrypted();
|
||||
$scope.credentialsEncrypted = wallet.isPrivKeyEncrypted();
|
||||
|
||||
var isDeletedSeed = function() {
|
||||
if (!wallet.credentials.mnemonic && !wallet.credentials.mnemonicEncrypted)
|
||||
return true;
|
||||
var isDeletedSeed = function() {
|
||||
if (!wallet.credentials.mnemonic && !wallet.credentials.mnemonicEncrypted)
|
||||
return true;
|
||||
|
||||
return false;
|
||||
};
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.deleted = isDeletedSeed();
|
||||
if ($scope.deleted) {
|
||||
$log.debug('no mnemonics');
|
||||
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);
|
||||
}
|
||||
};
|
||||
$scope.init = function() {
|
||||
$scope.deleted = isDeletedSeed();
|
||||
if ($scope.deleted) {
|
||||
$log.debug('no mnemonics');
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
walletService.getKeys(wallet, function(err, k) {
|
||||
if (err || !k) {
|
||||
$state.go('wallet.preferences');
|
||||
return;
|
||||
}
|
||||
$scope.credentialsEncrypted = false;
|
||||
keys = k;
|
||||
$scope.initFlow();
|
||||
});
|
||||
};
|
||||
|
||||
$timeout(function() {
|
||||
if ($scope.mnemonicHasPassphrase) {
|
||||
var walletClient = bwcService.getClient();
|
||||
var separator = $scope.useIdeograms ? '\u3000' : ' ';
|
||||
var customSentence = customWordList.join(separator);
|
||||
var passphrase = $scope.passphrase || '';
|
||||
var shuffledWords = function(words) {
|
||||
var sort = lodash.sortBy(words);
|
||||
|
||||
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() {
|
||||
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
|
||||
return lodash.map(sort, function(w) {
|
||||
return {
|
||||
word: w,
|
||||
selected: false
|
||||
};
|
||||
$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.initFlow = function() {
|
||||
if (!keys) return;
|
||||
$scope.viewTitle = "Backup Phrase";
|
||||
var words = keys.mnemonic;
|
||||
|
||||
$scope.shouldContinue = function() {
|
||||
if ($scope.customWords.length == $scope.shuffledMnemonicWords.length)
|
||||
$scope.selectComplete = true;
|
||||
else
|
||||
$scope.selectComplete = false;
|
||||
};
|
||||
$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);
|
||||
};
|
||||
|
||||
$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/includes/walletActivity";
|
||||
@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);
|
||||
padding: .5rem .5rem 1.7rem;
|
||||
border: 2px dashed rgb(206, 206, 206);
|
||||
width: 80%;
|
||||
width: 90%;
|
||||
margin: 2rem auto;
|
||||
color: rgb(43, 43, 43);
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue