From d38a3a01be230d67832318a5cb1023b58fb43287 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Wed, 14 Sep 2016 14:07:44 -0400
Subject: [PATCH] added screenshot model

---
 public/img/onboarding-no-screenshot.svg       | 27 +++++++++++++++++++
 public/views/includes/confirmBackupPopup.html | 12 +--------
 .../includes/screenshotWarningModal.html      | 16 +++++++++++
 .../controllers/onboarding/backupWarning.js   | 16 ++++++-----
 src/sass/views/includes/modals/modals.scss    | 12 +++++++--
 .../modals/screenshot-warning-model.scss      |  7 +++++
 6 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 public/img/onboarding-no-screenshot.svg
 create mode 100644 public/views/includes/screenshotWarningModal.html
 create mode 100644 src/sass/views/includes/modals/screenshot-warning-model.scss

diff --git a/public/img/onboarding-no-screenshot.svg b/public/img/onboarding-no-screenshot.svg
new file mode 100644
index 000000000..7ae7b3f4e
--- /dev/null
+++ b/public/img/onboarding-no-screenshot.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="109px" height="108px" viewBox="0 0 109 108" 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>no-screenshot</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="0.5.a.2-–-Backup-Warning-2" transform="translate(-133.000000, -103.000000)">
+            <g id="Overlay/Modal/Success" transform="translate(24.000000, 75.000000)">
+                <g id="Modal/Success">
+                    <g id="no-screenshot" transform="translate(111.000000, 30.000000)">
+                        <g id="camera" opacity="0.5" transform="translate(21.000000, 28.000000)" fill="#FFFFFF">
+                            <path d="M58.8307692,7.809375 L48.4461538,7.809375 L42.2307692,1.561875 C42.2307692,1.561875 42.2,1.53125 42.1846154,1.53125 L42.1538462,1.500625 L42.1538462,1.500625 C41.2307692,0.581875 39.9846154,0 38.5692308,0 L25.6461538,0 C24.1384615,0 22.8,0.643125 21.8615385,1.6690625 L21.8615385,1.684375 L15.7846154,7.809375 L5.16923077,7.809375 C2.30769231,7.809375 0,10.045 0,12.893125 L0,43.8396875 C0,46.6878125 2.30769231,49 5.16923077,49 L58.8307692,49 C61.6769231,49 64,46.6878125 64,43.8396875 L64,12.893125 C64,10.045 61.6769231,7.809375 58.8307692,7.809375 L58.8307692,7.809375 Z M32,41.2671875 C24.1692308,41.2671875 17.7846154,34.8971875 17.7846154,27.0878125 C17.7846154,19.263125 24.1692308,12.9084375 32,12.9084375 C39.8461538,12.9084375 46.2153846,19.263125 46.2153846,27.0878125 C46.2153846,34.8971875 39.8461538,41.2671875 32,41.2671875 L32,41.2671875 Z M57.8615385,16.0015625 C56.6769231,16.0015625 55.7076923,15.036875 55.7076923,13.8425 C55.7076923,12.648125 56.6769231,11.6834375 57.8615385,11.6834375 C59.0461538,11.6834375 60.0153846,12.648125 60.0153846,13.8425 C60.0153846,15.036875 59.0461538,16.0015625 57.8615385,16.0015625 L57.8615385,16.0015625 Z" id="Shape"></path>
+                            <path d="M32,16.3690625 C26.0615385,16.3690625 21.2615385,21.161875 21.2615385,27.0878125 C21.2615385,32.9984375 26.0615385,37.8065625 32,37.8065625 C37.9230769,37.8065625 42.7384615,33.01375 42.7384615,27.0878125 C42.7384615,21.161875 37.9230769,16.3690625 32,16.3690625 L32,16.3690625 Z" id="Shape"></path>
+                        </g>
+                        <g id="ui-24px-outline-2_ban" stroke-width="3" stroke="#FFFFFF">
+                            <g id="Group">
+                                <path d="M89.7272727,15.2727273 L15.2727273,89.7272727" id="Shape"></path>
+                                <circle id="Oval" cx="52.5" cy="52.5" r="52.5"></circle>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/views/includes/confirmBackupPopup.html b/public/views/includes/confirmBackupPopup.html
index efe63ee09..8f4cffc22 100644
--- a/public/views/includes/confirmBackupPopup.html
+++ b/public/views/includes/confirmBackupPopup.html
@@ -1,6 +1,6 @@
 <div id="backup-confirm-modal" class="popup-modal">
   <div class="popup-modal-header">
