adds a simple publish status UI to show errors

controllers/editor.php

@@ -21,7 +21,8 @@ $app->post('/editor/publish', function() use($app) {
 
     $app->response()['Content-type'] = 'application/json';
     $app->response()->body(json_encode([
-      'location' => $r['location']
+      'location' => $r['location'],
+      'response' => trim(htmlspecialchars($r['response']))
     ]));
   }
 });

lib/helpers.php

@@ -100,7 +100,7 @@ function micropub_post($endpoint, $params, $access_token) {
   $post = http_build_query(array_merge(array(
     'h' => 'entry'
   ), $params));
-  $post = preg_replace('/%5B[0-9]+%5D/', '%5B%5D', $post);
+  $post = preg_replace('/%5B[0-9]+%5D/', '%5B%5D', $post); // change [0] to []
   curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   curl_setopt($ch, CURLOPT_HEADER, true);

public/editor/editor.js

@@ -31,7 +31,13 @@ $(function () {
   });
 
   $.post('/editor/test-login', {}, function(response) {
-    $('#publish_btn span').text(response.logged_in ? 'Publish' : 'Sign In');
+    if(response.logged_in) {
+      $('.publish-dropdown .action-publish').removeClass('hidden');
+      $('.publish-dropdown .action-signin').addClass('hidden');
+    } else {
+      $('.publish-dropdown .action-publish').addClass('hidden');
+      $('.publish-dropdown .action-signin').removeClass('hidden');      
+    }
   });
 
   $('#publish_btn').click(function(){
@@ -42,28 +48,43 @@ $(function () {
     }
   });
 
-  $('#--publish_btn').click(function(){
-    if($('#publish_btn span').text() == 'Publish') {
-
-      $.post('/editor/publish', {
-        name: $("#post-name").val(),
-        body: editor.serialize().content.value
-      }, function(response) {
-        if(response.location) {
-          reset_page().then(function(){
-            window.location = response.location;
-          });
-        }
-      });
+  $('#new_btn').click(function(){
+    if(confirm('This will discard your current post. Are you sure?')) {
+      reset_page();
+    }
+  });
 
-    } else {
-      var url = prompt("Enter your URL");
-      window.location = '/auth/start?me=' + encodeURIComponent(url) + '&redirect=/editor';
+  $('#signin-domain').on('keydown', function(e){
+    if(e.keyCode == 13) {
+      $('#signin-btn').click();
     }
   });
+  $('#signin-btn').click(function(){
+    window.location = '/auth/start?me=' + encodeURIComponent($('#signin-domain').val()) + '&redirect=/editor';
+  });
+  $('#publish-confirm').click(function(){
+    $('#publish-help').addClass('hidden');
+    $('#publish-in-progress').removeClass('hidden');
 
-  $('#new_btn').click(function(){
-    reset_page();
+    $.post('/editor/publish', {
+      name: $("#post-name").val(),
+      body: editor.serialize().content.value
+    }, function(response) {
+      if(response.location) {
+        reset_page().then(function(){
+          $('#publish-success-url').attr('href', response.location);
+          $('#publish-in-progress').addClass('hidden');
+          $('#publish-error-debug').html('').addClass('hidden');
+          $('#publish-error').addClass('hidden');
+          $('#publish-success').removeClass('hidden');
+        });
+      } else {
+        $('#publish-in-progress').addClass('hidden');
+        $('#publish-error-debug').html(response.response).removeClass('hidden');
+        $('#publish-error').removeClass('hidden');
+        $('#publish-success').addClass('hidden');
+      }
+    });    
   });
 
 });

public/editor/style.css

@@ -57,7 +57,7 @@ img { border: 0; }
   clear: both;
 }
 
-.toolbar .btn {
+.btn {
   height: 38px;
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
@@ -73,10 +73,35 @@ img { border: 0; }
   vertical-align: middle;
   cursor: pointer;
 }
-.toolbar .btn:hover {
+.btn:hover {
   border-color: #61a7ae;
   color: #51a1a8;
 }
+.btn.btn-medium {
+  height: 30px;
+  padding: 0 16px;
+  font-size: 13px;
+}
+.btn.btn-small {
+  height: 26px;
+  padding: 0 16px;
+  font-size: 13px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+input.form-field-small {
+  height: 24px;
+  margin-top: 1px;
+  font-size: 13px;
+  color: #51a1a8;
+  padding: 0 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  border: 1px #93dee5 solid;
+}
 
 .publish-dropdown {
   position: absolute;
@@ -86,6 +111,9 @@ img { border: 0; }
   background: white;
   width: 280px;
   min-height: 60px;
+  font-family: sans-serif;
+  font-size: 14px;
+  line-height: 18px;
   border: 1px solid #dbdbdb;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
@@ -107,6 +135,21 @@ img { border: 0; }
   display: block;
   border: #dbdbdb 1px solid;
 }
+.publish-dropdown .dropdown-content {
+  padding: 9px;
+}
+.publish-dropdown input {
+  font-family: sans-serif;  
+}
+.publish-dropdown .helptext {
+  padding: 8px 4px 12px 4px;
+  color: #333;
+}
+pre#publish-error-debug {
+  overflow: scroll;
+  font-size: 11px;
+  line-height: 12px;
+}
 
 .hidden {
   display: none;

views/editor.php

@@ -47,7 +47,7 @@
     <span class="item text"><span id="draft-status">Draft</span></span>
   </div>
   <div class="toolbar-right">
-    <button class="btn" id="publish_btn"><span>Publish</span> <i class="fa fa-caret-down"></i></button>
+    <button class="btn" id="publish_btn">Publish <i class="fa fa-caret-down"></i></button>
     <button class="btn" id="new_btn">New</button>
   </div>
   <div class="clear"></div>
@@ -55,6 +55,36 @@
 
 <div class="publish-dropdown hidden">
   <div class="arrow"></div>
+  <div class="dropdown-content action-publish">
+
+    <div style="float:right"><button class="btn btn-medium" id="publish-confirm">Publish Now</button></div>
+    <div style="clear:right;"></div>
+
+    <div class="helptext" id="publish-help">
+      <div>Clicking "Publish Now" will send a request to your Micropub endpoint.</div><br>
+      <div>The request will include two fields, "name" and "content", where the content will be the full HTML for this post.</div>
+    </div>
+
+    <div class="helptext hidden" id="publish-in-progress">
+      Posting... <!-- TODO replace this with a CSS animated spinner -->
+    </div>
+
+    <div class="helptext hidden" id="publish-success">
+      <div>It worked! The post is on your site!</div><br>
+      <div><a href="" id="publish-success-url">View your post</a></div>
+    </div>
+
+    <div class="helptext hidden" id="publish-error">
+      <div>Something went wrong! Below is the response from your Micropub endpoint.</div><br>
+      <pre id="publish-error-debug"></pre>
+    </div>
+
+  </div>
+  <div class="dropdown-content action-signin hidden">
+    <div class="helptext">You need to sign in before you can publish! Don't worry, your draft will still be here when you finish signing in.</div>
+    <input type="url" class="form-field-small" placeholder="yourdomain.com" id="signin-domain">
+    <button class="btn btn-small" id="signin-btn">Sign In</button>
+  </div>
 </div>
 
 <div class="container">

views/partials/appcache.php

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# v3
+# v15
 
 /editor
 /editor/style.css