anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'ref/design' of https://github.com/bitpay/bitpay-wallet into feature/onboarding_push_notifications

Browse source
This commit is contained in:
Jamal Jackson 2016-09-14 14:46:23 -04:00
commit 30f8a641b1
5 changed files with 179 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

26
public/views/backup.html
View file

@ -6,7 +6,14 @@
</ion-nav-bar> </ion-nav-bar>
<ion-content> <ion-content>
<div ng-show="deleted"> <div ng-show="deleted">
<span translate>Wallet recovery phrase not available. You can still export it from Advanced &gt; Export.</span> <div class="row text-center">
<h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
</div>
<div class="row text-center">
<p translate class="col col-75 center-block">
You can still export it from Advanced &gt; Export.
</p>
</div>
</div> </div>
<!-- <!--
## STEP 1 ## STEP 1
@ -20,11 +27,12 @@
Please carefully write down this phrase Please carefully write down this phrase
</p> </p>
</div> </div>
<div ng-show="mnemonicHasPassphrase"> <div class="row text-center" ng-show="mnemonicHasPassphrase">
<i class="ion-alert-circled"></i> <p class="bold-text col col-80 center-block">
<span translate> <span translate>
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed. This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
</span> </span>
</p>
</div> </div>
<div class="cta-buttons"> <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 ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-block button-positive" ng-click="goToStep(2);" translate>I've written it down
@ -49,7 +57,7 @@
ng-disabled="shuffledWord.selected">{{shuffledWord.word}} ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
</button> </button>
</span> </span>
<button ng-show="selectComplete" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button> <button ng-show="selectComplete" id="confirm-phrase" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button>
</div> </div>
</div> </div>
<!-- <!--
@ -59,9 +67,9 @@
<h5 translate>Enter your password</h5> <h5 translate>Enter your password</h5>
<label class="item item-input item-stacked-label"> <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> <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> </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> </button>
</div> </div>
</ion-content> </ion-content>

6
public/views/includes/confirmBackupPopup.html
View file

@ -8,7 +8,7 @@
<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> <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 <button
class="button button-clear expand" class="button button-clear expand"
ng-click="closePopup(true)" ng-click="closeBackupResultModal()"
translate>I Understand translate>I Understand
</button> </button>
</div> </div>
@ -18,8 +18,8 @@
Please review your backup and try again</p> Please review your backup and try again</p>
<button <button
class="button button-block button-stable" class="button button-block button-stable"
ng-click="closePopup(false)" ng-click="closeBackupResultModal()">
translate>Ok Ok
</button> </button>
</div> </div>
</div> </div>

64
src/js/controllers/backup.js
View file