-    <div ng-class="{'popup-modal-header-success': !backupError, 'popup-modal-header-fail': backupError}"></div>
+    <div ng-class="{'popup-modal-header-img-success': !backupError, 'popup-modal-header-img-fail': backupError}"></div>
   </div>
   <div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
     <div class="text-center" ng-show="!backupError">
@@ -12,15 +12,5 @@
         translate>I Understand
       </button>
     </div>
-    <div class="text-center" ng-show="backupError">
-      <h5 translate>uh oh...</h5>
-      <p translate>It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money
-      Please review your backup and try again</p>
-      <button
-        class="button button-block button-stable"
-        ng-click="closeBackupResultModal()">
-        Ok
-      </button>
-    </div>
   </div>
 </div>
diff --git a/public/views/includes/screenshotWarningModal.html b/public/views/includes/screenshotWarningModal.html
new file mode 100644
index 000000000..0994ea628
--- /dev/null
+++ b/public/views/includes/screenshotWarningModal.html
@@ -0,0 +1,16 @@
+<div id="screenshot-warning-modal" class="popup-modal">
+  <div class="popup-modal-header">
+    <div class="popup-modal-header-img"></div>
+  </div>
+  <div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
+    <div class="text-center" ng-show="!backupError">
+      <h5 translate>Screenshots are <br /> not secure</h5>
+      <p 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.</p>
+      <button
+        class="button button-clear expand"
+        ng-click="close()"
+        translate>I Understand
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/js/controllers/onboarding/backupWarning.js b/src/js/controllers/onboarding/backupWarning.js
index 4538124a2..6b83ee964 100644
--- a/src/js/controllers/onboarding/backupWarning.js
+++ b/src/js/controllers/onboarding/backupWarning.js
@@ -1,16 +1,20 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('backupWarningController', function($scope, $state, $timeout, $stateParams, $ionicPopup, profileService) {
+angular.module('copayApp.controllers').controller('backupWarningController', function($scope, $state, $timeout, $stateParams, $ionicPopup, profileService, $ionicModal) {
 
   $scope.walletId = $stateParams.walletId;
   $scope.openPopup = function() {
-    var backupWarningPopup = $ionicPopup.show({
-      templateUrl: "views/includes/backupWarningPopup.html",
-      scope: $scope,
-    });
+    $ionicModal.fromTemplateUrl('views/includes/screenshotWarningModal.html', {
+        scope: $scope,
+        backdropClickToClose: false,
+        hardwareBackButtonClose: false
+      }).then(function(modal) {
+        $scope.warningModal = modal;
+        $scope.warningModal.show();
+      });
 
     $scope.close = function() {
-      backupWarningPopup.close();
+      $scope.warningModal.hide();
       $state.go('onboarding.backup', {
         walletId: $stateParams.walletId,
         fromOnboarding: true
diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss
index ced60fd17..c38cc8c22 100644
--- a/src/sass/views/includes/modals/modals.scss
+++ b/src/sass/views/includes/modals/modals.scss
@@ -11,8 +11,15 @@
     padding: 1rem;
     border-radius: .25rem .25rem 0 0;
     min-height: 120px;
-    &-success {
-      background: url('../img/onboarding-success.svg') no-repeat center;
+    &-img{
+      height: 6rem;
+      background-size: contain;
+      margin-top: .3rem;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    &-img-success {
+      background-image: url('../img/onboarding-success.svg');
       height: 6rem;
       background-size: contain;
       margin-top: .3rem;
@@ -45,3 +52,4 @@
 }
 
 @import "backup-confirm-modal";
+@import "screenshot-warning-model";
diff --git a/src/sass/views/includes/modals/screenshot-warning-model.scss b/src/sass/views/includes/modals/screenshot-warning-model.scss
new file mode 100644
index 000000000..e979e9ff8
--- /dev/null
+++ b/src/sass/views/includes/modals/screenshot-warning-model.scss
@@ -0,0 +1,7 @@
+#screenshot-warning-modal{
+  .popup-modal-header{
+    &-img{
+      background-image: url('../img/onboarding-no-screenshot.svg');
+    }
+  }
+}
\ No newline at end of file