New section in settings screen, full-screen 'are you sure?'

_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"

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'>

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>

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'),
             };
         }
     });

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;
     }

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;
+    }
+  }
 }