diff --git a/public/views/backup.html b/public/views/backup.html index 66dddae7e..92c835615 100644 --- a/public/views/backup.html +++ b/public/views/backup.html @@ -1,86 +1,76 @@ - + - - +
- Wallet recovery phrase not available. You can still export it from Advanced > Export. -
- - -
-
Backup Phrase
-
- {{word}}  +
+

Wallet recovery phrase not available.

- +
+

+ You can still export it from Advanced > Export. +

+
+
+ +
+
+ {{word}}  +
+
+

Please carefully write down this phrase - - -

- +

+
+
+

This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed. -

- - +

- - - -
-
Let's verify your backup phrase
- - - -

- Please tap the words in order to confirm your backup phrase is correctly written. -

- - - - -
- - +
+
+ + + +
+
+

+ Please tap each word in the correct order. +

+ + + + +
+
+ - + -->
Enter your password
-
- diff --git a/public/views/includes/confirmBackupPopup.html b/public/views/includes/confirmBackupPopup.html index c77308c05..efe63ee09 100644 --- a/public/views/includes/confirmBackupPopup.html +++ b/public/views/includes/confirmBackupPopup.html @@ -1,9 +1,26 @@ -
-
Your bitcoin wallet is backed up!
-

Be sure to store your recovery phrase in a secure place. If this app is deelted, you money coont be recovered with out it.

- + diff --git a/src/js/controllers/backup.js b/src/js/controllers/backup.js index 681ffd081..aed2ee4df 100644 --- a/src/js/controllers/backup.js +++ b/src/js/controllers/backup.js @@ -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); }); diff --git a/src/sass/common.scss b/src/sass/common.scss index 502df7d91..1a8c2e6f8 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -80,3 +80,7 @@ ion-header-bar{ .border-top{ border-top:1px solid rgb(228,228,228); } + +.bold-text{ + font-weight: bold !important; +} \ No newline at end of file diff --git a/src/sass/forms.scss b/src/sass/forms.scss index e69de29bb..2c725b7fd 100644 --- a/src/sass/forms.scss +++ b/src/sass/forms.scss @@ -0,0 +1,3 @@ +.button-clear{ + background: none !important; +} \ No newline at end of file diff --git a/src/sass/main.scss b/src/sass/main.scss index ca2086550..a5ef679c1 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -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"; diff --git a/src/sass/views/includes/modals/backup-confirm-modal.scss b/src/sass/views/includes/modals/backup-confirm-modal.scss new file mode 100644 index 000000000..430d8cb5c --- /dev/null +++ b/src/sass/views/includes/modals/backup-confirm-modal.scss @@ -0,0 +1,3 @@ +#backup-confirm-modal{ + +} \ No newline at end of file diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss new file mode 100644 index 000000000..ced60fd17 --- /dev/null +++ b/src/sass/views/includes/modals/modals.scss @@ -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"; diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss new file mode 100644 index 000000000..912efe5f7 --- /dev/null +++ b/src/sass/views/wallet-backup-phrase.scss @@ -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; + } + } + }