sync/templates/register.pug

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("/register")
          if loggedIn
            +navlogoutform("/register")
      section#mainpage.container
        if loggedIn
          .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
            .alert.alert-danger.messagebox.center
              strong Already logged in
              p.
                You are already logged in.  If you intend to register a new account, please <a href="/logout?redirect=/register">Logout</a> first.
              // TODO Link to My Account page
        else if !registered
          .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
            if registerError
              .alert.alert-danger.messagebox.center
                strong Registration Failed
                p= registerError
            h2 Register
            form(role="form", action="/register", method="post", onsubmit="return verify()")
              input(type="hidden", name="_csrf", value=csrfToken)
              .form-group
                label.control-label(for="username") Username
                input#username.form-control(type="text", name="name")
              .form-group
                label.control-label(for="password") Password
                input#password.form-control(type="password", name="password", onkeyup="checkPasswords()")
              .form-group
                label.control-label(for="password_confirm") Confirm Password
                input#password_confirm.form-control(type="password", onkeyup="checkPasswords()")
              .form-group
                label.control-label(for="email") Email (optional)
                input#email.form-control(type="email", name="email")
                p
                  | Providing an email address is optional and will allow you to recover your account via email if you forget your password.
                  strong &nbsp;&nbsp;If you do not provide an email address, you will not be able to recover a lost account!
              button#registerbtn.btn.btn-success.btn-block(type="submit") Register
        else
          .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
            .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() 
    script(src="/js/jquery.js")
    script(type="text/javascript").
      function verify() {
        var valid = checkUsername();
        valid = checkPasswords() && valid;
        valid = checkEmail() && valid;
        return valid;
      }
      function checkUsername() {
        var name = $("#username").val();
        $("#usernameerror").remove();
        if (name === "") {
          $("#username").parent().addClass("has-error");
          $("<p/>").addClass("text-danger")
            .attr("id", "usernameerror")
            .text("Username must not be empty")
            .insertAfter($("#username"));
          return false;
        } else if (!(/^[-\w\u00c0-\u00ff]{1,20}$/).test(name)) {
          $("#username").parent().addClass("has-error");
          $("<p/>").addClass("text-danger")
            .attr("id", "usernameerror")
            .text("Username must consist of 1-20 characters a-Z, A-Z, 0-9 " +
                  ", -, or _.")
            .insertAfter($("#username"));
          return false;
        } else {
          $("#username").parent().removeClass("has-error")
            .addClass("has-success");
        }
      }
      function checkPasswords() {
        var pw = $("#password").val();
        var pwc = $("#password_confirm").val();
        $("#passwordempty").remove();
        $("#passwordmismatch").remove();
        if (pw === "") {
          $("#password").parent().addClass("has-error");
          $("<p/>").addClass("text-danger")
            .attr("id", "passwordempty")
            .text("Password must not be empty")
            .insertAfter($("#password"));
          return false;
        } else {
          $("#password").parent().removeClass("has-error")
            .addClass("has-success");
          if (pw !== pwc) {
            $("#password_confirm").parent().addClass("has-error");
            $("<p/>").addClass("text-danger")
              .attr("id", "passwordmismatch")
              .text("Passwords do not match")
              .insertAfter($("#password_confirm"));
            return false;
          } else {
            $("#password_confirm").parent().removeClass("has-error")
              .addClass("has-success");
          }
        }
      }
      function checkEmail() {
        var email = $("#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.");
        }
        return true;
      }