2 files changed, 55 insertions, 3 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 8073530c6..ad29ab470 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -666,6 +666,12 @@ $.extend(fixmystreet.set_up, {
         return;
       }
 
+    // we don't want to create this if we're offline (e.g using the inspector
+    // panel to add a photo) as the server side bit does not work.
+    if (!navigator.onLine) {
+      return;
+    }
+
     // Pass a jQuery element, eg $('.foobar'), into this function
     // to limit all the selectors to that element. Handy if you want
     // to only bind/detect Dropzones in a particular part of the page,
diff --git a/web/cobrands/fixmystreet/offline.js b/web/cobrands/fixmystreet/offline.js
index 908326a69..c6609fe1a 100644
--- a/web/cobrands/fixmystreet/offline.js
+++ b/web/cobrands/fixmystreet/offline.js
@@ -28,6 +28,23 @@ fixmystreet.offlineBanner = (function() {
         $('.top_banner--offline').slideUp();
     }
 
+    // Compare two typed arrays for equality
+    function isEqual(view1, view2) {
+        for (var i=0; i != view1.byteLength; i++) {
+            if (view1[i] != view2[i]) return false;
+        }
+        return true;
+    }
+
+    // Create a Uint8Array of a string
+    function makeView(str) {
+        var view = new Uint8Array(str.length);
+        for (var i=0; i<str.length; i++) {
+            view[i] = str.charCodeAt(i);
+        }
+        return view;
+    }
+
     return {
         make: function(offline) {
             fixmystreet.offlineData.getFormsLength().then(function(num) {
@@ -61,7 +78,13 @@ fixmystreet.offlineBanner = (function() {
             }
 
             function postForm(url, data) {
-                return $.ajax({ url: url, data: data, type: 'POST' }).done(nextForm);
+                return $.ajax({
+                    url: url,
+                    contentType: data.contentType,
+                    data: data.text,
+                    type: 'POST',
+                    processData: false
+                }).done(nextForm);
             }
 
             $(document).on('click', '#oFN', function(e) {
@@ -83,8 +106,23 @@ fixmystreet.offlineBanner = (function() {
                                 if (!token) {
                                     return nextForm();
                                 }
-                                var param = form[1].replace(/&token=[^&]*/, '&token=' + token);
-                                return postForm(form[0], param).fail(nextForm);
+
+                                var tokenView = makeView(token);
+                                var tokenName = makeView('name="token"\r\n\r\n');
+
+                                // Make a typed array to update the request body with
+                                // This only works because tokens are always the same length
+                                var curView = new Uint8Array(form[1].text);
+
+                                // Find the spot at which the token is in the buffer
+                                var idxS = curView.findIndex(function isToken(element, i, array) {
+                                    var sl = array.slice(i, i+tokenName.byteLength);
+                                    return isEqual(sl, tokenName);
+                                });
+                                // Replace the old token with the new one in the right spot
+                                curView.set(tokenView, idxS + tokenName.byteLength);
+
+                                return postForm(form[0], form[1]).fail(nextForm);
                             });
                         });
                     });
@@ -302,6 +340,14 @@ fixmystreet.offline = (function() {
         $('.moderate-display.segmented-control, .shadow-wrap, #update_form, #report-cta, .mysoc-footer, .nav-wrapper').hide();
         $('.js-back-to-report-list').attr('href', '/my/planned');
 
+        // On iOS we want to hide the photo fields on the offline inspector
+        // form because including a photo entirely breaks the form submission.
+        if (/iPad|iPhone|iPod/.test(navigator.platform) ||
+            (/Mac/.test(navigator.userAgent) && 'ontouchend' in document)) // iPadOS 13 pretends to be a desktop Mac
+        {
+            $("#form_photos, label[for=form_photo]").hide();
+        }
+
         // Refill form with saved data if there is any
         fixmystreet.offlineData.getForms().then(function(forms) {
             var savedForm;