Merge pull request #1221 from ether/focus-on-password

proper fix for focus and some styling of the form and allows for pressin...

src/locales/en.ini

@@ -21,6 +21,9 @@ pad.toolbar.showusers.title = Show the users on this pad
 pad.colorpicker.save = Save
 pad.colorpicker.cancel = Cancel
 pad.loading = Loading...
+pad.passwordRequired = You need a password to access this pad
+pad.permissionDenied = You do not have permission to access this pad
+pad.wrongPassword = Your password was wrong
 pad.settings.padSettings = Pad Settings
 pad.settings.myView = My View
 pad.settings.stickychat = Chat always on screen

src/static/css/pad.css

@@ -22,6 +22,7 @@ iframe {
 .readonly .acl-write {
   display: none;
 }
+
 #users {
   background: #f7f7f7;
   background: -webkit-linear-gradient( #F7F7F7,#EEE);
@@ -190,6 +191,19 @@ a img {
   height: 30px;
   z-index: 100;
 }
+
+#editorloadingbox .passForm{
+  padding:10px;
+}
+
+#editorloadingbox input{
+  padding:10px;
+}
+
+#editorloadingbox button{
+  padding:10px;
+}
+
 #editorcontainerbox {
   position: absolute;
   bottom: 0;
@@ -883,3 +897,15 @@ input[type=checkbox] {
       line-height: 24px
     }
 }
+
+#passwordRequired{
+  display:none;
+}
+
+#permissionDenied{
+  display:none;
+}
+
+#wrongPassword{
+  display:none;
+}

src/static/js/pad.js

@@ -51,18 +51,20 @@ var randomString = require('./pad_utils').randomString;
 
 var hooks = require('./pluginfw/hooks');
 
-function createCookie(name, value, days, path)
-{
+function createCookie(name, value, days, path){ /* Warning Internet Explorer doesn't use this it uses the one from pad_utils.js */
   if (days)
   {
     var date = new Date();
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
     var expires = "; expires=" + date.toGMTString();
   }
-  else var expires = "";
+  else{
+    var expires = "";
+  }
   
-  if(!path)
+  if(!path){ // If the path isn't set then just whack the cookie on the root path
     path = "/";
+  }
   
   //Check if the browser is IE and if so make sure the full path is set in the cookie
   if(navigator.appName=='Microsoft Internet Explorer'){
@@ -202,6 +204,7 @@ function savePassword()
   createCookie("password",$("#passwordinput").val(),null,document.location.pathname);
   //reload
   document.location=document.location;
+  return false;
 }
 
 function handshake()
@@ -298,21 +301,25 @@ function handshake()
     //the access was not granted, give the user a message
     if(!receivedClientVars && obj.accessStatus)
     {
+      $('.passForm').submit(require(module.id).savePassword);
+
       if(obj.accessStatus == "deny")
       {
-        $("#editorloadingbox").html("<b>You do not have permission to access this pad</b>");
+        $('#loading').hide();
+        $("#permissionDenied").show();
       }
       else if(obj.accessStatus == "needPassword")
       {
-        $("#editorloadingbox").html("<b>You need a password to access this pad</b><br>" +
-                                    "<input id='passwordinput' type='password' name='password'>"+
-                                    "<button type='button' onclick=\"" + padutils.escapeHtml('require('+JSON.stringify(module.id)+").savePassword()") + "\">ok</button>");
+        $('#loading').hide();
+        $('#passwordRequired').show();
+        $("#passwordinput").focus();
       }
       else if(obj.accessStatus == "wrongPassword")
       {
-        $("#editorloadingbox").html("<b>Your password was wrong</b><br>" +
-                                    "<input id='passwordinput' type='password' name='password'>"+
-                                    "<button type='button' onclick=\"" + padutils.escapeHtml('require('+JSON.stringify(module.id)+").savePassword()") + "\">ok</button>");
+        $('#loading').hide();
+        $('#wrongPassword').show();
+        $('#passwordRequired').show();
+        $("#passwordinput").focus();
       }
     }
     

src/static/js/pad_utils.js

@@ -39,20 +39,29 @@ function randomString(len)
   return randomstring;
 }
 
-function createCookie(name, value, days, path)
-{
+function createCookie(name, value, days, path){ /* Used by IE */
   if (days)
   {
     var date = new Date();
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
     var expires = "; expires=" + date.toGMTString();
   }
-  else var expires = "";
+  else{
+    var expires = "";
+  }
 
-  if(!path)
+  if(!path){ // IF the Path of the cookie isn't set then just create it on root
     path = "/";
+  }
+
+  //Check if the browser is IE and if so make sure the full path is set in the cookie
+  if(navigator.appName=='Microsoft Internet Explorer'){
+    document.cookie = name + "=" + value + expires + "; path=/"; /* Note this bodge fix for IE is temporary until auth is rewritten */
+  }
+  else{
+    document.cookie = name + "=" + value + expires + "; path=" + path;
+  }
 
-  document.cookie = name + "=" + value + expires + "; path=" + path;
 }
 
 function readCookie(name)

src/templates/pad.html

@@ -184,7 +184,19 @@
         <div id="editorcontainerbox">
             <div id="editorcontainer"></div>
             <div id="editorloadingbox">
-              <p data-l10n-id="pad.loading">Loading...</p>
+              <div id="passwordRequired">
+                <p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p>
+                <form class='passForm' method='POST'>
+                  <input id='passwordinput' type='password' name='password'><input type='submit' value='Submit'>
+                </form>
+              </div>
+              <div id="permissionDenied">
+                <p data-l10n-id="pad.permissionDenied">You do not have permission to access this pad</p>
+              </div>
+              <div id="wrongPassword">
+                <p data-l10n-id="pad.wrongPassword">Your password was wrong</p>
+              </div>
+              <p data-l10n-id="pad.loading" id="loading">Loading...</p>
               <noscript><strong>Sorry, you have to enable Javascript in order to use this.</strong></noscript>
             </div>
         </div>