From 1fe90ecdcb784041bfe42375a31d834831a68884 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 14 Sep 2016 18:34:25 -0700
Subject: [PATCH] Add frontend for safety numbers approval setting

Adds the checkbox under settings.

// FREEBIE
---
 _locales/en/messages.json  |  8 +++++
 background.html            |  6 ++++
 js/views/settings_view.js  | 28 ++++++++++++++-
 stylesheets/_global.scss   | 23 ------------
 stylesheets/_index.scss    | 17 ---------
 stylesheets/_modal.scss    | 22 ++++++++++++
 stylesheets/_settings.scss | 31 ++++++++++++++++
 stylesheets/manifest.css   | 74 +++++++++++++++++++++-----------------
 stylesheets/manifest.scss  |  2 ++
 9 files changed, 137 insertions(+), 74 deletions(-)
 create mode 100644 stylesheets/_modal.scss
 create mode 100644 stylesheets/_settings.scss

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 68628b1c..d39f7561 100644
--- a/_locales/en/messages.json
+++ b/_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"
     }
 }
diff --git a/background.html b/background.html
index 0a7fb289..a14fe374 100644
--- a/background.html
+++ b/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'>
diff --git a/js/views/settings_view.js b/js/views/settings_view.js
index 71c5881e..88530973 100644
--- a/js/views/settings_view.js
+++ b/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'),
             };
         }
     });
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 3c920172..ee42de82 100644
--- a/stylesheets/_global.scss
+++ b/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;
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index fce509fe..5fefe13d 100644
--- a/stylesheets/_index.scss
+++ b/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;
-  }
-}
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
new file mode 100644
index 00000000..35eac621
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/stylesheets/_settings.scss b/stylesheets/_settings.scss
new file mode 100644
index 00000000..394da84e
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 986310ac..468439c8 100644
--- a/stylesheets/manifest.css
+++ b/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;
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 7365c51a..f1ffb126 100644
--- a/stylesheets/manifest.scss
+++ b/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';