New feature: Share request

README.md

@@ -31,6 +31,7 @@ Features
 * View response headers.
 * Ctrl+Enter sends request.
 * Private mode
+* Share/Import requests.
 
 Running tests
 ---

restman/css/icomoon.css

@@ -11,7 +11,7 @@
     font-style: normal;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"]:before, [class*=" icon-"]:before {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'icomoon' !important;
     speak: none;
@@ -26,30 +26,21 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-brightness_low:before {
-    content: "\e1ad";
-}
-.icon-brightness_high:before {
-    content: "\e1ac";
-}
-.icon-cancel:before {
-    content: "\e5c9";
+.icon-close:before {
+  content: "\e5cd";
 }
 .icon-delete:before {
-    content: "\e872";
+  content: "\e872";
 }
-.icon-fullscreen:before {
-    content: "\e5d0";
+.icon-more_vert:before {
+  content: "\e5d4";
 }
-.icon-fullscreen_exit:before {
-    content: "\e5d1";
+.icon-note_add:before {
+  content: "\e89c";
 }
 .icon-send:before {
-    content: "\e163";
+  content: "\e163";
 }
-.icon-settings:before {
-    content: "\e8b8";
-}
-.icon-more_vert:before {
-    content: "\e5d4";
+.icon-share:before {
+  content: "\e80d";
 }

restman/css/restman.css

@@ -150,15 +150,15 @@ ul.name-value-list {
   border: none;
 }
 
-span[data-delete-item] {
+span[data-delete-item], span[data-share-item] {
   width: 2.25rem;
   font-size: 1.25rem;
   padding: 0 0.5rem;
   opacity: 0.5;
   cursor: pointer;
   align-self: center;
 }
-  span[data-delete-item]:hover {
+  span[data-delete-item]:hover, span[data-share-item]:hover {
     opacity: 1;
   }
 
@@ -242,6 +242,22 @@ input[type=button].ok {
   border: 1px solid #080;
 }
 
+div.icon-button-wrapper {
+  display: inline-block;
+  position: relative;
+}
+  div.icon-button-wrapper:before {
+    z-index: 1000; /* On top of everything */
+    pointer-events: none; /* Do not interact with the pointer */
+    position: absolute;
+    top: 0.75rem;
+    left: 0.75rem;
+  }
+  div.icon-button-wrapper input[type="button"] {
+    padding-left: 2.5rem;
+    width: 100%;
+  }
+
 input[type=text].flat, input[type=password].flat, input[type=file].flat {
   border-top: none;
   border-left: none;
@@ -486,6 +502,10 @@ input[type=text].flat:focus, input[type=password].flat:focus {
   flex-direction: column;
 }
 
+.float-left {
+  float: left;
+}
+
 .scrollable-y {
   overflow-y: auto;
 }

restman/index.html

@@ -40,13 +40,23 @@
                                     <li data-clone-template class="flex-container flex-item-middle close-modal" data-history-item="1411588114901">
                                         <span class="flex-item-static history-method label">method</span>
                                         <span class="flex-item-dynamic history-url" title="">url</span>
-                                        <span class="flex-item-static icon-delete" data-delete-item />
+                                        <span class="flex-item-static icon-delete" data-delete-item></span>
+                                        <span class="flex-item-static icon-share" data-share-item data-reveal-id="ShareRequestForm"></span>
                                     </li>
                                 </ul>
                             </div>
                             <div class="modal-buttons flex-item-static">
-                                <input id="CancelHistory" type="button" value="Cancel" tabindex="-1" />
-                                <input id="ClearHistory" type="button" class="error" value="Clear all" tabindex="-1" />
+                                <div class="icon-button-wrapper icon-delete float-left">
+                                    <input id="ClearHistory" type="button" class="error" value="Clear all" tabindex="-1" />
+                                </div>
+
+                                <div class="icon-button-wrapper icon-note_add">
+                                    <input id="ImportHistory" type="button" value="Import" tabindex="-1" data-reveal-id="ImportRequestForm" />
+                                </div>
+
+                                <div class="icon-button-wrapper icon-close">
+                                    <input id="CloseHistory" type="button" value="Close" tabindex="-1" />
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -106,7 +116,7 @@ <h3 class="expander">Body</h3>
                             <ul id="FormData" class="name-value-list">
                                 <li data-clone-template class="flex-container">
                                     <input class="flat key flex-item-dynamic" type="text" placeholder="Write key..." tabindex="0" />
-                                    <input class="flat key flex-item-dynamic" type="text" placeholder="Write value or drop file..." data-fileable tabindex="0" />
+                                    <input class="flat value flex-item-dynamic" type="text" placeholder="Write value or drop file..." data-fileable tabindex="0" />
                                     <span class="flex-item-static icon-delete" data-delete-item tabindex="0" />
                                 </li>
                             </ul>
@@ -205,6 +215,32 @@ <h6>Choose layout</h6>
             </div>
         </div>
 
+        <!-- ShareRequest modal -->
+        <div id="ShareRequestForm" class="reveal-modal medium" data-reveal>
+            <div class="modal-content">
+                <h4>Share Request</h4>
+                <p>Warning! Request metadata like headers and data might contain sensitive information</p>
+                <p>Copy the following snippet and share it.</p>
+                <textarea id="ShareRequestEditor" tabindex="0"></textarea>
+            </div>
+            <div class="modal-buttons">
+                <input type="button" class="flat border-radius close-modal" value="Cancel" />
+            </div>
+        </div>
+
+        <!-- ImportRequest modal -->
+        <div id="ImportRequestForm" class="reveal-modal medium" data-reveal>
+            <div class="modal-content">
+                <h4>Import Request</h4>
+                <p>Paste the snippet to import. Note: Imported requests are not saved when imported, only when executed.</p>
+                <textarea id="ImportRequestEditor" tabindex="0"></textarea>
+            </div>
+            <div class="modal-buttons">
+                <input type="button" class="flat border-radius close-modal" value="Cancel" />
+                <input type="button" class="flat border-radius save-modal ok" value="Import" />
+            </div>
+        </div>
+
         <!-- Load scripts -->
         <script type="text/javascript" src="./js/jquery-2.1.4.js"></script>
 

restman/js/ui/editors.js

@@ -52,6 +52,10 @@ $(document).ready(function(event) {
     restman.ui.editors.create('#RequestContent', false);
     // Create editor for request response
     restman.ui.editors.create('#ResponseContentText', true);
+    // Create editor for request share
+    restman.ui.editors.create('#ShareRequestEditor', true);
+    // Create editor for request import
+    restman.ui.editors.create('#ImportRequestEditor', false);
 
     // Prepare switches
     $("*[data-switch-type]").click(function(event) {

restman/js/ui/history.js

@@ -137,7 +137,6 @@ restman.ui = restman.ui || {};
 
         _mousedown: function (event) {
             event.preventDefault();
-            //self._blur();
         },
 
         /*
@@ -190,7 +189,7 @@ $(document).ready(function(event) {
         return false;
     });
 
-    $('#CancelHistory').click(function (event) {
+    $('#CloseHistory').click(function (event) {
         restman.ui.history.dialog.hide();
         return false;
     })
@@ -204,51 +203,37 @@ $(document).ready(function(event) {
         // Remove history entry
         var id = $(this).parent().attr('data-history-item');
         restman.storage.deleteRequest(parseInt(id), function (e) {});
+
+        event.preventDefault();
+
+        return false;
+    });
+
+    /* Share a history item. */
+    $('#HistoryList li [data-share-item]').click(function(event) {
+        // Remove history entry
+        var id = $(this).parent().attr('data-history-item');
+        restman.storage.getRequest(parseInt(id), function (item){
+            restman.ui.editors.setValue("#ShareRequestEditor", JSON.stringify(item, null, 4) || "");
+
+            // Show dialog
+            $("#ShareRequestForm").foundation('reveal', 'open');
+            // Refresh editor after 200ms
+            setTimeout(function() {
+                restman.ui.editors.get("#ShareRequestEditor").refresh();
+            }, 200);
+
+        });
+
+
         return false;
     });
 
     /* Load history item. */
     $('[data-history-item]').click(function (event) {
         // Load history item.
         restman.storage.getRequest(parseInt($(this).attr('data-history-item')), function (item){
-            $('#Method').val(item.method);
-            $('#Url').val(item.url);
-
-            // Cleanup headers
-            $('#HeadersTable > li:not([data-clone-template])').remove();
-            // Add headers
-            for (var d in item.headers) {
-                var row = restman.ui.dynamic_list.add_item($('#HeadersTable'));
-                row.find('input.key').val(d);
-                row.find('input.value').val(item.headers[d]);
-            }
-            if (!('type' in item.body)) {
-                item.body.type = 'raw';
-            }
-
-            // Cleanup body (form and raw)
-            var raw_value = '', form_value = [];
-
-            // Load Body
-            if (item.body.type == 'raw') {
-                raw_value = item.body.content;
-                $('a[href="#PanelRaw"]').click();
-            }
-
-            if (item.body.type == 'form') {
-                form_value = item.body.content;
-                $('a[href="#PanelForm"]').click();
-            }
-
-            // Load raw value (if set)
-            restman.ui.editors.setValue("#RequestContent", raw_value || "");
-            // Load form items (if any)
-            $('#FormData > li:not([data-clone-template])').remove();
-            for (var d in form_value) {
-                var row = restman.ui.dynamic_list.add_item($('#FormData'), true);
-                row.find('input.key').val(d);
-                row.find('input.value').val(item.body.content[d]);
-            }
+            restman.ui.request.load(item);
         });
         restman.ui.history.dialog.hide();
         return false;

restman/js/ui/modals.js

@@ -29,6 +29,18 @@ $(document).ready(function(event) {
 
     });
 
+    $('#ImportRequestForm .save-modal').click(function (event) {
+        var value = restman.ui.editors.get('#ImportRequestEditor').getValue();
+        // Parse value entered by user
+        obj = JSON.parse(value);
+
+        // Load it up in the UI
+        restman.ui.request.load(obj);
+
+        // Close modal
+        $('#ImportRequestForm').foundation('reveal', 'close')
+    });
+
     /* Cancel buttons for modals */
     $('.reveal-modal .close-modal').click(function (event) {
         $(this).parent().parent().foundation('reveal', 'close')

restman/js/ui/request.js

@@ -5,6 +5,62 @@
  * Free to use under the MIT license.
  * https://raw.githubusercontent.com/jsargiot/restman/master/LICENSE
  */
+var restman = restman || {};
+restman.ui = restman.ui || {};
+
+
+(function() {
+    'use strict';
+
+    var self = restman.ui.request = {
+        /*
+         * Adds a history item to the History section.
+         *
+         * The new item is always inserted at the beginning (newer)
+         */
+        load: function (item) {
+            $('#Method').val(item.method);
+            $('#Url').val(item.url);
+
+            // Cleanup headers
+            $('#HeadersTable > li:not([data-clone-template])').remove();
+            // Add headers
+            for (var d in item.headers) {
+                var row = restman.ui.dynamic_list.add_item($('#HeadersTable'));
+                row.find('input.key').val(d);
+                row.find('input.value').val(item.headers[d]);
+            }
+            if (!('type' in item.body)) {
+                item.body.type = 'raw';
+            }
+
+            // Cleanup body (form and raw)
+            var raw_value = '', form_value = [];
+
+            // Load Body
+            if (item.body.type == 'raw') {
+                raw_value = item.body.content;
+                $('a[href="#PanelRaw"]').click();
+            }
+
+            if (item.body.type == 'form') {
+                form_value = item.body.content;
+                $('a[href="#PanelForm"]').click();
+            }
+
+            // Load raw value (if set)
+            restman.ui.editors.setValue("#RequestContent", raw_value || "");
+            // Load form items (if any)
+            $('#FormData > li:not([data-clone-template])').remove();
+            for (var d in form_value) {
+                var row = restman.ui.dynamic_list.add_item($('#FormData'), true);
+                row.find('input.key').val(d);
+                row.find('input.value').val(item.body.content[d]);
+            }
+        }
+    };
+})();
+
 $(document).ready(function(event) {
 
     /*

tests/History.feature

@@ -17,11 +17,11 @@ Feature: History management
       and url is "http://localhost:5000/get?first=request"
       and I click on send
       and I wait for request to finish
-    When url is "http://localhost:5000/get?second=request"
+      and url is "http://localhost:5000/get?second=request"
       and I click on send
       and I wait for request to finish
-    Then I open History dialog
-      and url "http://localhost:5000/get?first=request" with method "GET" it's in the history
+    When I open History dialog
+    Then url "http://localhost:5000/get?first=request" with method "GET" it's in the history
       and url "http://localhost:5000/get?second=request" with method "GET" it's in the history
 
   Scenario: Clear All removes all entries in history