From 383e02edc4a7a055ac826a7d909e1099ebf5b959 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Tue, 6 Mar 2018 18:27:15 -0800
Subject: [PATCH] New section in settings screen, full-screen 'are you sure?'

---
 _locales/en/messages.json  | 28 +++++++++++
 background.html            | 43 +++++++++++++++++
 images/delete.svg          |  1 +
 js/views/settings_view.js  | 96 +++++++++++++++++++++++++++++++++++++-
 stylesheets/_global.scss   | 23 +++++++++
 stylesheets/_settings.scss | 12 +++++
 6 files changed, 201 insertions(+), 2 deletions(-)
 create mode 100644 images/delete.svg

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 101522c33..a8df96028 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -567,6 +567,34 @@
         "message": "Theme",
         "description": "Header for theme settings"
     },
+    "clearDataHeader": {
+        "message": "Clear Data",
+        "description": "Header in the settings dialog for the section dealing with data deletion"
+    },
+    "clearDataExplanation": {
+        "message": "This will clear all data in the application, removing all messages and saved account information.",
+        "description": "Text describing what the clear data button will do."
+    },
+    "clearDataButton": {
+        "message": "Clear data",
+        "description": "Button in the settings dialog starting process to delete all data"
+    },
+    "deleteAllDataHeader": {
+        "message": "Delete all data?",
+        "description": "Header of the full-screen delete data confirmation screen"
+    },
+    "deleteAllDataBody": {
+        "message": "You are about to delete all of this application's saved account information, including all contacts and all messages. You can always link with your mobile device again, but that will not restore deleted messages.",
+        "description": "Text describing what exactly will happen if the user clicks the button to delete all data"
+    },
+    "deleteAllDataButton": {
+        "message": "Delete all data",
+        "description": "Text of the button that deletes all data"
+    },
+    "deleteAllDataProgress": {
+        "message": "Disconnecting and deleting all data",
+        "description": "Text of the button that deletes all data"
+    },
     "notifications": {
         "message": "Notifications",
         "description": "Header for notification settings"
diff --git a/background.html b/background.html
index c9c0196bd..19e1ca226 100644
--- a/background.html
+++ b/background.html
@@ -612,6 +612,15 @@
         <label for='audio-notification'>{{ audioNotificationDescription }}</label>
       </div>
       {{ /isAudioNotificationSupported }}
+      <div class='sync-setting'></div>
+      <hr>
+      <div class='clear-data-settings'>
+        <h3>{{ clearDataHeader }}</h3>
+        <div>
+          <button class='grey red clear-data'>{{ clearDataButton }}</button>
+          <p>{{ clearDataExplanation }}</p>
+        </div>
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='syncSettings'>
@@ -628,6 +637,40 @@
         </p>
       </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='clear-data'>
+    {{#isStep1}}
+    <div class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <span class='banner-icon alert-outline-red'></span>
+          <div class='header'>{{ header }}</div>
+          <div class='body-text-wide'>{{ body }}</div>
+        </div>
+        <div class='nav'>
+          <div>
+            <a class='button grey cancel'>{{ cancelButton }}</a>
+            <a class='button red delete-all-data'>{{ deleteButton }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    {{/isStep1}}
+    {{#isStep2}}
+    <div id='step3' class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <span class='banner-icon delete'></span>
+          <div class='header'>{{ deleting }}</div>
+        </div>
+        <div class='progress'>
+          <div class='bar-container'>
+            <div class='bar progress-bar progress-bar-striped active'></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {{/isStep2}}
+  </script>
 
   <script type='text/x-tmpl-mustache' id='networkStatus'>
     <div class='network-status-message'>
diff --git a/images/delete.svg b/images/delete.svg
new file mode 100644
index 000000000..f9daefe90
--- /dev/null
+++ b/images/delete.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>
\ No newline at end of file
diff --git a/js/views/settings_view.js b/js/views/settings_view.js
index db5dd9ff9..0aac29629 100644
--- a/js/views/settings_view.js
+++ b/js/views/settings_view.js
@@ -85,11 +85,12 @@
             });
             if (textsecure.storage.user.getDeviceId() != '1') {
                 var syncView = new SyncView().render();
-                this.$('.content').append(syncView.el);
+                this.$('.sync-setting').append(syncView.el);
             }
         },
         events: {
-            'click .close': 'remove'
+            'click .close': 'remove',
+            'click .clear-data': 'onClearData',
         },
         render_attributes: function() {
             return {
@@ -107,6 +108,97 @@
               isAudioNotificationSupported: Settings.isAudioNotificationSupported(),
               themeAndroidDark: i18n('themeAndroidDark'),
               hideMenuBar: i18n('hideMenuBar'),
+              clearDataHeader: i18n('clearDataHeader'),
+              clearDataButton: i18n('clearDataButton'),
+              clearDataExplanation: i18n('clearDataExplanation'),
+            };
+        },
+        onClearData: function() {
+            var clearDataView = new ClearDataView().render();
+            $('body').append(clearDataView.el);
+        },
+    });
+
+    var CLEAR_DATA_STEPS = {
+        CHOICE: 1,
+        DELETING: 2,
+    };
+    var ClearDataView = Whisper.View.extend({
+        templateName: 'clear-data',
+        className: 'full-screen-flow overlay',
+        events: {
+            'click .cancel': 'onCancel',
+            'click .delete-all-data': 'onDeleteAllData',
+        },
+        initialize: function() {
+            this.step = CLEAR_DATA_STEPS.CHOICE;
+        },
+        onCancel: function() {
+            this.remove();
+        },
+        onDeleteAllData: function() {
+            console.log('Deleting everything!');
+            this.step = CLEAR_DATA_STEPS.DELETING;
+            this.render();
+
+            window.wrapDeferred(Backbone.sync('closeall')).then(function() {
+                console.log('All database connections closed. Starting delete.');
+                this.clearAllData();
+            }.bind(this), function(error) {
+                console.log('Something went wrong closing all database connections.');
+                this.clearAllData();
+            }.bind(this));
+        },
+        clearAllData: function() {
+            var finishCount = 0;
+            var finish = function() {
+                finishCount += 1;
+                console.log('Deletion complete, finishCount is now', finishCount);
+                if (finishCount > 1) {
+                    console.log('Deletion complete! Restarting now...');
+                    window.restart();
+                }
+            };
+
+            var request = window.indexedDB.deleteDatabase('signal');
+
+            // None of the three of these should happen, since we close all database
+            //   connections first. However, testing indicates that even if one of these
+            //   handlers fires, the database is still deleted on restart.
+            request.onblocked = function(event) {
+                console.log('Error deleting database: Blocked.');
+                finish();
+            };
+            request.onupgradeneeded = function(event) {
+                console.log('Error deleting database: Upgrade needed.');
+                finish();
+            };
+            request.onerror = function(event) {
+                console.log('Error deleting database.');
+                finish();
+            };
+
+            request.onsuccess = function(event) {
+                console.log('Database deleted successfully.');
+                finish();
+            };
+
+            Whisper.events.once('deleteAllLogsComplete', function() {
+                console.log('Log deleted successfully.');
+                finish();
+            });
+            window.deleteAllLogs();
+        },
+        render_attributes: function() {
+            return {
+                isStep1: this.step === CLEAR_DATA_STEPS.CHOICE,
+                header: i18n('deleteAllDataHeader'),
+                body: i18n('deleteAllDataBody'),
+                cancelButton: i18n('cancel'),
+                deleteButton: i18n('deleteAllDataButton'),
+
+                isStep2: this.step === CLEAR_DATA_STEPS.DELETING,
+                deleting: i18n('deleteAllDataProgress'),
             };
         }
     });
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index bf4e7fe47..613909908 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -617,6 +617,11 @@ input[type=text], input[type=search], textarea {
   bottom: 0;
   font-family: roboto-light;
 
+  &.overlay {
+    // .modal, used for the settings view, is 100
+    z-index: 200;
+  }
+
   color: black;
   a {
     color: $blue;
@@ -806,6 +811,14 @@ input[type=text], input[type=search], textarea {
     &.sync {
       @include color-svg('../images/sync.svg', #DEDEDE);
     }
+
+    // delete
+    &.alert-outline-red {
+      @include color-svg('../images/alert-outline.svg', red);
+    }
+    &.delete {
+      @include color-svg('../images/delete.svg', #DEDEDE);
+    }
   }
 
   .button {
@@ -815,12 +828,22 @@ input[type=text], input[type=search], textarea {
     min-width: 300px;
     padding: 0.75em;
     margin-top: 1em;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
     color: white;
     background: $blue;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 
     font-size: 12pt;
 
+    &.grey {
+      color: black;
+      background: #DEDEDE;
+    }
+    &.red {
+      background: red;
+    }
+
     @media (min-height: 750px) and (min-width: 700px) {
       font-size: 20pt;
     }
diff --git a/stylesheets/_settings.scss b/stylesheets/_settings.scss
index 652d8c45b..125f1cc52 100644
--- a/stylesheets/_settings.scss
+++ b/stylesheets/_settings.scss
@@ -32,4 +32,16 @@
         color: red;
     }
   }
+  .clear-data-settings {
+    button {
+      float: right;
+      line-height: 36px;
+      padding: 0 20px;
+      margin: 0 0 20px 20px;
+    }
+    .red {
+      background-color: red;
+      color: white;
+    }
+  }
 }