Skip to content
Permalink
Browse files

Merge pull request #9561 from Gamboster/ref/backupFlow

Ref: New backup flow
  • Loading branch information...
gabrielbazan7 committed Mar 12, 2019
2 parents 52820b3 + 3a67e4f commit ba5be568af8df007cc02a17f37b4561338b7de09

This file was deleted.

Oops, something went wrong.
@@ -50,7 +50,7 @@
<span sheet-text>
{{ 'This transaction requires a high network fee because either the sending amount is too small or the network is experiencing congestion.' | translate }}
<p>
{{ 'BitPay does not receive and does not control miner fees.' | translate }}
{{ 'BitPay does not receive and does not control miner fees.' | translate }}
</span>
<span sheet-button-text translate>GOT IT</span>
</info-sheet-template>
@@ -70,13 +70,13 @@
<span sheet-button-text translate>GOT IT</span>
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'backup-warning'" type="warning">
<span sheet-title-text translate>Screenshots are not secure</span>
<info-sheet-template *ngSwitchCase="'backup-later-warning'" type="warning">
<span sheet-title-text translate>Do this later?</span>
<span sheet-text translate>
If you take a screenshot, your recovery phrase may be viewed by other apps. You can make a safe backup with physical paper and a pen.
Receiving funds will be temporary disabled until you can verify your recovery phrase has been stored away securely. You can always complete this later from your wallet settings.
</span>
<span sheet-button-text translate>I understand</span>
<span sheet-second-button-text translate>Go Back</span>
<span sheet-button-text translate>Ok</span>
<span sheet-second-button-text translate>Continue Backup</span>
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'backup-ready'" type="success">
@@ -89,13 +89,21 @@
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'backup-ready-vault'" type="success">
<span sheet-title-text>Your vault wallets are backed up!</span>
<span sheet-text>
<span sheet-title-text translate>Your wallet is backed up!</span>
<span sheet-text 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>
<span sheet-button-text translate>GOT IT</span>
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'backup-safeguard-warning'" type="info">
<span sheet-title-text translate>Safeguard your recovery phrase</span>
<span sheet-text translate>
Your recovery phrase is composed of 12 randomly selected words. Please carefully write down each word in the order they appear.
</span>
<span sheet-button-text translate>GOT IT</span>
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'sensitive-info'" type="warning">
<span sheet-title-text translate>Sensitive Data</span>
<span sheet-text translate>
@@ -176,12 +184,12 @@
<span sheet-button-text>{{'Rate on the {storeName}' | translate: {storeName: params?.storeName} }}</span>
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'backup-failed'" type="warning">
<span sheet-title-text translate>Uh oh...</span>
<info-sheet-template *ngSwitchCase="'backup-failed'" type="danger">
<span sheet-title-text translate>Incorrect backup phrase</span>
<span sheet-text translate>
It's important that you write your recovery phrase down correctly. If something happens to your wallet, you'll need it to recover your money. Please review and try again.
</span>
<span sheet-button-text translate>GOT IT</span>
<span sheet-button-text translate>START OVER</span>
</info-sheet-template>

<info-sheet-template *ngSwitchCase="'payment-request'" type="info">
@@ -1,93 +1,63 @@
<ion-header>
<ion-navbar>
<ion-title>{{'Backup' | translate}}</ion-title>
<ion-title>{{'Verify Your Phrase' | translate}}</ion-title>
</ion-navbar>
</ion-header>


<ion-content no-bounce>
<div *ngIf="deleted">
<h1 class="deleted-title" translate>Wallet recovery phrase not available</h1>
<ion-item-divider>
{{'You can still export it from "Export Wallet" option.' |translate}}
<span *ngIf="wallet.coin == 'bch'" translate>
Note: if this BCH wallet was duplicated from a BTC wallet, they share the same recovery phrase.
</span>
</ion-item-divider>
</div>

<ion-slides pager="true" *ngIf="!deleted">
<ion-slide>
<div class="slide-container" *ngIf="mnemonicWords && mnemonicWords[0] || !credentialsEncrypted">
<div>
<div class="slide-title" translate>Please carefully write down this phrase.</div>
<div class="phrase-container" copy-to-clipboard="{{ wallet.network == 'testnet' ? keys?.mnemonic : null }}">
<div class="phrase">
<span *ngFor="let word of mnemonicWords">
<span>{{word}}</span>
<span *ngIf="useIdeograms">&#x3000;</span>
</span>
</div>
<div class="key-container" [hidden]="mnemonicHasPassphrase && selectComplete">
<div class="word-container">
<ion-slides #gameSlides class="word-slides">
<ion-slide *ngFor="let mnemonicWord of mnemonicWords; let i = index">
<div class="word">
<span *ngIf="customWords && customWords[i]">{{customWords[i].word}}</span>
<div class="dash-line"></div>
</div>
</div>
</div>
<div class="bottom-absolute">
<div translate class="footer-text">We will confirm on the next screen.</div>
<button *ngIf="currentIndex == 0" ion-button class="button-standard" [disabled]="credentialsEncrypted || error" (click)="slideNext(true)">
{{'I have written it down' | translate}}
</button>
</div>
</ion-slide>

<ion-slide>
<div class="slide-container">
<div class="slide-body">
<div class="slide-title" translate>Let's verify your recovery phrase.</div>
<div class="phrase-container">
<div class="phrase">
<button ion-button outline *ngFor="let customWord of customWords; let i = index" (click)="removeButton(i, customWord)">{{customWord.word}}</button>
</div>
</div>
</div>
</div>
<div class="bottom-absolute">
<div *ngIf="!selectComplete">
<div class="slide-title" translate>Please tap each word in the correct order.</div>
<div class="words">
<button ion-button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index" (click)="addButton(i, shuffledWord)" [disabled]="shuffledWord.selected">{{shuffledWord.word}}</button>
<div class="word-number">
{{i + 1}} / {{mnemonicWords.length}}
</div>
</div>
<div *ngIf="selectComplete">
<div class="footer-text" translate>Is this correct?</div>
<button *ngIf="currentIndex == 1 && selectComplete" ion-button class="button-standard" (click)="slideNext(false)">
{{'Confirm' | translate}}
</button>
<button ion-button clear class="button-standard" (click)="setFlow()">
{{'Clear' | translate}}
</button>
</div>
</ion-slide>
</ion-slides>
</div>
</div>

<div class="bottom-absolute" [hidden]="mnemonicHasPassphrase && selectComplete">
<div *ngIf="!selectComplete">
<div class="bottom-title" translate>Tap each word in the correct order.</div>
<div class="words">
<button class="button-secondary" ion-button *ngFor="let shuffledWord of shuffledMnemonicWords; let i = index" (click)="addButton(i, shuffledWord)" [disabled]="shuffledWord.selected">{{shuffledWord.word}}</button>
</div>
</ion-slide>
</div>
<div *ngIf="selectComplete">
<div class="footer-text" translate>Is this correct?</div>
<button *ngIf="selectComplete" ion-button class="button-standard" (click)="finalStep()">
{{'Confirm' | translate}}
</button>
<button ion-button clear class="button-standard" (click)="clear()">
{{'Clear' | translate}}
</button>
</div>
</div>

<ion-slide *ngIf="mnemonicHasPassphrase">
<div class="slide-container">
<div class="slide-body">
<div class="slide-title" translate>In order to verify your wallet recovery phrase, please type your password.</div>
<ion-item>
<ion-label stacked translate>Password</ion-label>
<ion-input type="password" id="password" [(ngModel)]="password" autocapitalize="off" spellcheck="false"></ion-input>
</ion-item>
<div class="slide-title">
<span class="assertive" translate>This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.</span>
</div>
<div [hidden]="!mnemonicHasPassphrase || !(mnemonicHasPassphrase && selectComplete)">
<div class="key-container">
<div class="password">
<div class="password-title" translate>In order to verify your wallet recovery phrase, please type your password.</div>
<ion-item>
<ion-label stacked translate>Password</ion-label>
<ion-input type="password" id="password" [(ngModel)]="password" autocapitalize="off" spellcheck="false"></ion-input>
</ion-item>
<div class="password-text">
<span class="assertive" translate>This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.</span>
</div>
</div>
</div>

<div class="bottom-absolute">
<button *ngIf="currentIndex == 2" [disabled]="!password" ion-button class="button-standard" (click)="finalStep()">
{{'Confirm' | translate}}
</button>
</div>
</ion-slide>
</ion-slides>
<div class="bottom-absolute" *ngIf="mnemonicHasPassphrase">
<button [disabled]="!password" ion-button class="button-standard" (click)="finalStep()">
{{'Confirm' | translate}}
</button>
</div>
</div>
</ion-content>
@@ -1,88 +1,78 @@
page-backup-game {
.slide-container {
height: 100%;
max-height: 30rem;
display: flex;
justify-content: center;
align-items: center;
.key-container {
height: 95%;
text-align: center;
@media (max-height: 550px) {
align-items: baseline;
height: 75%;
}
.slide-body {
min-width: 80%;
.word-container {
height: 65%;
text-align: center;
.word-slides {
.word {
background: color($colors, light);
margin: auto;
border-radius: 3px;
color: color($colors, secondary);
text-align: center;
max-width: 260px;
min-height: 11rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
span {
padding: 2.5rem 4rem 2.5rem 4rem;
font-weight: bold;
font-size: 35px;
letter-spacing: 2.5px;
.button {
height: 3rem;
font-size: 14px;
}
}
.dash-line {
border-bottom: 1px color($colors, primary) dashed;
width: 80%;
position: absolute;
bottom: 1.5rem;
}
}
.word-number {
margin-top: 1rem;
font-weight: 500;
}
}
}
}
.deleted-title {
text-align: center;
}
.slide-title {
font-size: 14px;
padding: 20px;
color: color($colors, grey);
}
.swiper-pagination {
display: none;
}
.slide-zoom {
height: 100%;
}
.password {
background-color: color($colors, light);
padding: 2rem;
}
.phrase-container {
background: white;
margin: auto;
border: 2px dashed #d9d9d9;
border-radius: 3px;
color: #192c3a;
text-align: center;
max-width: 500px;
min-height: 9rem;
display: flex;
justify-content: center;
align-items: center;
.phrase {
padding: 2.5rem;
font-weight: bold;
line-height: 2;
font-size: 16px;
letter-spacing: 1px;
@media (min-width: 575px) {
font-size: 18px;
padding: 3rem;
.password {
padding: 2rem;
&-title {
margin-bottom: 2rem;
}
@media (max-height: 550px) {
font-size: 16px;
padding: 1rem;
}
.button {
height: 3rem;
font-size: 14px;
&-text {
margin-top: 2rem;
}
}
}
.words {
max-width: 500px;
margin: 0 auto;
.button {
height: 3rem;
font-size: 14px;
margin: 5px;
}
}

.bottom-absolute {
text-align: center;
padding: 0px;
bottom: 2rem;
.button-footer {
color: color($colors, primary);
max-width: 100%;
margin: 0;
font-size: 1.2rem;
.bottom-title {
font-size: 16px;
margin-bottom: 1rem;
}
.footer-text {
font-size: 12.5px;
color: color($colors, grey);
.words {
max-width: 500px;
margin: 0 auto;
padding: 0.8rem;
.button {
height: 3rem;
font-size: 14px;
margin: 5px;
}
}
}
}
Oops, something went wrong.

0 comments on commit ba5be56

Please sign in to comment.
You can’t perform that action at this time.