@ -1,9 +1,9 @@
'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, popupService, gettextCatalog, $ionicModal) { function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, lodash, profileService, bwcService, walletService, ongoingProcess, popupService, gettextCatalog, $ionicModal) {
var wallet = profileService.getWallet($stateParams.walletId); var wallet = profileService.getWallet($stateParams.walletId);
$ionicNavBarDelegate.title(wallet.credentials.walletName); $scope.viewTitle = wallet.name || wallet.credentials.walletName;
$scope.n = wallet.n; $scope.n = wallet.n;
var keys; var keys;
@ -50,12 +50,13 @@ angular.module('copayApp.controllers').controller('backupController',
if (!keys) return; if (!keys) return;
var words = keys.mnemonic; var words = keys.mnemonic;
$scope.data = {};
$scope.mnemonicWords = words.split(/[\u3000\s]+/); $scope.mnemonicWords = words.split(/[\u3000\s]+/);
$scope.shuffledMnemonicWords = shuffledWords($scope.mnemonicWords); $scope.shuffledMnemonicWords = shuffledWords($scope.mnemonicWords);
$scope.mnemonicHasPassphrase = wallet.mnemonicHasPassphrase(); $scope.mnemonicHasPassphrase = wallet.mnemonicHasPassphrase();
$scope.useIdeograms = words.indexOf("\u3000") >= 0; $scope.useIdeograms = words.indexOf("\u3000") >= 0;
$scope.passphrase = ''; $scope.data.passphrase = null;
$scope.customWords = []; $scope.customWords = [];
$scope.step = 1; $scope.step = 1;
$scope.selectComplete = false; $scope.selectComplete = false;
@ -86,44 +87,39 @@ angular.module('copayApp.controllers').controller('backupController',
}, 1); }, 1);
}; };
$ionicModal.fromTemplateUrl('views/includes/confirmBackupPopup.html', { function openConfirmBackupModal() {
scope: $scope, $ionicModal.fromTemplateUrl('views/includes/confirmBackupPopup.html', {
animation: 'slide-in-up' scope: $scope,
}).then(function(modal) { backdropClickToClose: false,
$scope.modal = modal; hardwareBackButtonClose: false
}); }).then(function(modal) {
$scope.openModal = function() { $scope.confirmBackupModal = modal;
$scope.modal.show(); $scope.confirmBackupModal.show();
});
}; };
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
var openPopup = function() {
var showBackupResult = function() {
if ($scope.backupError) { if ($scope.backupError) {
var title = gettextCatalog.getString('uh oh...'); 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"); 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() { popupService.showAlert(title, message, function() {
$scope.goToStep(1); $scope.goToStep(1);
}) })
} else {
openConfirmBackupModal();
} }
else { };
$scope.openModal();
$scope.closePopup = function() { $scope.closeBackupResultModal = function() {
$scope.closeModal(); $scope.confirmBackupModal.hide();
if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
else { if ($stateParams.fromOnboarding) {
$ionicHistory.clearHistory(); $state.go('onboarding.disclaimer');
$state.go('tabs.home') } else {
} $ionicHistory.clearHistory();
}; $state.go('tabs.home');
} }
} };
var confirm = function(cb) { var confirm = function(cb) {
$scope.backupError = false; $scope.backupError = false;
@ -139,7 +135,7 @@ angular.module('copayApp.controllers').controller('backupController',
var walletClient = bwcService.getClient(); var walletClient = bwcService.getClient();
var separator = $scope.useIdeograms ? '\u3000' : ' '; var separator = $scope.useIdeograms ? '\u3000' : ' ';
var customSentence = customWordList.join(separator); var customSentence = customWordList.join(separator);
var passphrase = $scope.passphrase || ''; var passphrase = $scope.data.passphrase || '';
try { try {
walletClient.seedFromMnemonic(customSentence, { walletClient.seedFromMnemonic(customSentence, {
@ -171,7 +167,7 @@ angular.module('copayApp.controllers').controller('backupController',
backupError(err); backupError(err);
} }
$timeout(function() { $timeout(function() {
openPopup(); showBackupResult();
return; return;
}, 1); }, 1);
}); });
@ -216,4 +212,4 @@ angular.module('copayApp.controllers').controller('backupController',
$scope.selectComplete = false; $scope.selectComplete = false;
}; };
}); });

4
src/sass/common.scss
View file

@ -80,3 +80,7 @@ ion-header-bar{
.border-top{ .border-top{
border-top:1px solid rgb(228,228,228); border-top:1px solid rgb(228,228,228);
} }
.bold-text{
font-weight: bold !important;
}

197
src/sass/views/wallet-backup-phrase.scss
View file

@ -1,73 +1,128 @@
#wallet-backup-phrase { #wallet-backup-phrase {
&, &,
& ion-content, & ion-content,
& ion-content .scroll { & ion-content .scroll {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
.bar.bar-royal { .bar.bar-royal {
.title { .title {
font-size: 1rem; font-size: 1rem;
} }
} }
background: #fff; background: #fff;
.backup-phrase { .backup-phrase {
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: 90%; width: 95%;
margin: 1rem auto; margin: 1rem auto;
color: rgb(43, 43, 43); color: rgb(43, 43, 43);
text-align: center; text-align: center;
span { span {
line-height: 2rem; line-height: 2rem;
font-weight: bold; font-weight: bold;
max-width: 400px; max-width: 400px;
color: rgb(43, 43, 43); color: rgb(43, 43, 43);
} }
} }
p { p {
color: rgb(58, 58, 58); color: rgb(58, 58, 58);
font-weight: 200; font-weight: 200;
} }
.cta-buttons { .cta-buttons {
position: absolute; position: absolute;
width: 100%; width: 100%;
text-align: center; text-align: center;
bottom: 80px; bottom: 90px;
button { button {
max-width: 400px; max-width: 400px;
} }
} }
.select-word { .select-word {
background: #fff; background: #fff;
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37); box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
margin: .5rem 0 0; margin: .25rem 0 .25rem;
display: inline-block; display: inline-block;
padding: 0 5px; padding: 0 5px;
} }
#select-phrase { #select-phrase {
background: rgba(246, 246, 246, 0.87); background: rgba(246, 246, 246, 0.87);
width: 100%; width: 100%;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 43px; bottom: 43px;
padding-bottom: 20px; padding-bottom: 20px;
p { p {
font-weight: bold; font-weight: bold;
font-weight: bold; font-weight: bold;
padding-top: .7rem; padding-top: .7rem;
margin-bottom: 0.9rem; margin-bottom: 0.3rem;
float: left; float: left;
width: 100%; width: 100%;
} }
.select-word { .select-word {
&.button[disabled] { &.button[disabled] {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
color: transparent; color: transparent;
border: 1px solid rgb(211, 211, 211); 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;
}
}
}