Add usage reporting preview (closes #395)

gui/app.js

@@ -839,6 +839,13 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
         cfg.APIKey = randomString(30, 32);
     };
 
+    $scope.showURPreview = function () {
+        $('#settings').modal('hide');
+        $('#urPreview').modal().on('hidden.bs.modal', function () {
+            $('#settings').modal();
+        });
+    }
+
     $scope.acceptUR = function () {
         $scope.config.Options.URAccepted = 1000; // Larger than the largest existing report version
         $scope.saveConfig();

gui/index.html

@@ -614,7 +614,7 @@
                 <div class="form-group">
                   <div class="checkbox">
                     <label>
-                      <span translate>Anonymous Usage Reporting</span> <input id="UREnabled" type="checkbox" ng-model="tmpOptions.UREnabled">
+                      <span translate>Anonymous Usage Reporting</span> <input id="UREnabled" type="checkbox" ng-model="tmpOptions.UREnabled"> (<a translate ng-click="showURPreview()" href="#">Preview</a>)
                     </label>
                   </div>
                 </div>
@@ -661,6 +661,26 @@
     </div>
   </div>
 
+  <!-- Usage report preview modal -->
+
+  <div id="urPreview" class="modal fade" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header alert alert-success">
+          <h4 translate class="modal-title">Anonymous Usage Reporting</h4>
+        </div>
+        <div class="modal-body">
+          <p translate>The encrypted usage report is sent daily. It is used to track common platforms, repo sizes and app versions. If the reported data set is changed you will be prompted with this dialog again.</p>
+          <p translate translate-value-url="https://data.syncthing.net">The aggregated statistics are publicly available at {%url%}.</p>
+          <pre><small>{{reportData | json}}</small></pre>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-success btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span>&emsp;<span translate>OK</span></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Needed files modal -->
 
   <modal id="needed" large="yes" status="info" icon="cloud-download" close="yes" title="Out of Sync Items">

gui/lang/lang-en.json

@@ -64,6 +64,7 @@
    "Path to the repository on the local computer. Will be created if it does not exist. The tilde character (~) can be used as a shortcut for": "Path to the repository on the local computer. Will be created if it does not exist. The tilde character (~) can be used as a shortcut for",
    "Path where versions should be stored (leave empty for the default .stversions folder in the repository).": "Path where versions should be stored (leave empty for the default .stversions folder in the repository).",
    "Please wait": "Please wait",
+   "Preview": "Preview",
    "Preview Usage Report": "Preview Usage Report",
    "RAM Utilization": "RAM Utilization",
    "Reconnect Interval (s)": "Reconnect Interval (s)",