mirror of https://github.com/BTCPrivate/copay.git
Fix styling backup view from onboarding
This commit is contained in:
Gustavo Maximiliano Cortez
parent
5c3c7be95d
commit
bae11817ef
|
|
@ -57,8 +57,7 @@ export class CopayApp {
|
|||
}
|
||||
else {
|
||||
this.logger.info('No profile exists.');
|
||||
// TODO: testing onboarding
|
||||
//this.profile.createProfile();
|
||||
this.profile.createProfile();
|
||||
this.rootPage = OnboardingPage;
|
||||
}
|
||||
}).catch((err: any) => {
|
||||
|
|
|
|||
|
|
@ -36,9 +36,7 @@ import { EmailPage } from '../pages/onboarding/email/email';
|
|||
import { OnboardingPage } from '../pages/onboarding/onboarding';
|
||||
import { TourPage } from '../pages/onboarding/tour/tour';
|
||||
import { BackupWarningPage } from '../pages/backup/backup-warning/backup-warning';
|
||||
import { BackupWarningModalPage } from '../pages/backup/backup-warning-modal/backup-warning-modal';
|
||||
import { BackupGamePage } from '../pages/backup/backup-game/backup-game';
|
||||
import { BackupConfirmModalPage } from '../pages/backup/backup-confirm-modal/backup-confirm-modal';
|
||||
|
||||
/* Tabs */
|
||||
import { HomePage } from '../pages/home/home';
|
||||
|
|
@ -98,9 +96,7 @@ let pages: any = [
|
|||
ImportWalletPage,
|
||||
JoinWalletPage,
|
||||
BackupWarningPage,
|
||||
BackupWarningModalPage,
|
||||
BackupGamePage,
|
||||
BackupConfirmModalPage,
|
||||
AboutPage,
|
||||
AdvancedPage,
|
||||
AltCurrencyPage,
|
||||
|
|
@ -189,10 +185,7 @@ export function providersComponents() {
|
|||
imports: [
|
||||
IonicModule.forRoot(CopayApp, {
|
||||
tabsHideOnSubPages: true,
|
||||
modalEnter: 'modal-slide-in',
|
||||
modalLeave: 'modal-slide-out',
|
||||
tabsPlacement: 'bottom',
|
||||
pageTransition: 'ios-transition'
|
||||
tabsPlacement: 'bottom'
|
||||
}),
|
||||
BrowserModule,
|
||||
HttpModule,
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<ion-content>
|
||||
<div class="confirm-modal-header">
|
||||
<img src='assets/img/backup/success.svg'/>
|
||||
</div>
|
||||
<div class="confirm-modal-content">
|
||||
<div>
|
||||
<div class="confirm-modal-heading">
|
||||
<span translate>Your bitcoin wallet is backed up!</span>
|
||||
</div>
|
||||
<div class="confirm-modal-message">
|
||||
<span translate>Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it.</span>
|
||||
</div>
|
||||
<button ion-button clear (click)="closeBackupResultModal()" translate>Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.confirm-modal-header {
|
||||
background: color($colors, success);
|
||||
padding: 1rem;
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 120px;
|
||||
}
|
||||
.confirm-modal-content {
|
||||
text-align: center;
|
||||
height: 65%;
|
||||
overflow-y: scroll;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.confirm-modal-heading {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.confirm-modal-message {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, ViewController } from 'ionic-angular';
|
||||
import { TabsPage } from '../../tabs/tabs';
|
||||
|
||||
@Component({
|
||||
selector: 'page-backup-confirm-modal',
|
||||
templateUrl: 'backup-confirm-modal.html',
|
||||
})
|
||||
export class BackupConfirmModalPage {
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public viewCtrl: ViewController
|
||||
) {}
|
||||
|
||||
closeBackupResultModal() {
|
||||
// TODO Set disclaimer accepted
|
||||
this.viewCtrl.dismiss();
|
||||
this.navCtrl.setRoot(TabsPage);
|
||||
this.navCtrl.popToRoot();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<ion-header>
|
||||
<ion-header no-border>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>{{wallet.name || 'Backup'}}</ion-title>
|
||||
|
|
@ -7,24 +7,24 @@
|
|||
</ion-header>
|
||||
|
||||
|
||||
<ion-content class="backup">
|
||||
<ion-content>
|
||||
<div *ngIf="deleted">
|
||||
<div translate>Wallet recovery phrase not available.</div>
|
||||
<div translate>You can still export it from Advanced > Export.</div>
|
||||
<h1 translate>Wallet recovery phrase not available.</h1>
|
||||
<p translate>You can still export it from Advanced > Export.</p>
|
||||
</div>
|
||||
|
||||
<ion-slides class="pages" pager="true" *ngIf="!deleted">
|
||||
<ion-slides pager="true" *ngIf="!deleted">
|
||||
<ion-slide>
|
||||
<div *ngIf="mnemonicWords[0] || !wallet.credentials.mnemonicEncrypted">
|
||||
<div translate>Please carefully write down this phrase.</div>
|
||||
<h4 translate>Please carefully write down this phrase.</h4>
|
||||
<div class="phrase">
|
||||
<span *ngFor="let word of mnemonicWords">
|
||||
<span>{{word}}</span>
|
||||
<span *ngIf="useIdeograms">　</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
|
||||
<div class="bottom-absolute">
|
||||
<div class="tldr" translate>We'll confirm on the next screen.</div>
|
||||
<button ion-button block [disabled]="wallet.credentials.mnemonicEncrypted || error" (click)="slideNext()" translate>I've written it down</button>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="phrase">
|
||||
<button ion-button outline *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="bottom-absolute">
|
||||
<div *ngIf="!selectComplete">
|
||||
<div class="tldr" translate>Please tap each word in the correct order.</div>
|
||||
<div>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="selectComplete">
|
||||
<div class="tldr" translate>Is this correct?</div>
|
||||
<div>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="bottom-absolute">
|
||||
<button ion-button block [disabled]="!passphrase" (click)="finalStep();" translate>Confirm</button>
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,43 @@
|
|||
page-backup-game {
|
||||
.backup {
|
||||
.pages {
|
||||
.swiper-pagination {
|
||||
display: none;
|
||||
}
|
||||
.slide-zoom {
|
||||
height: 100%;
|
||||
}
|
||||
.password-required {
|
||||
padding: 2rem;
|
||||
font-size: 14px;
|
||||
color: color($colors, danger);
|
||||
}
|
||||
.password {
|
||||
background-color: color($colors, light);
|
||||
padding: 2rem;
|
||||
}
|
||||
.phrase {
|
||||
display: -webkit-box;
|
||||
background: color($colors, light);
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 3px;
|
||||
color: color($colors, secondary);
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
min-height: 12rem;
|
||||
align-items: center;
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 5vh;
|
||||
.tldr {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
text-align: center;
|
||||
.toolbar-background{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.swiper-pagination {
|
||||
display: none;
|
||||
}
|
||||
.slide-zoom {
|
||||
height: 100%;
|
||||
}
|
||||
.password-required {
|
||||
padding: 2rem;
|
||||
font-size: 14px;
|
||||
color: color($colors, danger);
|
||||
}
|
||||
.password {
|
||||
background-color: color($colors, light);
|
||||
padding: 2rem;
|
||||
}
|
||||
.phrase {
|
||||
display: -webkit-box;
|
||||
background: color($colors, light);
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 3px;
|
||||
color: color($colors, secondary);
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
min-height: 12rem;
|
||||
align-items: center;
|
||||
margin: 20px 15px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.tldr {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { NavController, Slides, Navbar, AlertController, ModalController, Modal } from 'ionic-angular';
|
||||
import { NavController, Slides, Navbar, AlertController } from 'ionic-angular';
|
||||
import { TabsPage } from '../../tabs/tabs';
|
||||
import { BackupConfirmModalPage } from '../backup-confirm-modal/backup-confirm-modal';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
@Component({
|
||||
|
|
@ -26,9 +25,8 @@ export class BackupGamePage {
|
|||
private useIdeograms: any;
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public alertCtrl: AlertController,
|
||||
public modalCtrl: ModalController
|
||||
public navCtrl: NavController,
|
||||
public alertCtrl: AlertController
|
||||
) {
|
||||
// TODO replace for the original wallet object
|
||||
this.wallet = {
|
||||
|
|
@ -198,13 +196,18 @@ export class BackupGamePage {
|
|||
});
|
||||
alert.present();
|
||||
} else {
|
||||
let self = this;
|
||||
const myModal: Modal = self.modalCtrl.create(BackupConfirmModalPage, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: false,
|
||||
});
|
||||
|
||||
myModal.present();
|
||||
let opts = {
|
||||
title: 'Your bitcoin wallet is backed up!',
|
||||
message: 'Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it.',
|
||||
buttons: [{
|
||||
text: 'Got it',
|
||||
handler: () => {
|
||||
this.navCtrl.setRoot(TabsPage);
|
||||
this.navCtrl.popToRoot();
|
||||
}
|
||||
}],
|
||||
}
|
||||
this.alertCtrl.create(opts).present();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<ion-content>
|
||||
<div class="warning-modal-header">
|
||||
<img src='assets/img/backup/no-screenshot.svg'/>
|
||||
</div>
|
||||
<div class="warning-modal-content">
|
||||
<div>
|
||||
<div class="warning-modal-heading">
|
||||
<span translate>Screenshots are not secure</span>
|
||||
</div>
|
||||
<div class="warning-modal-message">
|
||||
<span translate>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.</span>
|
||||
</div>
|
||||
<button ion-button clear (click)="close()" translate>I understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.warning-modal-header {
|
||||
background: color($colors, warning);
|
||||
padding: 1rem;
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 120px;
|
||||
}
|
||||
.warning-modal-content {
|
||||
text-align: center;
|
||||
height: 65%;
|
||||
overflow-y: scroll;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.warning-modal-heading {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.warning-modal-message {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, ViewController } from 'ionic-angular';
|
||||
import { BackupGamePage } from '../backup-game/backup-game';
|
||||
|
||||
@Component({
|
||||
selector: 'page-backup-warning-modal',
|
||||
templateUrl: 'backup-warning-modal.html',
|
||||
})
|
||||
export class BackupWarningModalPage {
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public viewCtrl: ViewController
|
||||
) {}
|
||||
|
||||
close() {
|
||||
this.navCtrl.push(BackupGamePage);
|
||||
this.viewCtrl.dismiss();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,13 @@
|
|||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-header no-border>
|
||||
<ion-navbar hideBackButton="true"></ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<div translate>Are you being watched?</div>
|
||||
<div translate>Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</div>
|
||||
<div>
|
||||
<img src='assets/img/backup/backup-warning.svg'/>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<h1 translate>Are you being watched?</h1>
|
||||
<p translate>Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</p>
|
||||
<img src='assets/img/backup/backup-warning.svg'/>
|
||||
<div class="bottom-absolute">
|
||||
<div translate>Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||
<button ion-button block (click)="openWarningModal()" translate>Got it</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
page-backup-warning {
|
||||
.buttons {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 4vh 15px;
|
||||
text-align: center;
|
||||
.toolbar-background{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ModalController } from 'ionic-angular';
|
||||
import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-modal';
|
||||
import { NavController, ModalController, AlertController } from 'ionic-angular';
|
||||
import { BackupGamePage } from '../backup-game/backup-game';
|
||||
|
||||
@Component({
|
||||
selector: 'page-backup-warning',
|
||||
|
|
@ -9,14 +9,25 @@ import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-m
|
|||
export class BackupWarningPage {
|
||||
public currentIndex: number;
|
||||
|
||||
constructor(public modalCtrl: ModalController) {}
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public alertCtrl: AlertController,
|
||||
public modalCtrl: ModalController
|
||||
) {}
|
||||
|
||||
openWarningModal() {
|
||||
const myModal = this.modalCtrl.create(BackupWarningModalPage, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: true,
|
||||
});
|
||||
myModal.present();
|
||||
|
||||
let opts = {
|
||||
title: 'Screenshots are not secure',
|
||||
message: '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',
|
||||
buttons: [{
|
||||
text: 'I understand',
|
||||
handler: () => {
|
||||
this.navCtrl.push(BackupGamePage);
|
||||
}
|
||||
}],
|
||||
}
|
||||
this.alertCtrl.create(opts).present();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,10 +49,6 @@ export class TourPage {
|
|||
}
|
||||
|
||||
createDefaultWallet() {
|
||||
// TODO for testing
|
||||
this.navCtrl.push(EmailPage);
|
||||
return;
|
||||
|
||||
let loading = this.loadingCtrl.create({
|
||||
content: 'Creating Personal Wallet...'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams, Events, ActionSheetController, ModalController } from 'ionic-angular';
|
||||
import { NavController, Events, ActionSheetController} from 'ionic-angular';
|
||||
|
||||
//native
|
||||
import { SocialSharing } from '@ionic-native/social-sharing';
|
||||
|
|
@ -7,7 +7,6 @@ import { SocialSharing } from '@ionic-native/social-sharing';
|
|||
//pages
|
||||
import { AmountPage } from '../send/amount/amount';
|
||||
import { CopayersPage } from '../copayers/copayers';
|
||||
import { BackupWarningModalPage } from '../backup/backup-warning-modal/backup-warning-modal';
|
||||
//providers
|
||||
import { WalletProvider } from '../../providers/wallet/wallet';
|
||||
import { ProfileProvider } from '../../providers/profile/profile';
|
||||
|
|
@ -31,15 +30,13 @@ export class ReceivePage {
|
|||
|
||||
constructor(
|
||||
private navCtrl: NavController,
|
||||
private navParams: NavParams,
|
||||
private profileProvider: ProfileProvider,
|
||||
private walletProvider: WalletProvider,
|
||||
private popupProvider: PopupProvider,
|
||||
private platformProvider: PlatformProvider,
|
||||
private events: Events,
|
||||
private actionSheetCtrl: ActionSheetController,
|
||||
private socialSharing: SocialSharing,
|
||||
private modalCtrl: ModalController
|
||||
private socialSharing: SocialSharing
|
||||
) {
|
||||
}
|
||||
|
||||
|
|
@ -138,11 +135,8 @@ export class ReceivePage {
|
|||
};
|
||||
|
||||
public openBackupNeededModal(): void {
|
||||
const myModal = this.modalCtrl.create(BackupWarningModalPage, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: true,
|
||||
});
|
||||
myModal.present();
|
||||
// TODO
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue