Merge pull request #43 from jamal-jackson/feature/onboarding_wallet_created_security
Onboarding wallet created and security
This commit is contained in:
Matias Alejo Garcia
GitHub
commit
ebdc5c3563
12 changed files with 232 additions and 30 deletions
25
public/img/onboarding-backup-warning.svg
Normal file
25
public/img/onboarding-backup-warning.svg
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="247px" height="247px" viewBox="0 0 247 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>being-watched</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-1">
|
||||
<stop stop-color="#3950B5" offset="0%"></stop>
|
||||
<stop stop-color="#162360" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#9EB3F6" offset="0%"></stop>
|
||||
<stop stop-color="#647CE8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="0.5.a.1-–-Backup-Warning" transform="translate(-64.000000, -210.000000)">
|
||||
<g id="being-watched" transform="translate(64.000000, 210.000000)">
|
||||
<path d="M123.5,247 C191.707167,247 247,191.707167 247,123.5 C247,55.2928334 191.707167,1.42108547e-14 123.5,1.42108547e-14 C55.2928334,1.42108547e-14 1.42108547e-14,55.2928334 1.42108547e-14,123.5 C1.42108547e-14,191.707167 55.2928334,247 123.5,247 Z" id="Oval-2" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
|
||||
<path d="M157.693521,46.9114761 C157.371158,45.8451979 156.16141,44.9808396 155.003028,45.000323 L114.123129,53.1444209 L91.810993,45.2164126 C90.6490687,45.2358961 89.43755,46.1020257 89.1151868,47.1700751 L74.3927551,96.5571737 L172.607245,96.5571737 L157.693521,46.9114761 L157.693521,46.9114761 Z M123.5,107.871766 C94.152554,107.871766 67.1927208,114.280062 46,124.997752 L201,124.997752 C179.786024,114.280062 152.847446,107.871766 123.5,107.871766 L123.5,107.871766 Z" id="Shape" fill="url(#linearGradient-2)"></path>
|
||||
<path d="M155.018969,132.110996 C143.095075,132.110996 133.220489,140.938787 131.51657,152.396849 C126.220603,151.222526 120.738658,151.215441 115.440921,152.370281 C113.613016,141.055688 103.805736,132.37668 91.982802,132.37668 C78.8651011,132.37668 68.1916924,143.050089 68.1916924,156.16779 C68.1916924,169.28549 78.8633299,179.958899 91.982802,179.958899 C103.956291,179.958899 113.86453,171.058488 115.508228,159.531348 C120.765227,158.119681 126.298537,158.140936 131.54668,159.596883 C133.330305,170.962842 143.162381,179.693215 155.02074,179.693215 C168.138441,179.693215 178.81185,169.021578 178.81185,155.902106 C178.808308,142.784405 168.13667,132.110996 155.018969,132.110996 Z M91.9810307,173.570086 C82.3685864,173.570086 74.5769626,165.778463 74.5769626,156.166018 C74.5769626,146.553574 82.3685864,138.76195 91.9810307,138.76195 C101.593475,138.76195 109.385099,146.553574 109.385099,156.166018 C109.385099,165.778463 101.593475,173.570086 91.9810307,173.570086 Z M155.018969,173.306174 C145.406525,173.306174 137.614901,165.51455 137.614901,155.902106 C137.614901,146.289661 145.406525,138.498038 155.018969,138.498038 C164.631414,138.498038 172.423037,146.289661 172.423037,155.902106 C172.421266,165.51455 164.629642,173.306174 155.018969,173.306174 Z" id="Combined-Shape" fill="#647CE8" opacity="0.400000006"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
18
public/img/onboarding-warning.svg
Normal file
18
public/img/onboarding-warning.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="155px" height="155px" viewBox="0 0 155 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>warning</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.699999988">
|
||||
<g id="0.5-–-Request-Backup" transform="translate(-112.000000, -63.000000)" stroke-width="5" stroke="#677AE7">
|
||||
<g id="warning" transform="translate(115.000000, 66.000000)">
|
||||
<g id="Group">
|
||||
<circle id="Oval" cx="74.5" cy="74.5" r="74.5"></circle>
|
||||
<path d="M74,40.6363636 L74,81.2727273" id="Shape"></path>
|
||||
<path d="M74,101.590909 L74,108.363636" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,006 B |
|
|
@ -1,10 +1,26 @@
|
|||
<ion-view>
|
||||
<ion-view id="onboarding-backup-request" class="onboarding">
|
||||
<ion-content ng-controller="backupRequestController">
|
||||
<h1 translate>
|
||||
No backup, no bitcoin.
|
||||
</h1>
|
||||
<span translate> Since only you control yout money, you'll need save your backup phrase in case this app is deleted </span>
|
||||
<button class="button button-block button-positive" href ui-sref="onboarding.backupWarning" translate>Backup wallet</button>
|
||||
<button class="button button-block button-light" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
<div class="row">
|
||||
<img src="../../img/onboarding-warning.svg" class="col col-75 warning">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col-75 col">
|
||||
No backup, no bitcoin.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="col col-60 text-center">
|
||||
Since only you control your money, you’ll need save your backup phrase in case this app is deleted.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<i class="ion-ios-arrow-thin-down light-blue col col-60" id="arrow-down"></i>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-block button-positive col-75 col" href ui-sref="onboarding.backupWarning" translate>Backup wallet</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,32 @@
|
|||
<ion-view>
|
||||
<ion-nav-bar class="bar-royal">
|
||||
<ion-view id="onboarding-backup-warning" class="onboarding">
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button back-button" ui-sref="onboarding.backupRequest">
|
||||
<button class="button no-border" href ui-sref="onboarding.backupRequest">
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content ng-controller="backupWarningController">
|
||||
<span translate>Are you being watched?</span>
|
||||
<span translate>Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</span>
|
||||
<span translate>Anyone with your backup phrase can access or spend your bitcoin.</span>
|
||||
<button class="button button-block button-positive" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col col-75">
|
||||
Are you being watched?
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-75 tagline">
|
||||
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<img src="../../img/onboarding-backup-warning.svg" class="col col-60">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-60">
|
||||
Anyone with your backup phrase can access or spend your bitcoin.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-block button-primary col col-75" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,29 @@
|
|||
<ion-view>
|
||||
<ion-nav-bar class="bar-stable" ng-controller="backController">
|
||||
<ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button no-border" ng-click="onboardingMailSkip()">
|
||||
{{'Skip' | translate}}
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content ng-controller="collectEmailController">
|
||||
<span translate>Wallet Created </span>
|
||||
<span translate>Where would you like to receive email notifications about payments </span>
|
||||
<form name="emailForm" ng-submit="save(emailForm)" novalidate>
|
||||
<input type="email" id="email" name="email" ng-model="email" required></input>
|
||||
<input type="submit" class="button button-block button-positive" value="{{'Save'|translate}}" ng-disabled="emailForm.$invalid">
|
||||
</form>
|
||||
<ion-content>
|
||||
<div class="row">
|
||||
<img src="../../img/onboarding-success.svg" class="col col-75" id="success-image" />
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col">Wallet Created</h3>
|
||||
</div>
|
||||
</ion-content>
|
||||
<div id="collect-email">
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75">Where would you like to receive email notifications about payments </p>
|
||||
</div>
|
||||
<form name="emailForm" ng-submit="save(emailForm)" novalidate>
|
||||
<label class="item item-input col col-75">
|
||||
<i class="icon ion-arrow-right-c"></i>
|
||||
<input type="email" id="email" name="email" ng-model="email" required></input>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="overlay"></div>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button no-border" ng-click="goBack()">
|
||||
<i class="icon ion-arrow-left-c"></i>
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
<ion-nav-buttons side="secondary">
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
|
||||
Got it <i class="icon ion-arrow-right-c"></i>
|
||||
Got it <i class="icon ion-ios-arrow-thin-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,15 @@
|
|||
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.overlay{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.4);
|
||||
z-index: 4;
|
||||
}
|
||||
.back-button {
|
||||
border: 0;
|
||||
.icon:before {
|
||||
|
|
@ -49,3 +57,9 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
ion-header-bar{
|
||||
button{
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
src/sass/views/onboarding/onboard-backup-request.scss
Normal file
11
src/sass/views/onboarding/onboard-backup-request.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
#onboarding-backup-request{
|
||||
.warning{
|
||||
margin:4rem auto 1rem;
|
||||
}
|
||||
button{
|
||||
color:#fff;
|
||||
}
|
||||
#arrow-down{
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
}
|
||||
11
src/sass/views/onboarding/onboard-backup-warning.scss
Normal file
11
src/sass/views/onboarding/onboard-backup-warning.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
#onboarding-backup-warning{
|
||||
.warning{
|
||||
margin:4rem auto 1rem;
|
||||
}
|
||||
button{
|
||||
color:#fff;
|
||||
}
|
||||
#arrow-down{
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
}
|
||||
66
src/sass/views/onboarding/onboard-collect-email.scss
Normal file
66
src/sass/views/onboarding/onboard-collect-email.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
#onboarding-collect-email {
|
||||
background: rgb(17, 209, 166);
|
||||
#success-image {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.col {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#collect-email {
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
color: rgb(108, 108, 108);
|
||||
height: 11rem;
|
||||
animation-name: topBottom;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 1s;
|
||||
animation-delay: 2s;
|
||||
position: absolute;
|
||||
bottom: -100%;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 5;
|
||||
margin-top: 0;
|
||||
label {
|
||||
background: rgba(200, 200, 200, 0.20);
|
||||
height: 3rem;
|
||||
margin-top:0;
|
||||
input {
|
||||
position: absolute;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overlay {
|
||||
animation-name: bottomTop;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 1s;
|
||||
animation-delay: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes topBottom {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottomTop {
|
||||
0% {
|
||||
top: 100%;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
&-secure {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-phone.svg);
|
||||
height: 17rem;
|
||||
}
|
||||
}
|
||||
&-currency {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,8 @@
|
|||
}
|
||||
ion-content {
|
||||
color: #fff;
|
||||
.scroll {}
|
||||
h2, h3{color:#fff;}
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
p {
|
||||
|
|
@ -31,9 +30,6 @@
|
|||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
.col {
|
||||
@include center-block(.5rem);
|
||||
}
|
||||
#cta {
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
|
|
@ -52,6 +48,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.col {
|
||||
@include center-block(.5rem);
|
||||
}
|
||||
.swiper-pagination {
|
||||
&-bullet {
|
||||
background: rgb(100, 124, 232);
|
||||
|
|
@ -60,8 +59,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.button-transparent{
|
||||
background: none !important;
|
||||
}
|
||||
.button-primary{
|
||||
background: rgb(100, 124, 232) !important;
|
||||
}
|
||||
.light-blue{
|
||||
color:rgb(100, 124, 232);
|
||||
}
|
||||
}
|
||||
|
||||
@import "terms-of-use";
|
||||
@import "onboard-welcome";
|
||||
@import "onboard-tour";
|
||||
@import "onboard-collect-email";
|
||||
@import "onboard-backup-request";
|
||||
@import "onboard-backup-warning";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue