Add frontend for safety numbers approval setting

Adds the checkbox under settings.

// FREEBIE

_locales/en/messages.json

@@ -450,5 +450,13 @@
     "you": {
       "message": "You",
       "description": "A gender-neutral second-person prounoun used as a subject, as in, 'You set the timer to 5 seconds'"
+    },
+    "safetyNumbersSettingHeader": {
+      "message": "Safety numbers approval",
+      "description": "Description for safety numbers setting"
+    },
+    "safetyNumbersSettingDescription": {
+      "message": "Require approval of new safety numbers when they change.",
+      "description": "Description for safety numbers setting"
     }
 }

background.html

@@ -466,6 +466,12 @@
           <label for='notification-setting-off'>{{ disableNotifications }} </label>
         </div>
       </div>
+      <hr>
+      <div class='safety-numbers-settings'>
+        <h3>{{ safetyNumbersSettingHeader }}</h3>
+        <input type='checkbox' name='safety-numbers-approval' id='safety-numbers-approval'/>
+        <label for='safety-numbers-approval'>{{ safetyNumbersSettingDescription }}</label>
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='syncSettings'>

js/views/settings_view.js

@@ -5,6 +5,25 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
+    var CheckboxView = Whisper.View.extend({
+        initialize: function(options) {
+            this.name = options.name;
+            this.defaultValue = options.defaultValue;
+            this.populate();
+        },
+        events: {
+            'change': 'change'
+        },
+        change: function(e) {
+            var value = e.target.checked;
+            storage.put(this.name, value);
+            console.log(this.name, 'changed to', value);
+        },
+        populate: function() {
+            var value = storage.get(this.name, this.defaultValue);
+            this.$('input').prop('checked', !!value);
+        },
+    });
     var RadioButtonGroupView = Whisper.View.extend({
         initialize: function(options) {
             this.name = options.name;
@@ -26,7 +45,7 @@
         },
     });
     Whisper.SettingsView = Whisper.View.extend({
-        className: 'settings modal',
+        className: 'settings modal expand',
         templateName: 'settings',
         initialize: function() {
             this.render();
@@ -40,6 +59,11 @@
                 defaultValue: 'message',
                 name: 'theme-setting'
             });
+            new CheckboxView({
+                el: this.$('.safety-numbers-settings'),
+                defaultValue: true,
+                name: 'safety-numbers-approval'
+            });
             if (textsecure.storage.user.getDeviceId() != '1') {
                 var syncView = new SyncView().render();
                 this.$('.content').append(syncView.el);
@@ -57,6 +81,8 @@
               nameAndMessage: i18n('nameAndMessage'),
               noNameOrMessage: i18n('noNameOrMessage'),
               nameOnly: i18n('nameOnly'),
+              safetyNumbersSettingDescription: i18n('safetyNumbersSettingDescription'),
+              safetyNumbersSettingHeader: i18n('safetyNumbersSettingHeader'),
             };
         }
     });

stylesheets/_global.scss

@@ -442,29 +442,6 @@ $avatar-size: 44px;
   }
 }
 
-.modal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  padding: 0 20px;
-  z-index: 100;
-  overflow-y: auto;
-
-  .content {
-    position: relative;
-    max-width: 350px;
-    margin: 100px auto;
-    padding: 1em;
-    background: white;
-    border-radius: $border-radius;
-    overflow: auto;
-    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
-  }
-}
-
 .x {
   display: inline-block;
   float: right;

stylesheets/_index.scss

@@ -258,20 +258,3 @@ input.search {
     top: -30px;
   }
 }
-.syncSettings {
-  button {
-    float: right;
-    line-height: 36px;
-    padding: 0 20px;
-    margin: 0 0 20px 20px;
-  }
-  .synced_at {
-      font-size: $font-size-small;
-      color: $grey;
-  }
-  .sync_failed {
-      display: none;
-      font-size: $font-size-small;
-      color: red;
-  }
-}

stylesheets/_modal.scss

@@ -0,0 +1,22 @@
+.modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 0 20px;
+  z-index: 100;
+  overflow-y: auto;
+
+  .content {
+    position: relative;
+    max-width: 350px;
+    margin: 100px auto;
+    padding: 1em;
+    background: white;
+    border-radius: $border-radius;
+    overflow: auto;
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
+  }
+}

stylesheets/_settings.scss

@@ -0,0 +1,31 @@
+.settings {
+  &.modal {
+    padding: 50px;
+
+    .content {
+      margin: 0 auto;
+      width: 100%;
+      max-width: 500px;
+    }
+  }
+  hr {
+    margin: 10px 0;
+  }
+  .syncSettings {
+    button {
+      float: right;
+      line-height: 36px;
+      padding: 0 20px;
+      margin: 0 0 20px 20px;
+    }
+    .synced_at {
+        font-size: $font-size-small;
+        color: $grey;
+    }
+    .sync_failed {
+        display: none;
+        font-size: $font-size-small;
+        color: red;
+    }
+  }
+}

stylesheets/manifest.css

@@ -403,26 +403,6 @@ button.hamburger {
 @keyframes rotate {
   to {
     transform: rotate(360deg); } }
-.modal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  padding: 0 20px;
-  z-index: 100;
-  overflow-y: auto; }
-  .modal .content {
-    position: relative;
-    max-width: 350px;
-    margin: 100px auto;
-    padding: 1em;
-    background: white;
-    border-radius: 5px;
-    overflow: auto;
-    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
-
 .x {
   display: inline-block;
   float: right;
@@ -486,6 +466,26 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   .bar-container .progress-bar {
     height: 100%; }
 
+.modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 0 20px;
+  z-index: 100;
+  overflow-y: auto; }
+  .modal .content {
+    position: relative;
+    max-width: 350px;
+    margin: 100px auto;
+    padding: 1em;
+    background: white;
+    border-radius: 5px;
+    overflow: auto;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
+
 .debug-log.modal {
   padding: 50px; }
   .debug-log.modal .content {
@@ -698,6 +698,27 @@ img.emoji {
   width: 1em;
   height: 1em; }
 
+.settings.modal {
+  padding: 50px; }
+  .settings.modal .content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 500px; }
+.settings hr {
+  margin: 10px 0; }
+.settings .syncSettings button {
+  float: right;
+  line-height: 36px;
+  padding: 0 20px;
+  margin: 0 0 20px 20px; }
+.settings .syncSettings .synced_at {
+  font-size: 0.92857em;
+  color: #616161; }
+.settings .syncSettings .sync_failed {
+  display: none;
+  font-size: 0.92857em;
+  color: red; }
+
 .conversation-stack,
 .new-conversation, .inbox, .gutter {
   height: 100%; }
@@ -899,19 +920,6 @@ input.search {
     border-color: transparent transparent #2eace0 transparent;
     top: -30px; }
 
-.syncSettings button {
-  float: right;
-  line-height: 36px;
-  padding: 0 20px;
-  margin: 0 0 20px 20px; }
-.syncSettings .synced_at {
-  font-size: 0.92857em;
-  color: #616161; }
-.syncSettings .sync_failed {
-  display: none;
-  font-size: 0.92857em;
-  color: red; }
-
 .conversation-title {
   display: block;
   line-height: 36px;

stylesheets/manifest.scss

@@ -6,10 +6,12 @@
 // Components
   @import 'progress';
   @import 'hourglass';
+  @import 'modal';
   @import 'debugLog';
   @import 'lightbox';
   @import 'recorder';
   @import 'emoji';
+  @import 'settings';
 
 // Build the main view
   @import 'index';