mirror of https://github.com/BTCPrivate/copay.git
remove old styles - fix password message location
This commit is contained in:
JDonadio
parent
02ff3ebb7b
commit
402cc2ad82
|
|
@ -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,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,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ViewController } from 'ionic-angular';
|
||||
import { NavController, ViewController } from 'ionic-angular';
|
||||
import { TabsPage } from '../../tabs/tabs';
|
||||
|
||||
@Component({
|
||||
selector: 'page-backup-confirm-modal',
|
||||
|
|
@ -7,24 +8,16 @@ import { ViewController } from 'ionic-angular';
|
|||
})
|
||||
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,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,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',
|
||||
|
|
@ -35,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',
|
||||
};
|
||||
|
||||
|
|
@ -75,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);
|
||||
|
|
@ -85,7 +86,6 @@ export class BackupGamePage {
|
|||
this.selectComplete = false;
|
||||
this.error = false;
|
||||
|
||||
// words = _.repeat('x', 300);
|
||||
if (this.currentIndex == 2) this.slidePrev();
|
||||
};
|
||||
|
||||
|
|
@ -201,16 +201,10 @@ export class BackupGamePage {
|
|||
let self = this;
|
||||
const myModal: Modal = self.modalCtrl.create(BackupConfirmModalPage, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: true,
|
||||
cssClass: "backup-modal-success"
|
||||
enableBackdropDismiss: false,
|
||||
});
|
||||
|
||||
myModal.present();
|
||||
|
||||
myModal.onDidDismiss(() => {
|
||||
this.navCtrl.setRoot(TabsPage);
|
||||
this.navCtrl.popToRoot();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,15 +8,13 @@ import { BackupGamePage } from '../backup-game/backup-game';
|
|||
})
|
||||
export class BackupWarningModalPage {
|
||||
|
||||
constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
}
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public viewCtrl: ViewController
|
||||
) {}
|
||||
|
||||
close() {
|
||||
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,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,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams, ModalController } from 'ionic-angular';
|
||||
import { ModalController } from 'ionic-angular';
|
||||
import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-modal';
|
||||
|
||||
@Component({
|
||||
|
|
@ -7,20 +7,14 @@ import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-m
|
|||
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, {}, {
|
||||
showBackdrop: true,
|
||||
enableBackdropDismiss: true,
|
||||
cssClass: "backup-modal-warning"
|
||||
});
|
||||
myModal.present();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue