mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #6977 from JDonadio/ref/backup-flow-02
Fix backup styles - navigation
This commit is contained in:
commit
bdedfa3c34
|
@ -24,6 +24,7 @@ import { TranslatePoHttpLoader } from '@biesbjerg/ngx-translate-po-http-loader';
|
|||
import { CopayApp } from './app.component';
|
||||
|
||||
/* Pages */
|
||||
import { TabsPage } from '../pages/tabs/tabs';
|
||||
import { AddPage } from '../pages/add/add';
|
||||
import { CreateWalletPage } from '../pages/add/create-wallet/create-wallet';
|
||||
import { ImportWalletPage } from '../pages/add/import-wallet/import-wallet';
|
||||
|
@ -32,8 +33,11 @@ import { BackupRequestPage } from '../pages/onboarding/backup-request/backup-req
|
|||
import { DisclaimerPage } from '../pages/onboarding/disclaimer/disclaimer';
|
||||
import { EmailPage } from '../pages/onboarding/email/email';
|
||||
import { OnboardingPage } from '../pages/onboarding/onboarding';
|
||||
import { TabsPage } from '../pages/tabs/tabs';
|
||||
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';
|
||||
|
@ -87,6 +91,10 @@ let pages: any = [
|
|||
CreateWalletPage,
|
||||
ImportWalletPage,
|
||||
JoinWalletPage,
|
||||
BackupWarningPage,
|
||||
BackupWarningModalPage,
|
||||
BackupGamePage,
|
||||
BackupConfirmModalPage,
|
||||
AboutPage,
|
||||
AdvancedPage,
|
||||
AltCurrencyPage,
|
||||
|
|
|
@ -1,22 +1,18 @@
|
|||
<ion-header>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<div class="popup-modal-header popup-modal-header-success">
|
||||
<div class="popup-modal-header-img-success popup-modal-header-img">
|
||||
<img src='assets/img/onboarding-success.svg'/>
|
||||
</div>
|
||||
<div class="confirm-modal-header">
|
||||
<div>
|
||||
<img src='assets/img/onboarding-success.svg'/>
|
||||
</div>
|
||||
<div class="popup-modal-content popup-modal-content-success">
|
||||
<div>
|
||||
<div class="popup-modal-heading">
|
||||
<span translate>Your bitcoin wallet is backed up!</span>
|
||||
</div>
|
||||
<div class="popup-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 class="button button-clear" (click)="closeBackupResultModal()" translate>Got it</button>
|
||||
</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 (click)="closeBackupResultModal()" translate>Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
@ -1,13 +0,0 @@
|
|||
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 {}
|
|
@ -1,33 +1,29 @@
|
|||
.popup-modal-header-success {
|
||||
background-color: green;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
max-height: 10rem;
|
||||
img {
|
||||
max-height: 10rem;
|
||||
height: 100%;
|
||||
}
|
||||
.confirm-modal-header {
|
||||
background: green;
|
||||
padding: 1rem;
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 120px;
|
||||
}
|
||||
.popup-modal-content-success {
|
||||
.confirm-modal-content {
|
||||
text-align: center;
|
||||
height: 65%;
|
||||
overflow-y: scroll;
|
||||
padding: 3rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.popup-modal-heading {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
.confirm-modal-heading {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.popup-modal-message {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
.confirm-modal-message {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.button-clear {
|
||||
padding-top: 2rem;
|
||||
background: none;
|
||||
font-size: 1.6rem;
|
||||
button {
|
||||
padding-top: 2rem;
|
||||
background: none;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,31 +1,23 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { IonicPage, ViewController } from 'ionic-angular';
|
||||
import { NavController, ViewController } from 'ionic-angular';
|
||||
import { TabsPage } from '../../tabs/tabs';
|
||||
|
||||
@IonicPage()
|
||||
@Component({
|
||||
selector: 'page-backup-confirm-modal',
|
||||
templateUrl: 'backup-confirm-modal.html',
|
||||
})
|
||||
export class BackupConfirmModalPage {
|
||||
|
||||
constructor(public viewCtrl: ViewController) {
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
}
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public viewCtrl: ViewController
|
||||
) {}
|
||||
|
||||
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
|
||||
// });
|
||||
// });
|
||||
// TODO Set disclaimer accepted
|
||||
this.viewCtrl.dismiss();
|
||||
this.navCtrl.setRoot(TabsPage);
|
||||
this.navCtrl.popToRoot();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,84 +1,82 @@
|
|||
<ion-header>
|
||||
|
||||
<ion-navbar class="navbarc">
|
||||
<ion-navbar>
|
||||
<ion-title>{{wallet.name || 'Backup'}}</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<ion-content class="backup">
|
||||
<div *ngIf="deleted">
|
||||
<div class="phrase-unavailable" translate>Wallet recovery phrase not available.</div>
|
||||
<div class="phrase-unavailable-instructions" translate>You can still export it from Advanced > Export.</div>
|
||||
<div translate>Wallet recovery phrase not available.</div>
|
||||
<div translate>You can still export it from Advanced > Export.</div>
|
||||
</div>
|
||||
|
||||
<ion-slides pager="true" class="pages" *ngIf="!deleted">
|
||||
<ion-slides class="pages" pager="true" *ngIf="!deleted">
|
||||
<ion-slide>
|
||||
<div class="wallet-backup-phrase1" *ngIf="mnemonicWords[0] || !wallet.credentials.mnemonicEncrypted">
|
||||
<div class="initial-prompt" translate>Please carefully write down this phrase.</div>
|
||||
<div class="backup-phrase">
|
||||
<!-- TODO copy-to-clipboard function -->
|
||||
<!-- <div class="backup-phrase" copy-to-clipboard="copyRecoveryPhrase()"> -->
|
||||
<div class="backup-phrase-content">
|
||||
<span class="backup-phrase-content-word-readonly" *ngFor="let word of mnemonicWords">
|
||||
<span style="white-space:nowrap">{{word}}</span>
|
||||
<span *ngIf="useIdeograms"> </span>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="mnemonicWords[0] || !wallet.credentials.mnemonicEncrypted">
|
||||
<div translate>Please carefully write down this phrase.</div>
|
||||
<div class="phrase">
|
||||
<span *ngFor="let word of mnemonicWords">
|
||||
<span>{{word}}</span>
|
||||
<span *ngIf="useIdeograms"> </span>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="wallet.mnemonicHasPassphrase">
|
||||
<div class="password-required" translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<div class="tldr-prompt" translate>We'll confirm on the next screen.</div>
|
||||
<button [disabled]="wallet.credentials.mnemonicEncrypted || error" class="button primary" (click)="slideNext()" translate>I've written it down</button>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="tldr" translate>We'll confirm on the next screen.</div>
|
||||
<button [disabled]="wallet.credentials.mnemonicEncrypted || error" (click)="slideNext()" translate>I've written it down</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide>
|
||||
<div class="wallet-backup-phrase1">
|
||||
<div class="initial-prompt" translate>Let's verify your backup phrase.</div>
|
||||
<div class="backup-phrase">
|
||||
<div class="backup-phrase-content">
|
||||
<button class="button select-word" *ngFor="let customWord of customWords; let i = index"
|
||||
(click)="removeButton(i, customWord)">{{customWord.word}}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div translate>Let's verify your backup phrase.</div>
|
||||
<div class="phrase">
|
||||
<button *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
|
||||
</div>
|
||||
<div class="cta-buttons select-phrase">
|
||||
<div *ngIf="!selectComplete" class="tldr-prompt" translate>Please tap each word in the correct order.</div>
|
||||
<div *ngIf="selectComplete" class="tldr-prompt" translate>Is this correct?</div>
|
||||
<div class="buttons">
|
||||
<div *ngIf="!selectComplete">
|
||||
<button class="button select-word" *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index"
|
||||
(click)="addButton(i, shuffledWord)"
|
||||
[disabled]="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
<div class="tldr" translate>Please tap each word in the correct order.</div>
|
||||
<div>
|
||||
<button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index"
|
||||
(click)="addButton(i, shuffledWord)"
|
||||
[disabled]="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="selectComplete">
|
||||
<button class="button primary" (click)="slideNext();" translate>Confirm</button>
|
||||
<button class="button button-clear" (click)="initFlow();" translate>Clear</button>
|
||||
<div class="tldr" translate>Is this correct?</div>
|
||||
<div>
|
||||
<button (click)="slideNext();" translate>Confirm</button>
|
||||
<button (click)="initFlow();" translate>Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide *ngIf="wallet.mnemonicHasPassphrase">
|
||||
<div class="wallet-backup-phrase1">
|
||||
<div class="initial-prompt" translate>Enter your password</div>
|
||||
<div class="password-prompt">
|
||||
<div class="description" translate>In order to verify your wallet backup, please type your password.</div>
|
||||
<div class="input">
|
||||
<input type="password" id="passphrase" [(ngModel)]="passphrase" autocapitalize="off" spellcheck="false"/>
|
||||
</div>
|
||||
<div translate>Enter your password</div>
|
||||
<div>
|
||||
<div translate>In order to verify your wallet backup, please type your password.</div>
|
||||
<div class="input">
|
||||
<input type="password" id="passphrase" [(ngModel)]="passphrase" autocapitalize="off" spellcheck="false"/>
|
||||
</div>
|
||||
<div class="cta-buttons confirm">
|
||||
<button [disabled]="!passphrase" class="button primary" (click)="finalStep();" translate>Confirm</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="password-required" translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button [disabled]="!passphrase" (click)="finalStep();" translate>Confirm</button>
|
||||
</div>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
</ion-content>
|
||||
|
|
|
@ -1,13 +0,0 @@
|
|||
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 {}
|
|
@ -1,157 +1,40 @@
|
|||
page-backup-game {
|
||||
font-size: 16px;
|
||||
|
||||
.header-md::after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.backup {
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
.password-required {
|
||||
padding: 2rem;
|
||||
font-size: 14px;
|
||||
color: #DB5B44;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backup-modal-success {
|
||||
.modal-wrapper {
|
||||
max-height: 40rem;
|
||||
ion-content {
|
||||
max-height: 40rem;
|
||||
.password {
|
||||
background-color: #f2f2f2;
|
||||
padding: 2rem;
|
||||
}
|
||||
.phrase {
|
||||
display: -webkit-box;
|
||||
background: #f2f2f2;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 3px;
|
||||
color: #445;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
.scroll-content {
|
||||
overflow-y: hidden;
|
||||
border-radius: 12px;
|
||||
padding: 0rem;
|
||||
.popup-modal-content-success {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
max-width: 500px;
|
||||
min-height: 12rem;
|
||||
align-items: center;
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 5vh;
|
||||
.tldr {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,8 +1,9 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { IonicPage, NavController, Slides, Navbar, AlertController, ModalController, Modal } from 'ionic-angular';
|
||||
import { NavController, Slides, Navbar, AlertController, ModalController, Modal } from 'ionic-angular';
|
||||
import { TabsPage } from '../../tabs/tabs';
|
||||
import { BackupConfirmModalPage } from '../backup-confirm-modal/backup-confirm-modal';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
@IonicPage()
|
||||
@Component({
|
||||
selector: 'page-backup-game',
|
||||
templateUrl: 'backup-game.html',
|
||||
|
@ -24,7 +25,11 @@ export class BackupGamePage {
|
|||
private keys: any;
|
||||
private useIdeograms: any;
|
||||
|
||||
constructor(public navCtrl: NavController, 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',
|
||||
|
@ -34,10 +39,8 @@ export class BackupGamePage {
|
|||
mnemonicEncrypted: false,
|
||||
},
|
||||
n: 1,
|
||||
// isPrivKeyEncrypted: this.isPrivKeyEncrypted(),
|
||||
// mnemonicHasPassphrase: this.mnemonicHasPassphrase(),
|
||||
isPrivKeyEncrypted: false,
|
||||
mnemonicHasPassphrase: false,
|
||||
isPrivKeyEncrypted: this.isPrivKeyEncrypted(),
|
||||
mnemonicHasPassphrase: this.mnemonicHasPassphrase(),
|
||||
network: 'livenet',
|
||||
};
|
||||
|
||||
|
@ -74,7 +77,6 @@ export class BackupGamePage {
|
|||
|
||||
// var words = keys.mnemonic;
|
||||
var words = this.wallet.credentials.mnemonic;
|
||||
// $scope.data = {};
|
||||
|
||||
this.mnemonicWords = words.split(/[\u3000\s]+/);
|
||||
this.shuffledMnemonicWords = this.shuffledWords(this.mnemonicWords);
|
||||
|
@ -84,7 +86,6 @@ export class BackupGamePage {
|
|||
this.selectComplete = false;
|
||||
this.error = false;
|
||||
|
||||
// words = _.repeat('x', 300);
|
||||
if (this.currentIndex == 2) this.slidePrev();
|
||||
};
|
||||
|
||||
|
@ -198,18 +199,12 @@ export class BackupGamePage {
|
|||
alert.present();
|
||||
} else {
|
||||
let self = this;
|
||||
const myModal: Modal = self.modalCtrl.create('BackupConfirmModalPage', {}, {
|
||||
const myModal: Modal = self.modalCtrl.create(BackupConfirmModalPage, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: true,
|
||||
cssClass: "backup-modal-success"
|
||||
enableBackdropDismiss: false,
|
||||
});
|
||||
|
||||
myModal.present();
|
||||
|
||||
myModal.onDidDismiss(() => {
|
||||
console.log('MODAL DISSMISED');
|
||||
self.navCtrl.popToRoot(); // TODO NOT WORKING
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -1,20 +1,16 @@
|
|||
<ion-header>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<div class="popup-modal-header popup-modal-header-warning">
|
||||
<div class="warning-modal-header">
|
||||
<img src='assets/img/no-screenshot.svg'/>
|
||||
</div>
|
||||
<div class="popup-modal-content popup-modal-content-warning">
|
||||
<div class="warning-modal-content">
|
||||
<div>
|
||||
<div class="popup-modal-heading">
|
||||
<div class="warning-modal-heading">
|
||||
<span translate>Screenshots are not secure</span>
|
||||
</div>
|
||||
<div class="popup-modal-message">
|
||||
<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 class="button button-clear" (click)="close()" translate>I understand</button>
|
||||
<button (click)="close()" translate>I understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
@ -1,13 +0,0 @@
|
|||
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 {}
|
|
@ -1,32 +1,28 @@
|
|||
page-backup-warning-modal {
|
||||
.popup-modal-header-warning {
|
||||
background: #ffa500;
|
||||
.warning-modal-header {
|
||||
background: orange;
|
||||
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;
|
||||
}
|
||||
.popup-modal-header {
|
||||
padding: 1rem;
|
||||
border-radius: 12px 12px 0 0;
|
||||
min-height: 120px;
|
||||
.warning-modal-message {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.popup-modal-content-warning {
|
||||
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;
|
||||
}
|
||||
.popup-modal-message {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.button-clear {
|
||||
padding-top: 2rem;
|
||||
background: none;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
button {
|
||||
padding-top: 2rem;
|
||||
background: none;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,22 +1,20 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { IonicPage, NavController, ViewController } from 'ionic-angular';
|
||||
import { NavController, ViewController } from 'ionic-angular';
|
||||
import { BackupGamePage } from '../backup-game/backup-game';
|
||||
|
||||
@IonicPage()
|
||||
@Component({
|
||||
selector: 'page-backup-warning-modal',
|
||||
templateUrl: 'backup-warning-modal.html',
|
||||
})
|
||||
export class BackupWarningModalPage {
|
||||
|
||||
constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
}
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public viewCtrl: ViewController
|
||||
) {}
|
||||
|
||||
close() {
|
||||
this.navCtrl.push('BackupGamePage');
|
||||
this.navCtrl.push(BackupGamePage);
|
||||
this.viewCtrl.dismiss();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,19 +1,19 @@
|
|||
<ion-header>
|
||||
|
||||
<ion-navbar transparent class="navbarc">
|
||||
<ion-navbar>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content class="onboarding">
|
||||
<div class="onboarding-topic" translate>Are you being watched?</div>
|
||||
<div class="onboarding-description" translate>Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</div>
|
||||
<div class="onboarding-illustration-backup-warning">
|
||||
<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-warning.svg'/>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="onboarding-tldr" translate>Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||
<button class="primary" ion-button block (click)="openWarningModal()" translate>Got it</button>
|
||||
<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>
|
||||
</ion-content>
|
||||
|
|
|
@ -1,13 +0,0 @@
|
|||
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 {}
|
|
@ -1,55 +1,7 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 15px 15px 4vh 15px;
|
||||
}
|
|
@ -1,26 +1,20 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
|
||||
import { ModalController } from 'ionic-angular';
|
||||
import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-modal';
|
||||
|
||||
@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() {
|
||||
}
|
||||
constructor(public modalCtrl: ModalController) {}
|
||||
|
||||
openWarningModal() {
|
||||
const myModal = this.modalCtrl.create('BackupWarningModalPage', {}, {
|
||||
const myModal = this.modalCtrl.create(BackupWarningModalPage, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: true,
|
||||
cssClass: "backup-modal-warning"
|
||||
});
|
||||
myModal.present();
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue