Refactor most pug templates to share a common layout template

templates/account-channels.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   if !loggedIn
     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
       .alert.alert-danger.messagebox.center
@@ -62,8 +49,7 @@ html(lang="en")
           p#validate_channel.text-danger.pull-right
         button#register.btn.btn-primary.btn-block(type="submit") Register
 
-    include footer
+append footer
-    +footer()
   script(type='text/javascript').
     function checkChannel(){
         function nameIsInvalid(id){
@@ -100,4 +86,3 @@ html(lang="en")
         }, 200);
 
     }
-

templates/account-edit.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   if !loggedIn
     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
       .alert.alert-danger.messagebox.center
@@ -59,8 +46,8 @@ html(lang="en")
           label.control-label(for="email") New Email
           input#email.form-control(type="email", name="email")
         button#changeemailbtn.btn.btn-danger.btn-block(type="submit") Change Email
-    include footer
+
-    +footer()
+append footer
   script(type="text/javascript").
     function validatePasswordChange() {
       var pw = $("#newpassword").val();

templates/account-passwordrecover.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
     h3 Recover Password
     if recovered
@@ -24,5 +11,3 @@ html(lang="en")
       .alert.alert-danger.center.messagebox
         strong Password recovery failed
         p= recoverErr
-    include footer
-    +footer()

templates/account-passwordreset.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
     h3 Reset Password
     if reset
@@ -33,6 +20,3 @@ html(lang="en")
         label.control-label(for="email") Email address
         input#email.form-control(type="email", name="email")
       button.btn.btn-primary.btn-block(type="submit") Send reset request
-
-    include footer
-    +footer()

templates/account-profile.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   if !loggedIn
     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
       .alert.alert-danger.messagebox.center
@@ -41,8 +28,7 @@ html(lang="en")
           textarea#profiletext.form-control(cols="10", name="text", maxlength="255")= profileText
         button.btn.btn-primary.btn-block(type="submit") Save
 
-    include footer
+append footer
-    +footer()
   script(type="text/javascript").
     var $profileImage = $("#profileimage");
     $profileImage.val("#{profileImage}");

templates/contact.pug

@@ -1,22 +1,9 @@
+extends layout.pug
+
 mixin email(e, k)
   button.btn.btn-xs.btn-default(onclick="showEmail(this, '"+e+"', '"+k+"')") Show Email
 
-doctype html
+block content
-html(lang="en")
-  head
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   .col-md-8.col-md-offset-2
     h1 Contact
     h3 Email
@@ -29,8 +16,8 @@ html(lang="en")
         +email(contact.email, contact.emkey)
         br
         hr
-    include footer
+
-    +footer()
+append footer
   script(type="text/javascript").
     function showEmail(btn, email, key) {
       email = unescape(email);

templates/csrferror.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
-  head
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
 
-      section#mainpage.container
+block content
   .col-md-12
     .alert.alert-danger
       h1 Invalid Session
@@ -26,6 +13,3 @@ html(lang="en")
         | If the problem persists, please contact an administrator.
       if referer
         a(href=referer) Return to previous page
-
-    include footer
-    +footer()

templates/google_drive_userscript.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
-      section#mainpage
-        .container
   .col-md-8.col-md-offset-2
     h1 Google Drive Userscript
     h2 Why?
@@ -55,6 +42,3 @@ html(lang="en")
     p.
       You can find a guide with screenshots of the installation process
       <a href="https://github.com/calzoneman/sync/wiki/Google-Drive-Userscript-Installation-Guide" target="_blank">on GitHub</a>.
-
-    include footer
-    +footer()

templates/httperror.pug

@@ -1,3 +1,5 @@
+extends layout.pug
+
 mixin notfound()
   h1 Not Found
   p The page you were looking for doesn't seem to exist.  Please check that you typed the URL correctly.
@@ -9,22 +11,8 @@ mixin forbidden()
 mixin genericerror()
   h1 Oops
   p Your request could not be processed.  Status code: <code>#{status}</code>, message: <code>#{message}</code>
-doctype html
-html(lang="en")
-  head
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginlogout()
 
-      section#mainpage.container
+block content
   .col-md-12
     .alert.alert-danger
       if status == 404
@@ -33,6 +21,3 @@ html(lang="en")
         +forbidden()
       else
         +genericerror()
-
-    include footer
-    +footer()

templates/index.pug

@@ -1,20 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-            +navsuperadmin(false)
-          +navloginlogout()
-      section#mainpage
-        .container
   .col-lg-9.col-md-9
     h3 Public Channels
     table.table.table-bordered.table-striped
@@ -32,8 +18,6 @@ html(lang="en")
     h3 Enter Channel
     input#channelname.form-control(type="text", placeholder="Channel Name")
     p.text-muted New channels can be registered from the <a href="/account/channels">My Channels</a> page.
-    include footer
-    +footer()
   script(type="text/javascript").
     $("#channelname").keydown(function (ev) {
       if (ev.keyCode === 13) {

templates/layout.pug

@@ -0,0 +1,22 @@
+doctype html
+html(lang="en")
+  head
+    block head
+      include head
+      +head()
+  body
+    #wrap
+      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
+        include nav
+        +navheader()
+        #nav-collapsible.collapse.navbar-collapse
+          ul.nav.navbar-nav
+            +navdefaultlinks()
+            +navsuperadmin(false)
+          +navloginlogout()
+      section#mainpage
+        .container
+          block content
+    block footer
+      include footer
+      +footer()

templates/login.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          if loggedIn
-            +navlogoutform()
-      section#mainpage.container
   if wasAlreadyLoggedIn
     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
       .alert.alert-info.messagebox.center
@@ -50,5 +37,3 @@ html(lang="en")
           if redirect
             br
             a(href=redirect) Return to previous page
-    include footer
-    +footer()

templates/logout.pug

@@ -1,23 +1,9 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          +navloginform("/")
-      section#mainpage.container
   .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
     .alert.alert-info.center.messagebox
       strong Logged out
       p
         if redirect
           a(href=redirect) Return to previous page
-    include footer
-    +footer()

templates/register.pug

@@ -1,19 +1,6 @@
-doctype html
+extends layout.pug
-html(lang="en")
+
-  head
+block content
-    include head
-    +head()
-  body
-    #wrap
-      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
-        include nav
-        +navheader()
-        #nav-collapsible.collapse.navbar-collapse
-          ul.nav.navbar-nav
-            +navdefaultlinks()
-          if loggedIn
-            +navlogoutform()
-      section#mainpage.container
   if loggedIn
     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
       .alert.alert-danger.messagebox.center
@@ -32,19 +19,19 @@ html(lang="en")
         input(type="hidden", name="_csrf", value=csrfToken)
         .form-group
           label.control-label(for="username") Username
-                input#username.form-control(type="text", name="name", onkeyup="checkUsername()", maxlength="20")
+          input#register-username.form-control(type="text", name="name", onkeyup="checkUsername()", maxlength="20")
           p#validate_username.text-danger.pull-right
         .form-group
           label.control-label(for="password") Password
-                input#password.form-control(type="password", name="password", onkeyup="checkPasswords()")
+          input#register-password.form-control(type="password", name="password", onkeyup="checkPasswords()")
           p#validate_password.text-danger.pull-right
         .form-group
           label.control-label(for="password_confirm") Confirm Password
-                input#password_confirm.form-control(type="password", onkeyup="checkPasswords()")
+          input#register-password-confirm.form-control(type="password", onkeyup="checkPasswords()")
           p#validate_confirm.text-danger.pull-right
         .form-group
           label.control-label(for="email") Email (optional)
-                input#email.form-control(type="email", name="email")
+          input#register-email.form-control(type="email", name="email")
           p#validate_email.text-danger.pull-right
           p
             | Providing an email address is optional and will allow you to recover your account via email if you forget your password.
@@ -55,8 +42,8 @@ html(lang="en")
       .alert.alert-success.messagebox.center
         strong Registration Successful
         p Thanks for registering, #{registerName}!  Now you can <a href="/login">Login</a> to use your account.
-    include footer
+
-    +footer()
+append footer
   script(type="text/javascript").
     function verify() {
       var valid = checkUsername();
@@ -71,7 +58,7 @@ html(lang="en")
           .removeClass("has-success");
         $("#validate_username").text(text);
       }
-        var target = $("#username");
+      var target = $("#register-username");
       var name = target.val();
       if (name === "") {
         stateError('Username must not be empty')
@@ -94,8 +81,8 @@ html(lang="en")
           .removeClass("has-success");
         $(`#${validator}`).text(text);
       }
-        var target = $("#password");
+      var target = $("#register-password");
-        var target2 = $("#password_confirm");
+      var target2 = $("#register-password-confirm");
       var pw = target.val();
       var pwc = target2.val();
 
@@ -119,7 +106,7 @@ html(lang="en")
       }
     }
     function checkEmail() {
-        var email = $("#email").val();
+      var email = $("#register-email").val();
       if (email.trim() === "") {
         return confirm("Are you sure you want to register without setting a recovery email address?  If you lose the password, or if your account is compromised, you WILL NOT be able to recover it.");
       }