From 8f36bc6ad6478f8b31a834c0222d4469b87724de Mon Sep 17 00:00:00 2001 From: JDonadio Date: Wed, 16 Aug 2017 16:16:01 -0300 Subject: [PATCH 1/2] include backup flow --- src/assets/img/backup-warning.svg | 29 ++ src/assets/img/no-screenshot.svg | 27 ++ .../backup-confirm-modal.html | 22 ++ .../backup-confirm-modal.module.ts | 13 + .../backup-confirm-modal.scss | 39 +++ .../backup-confirm-modal.ts | 31 +++ src/pages/backup/backup-game/backup-game.html | 90 +++++++ .../backup/backup-game/backup-game.module.ts | 13 + src/pages/backup/backup-game/backup-game.scss | 183 +++++++++++++ src/pages/backup/backup-game/backup-game.ts | 249 ++++++++++++++++++ .../backup-warning-modal.html | 20 ++ .../backup-warning-modal.module.ts | 13 + .../backup-warning-modal.scss | 36 +++ .../backup-warning-modal.ts | 22 ++ .../backup/backup-warning/backup-warning.html | 19 ++ .../backup-warning/backup-warning.module.ts | 13 + .../backup/backup-warning/backup-warning.scss | 64 +++++ .../backup/backup-warning/backup-warning.ts | 25 ++ src/pages/home/home.html | 1 + src/pages/home/home.ts | 4 + src/pages/onboarding/tour/tour.html | 2 +- src/pages/onboarding/tour/tour.scss | 34 ++- src/pages/onboarding/welcome/welcome.html | 2 +- src/pages/onboarding/welcome/welcome.scss | 48 ++-- src/theme/variables.scss | 32 +-- 25 files changed, 959 insertions(+), 72 deletions(-) create mode 100644 src/assets/img/backup-warning.svg create mode 100644 src/assets/img/no-screenshot.svg create mode 100644 src/pages/backup/backup-confirm-modal/backup-confirm-modal.html create mode 100644 src/pages/backup/backup-confirm-modal/backup-confirm-modal.module.ts create mode 100644 src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss create mode 100644 src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts create mode 100644 src/pages/backup/backup-game/backup-game.html create mode 100644 src/pages/backup/backup-game/backup-game.module.ts create mode 100644 src/pages/backup/backup-game/backup-game.scss create mode 100644 src/pages/backup/backup-game/backup-game.ts create mode 100644 src/pages/backup/backup-warning-modal/backup-warning-modal.html create mode 100644 src/pages/backup/backup-warning-modal/backup-warning-modal.module.ts create mode 100644 src/pages/backup/backup-warning-modal/backup-warning-modal.scss create mode 100644 src/pages/backup/backup-warning-modal/backup-warning-modal.ts create mode 100644 src/pages/backup/backup-warning/backup-warning.html create mode 100644 src/pages/backup/backup-warning/backup-warning.module.ts create mode 100644 src/pages/backup/backup-warning/backup-warning.scss create mode 100644 src/pages/backup/backup-warning/backup-warning.ts diff --git a/src/assets/img/backup-warning.svg b/src/assets/img/backup-warning.svg new file mode 100644 index 000000000..a44e1e82a --- /dev/null +++ b/src/assets/img/backup-warning.svg @@ -0,0 +1,29 @@ + + + + backup-warning + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/no-screenshot.svg b/src/assets/img/no-screenshot.svg new file mode 100644 index 000000000..7ae7b3f4e --- /dev/null +++ b/src/assets/img/no-screenshot.svg @@ -0,0 +1,27 @@ + + + + no-screenshot + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html new file mode 100644 index 000000000..574b9f733 --- /dev/null +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html @@ -0,0 +1,22 @@ + + + + + +
+
+ +
+
+
+
+
+ Your bitcoin wallet is backed up! +
+
+ Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it. +
+ +
+
+ diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.module.ts b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.module.ts new file mode 100644 index 000000000..795b77eb7 --- /dev/null +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { BackupConfirmModalPage } from './backup-confirm-modal'; + +@NgModule({ + declarations: [ + BackupConfirmModalPage, + ], + imports: [ + IonicPageModule.forChild(BackupConfirmModalPage), + ], +}) +export class BackupConfirmModalPageModule {} diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss new file mode 100644 index 000000000..7c5532f27 --- /dev/null +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss @@ -0,0 +1,39 @@ +page-backup-confirm-modal { + .popup-modal-header-success { + background-color: $v-background-success; + display: flex; + justify-content: center; + padding: 1.5rem; + max-height: 10rem; + img { + max-height: 10rem; + height: 100%; + } + } + .popup-modal-content-success { + background-color: $v-onboarding-bar-header-color; + text-align: center; + height: 65%; + overflow-y: scroll; + padding: 3rem; + display: flex; + align-items: center; + .popup-modal-heading { + font-weight: bold; + font-size: 2rem; + padding-bottom: 1rem; + color: $v-dark-gray; + } + .popup-modal-message { + padding: 1.5rem; + font-size: 1.6rem; + color: $v-mid-gray; + } + .button-clear { + padding-top: 2rem; + background: none; + color: $v-background-success; + font-size: 1.6rem; + } + } +} diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts new file mode 100644 index 000000000..f20f1246c --- /dev/null +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; +import { IonicPage, ViewController, NavParams } from 'ionic-angular'; + +@IonicPage() +@Component({ + selector: 'page-backup-confirm-modal', + templateUrl: 'backup-confirm-modal.html', +}) +export class BackupConfirmModalPage { + + constructor(public viewCtrl: ViewController, public navParams: NavParams) { + } + + ionViewDidLoad() { + } + + closeBackupResultModal() { + // TODO waiting for bwc + // profileService.isDisclaimerAccepted(function(val) { + // if (val) { + // $ionicHistory.removeBackView(); + // $state.go('tabs.home'); + // } else $state.go('onboarding.disclaimer', { + // walletId: $stateParams.walletId, + // backedUp: true + // }); + // }); + this.viewCtrl.dismiss(); + } + +} diff --git a/src/pages/backup/backup-game/backup-game.html b/src/pages/backup/backup-game/backup-game.html new file mode 100644 index 000000000..7a4fe7ea0 --- /dev/null +++ b/src/pages/backup/backup-game/backup-game.html @@ -0,0 +1,90 @@ + + + + + {{wallet.name || 'Backup'}} + + + + + + +
+
Wallet recovery phrase not available.
+
You can still export it from Advanced > Export.
+
+ + + +
+
Please carefully write down this phrase.
+
+ + +
+ + {{word}} + 　 + +
+
+
+
+ This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed. +
+
+
+
We'll confirm on the next screen.
+ +
+
+ + + +
+
Let's verify your backup phrase.
+
+
+ +
+
+
+
Please tap each word in the correct order.
+
Is this correct?
+
+ +
+
+ + +
+
+
+ + + +
+
Enter your password
+
+
In order to verify your wallet backup, please type your password.
+
+ +
+
+
+ +
+
+ + + diff --git a/src/pages/backup/backup-game/backup-game.module.ts b/src/pages/backup/backup-game/backup-game.module.ts new file mode 100644 index 000000000..ec5b478b2 --- /dev/null +++ b/src/pages/backup/backup-game/backup-game.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { BackupGamePage } from './backup-game'; + +@NgModule({ + declarations: [ + BackupGamePage, + ], + imports: [ + IonicPageModule.forChild(BackupGamePage), + ], +}) +export class BackupGamePageModule {} diff --git a/src/pages/backup/backup-game/backup-game.scss b/src/pages/backup/backup-game/backup-game.scss new file mode 100644 index 000000000..f6931e022 --- /dev/null +++ b/src/pages/backup/backup-game/backup-game.scss @@ -0,0 +1,183 @@ +page-backup-game { + font-size: 16px; + + .header-md::after { + background: none; + } + .navbarc { + .bar-button { + color: $v-onboarding-bar-header-button-color; + } + .toolbar-background { + background: $v-primary-color; + } + .toolbar-content { + .title { + text-align: center; + margin-right: 56px; + .toolbar-title { + color: $v-onboarding-bar-header-color; + } + } + } + } + + .pages { + + .swiper-pagination { + display: none; + } + + .slide-zoom { + height: 100%; + + .wallet-backup-phrase1 { + height: 70%; + color: #445; + + .initial-prompt { + padding: 3rem; + } + + .backup-phrase { + background: #f2f2f2; + margin: auto; + border: 2px dashed #d9d9d9; + border-radius: 3px; + color: #445; + text-align: center; + max-width: 500px; + min-height: 12rem; + display: flex; + justify-content: center; + align-items: center; + } + + .password-required { + padding: 2rem; + font-size: 14px; + color: #DB5B44; + } + + .password-prompt { + background-color: #f2f2f2; + padding: 2rem; + + .description { + padding-bottom: 3rem; + } + } + + .cta-buttons { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding-bottom: 5vh; + + .tldr-prompt { + padding: 1rem; + } + + &.select-phrase { + background: #f2f2f2; + } + + &.confirm { + margin-top: 1rem; + } + } + + .button.primary { + width: 85%; + max-width: 300px; + min-height: 5rem; + font-size: 1.6rem; + border-radius: 3px; + cursor: pointer; + border-color: transparent; + background-color: $v-accent-color; + color: $v-onboarding-color; + &:active { + background-color: $v-btn-active-color; + } + } + + .button.button-clear { + width: 85%; + margin-top: 0.6rem; + max-width: 300px; + min-height: 5rem; + font-size: 1.6rem; + border-radius: 3px; + cursor: pointer; + border-color: transparent; + background-color: inherit; + color: $v-accent-color; + &:active { + opacity: 0.5; + } + } + + .button.select-word { + background: #1abb9b; + color: #192c3a; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); + display: inline-block; + margin: 3px 2px; + min-height: 35px; + line-height: 33px; + padding: 0 8px; + border-width: 1px; + border-color: transparent; + border-style: solid; + border-radius: 3px; + vertical-align: top; + text-align: center; + text-overflow: ellipsis; + font-size: 16px; + &:active { + background-color: $v-btn-active-color; + } + } + } + } + } +} + +@media not all and (min-height: 600px) and (min-width: 768px) { + .backup-modal-success ion-backdrop { + visibility: visible; + z-index: 0; + } + .backup-modal-success { + display: flex; + justify-content: center; + align-items: center; + .modal-wrapper { + width: 90%; + max-width: 350px; + height: 40%; + min-height: 350px; + } + } +} + +.backup-modal-success { + .modal-wrapper { + max-height: 40rem; + ion-content { + max-height: 40rem; + text-align: center; + border-radius: 12px; + .scroll-content { + overflow-y: hidden; + border-radius: 12px; + padding: 0rem; + .popup-modal-content-success { + overflow-y: hidden; + } + } + } + } +} diff --git a/src/pages/backup/backup-game/backup-game.ts b/src/pages/backup/backup-game/backup-game.ts new file mode 100644 index 000000000..42447493e --- /dev/null +++ b/src/pages/backup/backup-game/backup-game.ts @@ -0,0 +1,249 @@ +import { Component, ViewChild } from '@angular/core'; +import { IonicPage, NavController, NavParams, Slides, Navbar, AlertController, ModalController } from 'ionic-angular'; +import * as _ from 'lodash'; + +@IonicPage() +@Component({ + selector: 'page-backup-game', + templateUrl: 'backup-game.html', +}) +export class BackupGamePage { + @ViewChild(Slides) slides: Slides; + @ViewChild(Navbar) navBar: Navbar; + + public currentIndex: number; + public deleted: boolean; + public wallet: any; + public mnemonicWords: Array; + public shuffledMnemonicWords: Array; + public passphrase: String; + public customWords: Array; + public selectComplete: boolean; + public error: boolean; + + private keys: any; + private useIdeograms: any; + + constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public modalCtrl: ModalController) { + // TODO replace for the original wallet object + this.wallet = { + name: 'Wallet name', + credentials: { + mnemonic: 'uno dos tres cuatro cinco seis siete ocho nueve diez once doce', + //mnemonic: 'turtle provide boat sick popular brisk test devote gossip embark endorse corn', + mnemonicEncrypted: false, + }, + n: 1, + // isPrivKeyEncrypted: this.isPrivKeyEncrypted(), + // mnemonicHasPassphrase: this.mnemonicHasPassphrase(), + isPrivKeyEncrypted: false, + mnemonicHasPassphrase: false, + network: 'livenet', + }; + + // TODO waiting for bwc + // walletService.getKeys($scope.wallet, function(err, k) { + // if (err || !k) { + // $log.error('Could not get keys: ', err); + // $ionicHistory.goBack(); + // return; + // } + // $scope.credentialsEncrypted = false; + // keys = k; + // $scope.initFlow(); + // }); + this.keys = null; + + // this.deleted = this.isDeletedSeed(); + this.deleted = false; + } + + ngOnInit() { + this.currentIndex = 0; + this.navBar.backButtonClick = (e: UIEvent) => { + this.slidePrev(); + } + this.initFlow(); + } + + ionViewDidLoad() { + } + + initFlow() { + // if (!this.keys) return; + + // var words = keys.mnemonic; + var words = this.wallet.credentials.mnemonic; + // $scope.data = {}; + + this.mnemonicWords = words.split(/[\u3000\s]+/); + this.shuffledMnemonicWords = this.shuffledWords(this.mnemonicWords); + this.useIdeograms = words.indexOf("\u3000") >= 0; + this.passphrase = null; + this.customWords = []; + this.selectComplete = false; + this.error = false; + + // words = _.repeat('x', 300); + if (this.currentIndex == 2) this.slidePrev(); + }; + + shuffledWords(words: Array) { + var sort = _.sortBy(words); + + return _.map(sort, (w) => { + return { + word: w, + selected: false + }; + }); + }; + + addButton(index: number, item: any) { + var newWord = { + word: item.word, + prevIndex: index + }; + this.customWords.push(newWord); + this.shuffledMnemonicWords[index].selected = true; + this.shouldContinue(); + }; + + removeButton(index: number, item: any) { + // if ($scope.loading) return; + this.customWords.splice(index, 1); + this.shuffledMnemonicWords[item.prevIndex].selected = false; + this.shouldContinue(); + }; + + shouldContinue() { + if (this.customWords.length == this.shuffledMnemonicWords.length) + this.selectComplete = true; + else + this.selectComplete = false; + }; + + finalStep() { + // ongoingProcess.set('validatingWords', true); + this.confirm((err) => { + // ongoingProcess.set('validatingWords', false); + if (err) { + this.backupError(err); + } + setTimeout(() => { + this.showBackupResult(); + return; + }); + }); + }; + + confirm(cb: Function) { + this.error = false; + + var customWordList = _.map(this.customWords, 'word'); + + if (!_.isEqual(this.mnemonicWords, customWordList)) { + return cb('Mnemonic string mismatch'); + } + + setTimeout(() => { + // TODO waiting for bwc + // if (this.mnemonicHasPassphrase) { + // var walletClient = bwcService.getClient(); + // var separator = this.useIdeograms ? '\u3000' : ' '; + // var customSentence = customWordList.join(separator); + // var passphrase = this.data.passphrase || ''; + // + // try { + // walletClient.seedFromMnemonic(customSentence, { + // network: this.wallet.credentials.network, + // passphrase: passphrase, + // account: this.wallet.credentials.account + // }); + // } catch (err) { + // walletClient.credentials.xPrivKey = _.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($scope.wallet.credentials.walletId); + return cb(); + }); + }; + + backupError(err: any) { + // ongoingProcess.set('validatingWords', false); + console.log('Failed to verify backup: ', err); + this.error = true; + }; + + showBackupResult() { + if (this.error) { + let alert = this.alertCtrl.create({ + title: "Uh oh...", + subTitle: "It's important 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.", + buttons: [{ + text: 'Ok', + role: 'cancel', + handler: () => { + this.initFlow(); + } + }] + }); + alert.present(); + } else { + const myModal = this.modalCtrl.create('BackupConfirmModalPage', {}, { + showBackdrop: true, + enableBackdropDismiss: true, + cssClass: "backup-modal-success" + }); + myModal.present(); + } + }; + + /********************************* + * Hardcoded methods + */ + + mnemonicHasPassphrase() { + return false; + } + + isPrivKeyEncrypted() { + return false; + } + + /* + * Hardcoded methods + *********************************/ + + isDeletedSeed() { + if (!this.wallet.credentials.mnemonic && !this.wallet.credentials.mnemonicEncrypted) + return true; + + return false; + } + + slidePrev() { + if (this.currentIndex == 0) this.navCtrl.pop(); + else { + this.slides.slidePrev(); + this.currentIndex = this.slides.getActiveIndex(); + } + } + + slideNext() { + if (this.currentIndex == 1 && !this.wallet.mnemonicHasPassphrase) + this.finalStep(); + else + this.slides.slideNext(); + + this.currentIndex = this.slides.getActiveIndex(); + } + +} diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.html b/src/pages/backup/backup-warning-modal/backup-warning-modal.html new file mode 100644 index 000000000..68fd44271 --- /dev/null +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.html @@ -0,0 +1,20 @@ + + + + + +
+ +
+
+
+
+ Screenshots are not secure +
+
+ If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen. +
+ +
+
+ diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.module.ts b/src/pages/backup/backup-warning-modal/backup-warning-modal.module.ts new file mode 100644 index 000000000..aaf3be658 --- /dev/null +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { BackupWarningModalPage } from './backup-warning-modal'; + +@NgModule({ + declarations: [ + BackupWarningModalPage, + ], + imports: [ + IonicPageModule.forChild(BackupWarningModalPage), + ], +}) +export class BackupWarningModalPageModule {} diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss new file mode 100644 index 000000000..9567efd1f --- /dev/null +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss @@ -0,0 +1,36 @@ +page-backup-warning-modal { + .popup-modal-header-warning { + background: #ffa500; + } + .popup-modal-header { + padding: 1rem; + border-radius: 12px 12px 0 0; + min-height: 120px; + } + .popup-modal-content-warning { + background-color: $v-onboarding-bar-header-color; + text-align: center; + height: 65%; + overflow-y: scroll; + padding: 1rem; + display: flex; + align-items: center; + .popup-modal-heading { + font-weight: bold; + font-size: 2rem; + padding-bottom: 1rem; + color: $v-dark-gray; + } + .popup-modal-message { + padding: 1.5rem; + font-size: 1.6rem; + color: $v-mid-gray; + } + .button-clear { + padding-top: 2rem; + background: none; + color: $v-background-warning; + font-size: 1.6rem; + } + } +} diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.ts b/src/pages/backup/backup-warning-modal/backup-warning-modal.ts new file mode 100644 index 000000000..150306eb8 --- /dev/null +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular'; + +@IonicPage() +@Component({ + selector: 'page-backup-warning-modal', + templateUrl: 'backup-warning-modal.html', +}) +export class BackupWarningModalPage { + + constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) { + } + + ionViewDidLoad() { + } + + close() { + this.navCtrl.push('BackupGamePage'); + this.viewCtrl.dismiss(); + } + +} diff --git a/src/pages/backup/backup-warning/backup-warning.html b/src/pages/backup/backup-warning/backup-warning.html new file mode 100644 index 000000000..22f125276 --- /dev/null +++ b/src/pages/backup/backup-warning/backup-warning.html @@ -0,0 +1,19 @@ + + + + + + + + + +
Are you being watched?
+
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
+
+ +
+
+
Anyone with your backup phrase can access or spend your bitcoin.
+ +
+ diff --git a/src/pages/backup/backup-warning/backup-warning.module.ts b/src/pages/backup/backup-warning/backup-warning.module.ts new file mode 100644 index 000000000..b593823fc --- /dev/null +++ b/src/pages/backup/backup-warning/backup-warning.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { BackupWarningPage } from './backup-warning'; + +@NgModule({ + declarations: [ + BackupWarningPage, + ], + imports: [ + IonicPageModule.forChild(BackupWarningPage), + ], +}) +export class BackupWarningPageModule {} diff --git a/src/pages/backup/backup-warning/backup-warning.scss b/src/pages/backup/backup-warning/backup-warning.scss new file mode 100644 index 000000000..a7632bd0e --- /dev/null +++ b/src/pages/backup/backup-warning/backup-warning.scss @@ -0,0 +1,64 @@ +page-backup-warning { + position: relative; + .buttons { + padding: 15px; + width: 100%; + position: absolute; + bottom: 0px; + padding: 15px 15px 4vh 15px; + } + .backup-illustration-backup-warning { + height: inherit; + img { + padding-top: 10%; + width: 65%; + max-width: 400px; + } + } + + .navbarc { + .bar-button { + color: $v-accent-color; + } + } + .header-md::after { + background: none; + } +} + +@media not all and (min-height: 600px) and (min-width: 768px) { + .backup-modal-warning ion-backdrop { + visibility: visible; + z-index: 0; + } + .backup-modal-warning { + display: flex; + justify-content: center; + align-items: center; + .modal-wrapper { + width: 90%; + max-width: 350px; + height: 40%; + min-height: 350px; + } + } +} + +.backup-modal-warning { + .modal-wrapper { + max-height: 40rem; + ion-content { + max-height: 40rem; + text-align: center; + border-radius: 12px; + .scroll-content { + overflow-y: hidden; + border-radius: 12px; + padding: 0rem; + .popup-modal-content-warning { + overflow-y: hidden; + } + } + } + } +} diff --git a/src/pages/backup/backup-warning/backup-warning.ts b/src/pages/backup/backup-warning/backup-warning.ts new file mode 100644 index 000000000..3ba9405a1 --- /dev/null +++ b/src/pages/backup/backup-warning/backup-warning.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular'; + +@IonicPage() +@Component({ + selector: 'page-backup-warning', + templateUrl: 'backup-warning.html', +}) +export class BackupWarningPage { + + public currentIndex: number; + + constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) { + } + + ionViewDidLoad() { + console.log('ionViewDidLoad BackupWarningPage'); + } + + openWarningModal() { + const myModal = this.modalCtrl.create('BackupWarningModalPage', {}, { showBackdrop: true, enableBackdropDismiss: true, cssClass: "backup-modal-warning" }); + myModal.present(); + } + +} diff --git a/src/pages/home/home.html b/src/pages/home/home.html index f00526580..f10473790 100644 --- a/src/pages/home/home.html +++ b/src/pages/home/home.html @@ -6,4 +6,5 @@ + diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index cf20e0a84..f84a52b18 100644 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -14,4 +14,8 @@ export class HomePage { showOnboardingFlow() { this.navCtrl.push('WelcomePage'); } + + showBackupFlow() { + this.navCtrl.push('BackupWarningPage'); + } } diff --git a/src/pages/onboarding/tour/tour.html b/src/pages/onboarding/tour/tour.html index cc4ce0ee1..58b556875 100644 --- a/src/pages/onboarding/tour/tour.html +++ b/src/pages/onboarding/tour/tour.html @@ -10,7 +10,7 @@ - +
diff --git a/src/pages/onboarding/tour/tour.scss b/src/pages/onboarding/tour/tour.scss index 8eed337c4..54fa8ccc0 100644 --- a/src/pages/onboarding/tour/tour.scss +++ b/src/pages/onboarding/tour/tour.scss @@ -1,23 +1,21 @@ page-tour { - .tour { - position: relative; + position: relative; - .pages { - position: absolute; - } - .buttons { - padding: 15px; - width: 100%; - position: absolute; - bottom: 0px; - padding: 15px 15px 9vh 15px; - } - .slide-zoom { - height: inherit; - img { - padding-top: 10%; - width: 65%; - } + .pages { + position: absolute; + } + .buttons { + padding: 15px; + width: 100%; + position: absolute; + bottom: 0px; + padding: 15px 15px 9vh 15px; + } + .slide-zoom { + height: inherit; + img { + padding-top: 10%; + width: 65%; } } diff --git a/src/pages/onboarding/welcome/welcome.html b/src/pages/onboarding/welcome/welcome.html index 2638a87d4..36079b3c0 100644 --- a/src/pages/onboarding/welcome/welcome.html +++ b/src/pages/onboarding/welcome/welcome.html @@ -2,7 +2,7 @@ - +

Take control of your money,
get started with bitcoin.

diff --git a/src/pages/onboarding/welcome/welcome.scss b/src/pages/onboarding/welcome/welcome.scss index ed925aa5d..263a89749 100644 --- a/src/pages/onboarding/welcome/welcome.scss +++ b/src/pages/onboarding/welcome/welcome.scss @@ -1,33 +1,31 @@ page-welcome { - .welcome { - position: relative; + position: relative; - .logo-tagline { - position: absolute; - width: 100%; - height: 70%; - display: flex; - flex-direction: column; - justify-content: space-around; + .logo-tagline { + position: absolute; + width: 100%; + height: 70%; + display: flex; + flex-direction: column; + justify-content: space-around; - img { - width: 50%; - max-width: 200px; - margin: 5rem auto 0; - } - - p { - line-height: 1.6; - font-size: 18px; - text-align: center; - } + img { + width: 50%; + max-width: 200px; + margin: 5rem auto 0; } - .buttons { - width: 100%; - position: absolute; - bottom: 0px; - padding: 15px 15px 4vw 15px; + p { + line-height: 1.6; + font-size: 18px; + text-align: center; } } + + .buttons { + width: 100%; + position: absolute; + bottom: 0px; + padding: 15px 15px 4vw 15px; + } } diff --git a/src/theme/variables.scss b/src/theme/variables.scss index fdc61d3ba..27972a42b 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -21,7 +21,11 @@ $v-accent-color: #1abb9b; $v-dark-gray: #445 !default; $v-mid-gray: #667 !default; $v-light-gray: #9b9bab !default; +$v-title-gray: #c2c9d1 !default; $v-subtle-gray: darken(#ffffff, 5%) !default; +$v-btn-active-color: #148e76; +$v-background-warning: #ffa500; +$v-background-success: #1abb9b; $v-onboarding-color: #ffffff !default; $v-onboarding-bar-header-color: #ffffff !default; @@ -35,33 +39,6 @@ $v-button-primary-bg: $v-accent-color !default; $v-visible-radius: 6px !default; -// Shared Variables -// -------------------------------------------------- -// To customize the look and feel of this app, you can override -// the Sass variables found in Ionic's source scss files. -// To view all the possible Ionic variables, see: -// http://ionicframework.com/docs/theming/overriding-ionic-variables/ - - - - -// Named Color Variables -// -------------------------------------------------- -// Named colors makes it easy to reuse colors on various components. -// It's highly recommended to change the default colors -// to match your app's branding. Ionic uses a Sass map of -// colors so you can add, rename and remove colors as needed. -// The "primary" color is the only required color in the map. - -$colors: ( - primary: #488aff, - secondary: #32db64, - danger: #f53d3d, - light: #f4f4f4, - dark: #222 -); - - // App iOS Variables // -------------------------------------------------- // iOS only Sass variables can go here @@ -137,6 +114,7 @@ $colors: ( .onboarding-topic, .onboarding-description, .onboarding-tldr { + color: $v-title-gray; margin-left: 3rem; margin-right: 3rem; } From 8da659b965d208c47fe43d843c89a1687249ef1c Mon Sep 17 00:00:00 2001 From: JDonadio Date: Thu, 17 Aug 2017 15:19:52 -0300 Subject: [PATCH 2/2] fix styles and navigation --- .../backup-confirm-modal/backup-confirm-modal.ts | 4 ++-- src/pages/backup/backup-game/backup-game.html | 6 ------ src/pages/backup/backup-game/backup-game.ts | 13 ++++++++++--- .../backup-warning-modal/backup-warning-modal.ts | 4 ++-- src/pages/backup/backup-warning/backup-warning.ts | 7 +++++-- 5 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts index f20f1246c..8c6324a66 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { IonicPage, ViewController, NavParams } from 'ionic-angular'; +import { IonicPage, ViewController } from 'ionic-angular'; @IonicPage() @Component({ @@ -8,7 +8,7 @@ import { IonicPage, ViewController, NavParams } from 'ionic-angular'; }) export class BackupConfirmModalPage { - constructor(public viewCtrl: ViewController, public navParams: NavParams) { + constructor(public viewCtrl: ViewController) { } ionViewDidLoad() { diff --git a/src/pages/backup/backup-game/backup-game.html b/src/pages/backup/backup-game/backup-game.html index 7a4fe7ea0..9c7b9aa1c 100644 --- a/src/pages/backup/backup-game/backup-game.html +++ b/src/pages/backup/backup-game/backup-game.html @@ -1,9 +1,3 @@ - diff --git a/src/pages/backup/backup-game/backup-game.ts b/src/pages/backup/backup-game/backup-game.ts index 42447493e..50fe3ee4b 100644 --- a/src/pages/backup/backup-game/backup-game.ts +++ b/src/pages/backup/backup-game/backup-game.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core'; -import { IonicPage, NavController, NavParams, Slides, Navbar, AlertController, ModalController } from 'ionic-angular'; +import { IonicPage, NavController, Slides, Navbar, AlertController, ModalController, Modal } from 'ionic-angular'; import * as _ from 'lodash'; @IonicPage() @@ -24,7 +24,7 @@ export class BackupGamePage { private keys: any; private useIdeograms: any; - constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public modalCtrl: ModalController) { + constructor(public navCtrl: NavController, public alertCtrl: AlertController, public modalCtrl: ModalController) { // TODO replace for the original wallet object this.wallet = { name: 'Wallet name', @@ -197,12 +197,19 @@ export class BackupGamePage { }); alert.present(); } else { - const myModal = this.modalCtrl.create('BackupConfirmModalPage', {}, { + let self = this; + const myModal: Modal = self.modalCtrl.create('BackupConfirmModalPage', {}, { showBackdrop: true, enableBackdropDismiss: true, cssClass: "backup-modal-success" }); + myModal.present(); + + myModal.onDidDismiss(() => { + console.log('MODAL DISSMISED'); + self.navCtrl.popToRoot(); // TODO NOT WORKING + }); } }; diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.ts b/src/pages/backup/backup-warning-modal/backup-warning-modal.ts index 150306eb8..874e32738 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.ts +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular'; +import { IonicPage, NavController, ViewController } from 'ionic-angular'; @IonicPage() @Component({ @@ -8,7 +8,7 @@ import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angul }) export class BackupWarningModalPage { - constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) { + constructor(public navCtrl: NavController, public viewCtrl: ViewController) { } ionViewDidLoad() { diff --git a/src/pages/backup/backup-warning/backup-warning.ts b/src/pages/backup/backup-warning/backup-warning.ts index 3ba9405a1..5c0dd2114 100644 --- a/src/pages/backup/backup-warning/backup-warning.ts +++ b/src/pages/backup/backup-warning/backup-warning.ts @@ -14,11 +14,14 @@ export class BackupWarningPage { } ionViewDidLoad() { - console.log('ionViewDidLoad BackupWarningPage'); } openWarningModal() { - const myModal = this.modalCtrl.create('BackupWarningModalPage', {}, { showBackdrop: true, enableBackdropDismiss: true, cssClass: "backup-modal-warning" }); + const myModal = this.modalCtrl.create('BackupWarningModalPage', {}, { + showBackdrop: true, + enableBackdropDismiss: true, + cssClass: "backup-modal-warning" + }); myModal.present(); }