src/templates/auth/register.html

   1 {% extends "../base.html" %}
   2
   3 {% block title %}{{ _("Register") }}{% end block %}
   4
   5 {% block content %}
   6         <div class="row justify-content-center my-5">
   7                 <div class="col col-md-6">
   8                         <h4 class="mb-4">{{ _("Register A New Account") }}</h4>
   9
  10                         <p class="lead">
  11                                 {{ _("Become a part of our community by registering an account!") }}
  12                         </p>
  13
  14                         <form id="form-register" action="" method="POST">
  15                                 {% raw xsrf_form_html() %}
  16
  17                                 <input type="hidden" name="next" value="{{ next or "" }}">
  18
  19                                 <div class="form-group">
  20                                         <div class="input-group">
  21                                                 <div class="input-group-prepend">
  22                                                         <span class="input-group-text">@</span>
  23                                                 </div>
  24                                                 <input type="text" class="form-control form-control-lg"
  25                                                         name="uid" placeholder="{{ _("Username") }}" required autofocus
  26                                                         pattern="[a-z_][a-z0-9_-]{3,31}">
  27                                         </div>
  28                                         <div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
  29                                                 {{ _("Please choose a username in UNIX format with at least four characters, starting with a lowercase letter, followed by only lowercase letters, digits, dash and underscore") }}
  30                                         </div>
  31                                         <div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
  32                                                 {{ _("This username is not available") }}
  33                                         </div>
  34                                 </div>
  35
  36                                 <div class="form-row mb-3">
  37                                         <div class="col">
  38                                                 <label>{{ _("First Name") }}</label>
  39
  40                                                 <input type="text" class="form-control" name="first_name"
  41                                                         placeholder="{{ _("First Name") }}" required>
  42                                         </div>
  43
  44                                         <div class="col">
  45                                                 <label>{{ _("Last Name") }}</label>
  46
  47                                                 <input type="text" class="form-control" name="last_name"
  48                                                         placeholder="{{ _("Last Name") }}" required>
  49                                         </div>
  50                                 </div>
  51
  52                                 <div class="form-group">
  53                                         <input type="email" class="form-control"
  54                                                 name="email" placeholder="{{ _("Email Address") }}" required>
  55                                         <div id="email-invalid" class="invalid-feedback invalid-feedback-email">
  56                                                 {{ _("This email address is invalid") }}
  57                                         </div>
  58                                         <div id="email-blacklisted" class="invalid-feedback invalid-feedback-email">
  59                                                 {{ _("This email address cannot be used") }}
  60                                         </div>
  61                                         <div id="email-taken" class="invalid-feedback invalid-feedback-email">
  62                                                 {{ _("This email address is already in use") }}
  63                                         </div>
  64                                 </div>
  65
  66                                 <button type="submit" class="btn btn-primary btn-block" disabled>
  67                                         {{ _("Register") }}
  68                                 </button>
  69                         </form>
  70                 </div>
  71         </div>
  72 {% end block %}
  73
  74 {% block javascript %}
  75         <script>
  76                 var form = $("#form-register");
  77                 var submit = form.find(":submit");
  78
  79                 // Store the valid status
  80                 var valid = {
  81                         uid: false,
  82                         email: false,
  83                 };
  84
  85                 var check_uid;
  86                 var check_email;
  87
  88                 form.find("input[name=uid]").on("keyup", function(e) {
  89                         if (check_uid)
  90                                 clearTimeout(check_uid);
  91
  92                         var uid = $(this);
  93
  94                         check_uid = setTimeout(function() {
  95                                 $.get("/api/check/uid", { uid : uid.val() },
  96                                         function(data) {
  97                                                 // Reset all classes
  98                                                 uid.removeClass("is-valid is-invalid");
  99                                                 valid.uid = false;
 100
 101                                                 // Hide all feedback
 102                                                 $(".invalid-feedback-uid").hide();
 103
 104                                                 switch (data.result) {
 105                                                         case "ok":
 106                                                                 uid.addClass("is-valid");
 107                                                                 valid.uid = true;
 108                                                                 break;
 109
 110                                                         case "invalid":
 111                                                                 uid.addClass("is-invalid");
 112                                                                 $("#uid-invalid").show();
 113                                                                 break;
 114
 115                                                         case "taken":
 116                                                                 uid.addClass("is-invalid");
 117                                                                 $("#uid-taken").show();
 118                                                                 break;
 119                                                 }
 120
 121                                                 form.trigger("change");
 122                                         }
 123                                 );
 124                         }, 250);
 125                 });
 126
 127                 form.find("input[name=email]").on("keyup", function(e) {
 128                         if (check_email)
 129                                 clearTimeout(check_email);
 130
 131                         var email = $(this);
 132
 133                         check_email = setTimeout(function() {
 134                                 $.get("/api/check/email", { email : email.val() },
 135                                         function(data) {
 136                                                 // Reset all classes
 137                                                 email.removeClass("is-valid is-invalid");
 138                                                 valid.email = false;
 139
 140                                                 // Hide all feedback
 141                                                 $(".invalid-feedback-email").hide();
 142
 143                                                 switch (data.result) {
 144                                                         case "ok":
 145                                                                 email.addClass("is-valid");
 146                                                                 valid.email = true;
 147                                                                 break;
 148
 149                                                         case "invalid":
 150                                                                 email.addClass("is-invalid");
 151                                                                 $("#email-invalid").show();
 152                                                                 break;
 153
 154                                                         case "blacklisted":
 155                                                                 email.addClass("is-invalid");
 156                                                                 $("#email-blacklisted").show();
 157                                                                 break;
 158
 159                                                         case "taken":
 160                                                                 email.addClass("is-invalid");
 161                                                                 $("#email-taken").show();
 162                                                                 break;
 163                                                 }
 164
 165                                                 form.trigger("change");
 166                                         }
 167                                 );
 168                         }, 250);
 169                 });
 170
 171                 form.on("change", function() {
 172                         var disabled = false;
 173
 174                         $.each(valid, function(field, status) {
 175                                 if (!status) {
 176                                         disabled = true;
 177                                         return false;
 178                                 }
 179                         });
 180
 181                         submit.prop("disabled", disabled);
 182                 });
 183         </script>
 184 {% end block %}