templates/register.pug

   1 extends layout.pug
   2
   3 block content
   4   if loggedIn
   5     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
   6       .alert.alert-danger.messagebox.center
   7         strong Already logged in
   8         p.
   9           You are already logged in.  If you intend to register a new account, please <a href="/logout?redirect=/register">Logout</a> first.
  10         // TODO Link to My Account page
  11   else if !registered
  12     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
  13       if registerError
  14         .alert.alert-danger.messagebox.center
  15           strong Registration Failed
  16           p= registerError
  17       h2 Register
  18       form(role="form", action="/register", method="post", onsubmit="return verify()")
  19         input(type="hidden", name="_csrf", value=csrfToken)
  20         .form-group
  21           label.control-label(for="username") Username
  22           input#register-username.form-control(type="text", name="name", onkeyup="checkUsername()", maxlength="20")
  23           p#validate_username.text-danger.pull-right
  24         .form-group
  25           label.control-label(for="password") Password
  26           input#register-password.form-control(type="password", name="password", onkeyup="checkPasswords()")
  27           p#validate_password.text-danger.pull-right
  28         .form-group
  29           label.control-label(for="password_confirm") Confirm Password
  30           input#register-password-confirm.form-control(type="password", onkeyup="checkPasswords()")
  31           p#validate_confirm.text-danger.pull-right
  32         .form-group
  33           label.control-label(for="email") Email (optional)
  34           input#register-email.form-control(type="email", name="email")
  35           p#validate_email.text-danger.pull-right
  36           p
  37             | Providing an email address is optional and will allow you to recover your account via email if you forget your password.
  38             strong &nbsp;&nbsp;If you do not provide an email address, you will not be able to recover a lost account!
  39         if hCaptchaSiteKey
  40           noscript
  41             .text-danger This website requires JavaScript in order to display a CAPTCHA.
  42           .form-group
  43             div.h-captcha(data-sitekey=hCaptchaSiteKey)
  44         button#registerbtn.btn.btn-success.btn-block(type="submit") Register
  45   else
  46     .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
  47       .alert.alert-success.messagebox.center
  48         strong Registration Successful
  49         p Thanks for registering, #{registerName}!  Now you can <a href="/login">Login</a> to use your account.
  50
  51 append footer
  52   if hCaptchaSiteKey
  53     script(src="https://hcaptcha.com/1/api.js" async defer)
  54   script(type="text/javascript").
  55     function verify() {
  56       var valid = checkUsername();
  57       valid = checkPasswords() && valid;
  58       valid = checkEmail() && valid;
  59       return valid;
  60     }
  61     function checkUsername() {
  62       function stateError(text){
  63         target.parent()
  64           .addClass("has-error")
  65           .removeClass("has-success");
  66         $("#validate_username").text(text);
  67       }
  68       var target = $("#register-username");
  69       var name = target.val();
  70       if (name === "") {
  71         stateError('Username must not be empty')
  72         return false;
  73       } else if (!(/^[-\w\u00c0-\u00ff]{1,20}$/).test(name)) {
  74         stateError("Username must consist of 1-20 characters" +
  75                     " a-Z, A-Z, 0-9, -, or _.");
  76         return false;
  77       } else {
  78         target.parent()
  79           .removeClass("has-error")
  80           .addClass("has-success");
  81         $("#validate_username").text('');
  82       }
  83     }
  84     function checkPasswords() {
  85       function stateError(text, target, validator){
  86         target.parent()
  87           .addClass("has-error")
  88           .removeClass("has-success");
  89         $(`#${validator}`).text(text);
  90       }
  91       var target = $("#register-password");
  92       var target2 = $("#register-password-confirm");
  93       var pw = target.val();
  94       var pwc = target2.val();
  95
  96       $("#validate_password").text('');
  97       $("#validate_confirm").text('');
  98       if (pw === "") {
  99         stateError('Password must not be empty', target, 'validate_password')
 100         return false;
 101       } else {
 102         target.parent()
 103           .removeClass("has-error")
 104           .addClass("has-success");
 105         if (pw !== pwc) {
 106           stateError('Passwords do not match', target2, 'validate_confirm')
 107           return false;
 108         } else {
 109           target2.parent()
 110             .removeClass("has-error")
 111             .addClass("has-success");
 112         }
 113       }
 114     }
 115     function checkEmail() {
 116       var email = $("#register-email").val();
 117       if (email.trim() === "") {
 118         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.");
 119       }
 120       return true;
 121     }