Fixed #1446 & save feedback indicator

It's not amazing, but it's a start. Also fixed feature tests - since request wasn't being passed in to the account.

public/css/help.css

@@ -1,4 +1,5 @@
 *, *::after, *::before {
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -57,7 +58,6 @@ pre {
   direction: ltr;
   text-align: left;
   -moz-tab-size: 2;
-  -o-tab-size: 2;
   tab-size: 2;
   word-wrap: break-word;
   -webkit-hyphens: none;
@@ -186,6 +186,7 @@ hr {
 header nav {
   display: inline;
   padding: 10px 0;
+  /* height: 29px; */
 }
 
 header nav a {
@@ -194,6 +195,7 @@ header nav a {
   margin-right: 10px;
   /* padding-bottom: 0; */
   line-height: 1.2em;
+  height: 29px;
 }
 
 header nav a.selected:before {
@@ -491,8 +493,6 @@ display: inline;
   width: 20px;
   height: 12px;
   /* css3 */
-  -webkit-border-radius:3px;
-  -moz-border-radius:3px;
   border-radius:3px;
 }
 
@@ -602,6 +602,7 @@ h6:hover .anchor span:before {
     /* -webkit-column-count: 2; */
     -moz-column-count: 2;
     -ms-column-count: 2;
+    -webkit-column-count: 2;
     column-count: 2;
     padding-left: 0;
   }
@@ -717,4 +718,21 @@ kbd kbd {
 
 li {
   /* vertical-align: bottom; */
+}
+
+span.status {
+  font-weight: normal;
+  margin-right: 8px;
+  font-family: sans-serif;
+  background: rgb(255, 237, 121);
+  padding: 5px 10px;
+  border-radius: 4px;
+  opacity: 0;
+  -webkit-transition: opacity 100ms ease-out;
+  -ms-transition: opacity 100ms ease-out;
+  transition: opacity 100ms ease-out;
+}
+
+span.status.show {
+  opacity: 1;
 }

public/js/account/preferences-settings.js

@@ -31,6 +31,8 @@
     jshint: true,
     assetUrl: '',
   };
+  var $saveStatus = $('span.status');
+  var saveTimer = null;
   $.extend(currentSettings, getCurrentSettings());
   var panels = ['html', 'css', 'javascript', 'console', 'live'];
   var $panels = {};
@@ -97,6 +99,9 @@
     localStorage.settings = JSON.stringify(localStorageSettings);
     console.log(localStorageSettings);
 
+    clearTimeout(saveTimer);
+    $saveStatus.addClass('show');
+
     // Save on server
     $.ajax({
       url: 'editor',
@@ -115,6 +120,11 @@
         if (console && console.log) {
           console.log('Error: ' + status);
         }
+      },
+      complete: function () {
+        saveTimer = setTimeout(function () {
+          $saveStatus.removeClass('show');
+        }, 1000)
       }
     });
   }

views/account/profile.html

@@ -19,20 +19,23 @@
 
     <div>
       <label for="key">Password</label>
-      <input id="key" name="password" type="password">
+      <input id="key" name="password" type="password" autocomplete="false">
     </div>
 
     <input type="hidden" id="_csrf" name="_csrf" value="{{token}}">
     <input type="submit" value="Update account">
   </form>
-    <p class="link-container">
-      <a class="link-dropbox link-btn" href="{{root}}/auth/dropbox">Link your Dropbox account</a>
-    </p>
-    <p class="link-container">
-      {{#feature request "github"}}
-        <a class="link-github link-btn" href="/auth/github">Link your Github account</a>
-      {{/feature}}
-    </p>
+
+  <h2>Third party applications</h2>
+  <ul>
+  {{#feature request "github"}}
+    <li class="link-container"><strong>Use Github for logging in</strong> &ndash; <a href="/auth/github">link your Github account</a></li>
+  {{/feature}}
+
+  {{#feature request "dropbox"}}
+    <li class="link-container"><strong>Export your bins to Dropbox</strong> &ndash; <a href="{{root}}/auth/dropbox">link your Dropbox account</a></li>
+  {{/feature}}
+  </ul>
 </section>
 <link href="{{static}}/css/account-profile.css" rel="stylesheet" type="text/css"/>
 <script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>

views/sub/layout.html

@@ -20,6 +20,7 @@
       <header>
       <div class="inner"><a id="back" href="{{root}}"><span class="morewords">Back to JS Bin</span></a>
         <nav>
+          <span class="status">Settings saved</span>
           <a class="selected" href="{{root}}/account">Account</a>
           <a href="{{root}}/blog">Blog</a>
           <a href="{{root}}/help">Help</a>